richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

table: formatting table for flat

pull/13/head
Jack Lukic 11 years ago
parent
1038e59135
commit
808c21f132
3 changed files with 123 additions and 138 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 181
      docs/shape.html
  2. 6
      docs/stylesheets/example.css
  3. 74
      src/ui/flat/table.css

181
docs/shape.html
View File

@ -169,95 +169,102 @@
<li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. <code>$('.foo').shape('setting', 'moduleName', 'Godzilla');</code></li> <li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. <code>$('.foo').shape('setting', 'moduleName', 'Godzilla');</code></li>
</ol> </ol>
<p>Settings can also be read programmatically: <code>$('.foo').shape('setting', 'moduleName');</code> <p>Settings can also be read programmatically: <code>$('.foo').shape('setting', 'moduleName');</code>
<table class="ui large grid table">
<table class="ui grid settings table">
<thead> <thead>
<th>Setting Name</th>
<th>Default Value</th>
<th>Usage</th>
<th>Setting</th>
<th>Default</th>
<th>Description</th>
</thead> </thead>
<tr>
<td>moduleName</td>
<td>Shape</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>False</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>namespace</td>
<td>shape</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>beforeChange</td>
<td>None</td>
<td>Callback before side is changed. This context is the new side.</td>
</tr>
<tr>
<td>onChange</td>
<td>None</td>
<td>Callback after side is changed. This context is new side.</td>
</tr>
<tr>
<td>useCSS</td>
<td>True</td>
<td>Not currently supported. Will allow for use of javascript requestAnimationFrame transitions instead of css3 transitions.</td>
</tr>
<tr>
<td>duration</td>
<td>1000ms</td>
<td>Duration of animation (javascript only). To modify animation duration for css simply modify the css property transition-duration.</td>
</tr>
<tr>
<td>easing</td>
<td>easeInOutQuad</td>
<td>Easing equation for animation (javascript only). To modify the easing for css simply modify the css property transition-easing</td>
</tr>
<tr>
<td>errors</td>
<td>
<pre><code>
{
side : 'You tried to switch to a side that does not exist.',
method : 'The method you called is not defined'
}
</code></pre>
</td>
<td>Object containing localized error messages.</td>
</tr>
<tr>
<td>selector</td>
<td>
<pre><code>
{
shape : '.shape',
side : '.side'
}
</code></pre>
</td>
<td>Object containing selectors used by module.</td>
</tr>
<tr>
<td>className</td>
<td>
<pre><code>
{
css : 'css',
animating : 'animating',
hidden : 'hidden',
active : 'active'
}
</code></pre>
</td>
<td>Object containing class names used by module.</td>
</tr>
<tbody>
<tr>
<td>useCSS</td>
<td>True</td>
<td>Not currently supported. Will allow for use of javascript requestAnimationFrame transitions instead of css3 transitions.</td>
</tr>
<tr>
<td>duration</td>
<td>1000ms</td>
<td>Duration of animation (javascript only). To modify animation duration for css simply modify the css property transition-duration.</td>
</tr>
<tr>
<td>easing</td>
<td>easeInOutQuad</td>
<td>Easing equation for animation (javascript only). To modify the easing for css simply modify the css property transition-easing</td>
</tr>
<tr>
<td>selector</td>
<td>
<pre>{
shape : '.shape',
side : '.side'
}</pre>
</td>
<td>Object containing selectors used by module.</td>
</tr>
<tr>
<td>className</td>
<td>
<pre>{
css : 'css',
animating : 'animating',
hidden : 'hidden',
active : 'active'
}</pre>
</td>
<td>Object containing class names used by module.</td>
</tr>
<tr class="emphasis">
<td colspan="3">Callbacks</td>
</tr>
<tr>
<td>beforeChange</td>
<td>None</td>
<td>Callback before side is changed. This context is the new side.</td>
</tr>
<tr>
<td>onChange</td>
<td>None</td>
<td>Callback after side is changed. This context is new side.</td>
</tr>
<tr class="emphasis">
<td colspan="3">Standard</td>
</tr>
<tr>
<td>moduleName</td>
<td>Shape</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>False</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>False</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>namespace</td>
<td>shape</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>errors</td>
<td>
{
side : 'You tried to switch to a side that does not exist.',
method : 'The method you called is not defined'
}
</td>
<td>Object containing localized error messages.</td>
</tr>
</tbody>
</table> </table>
</div> </div>

6
docs/stylesheets/example.css
View File

@ -110,6 +110,12 @@ a:hover {
border: none; border: none;
padding: 0px; padding: 0px;
} }
#example table pre,
#example table code {
margin: 0px;
padding: 0px;
background-color: transparent;
}
#example p { #example p {
margin: 10px 0px; margin: 10px 0px;
} }

74
src/ui/flat/table.css
View File

@ -1,12 +1,7 @@
.ui.table { .ui.table {
width: 100%; width: 100%;
border: 1px solid #F0F0F0;
border: 1px solid rgba(0, 0, 0, 0.1);
border-collapse: collapse; border-collapse: collapse;
font-size: 12px;
color: #555555;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9);
color: #333333;
} }
/* Standard Table Icons */ /* Standard Table Icons */
@ -29,9 +24,6 @@
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.ui.table thead {
border-bottom: 1px solid #DADADA;
}
.ui.table thead tr { .ui.table thead tr {
/* /*
-webkit-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); -webkit-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53);
@ -48,28 +40,17 @@
.ui.table th, .ui.table th,
.ui.sortable.table th.disabled:hover { .ui.sortable.table th.disabled:hover {
cursor: auto; cursor: auto;
background-color: #FAFAFA;
background-color: rgba(0, 0, 0, 0.8);
text-align: left;
font-weight: bold; font-weight: bold;
color: #333333;
background: -webkit-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
background: -moz-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
background: -o-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
background: -ms-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
background: linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%);
}
/* Header & Footer Formatting */
.ui.table thead,
.ui.table tfoot {
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 13px;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
} }
/* Table Striping */ /* Table Striping */
.ui.table tbody tr:nth-child(2n) { .ui.table tbody tr:nth-child(2n) {
background-color: rgba(0, 0, 0, 0.02);
background-color: rgba(0, 0, 0, 0.04);
} }
@ -85,22 +66,13 @@
} }
.ui.grid.table th { .ui.grid.table th {
border: 1px solid #DADADA;
border: 1px solid rgba(0, 0, 0, 0.1);
border-bottom-color: #CCCCCC;
border-bottom-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
border: 1px solid rgba(0, 0, 0, 0.15);
} }
.ui.grid.table tbody td { .ui.grid.table tbody td {
border: 1px solid #E0E0E0;
border-color: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.15);
} }
/* Special Row Types */
/* Row with a button */
.ui.table tr.button td { .ui.table tr.button td {
padding: 0px; padding: 0px;
} }
@ -110,19 +82,15 @@
-moz-border-radius: 0px; -moz-border-radius: 0px;
border-radius: 0px; border-radius: 0px;
} }
.ui.table tfoot tr td,
/* Emphasize a row */
.ui.table tr.emphasis td, .ui.table tr.emphasis td,
.ui.table tr td.emphasis { .ui.table tr td.emphasis {
background-color: #F0F0F0;
border: 1px solid #DADADA;
border: 1px solid rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset;
background-color: rgba(40, 40, 40, 0.7);
text-align: left;
font-weight: bold; font-weight: bold;
color: #333333;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
} }
/* Sortable Table */ /* Sortable Table */
@ -195,16 +163,20 @@
} }
/*-------------- /*--------------
Resizes Resizes
---------------*/ ---------------*/
.ui.table {
font-size: 16px;
padding: 10px 12px;
}
/* Large */
.ui.large.table { .ui.large.table {
font-size: 13px;
font-size: 18px;
} }
.ui.large.table td, .ui.large.table td,
.ui.large.table th { .ui.large.table th {
padding: 10px 12px;
padding: 12px 15px;
} }
Write Preview
Loading…
Cancel
Save