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

ui: tweaks with tables and some other stuff

pull/13/head
Jack Lukic 12 years ago
parent
05e52caf16
commit
51553c8198
14 changed files with 230 additions and 886 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      docs/collections/table.html
  2. 384
      docs/download.html
  3. 26
      docs/modules/shape.html
  4. 3
      docs/stylesheets/semantic.css
  5. 1
      docs/ui/classic/elements/button.css
  6. 82
      docs/ui/flat/collections/table.css
  7. 2
      docs/ui/flat/elements/button.css
  8. 60
      node/src/documents/collections/table.html
  9. 384
      node/src/documents/download.html
  10. 26
      node/src/documents/modules/shape.html
  11. 3
      node/src/files/stylesheets/semantic.css
  12. 1
      node/src/files/ui/classic/elements/button.css
  13. 82
      node/src/files/ui/flat/collections/table.css
  14. 2
      node/src/files/ui/flat/elements/button.css

60
docs/collections/table.html
View File

@ -199,7 +199,7 @@
</tbody>
<tfoot>
<th colspan="3">
<div class="ui blue button">Add User</div>
<div class="ui blue button"><i class="icon plus-circle"></i> Add User</div>
</th>
</tfoot>
</table>
@ -220,22 +220,22 @@
<tbody>
<tr>
<td>No Name Specified</td>
<td>Approved</td>
<td>Unknown</td>
<td>None</td>
</tr>
<tr class="positive">
<td>Jimmy</td>
<td>Approved</td>
<td><i class="icon check"></i> Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td class="negative">Requires call</td>
<td>Unknown</td>
<td class="negative"><i class="icon close"></i> Requires call</td>
</tr>
<tr>
<td>Jill</td>
<td>Approved</td>
<td>Unknown</td>
<td>None</td>
</tr>
</tbody>
@ -260,13 +260,13 @@
</tr>
<tr class="error">
<td>Jimmy</td>
<td>Approved</td>
<td><i class="icon attention-circle"></i> Cannot pull data</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td class="error">Requires call</td>
<td class="error"><i class="icon attention-circle"></i> Classified</td>
</tr>
<tr>
<td>Jill</td>
@ -289,22 +289,22 @@
<tbody>
<tr>
<td>No Name Specified</td>
<td>Approved</td>
<td>Unknown</td>
<td>None</td>
</tr>
<tr class="warning">
<td>Jimmy</td>
<td>Approved</td>
<td><i class="icon info"></i> Requires Action</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td class="warning">Requires call</td>
<td>Unknown</td>
<td class="warning"><i class="icon info"></i> Hostile</td>
</tr>
<tr>
<td>Jill</td>
<td>Approved</td>
<td>Unknown</td>
<td>None</td>
</tr>
</tbody>
@ -328,7 +328,7 @@
</tr>
<tr class="active">
<td>John</td>
<td>Approved</td>
<td>Selected</td>
<td>None</td>
</tr>
<tr>
@ -343,6 +343,38 @@
</tr>
</tbody>
</table>
<div class="example">
<h4>Disabled</h4>
<p>A cell can be disabled:</p>
<table class="ui grid table">
<thead>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</thead>
<tbody>
<tr class="disabled">
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
<tr>
<td>John</td>
<td>Selected</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
<tr>
<td class="disabled">Jill</td>
<td>Approved</td>
<td>None</td>
</tr>
</tbody>
</table>
</div>

384
docs/download.html
View File

@ -153,7 +153,7 @@
<div class="segment">
<div class="container">
<h1>Download</h1>
<p>Create a download libary</p>
<p>Download semantic</p>
</div>
</div>
<div class="main container">
@ -167,388 +167,6 @@
</div>
<h2>Collection</h2>
<div class="example">
<h4>Form:</h4>
<p>A form is a collection of user input elements, and has no stylings of its own.</p>
<div class="ui info block">
<p>This example uses a ui segment to add the padding and background color. This is not required.</p>
</div>
<div class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<h2>Elements</h2>
<div class="example">
<h4>Field</h4>
<p>A field is a form element containing a label and an input</p>
<div class="ui form">
<div class="field">
<label>User Input</label>
<input type="text">
</div>
</div>
</div>
<div class="example">
<h4>Text Area</h4>
<p>A textarea uses the default form element</p>
<div class="ui form">
<div class="field">
<label>User Text</label>
<textarea></textarea>
</div>
</div>
</div>
<div class="example">
<h4>Checkbox</h4>
<p>Checkboxes are styled forms of standard form checkboxes.</p>
<div class="ui form">
<div class="field">
<label>Checkbox (Using attribute ID to trigger checked event)</label>
<div class="ui checkbox">
<input type="checkbox" id="uniqueid" />
<label for="uniqueid"></label>
</div>
</div>
<div class="field">
<label>Checkbox (<a href="#">Javascript</a>)</label>
<div class="ui checkbox">
<input type="checkbox"/>
<label></label>
</div>
</div>
</div>
</div>
<div class="example">
<h4>Text Block</h4>
<p>Text blocks have special meaning inside a form tag. All message blocks are hidden by default.</p>
<div class="ui form">
<div class="ui block">
<div class="header">We had some issues</div>
<ul class="list">
<li>Please enter your first name</li>
<li>Please enter your last name</li>
</ul>
</div>
</div>
</div>
<h2>States</h2>
<h3>Form</h3>
<div class="example">
<h4>Loading</h4>
<p>If a form is in loading state, it will automatically show a loading indicator:</p>
<div class="ui loading form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<div class="example">
<h4>Error</h4>
<p>If a form is in an error state, it will automatically show any error message blocks:</p>
<div class="ui error form segment">
<div class="ui error block">
<div class="header">Action Forbidden</div>
<p>You can only sign up for an account once with a given e-mail address.</p>
</div>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<div class="example">
<h4>Warning</h4>
<p>If a form is in warning state, it will automatically show any warning message block:</p>
<div class="ui warning form segment">
<div class="ui warning block">
<div class="header">Could you check something!</div>
<ul class="list">
<li>You forgot your <b>first name</b></li>
<li>And also your <b>last name</b></li>
</ul>
</div>
<div class="two error fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<h3>Form Fields</h3>
<div class="example">
<h4>Error</h4>
<p>Individual fields may contain an error state</p>
<div class="ui error form segment">
<div class="two fields">
<div class="field error">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
<div class="example">
<h4>Disabled</h4>
<p>Individual fields may be disabled or read only</p>
<div class="ui error form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="Read Only" readonly="readonly" type="text">
</div>
<div class="disabled field">
<label>Last Name</label>
<input placeholder="Disabled" disabled="disabled" type="text">
</div>
</div>
</div>
</div>
<h2>Variations</h2>
<h3>Forms</h3>
<div class="example">
<h4>Fluid</h4>
<p>A form can take the width of its container</p>
<div class="ui fluid form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<div class="example">
<h4>Size</h4>
<p>A form can also be small or large</p>
<div class="ui small form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="ui blue small submit button">Submit</div>
</div>
<br><br>
<div class="ui large form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<div class="example">
<h4>Inverted</h4>
<p>A form on a dark background may have to invert its color scheme</p>
<div style="background-color: #333333; padding: 15px;">
<div class="ui inverted form">
<div class="ui info block">
<div class="header">We had some issues</div>
<ul class="list">
<li>Please enter your first name</li>
<li>Please enter your last name</li>
</ul>
</div>
<div class="two fields">
<div class="error field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
</div>
<h3>Fields</h3>
<div class="example">
<h4>Inline</h4>
<p>A field can have its label next to instead of above it.</p>
<div class="ui form">
<div class="ui inline fields">
<div class="field">
<label>Last name</label>
<input type="text" placeholder="Full Name">
</div>
</div>
</div>
</div>
<div class="example">
<h4>Date</h4>
<p>A field can let users know they are for dates</p>
<div class="ui form">
<div class="date field">
<label>Birthday</label>
<input type="text" placeholder="Full Name">
</div>
</div>
</div>
<h2>Groups</h2>
<div class="example">
<h4>Field Groups</h4>
<p>Fields can exist side by side to show relation</p>
<div class="ui form">
<div class="ui three fields">
<div class="field">
<label>First name</label>
<input type="text" placeholder="First Name">
</div>
<div class="field">
<label>Middle name</label>
<input type="text" placeholder="Middle Name">
</div>
<div class="field">
<label>Last name</label>
<input type="text" placeholder="Last Name">
</div>
</div>
</div>
</div>
</div>
</body>

26
docs/modules/shape.html
View File

@ -231,12 +231,10 @@
<h3>Reading Settings</h3>
<p>Settings can also be read programmatically: <div class="code">$('.foo').shape('setting', 'moduleName');</div>
<h3>Defaults</h3>
<table class="ui grid settings table">
<thead>
<th>Setting</th>
<th>Default</th>
<th>Description</th>
</thead>
<table class="ui settings table">
<thead>
<th colspan="3">Shape Settings</th>
</thead>
<tbody>
<tr>
<td>useCSS</td>
@ -275,9 +273,11 @@
</td>
<td>Object containing class names used by module.</td>
</tr>
<tr class="emphasis">
<td colspan="3">Callbacks</td>
</tr>
</table>
<table class="ui settings table">
<thead>
<th colspan="3">Callbacks</th>
</thead>
<tr>
<td>beforeChange</td>
<td>None</td>
@ -288,9 +288,11 @@
<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>
</table>
<table class="ui settings table">
<thead>
<th colspan="3">UI Module Settings</th>
</thead>
<tr>
<td>moduleName</td>
<td>Shape</td>

3
docs/stylesheets/semantic.css
View File

@ -293,6 +293,9 @@ a:hover {
margin-left: -630px;
}
#example .settings.table {
margin-bottom: 20px;
}
#example .settings.table td:first-child {
font-weight: bold;
}

1
docs/ui/classic/elements/button.css
View File

@ -32,6 +32,7 @@
font-size: 13px;
line-height: 1;
font-weight: bold;
font-style: normal;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);

82
docs/ui/flat/collections/table.css
View File

@ -31,26 +31,26 @@
.ui.table td {
border-collapse: collapse;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
-ms-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
.ui.table thead {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
background-color: rgba(50, 50, 50, 0.1);
}
.ui.table th {
cursor: auto;
text-align: left;
font-weight: bold;
color: rgba(0, 0, 0, 0.95);
color: rgba(80, 80, 80, 0.85);
padding: 0.5em 0.7em;
vertical-align: middle;
}
@ -78,9 +78,11 @@
}
/* Icons */
.ui.table i.icon {
vertical-align: middle;
margin: 0px;
.ui.table > .icon {
vertical-align: baseline;
}
.ui.table > .icon:only-child {
margin: 0em;
}
@ -121,8 +123,11 @@
.ui.table tr.positive td,
.ui.table td.positive {
background-color: #EEFFE9;
background-color: #F2F8F0 !important;
color: #119000;
-moz-box-shadow: 0px 0px 1px 0px #3FF63B inset;
-webkit-box-shadow: 0px 0px 1px 0px #3FF63B inset;
box-shadow: 0px 0px 1px 0px #3FF63B inset;
/* border-color: #2FCB05 !important; */
}
.ui.grid.table tr.positive:hover td,
@ -130,7 +135,7 @@
.ui.table tr.positive:hover td,
.ui.table td:hover.positive,
.ui.table th:hover.positive {
background-color: #DEF5D7 !important;
background-color: #ECF5E9 !important;
color: #119000;
}
@ -140,17 +145,16 @@
.ui.table tr.negative td,
.ui.table td.negative {
background-color: #F8EBEB;
color: #AD0000;
/* border-color: #B06C6C !important; */
background-color: #F9F4F4;
color: #CD2929;
}
.ui.grid.table tr.negative:hover td,
.ui.grid.table tr:hover td.negative,
.ui.table tr.negative:hover td,
.ui.table td:hover.negative,
.ui.table th:hover.negative {
background-color: #F1DFDF !important;
color: #AD0000;
background-color: #F2E8E8 !important;
color: #CD2929;
}
/*--------------
@ -160,17 +164,19 @@
.ui.table tr.error td,
.ui.table td.error,
.ui.table th.error {
background-color: #F8EBEB;
color: #AD0000;
/* border-color: #B06C6C !important; */
background-color: #F9F4F4 !important;
color: #CD2929;
-moz-box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
-webkit-box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
}
.ui.grid.table tr.error:hover td,
.ui.grid.table tr:hover td.error,
.ui.table tr.error:hover td,
.ui.table td:hover.error,
.ui.table th:hover.error {
background-color: #F1DFDF !important;
color: #AD0000;
background-color: #F2E8E8 !important;
color: #CD2929;
}
/*--------------
@ -180,16 +186,19 @@
.ui.table tr.warning td,
.ui.table td.warning,
.ui.table th.warning {
background-color: #F6F3D5;
background-color: #FBF6E9;
/* border-color: #CBB105 !important; */
color: #7D6C00;
-moz-box-shadow: 0px 0px 1px 0px #FFE569 inset;
-webkit-box-shadow: 0px 0px 1px 0px #FFE569 inset;
box-shadow: 0px 0px 1px 0px #FFE569 inset;
}
.ui.grid.table tr.warning:hover td,
.ui.grid.table tr:hover td.warning,
.ui.table tr.warning:hover td,
.ui.table td:hover.warning,
.ui.table th:hover.warning {
background-color: #F3EFC8 !important;
background-color: #F3EDDC !important;
color: #7D6C00;
}
@ -200,12 +209,23 @@
.ui.table tr.active td,
.ui.table tr td.active {
background-color: #E8E8E8 !important;
font-weight: bold;
color: #555555;
background-color: #F0F0F0 !important;
color: rgba(50, 50, 50, 0.9);
/* border-color: rgba(0, 0, 0, 0.15) !important; */
}
/*--------------
Disabled
---------------*/
.ui.table tr.disabled td,
.ui.table tr td.disabled,
.ui.table tr.disabled:hover td,
.ui.table tr:hover td.disabled {
background-color: #FAFAFA !important;
color: rgba(150, 150, 150, 0.5);
}
/*******************************
Variations
*******************************/
@ -226,12 +246,6 @@
}
.ui.grid.table tbody td {
border: 1px solid #E0E0E0;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-o-transition: color 0.5s ease-out;
-ms-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
/* Sortable Table */

2
docs/ui/flat/elements/button.css
View File

@ -31,6 +31,8 @@
text-transform: uppercase;
line-height: 1;
font-weight: bold;
font-style: normal;
color: #7A7A7A;
text-align: center;

60
node/src/documents/collections/table.html
View File

@ -55,7 +55,7 @@ type : 'UI Collection'
</tbody>
<tfoot>
<th colspan="3">
<div class="ui blue button">Add User</div>
<div class="ui blue button"><i class="icon plus-circle"></i> Add User</div>
</th>
</tfoot>
</table>
@ -76,22 +76,22 @@ type : 'UI Collection'
<tbody>
<tr>
<td>No Name Specified</td>
<td>Approved</td>
<td>Unknown</td>
<td>None</td>
</tr>
<tr class="positive">
<td>Jimmy</td>
<td>Approved</td>
<td><i class="icon check"></i> Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td class="negative">Requires call</td>
<td>Unknown</td>
<td class="negative"><i class="icon close"></i> Requires call</td>
</tr>
<tr>
<td>Jill</td>
<td>Approved</td>
<td>Unknown</td>
<td>None</td>
</tr>
</tbody>
@ -116,13 +116,13 @@ type : 'UI Collection'
</tr>
<tr class="error">
<td>Jimmy</td>
<td>Approved</td>
<td><i class="icon attention-circle"></i> Cannot pull data</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td class="error">Requires call</td>
<td class="error"><i class="icon attention-circle"></i> Classified</td>
</tr>
<tr>
<td>Jill</td>
@ -145,22 +145,22 @@ type : 'UI Collection'
<tbody>
<tr>
<td>No Name Specified</td>
<td>Approved</td>
<td>Unknown</td>
<td>None</td>
</tr>
<tr class="warning">
<td>Jimmy</td>
<td>Approved</td>
<td><i class="icon info"></i> Requires Action</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td class="warning">Requires call</td>
<td>Unknown</td>
<td class="warning"><i class="icon info"></i> Hostile</td>
</tr>
<tr>
<td>Jill</td>
<td>Approved</td>
<td>Unknown</td>
<td>None</td>
</tr>
</tbody>
@ -184,7 +184,7 @@ type : 'UI Collection'
</tr>
<tr class="active">
<td>John</td>
<td>Approved</td>
<td>Selected</td>
<td>None</td>
</tr>
<tr>
@ -199,6 +199,38 @@ type : 'UI Collection'
</tr>
</tbody>
</table>
<div class="example">
<h4>Disabled</h4>
<p>A cell can be disabled:</p>
<table class="ui grid table">
<thead>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</thead>
<tbody>
<tr class="disabled">
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
<tr>
<td>John</td>
<td>Selected</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
<tr>
<td class="disabled">Jill</td>
<td>Approved</td>
<td>None</td>
</tr>
</tbody>
</table>
</div>

384
node/src/documents/download.html
View File

@ -8,7 +8,7 @@ type : 'Library'
<div class="segment">
<div class="container">
<h1>Download</h1>
<p>Create a download libary</p>
<p>Download semantic</p>
</div>
</div>
<div class="main container">
@ -22,388 +22,6 @@ type : 'Library'
</div>
<h2>Collection</h2>
<div class="example">
<h4>Form:</h4>
<p>A form is a collection of user input elements, and has no stylings of its own.</p>
<div class="ui info block">
<p>This example uses a ui segment to add the padding and background color. This is not required.</p>
</div>
<div class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<h2>Elements</h2>
<div class="example">
<h4>Field</h4>
<p>A field is a form element containing a label and an input</p>
<div class="ui form">
<div class="field">
<label>User Input</label>
<input type="text">
</div>
</div>
</div>
<div class="example">
<h4>Text Area</h4>
<p>A textarea uses the default form element</p>
<div class="ui form">
<div class="field">
<label>User Text</label>
<textarea></textarea>
</div>
</div>
</div>
<div class="example">
<h4>Checkbox</h4>
<p>Checkboxes are styled forms of standard form checkboxes.</p>
<div class="ui form">
<div class="field">
<label>Checkbox (Using attribute ID to trigger checked event)</label>
<div class="ui checkbox">
<input type="checkbox" id="uniqueid" />
<label for="uniqueid"></label>
</div>
</div>
<div class="field">
<label>Checkbox (<a href="#">Javascript</a>)</label>
<div class="ui checkbox">
<input type="checkbox"/>
<label></label>
</div>
</div>
</div>
</div>
<div class="example">
<h4>Text Block</h4>
<p>Text blocks have special meaning inside a form tag. All message blocks are hidden by default.</p>
<div class="ui form">
<div class="ui block">
<div class="header">We had some issues</div>
<ul class="list">
<li>Please enter your first name</li>
<li>Please enter your last name</li>
</ul>
</div>
</div>
</div>
<h2>States</h2>
<h3>Form</h3>
<div class="example">
<h4>Loading</h4>
<p>If a form is in loading state, it will automatically show a loading indicator:</p>
<div class="ui loading form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<div class="example">
<h4>Error</h4>
<p>If a form is in an error state, it will automatically show any error message blocks:</p>
<div class="ui error form segment">
<div class="ui error block">
<div class="header">Action Forbidden</div>
<p>You can only sign up for an account once with a given e-mail address.</p>
</div>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<div class="example">
<h4>Warning</h4>
<p>If a form is in warning state, it will automatically show any warning message block:</p>
<div class="ui warning form segment">
<div class="ui warning block">
<div class="header">Could you check something!</div>
<ul class="list">
<li>You forgot your <b>first name</b></li>
<li>And also your <b>last name</b></li>
</ul>
</div>
<div class="two error fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<h3>Form Fields</h3>
<div class="example">
<h4>Error</h4>
<p>Individual fields may contain an error state</p>
<div class="ui error form segment">
<div class="two fields">
<div class="field error">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
<div class="example">
<h4>Disabled</h4>
<p>Individual fields may be disabled or read only</p>
<div class="ui error form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="Read Only" readonly="readonly" type="text">
</div>
<div class="disabled field">
<label>Last Name</label>
<input placeholder="Disabled" disabled="disabled" type="text">
</div>
</div>
</div>
</div>
<h2>Variations</h2>
<h3>Forms</h3>
<div class="example">
<h4>Fluid</h4>
<p>A form can take the width of its container</p>
<div class="ui fluid form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<div class="example">
<h4>Size</h4>
<p>A form can also be small or large</p>
<div class="ui small form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="ui blue small submit button">Submit</div>
</div>
<br><br>
<div class="ui large form segment">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
<div class="example">
<h4>Inverted</h4>
<p>A form on a dark background may have to invert its color scheme</p>
<div style="background-color: #333333; padding: 15px;">
<div class="ui inverted form">
<div class="ui info block">
<div class="header">We had some issues</div>
<ul class="list">
<li>Please enter your first name</li>
<li>Please enter your last name</li>
</ul>
</div>
<div class="two fields">
<div class="error field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="ui blue submit button">Submit</div>
</div>
</div>
</div>
<h3>Fields</h3>
<div class="example">
<h4>Inline</h4>
<p>A field can have its label next to instead of above it.</p>
<div class="ui form">
<div class="ui inline fields">
<div class="field">
<label>Last name</label>
<input type="text" placeholder="Full Name">
</div>
</div>
</div>
</div>
<div class="example">
<h4>Date</h4>
<p>A field can let users know they are for dates</p>
<div class="ui form">
<div class="date field">
<label>Birthday</label>
<input type="text" placeholder="Full Name">
</div>
</div>
</div>
<h2>Groups</h2>
<div class="example">
<h4>Field Groups</h4>
<p>Fields can exist side by side to show relation</p>
<div class="ui form">
<div class="ui three fields">
<div class="field">
<label>First name</label>
<input type="text" placeholder="First Name">
</div>
<div class="field">
<label>Middle name</label>
<input type="text" placeholder="Middle Name">
</div>
<div class="field">
<label>Last name</label>
<input type="text" placeholder="Last Name">
</div>
</div>
</div>
</div>
</div>
</body>

26
node/src/documents/modules/shape.html
View File

@ -103,12 +103,10 @@ type : 'UI Module'
<h3>Reading Settings</h3>
<p>Settings can also be read programmatically: <div class="code">$('.foo').shape('setting', 'moduleName');</div>
<h3>Defaults</h3>
<table class="ui grid settings table">
<thead>
<th>Setting</th>
<th>Default</th>
<th>Description</th>
</thead>
<table class="ui settings table">
<thead>
<th colspan="3">Shape Settings</th>
</thead>
<tbody>
<tr>
<td>useCSS</td>
@ -147,9 +145,11 @@ type : 'UI Module'
</td>
<td>Object containing class names used by module.</td>
</tr>
<tr class="emphasis">
<td colspan="3">Callbacks</td>
</tr>
</table>
<table class="ui settings table">
<thead>
<th colspan="3">Callbacks</th>
</thead>
<tr>
<td>beforeChange</td>
<td>None</td>
@ -160,9 +160,11 @@ type : 'UI Module'
<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>
</table>
<table class="ui settings table">
<thead>
<th colspan="3">UI Module Settings</th>
</thead>
<tr>
<td>moduleName</td>
<td>Shape</td>

3
node/src/files/stylesheets/semantic.css
View File

@ -293,6 +293,9 @@ a:hover {
margin-left: -630px;
}
#example .settings.table {
margin-bottom: 20px;
}
#example .settings.table td:first-child {
font-weight: bold;
}

1
node/src/files/ui/classic/elements/button.css
View File

@ -32,6 +32,7 @@
font-size: 13px;
line-height: 1;
font-weight: bold;
font-style: normal;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);

82
node/src/files/ui/flat/collections/table.css
View File

@ -31,26 +31,26 @@
.ui.table td {
border-collapse: collapse;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
-ms-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
.ui.table thead {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
background-color: rgba(50, 50, 50, 0.1);
}
.ui.table th {
cursor: auto;
text-align: left;
font-weight: bold;
color: rgba(0, 0, 0, 0.95);
color: rgba(80, 80, 80, 0.85);
padding: 0.5em 0.7em;
vertical-align: middle;
}
@ -78,9 +78,11 @@
}
/* Icons */
.ui.table i.icon {
vertical-align: middle;
margin: 0px;
.ui.table > .icon {
vertical-align: baseline;
}
.ui.table > .icon:only-child {
margin: 0em;
}
@ -121,8 +123,11 @@
.ui.table tr.positive td,
.ui.table td.positive {
background-color: #EEFFE9;
background-color: #F2F8F0 !important;
color: #119000;
-moz-box-shadow: 0px 0px 1px 0px #3FF63B inset;
-webkit-box-shadow: 0px 0px 1px 0px #3FF63B inset;
box-shadow: 0px 0px 1px 0px #3FF63B inset;
/* border-color: #2FCB05 !important; */
}
.ui.grid.table tr.positive:hover td,
@ -130,7 +135,7 @@
.ui.table tr.positive:hover td,
.ui.table td:hover.positive,
.ui.table th:hover.positive {
background-color: #DEF5D7 !important;
background-color: #ECF5E9 !important;
color: #119000;
}
@ -140,17 +145,16 @@
.ui.table tr.negative td,
.ui.table td.negative {
background-color: #F8EBEB;
color: #AD0000;
/* border-color: #B06C6C !important; */
background-color: #F9F4F4;
color: #CD2929;
}
.ui.grid.table tr.negative:hover td,
.ui.grid.table tr:hover td.negative,
.ui.table tr.negative:hover td,
.ui.table td:hover.negative,
.ui.table th:hover.negative {
background-color: #F1DFDF !important;
color: #AD0000;
background-color: #F2E8E8 !important;
color: #CD2929;
}
/*--------------
@ -160,17 +164,19 @@
.ui.table tr.error td,
.ui.table td.error,
.ui.table th.error {
background-color: #F8EBEB;
color: #AD0000;
/* border-color: #B06C6C !important; */
background-color: #F9F4F4 !important;
color: #CD2929;
-moz-box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
-webkit-box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
box-shadow: 0px 0px 1px 0px #F3A2A2 inset;
}
.ui.grid.table tr.error:hover td,
.ui.grid.table tr:hover td.error,
.ui.table tr.error:hover td,
.ui.table td:hover.error,
.ui.table th:hover.error {
background-color: #F1DFDF !important;
color: #AD0000;
background-color: #F2E8E8 !important;
color: #CD2929;
}
/*--------------
@ -180,16 +186,19 @@
.ui.table tr.warning td,
.ui.table td.warning,
.ui.table th.warning {
background-color: #F6F3D5;
background-color: #FBF6E9;
/* border-color: #CBB105 !important; */
color: #7D6C00;
-moz-box-shadow: 0px 0px 1px 0px #FFE569 inset;
-webkit-box-shadow: 0px 0px 1px 0px #FFE569 inset;
box-shadow: 0px 0px 1px 0px #FFE569 inset;
}
.ui.grid.table tr.warning:hover td,
.ui.grid.table tr:hover td.warning,
.ui.table tr.warning:hover td,
.ui.table td:hover.warning,
.ui.table th:hover.warning {
background-color: #F3EFC8 !important;
background-color: #F3EDDC !important;
color: #7D6C00;
}
@ -200,12 +209,23 @@
.ui.table tr.active td,
.ui.table tr td.active {
background-color: #E8E8E8 !important;
font-weight: bold;
color: #555555;
background-color: #F0F0F0 !important;
color: rgba(50, 50, 50, 0.9);
/* border-color: rgba(0, 0, 0, 0.15) !important; */
}
/*--------------
Disabled
---------------*/
.ui.table tr.disabled td,
.ui.table tr td.disabled,
.ui.table tr.disabled:hover td,
.ui.table tr:hover td.disabled {
background-color: #FAFAFA !important;
color: rgba(150, 150, 150, 0.5);
}
/*******************************
Variations
*******************************/
@ -226,12 +246,6 @@
}
.ui.grid.table tbody td {
border: 1px solid #E0E0E0;
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s ease-out;
-o-transition: color 0.5s ease-out;
-ms-transition: color 0.5s ease-out;
transition: color 0.5s ease-out;
}
/* Sortable Table */

2
node/src/files/ui/flat/elements/button.css
View File

@ -31,6 +31,8 @@
text-transform: uppercase;
line-height: 1;
font-weight: bold;
font-style: normal;
color: #7A7A7A;
text-align: center;

Write Preview
Loading…
Cancel
Save