lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

table: formatting table for flat 

Former-commit-id: 808c21f132235c83c6f3819d7a3b65291860fbf7
Former-commit-id: 9e91d7c5b2ca91f1e27ce18d6f1eb65f34e28de4
beta
Jack Lukic 12 years ago
parent
e6fef935e0
commit
f93cf131f0
3 changed files with 123 additions and 138 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 111
      docs/shape.html
  2. 6
      docs/stylesheets/example.css
  3. 74
      src/ui/flat/table.css

111
docs/shape.html
View File

@ -169,31 +169,52 @@
<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>
<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>
<th>Setting Name</th>
<th>Default Value</th>
<th>Usage</th>
<th>Setting</th>
<th>Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>moduleName</td>
<td>Shape</td>
<td>Name used in debug logs</td>
<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>debug</td>
<td>True</td>
<td>Provides standard debug output to console</td>
<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>verbose</td>
<td>False</td>
<td>Provides ancillary debug output to console</td>
<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>namespace</td>
<td>shape</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
<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>
@ -205,59 +226,45 @@
<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>useCSS</td>
<td>moduleName</td>
<td>Shape</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>True</td>
<td>Not currently supported. Will allow for use of javascript requestAnimationFrame transitions instead of css3 transitions.</td>
<td>Provides standard debug output to console</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>
<td>performance</td>
<td>False</td>
<td>Provides standard debug output to console</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>
<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>
<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>
</table>
</div>

6
docs/stylesheets/example.css
View File

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

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

@ -1,12 +1,7 @@
.ui.table {
width: 100%;
border: 1px solid #F0F0F0;
border: 1px solid rgba(0, 0, 0, 0.1);
border-collapse: collapse;
font-size: 12px;
color: #555555;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9);
color: #333333;
}
/* Standard Table Icons */
@ -29,9 +24,6 @@
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.ui.table thead {
border-bottom: 1px solid #DADADA;
}
.ui.table thead tr {
/*
-webkit-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53);
@ -48,28 +40,17 @@
.ui.table th,
.ui.sortable.table th.disabled:hover {
cursor: auto;
background-color: #FAFAFA;
background-color: rgba(0, 0, 0, 0.8);
text-align: left;
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 */
.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 {
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 {
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 {
padding: 0px;
}
@ -110,19 +82,15 @@
-moz-border-radius: 0px;
border-radius: 0px;
}
.ui.table tfoot tr td,
/* Emphasize a row */
.ui.table tr.emphasis td,
.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;
color: #333333;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}
/* Sortable Table */
@ -195,16 +163,20 @@
}
/*--------------
Resizes
---------------*/
.ui.table {
font-size: 16px;
padding: 10px 12px;
}
/* Large */
.ui.large.table {
font-size: 13px;
font-size: 18px;
}
.ui.large.table td,
.ui.large.table th {
padding: 10px 12px;
padding: 12px 15px;
}
Write Preview
Loading…
Cancel
Save