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

form: working on form restyling. 

Former-commit-id: 953e4848e99afc80c418806954f1b6eef6f40fbd
Former-commit-id: b49982784a67abc0849d6405ccb66d5b428c4e7f
beta
Jack Lukic 12 years ago
parent
79cdbd4f65
commit
ed52b42cc8
11 changed files with 540 additions and 250 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. 120
      docs/button.html
  2. 268
      docs/form.html
  3. 5
      docs/module.html
  4. 101
      docs/stylesheets/example.css
  5. 2
      src/ui/flat/block.css
  6. 5
      src/ui/flat/button.css
  7. 26
      src/ui/flat/divider.css
  8. 236
      src/ui/flat/form.css
  9. 23
      src/ui/flat/menu.css
  10. 2
      src/ui/flat/segment.css
  11. 2
      src/ui/shaded/text.css

120
docs/button.html
View File

@ -80,24 +80,24 @@
<div class="title item">
Semantic UI: Button
</div>
<div class="icon previous link item">
<i class="icon left-dir"></i>
<div class="icon previous disabled item">
<i class="icon left-open"></i>
</div>
<div class="section dropdown item">
1 of 14
<div class="menu">
<div class="active item">1. Button</div>
<div class="item">2. Text</div>
<div class="item">3. Headers</div>
<div class="item">4. Columns</div>
<div class="item">5. Elements</div>
<div class="item">6. Tags</div>
<div class="item">7. Items</div>
<div class="item">8. Panels</div>
<a class="active item">1. Button</a>
<a href="form.html" class="item">2. Form</a>
<a class="item">3. Headers</a>
<a class="item">4. Columns</a>
<a class="item">5. Elements</a>
<a class="item">6. Tags</a>
<a class="item">7. Items</a>
<a class="item">8. Panels</a>
</div>
</div>
<div class="icon next link item">
<i class="icon right-dir"></i>
<a href="form.html"><i class="icon right-open"></i></a>
</div>
<div class="right menu">
<a class="item" href="http://github.com/quirky/quirkyinc/semantic">
@ -124,7 +124,7 @@
<div class="container">
<h1>Button</h1>
<p>Buttons indicate a possible action a user may take.</p>
<p>Variations can explain relationships between actions and other elements, or to show emphasis.</p>
<p>Button variations are used to explain relationships between user actions and other elements, or to show emphasis.</p>
</div>
</div>
<div class="main container">
@ -144,27 +144,35 @@
<h2>States</h2>
<h4>Can be hovered:</h4>
<h4>Hover</h4>
<p>Changes when a user moves their cursor over it</p>
<div class="ui hover button">Hovered Button</div>
<h4>Can be pressed in:</h4>
<h4>Down</h4>
<p>Changes when pressed using touch or mouse events</p>
<div class="ui down button">Pressed Button</div>
<h4>Can be active:</p>
<h4>Active</h4>
<p>Changes to show it is currently the selected user action</p>
<div class="ui active button">Active Button</div>
<h4>Can be disabled:</h4>
<h4>Disabled</h4>
<p>Changes to show it is currently unable to be interacted with</p>
<div class="ui disabled button">Disabled Button</div>
<h4>Can show a loading indicator:</h4>
<h4>Loading</h4>
<p>Can show a loading indicator:</p>
<div class="ui loading button">Loading Button</div>
<h4>Can alert to a succesful action:</h4>
<h4>Success</h4>
<p>Can alert to a succesful action:</p>
<div class="ui success button">Successful Button</div>
<h4>Can alert user of an error:</h4>
<h4>Error</h4>
<p>Can alert user of an error:</p>
<div class="ui error button">Error</div>
<h4>All together:</h4>
<div class="ui button">Normal</div>
<div class="ui button hover">Hover</div>
<div class="ui button down">Down</div>
@ -178,7 +186,8 @@
<h2>Variations</h2>
<h4>Can have different sizes:</h4>
<h4>Sizes</h4>
<p>Can have different sizes:</p>
<div class="mini ui button">
Mini
</div>
@ -205,74 +214,89 @@
</div>
<h4>Can have different colors:</h4>
<h4>Colors</h4>
<p>Can have different colors:</p>
<div class="blue ui button">Blue Button</div>
<div class="purple ui button">Purple Button</div>
<h4>Can be positive or negative:</h4>
<p>Can be positive or negative:</p>
<div class="positive ui button">Positive Button</div>
<div class="negative ui button">Nevative Button</div>
<div class="negative ui button">Negative Button</div>
<h4>Can fit parent container:</h4>
<h4>Fluid</h4>
<p>Can fit parent container:</p>
<div class="fluid ui button">Fits container</div>
<h4>Can be bubbly:</h4>
<h4>Bubbly</h4>
<p>Can be bubbly:</p>
<div class="bubbly ui button">More bubbly</div>
<h4>Can be formatted as an icon toolbar:</h4>
<h4>Icon</h4>
<p>Can be formatted as an icon toolbar:</p>
<div class="massive icon ui button">
<i class="icon cloud"></i>
</div>
<h4>Can be attached to the top or bottom of other content</h4>
<h4>Attached</h4>
<p>Can be attached to the top or bottom of other content</p>
<div class="ui top attached button">Top</div>
<div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;height:200px;"></div>
<div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;background-color:#FFFFFF;height:200px;"></div>
<div class="ui bottom attached button">Bottom</div>
<h4>Can be attached to the left or right of other content</h4>
<br><br>
<p>Can be attached to the left or right of other content</p>
<div class="ui left attached button">Left</div>
<div style="width: 200px; display: inline-block; background-color: rgb(255, 255, 255); vertical-align: middle; height: 34px; margin: 0px -4px; border-bottom: 2px solid rgb(221, 221, 221); border-top: 2px solid rgb(221, 221, 221);"></div>
<div class="ui right attached button">Right</div>
<h4>Can be attached to an input field</h4>
<br><br>
<p>Can be attached to an input field</p>
<div class="ui form">
<input type="text" class="attached">
<div class="ui attached button">Search</div>
</div>
<h2>Buttons (Group)</h2>
<h2>Group</h2>
<h4>Can exist together as groups</h4>
<h4>Buttons</h4>
<p>Can exist together as groups</p>
<div class="ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<h4>Can be formatted as icon toolbars</h4>
<div class="ui icon buttons">
<div class="ui button"><i class="icon pause"></i></div>
<div class="ui button"><i class="icon play"></i></div>
<div class="ui button"><i class="icon fast-fw"></i></div>
</div>
<h4>Groups can be separated by conditionals</h4>
<h4>Conditionals</h4>
<p>Groups can be separated by conditionals</p>
<div class="ui buttons">
<div class="ui button">Cancel</div>
<div class="or"></div>
<div class="ui positive button">Save</div>
</div>
<h4>Groups can be divided evenly to fit parent</h4>
<div class="ui three fluid buttons">
<h3>Plural Variations</h3>
<p>Singular variations can be applied to groups to infer all elements share the same quality</p>
<h4>Icon</h4>
<p>Groups can be formatted as icon toolbars</p>
<div class="ui icon buttons">
<div class="ui button"><i class="icon pause"></i></div>
<div class="ui button"><i class="icon play"></i></div>
<div class="ui button"><i class="icon fast-fw"></i></div>
</div>
<h4>Fluid</h4>
<p>Groups can be divided evenly to fit parent</p>
<div class="ui five fluid buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
<div class="ui button">Four</div>
<div class="ui button">Five</div>
</div>
<h4>Singular variations can be applied to groups to infer all elements share the same quality</h4>
<p><b>Blue</b></p>
<h4>Colors</h4>
<p>Groups can have a shared color</p>
<div class="blue ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
@ -281,8 +305,8 @@
<div class="blue large icon ui buttons">
</div>
<br><br>
<p><b>Large</b></p>
<h4>Sizes</h4>
<p>Groups can have a shared size</p>
<div class="huge ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>

268
docs/form.html
View File

@ -8,6 +8,7 @@
<link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/divider.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" />
@ -80,32 +81,32 @@
<div class="ui large fixed transparent black menu">
<div class="container">
<div class="title item">
Semantic UI: Button
Semantic UI: Form
</div>
<div class="icon previous link item">
<i class="icon left-dir"></i>
<a href="button.html"><i class="icon left-open"></i></a>
</div>
<div class="section dropdown item">
1 of 14
2 of 14
<div class="menu">
<div class="active item">1. Button</div>
<div class="item">2. Text</div>
<div class="item">3. Headers</div>
<div class="item">4. Columns</div>
<div class="item">5. Elements</div>
<div class="item">6. Tags</div>
<div class="item">7. Items</div>
<div class="item">8. Panels</div>
<a href="button.html" class="item">1. Button</a>
<a class="active item">2. Form</a>
<a class="item">3. Headers</a>
<a class="item">4. Columns</a>
<a class="item">5. Elements</a>
<a class="item">6. Tags</a>
<a class="item">7. Items</a>
<a class="item">8. Panels</a>
</div>
</div>
<div class="icon next link item">
<i class="icon right-dir"></i>
<i class="icon right-open"></i>
</div>
<div class="right menu">
<a class="item" href="http://github.com/quirky/quirkyinc/semantic">
<a class="item" href="https://github.com/quirkyinc/semantic">
<i class="icon cloud"></i>
</a>
<a class="item" href="http://github.com/quirky/quirkyinc/semantic">
<a class="item" href="https://github.com/quirkyinc/semantic">
<i class="icon github"></i>
</a>
<div class="dropdown item">
@ -125,7 +126,7 @@
<div class="segment">
<div class="container">
<h1>Form</h1>
<p>Forms are a useful grouping of related elements requiring user input.</p>
<p>Forms are a grouping of elements requiring user input.</p>
<p>
Forms always include fields, and fields always contain form elements. Fields themselves may also include:
<a href="#">standard form fields</a>, like labels, inputs and textareas, as well as:
@ -133,11 +134,10 @@
<a href="#">sliders</a>, and
<a href="#">message blocks</a>.
</p>
<p>Message blocks are <a href="#">ui text blocks</a> which are formatted for use inside forms.</p>
<p>Validation messages are <a href="#">text blocks</a> which are formatted for use inside forms.</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui large vertical pointing bottom attached panel">
<li class="active">Standard</li>
@ -147,16 +147,11 @@
</div>
</div>
<h2>Standard</h2>
<h4>All Together (Form):</h4>
<h4>Form:</h4>
<p>A form is a collection of user input elements, and has no stylings of its own.</p>
<div class="ui form segment">
<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>
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">
<div class="field">
<label>First Name</label>
@ -167,6 +162,14 @@
<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" />
@ -177,9 +180,10 @@
<div class="ui blue submit button">Submit</div>
</div>
<h2>Types of Content</h2>
<h3>Types of Content</h3>
<h4>Field:</h4>
<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>
@ -187,7 +191,8 @@
</div>
</div>
<h4>Text Area:</h4>
<h4>Text Area</h4>
<p>A textarea uses the default form element</p>
<div class="ui form">
<div class="field">
<label>User Text</label>
@ -195,7 +200,8 @@
</div>
</div>
<h4>Checkbox:</h4>
<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>
@ -213,7 +219,8 @@
</div>
</div>
<h4>Messages:</h4>
<h4>Validation</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>
@ -226,34 +233,207 @@
<h2>States</h2>
<h4>If form is in state state, it will automatically show any error message block:</h4>
<div class="ui error form">
<h3>Form</h3>
<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>
<h4>Error</h4>
<p>If 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>Don't try to do that you're crazy!</p>
<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>
<h4>Warning</h4>
<p>If form is in warning state, it will automatically show any warning message block:</p>
<h4>If form is in warning state, it will automatically show any warning message block:</h4>
<div class="ui warning form">
<div class="ui warning form segment">
<div class="ui warning block">
<div class="header">We had some issues</div>
<div class="header">Could you check something!</div>
<ul class="list">
<li>Please enter your first name</li>
<li>Please enter your last name</li>
<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>
<h3>Form Fields</h3>
<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>
<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>
<h2>Variations</h2>
<h4>Size</h4>
<p>A form can also be small or large</p>
<div class="ui small form segment">
<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="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>
<br><br>
<div class="ui large form segment">
<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="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>
<h3>Fields</h3>
<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>
<h2>Fields (Group)</h2>
</div>
</body>

5
docs/module.html
View File

@ -34,6 +34,7 @@
<li><a href="#">UI</a>
<ul>
<li><a href="button.html">Button</a></li>
<li><a>Forms</a></li>
<li><a>Text</a></li>
<li><a>Headers</a></li>
<li><a>Columns</a></li>
@ -41,7 +42,6 @@
<li><a>Tags</a></li>
<li><a>Items (Lists of Content)</a></li>
<li><a>Panels (Type of Menu)</a></li>
<li><a>Forms</a></li>
<li><a>Fields</a></li>
<li><a>Checkboxes</a></li>
<li><a>Icons</a></li>
@ -167,6 +167,9 @@
<p>UI elements can be thought of as nouns, and variations as adjectives. Variations are written so to only describe the innate features of that variation, and must account for the differences when declared along-side other variations.</p>
<p>For example, in English, a large planet has a different meaning than a large chair, and would require different specific contextual definitions, but both are the same variant "largeness" to the person using the word.</p>
<p>Variations can be used together without negating each other unless used in a paradoxical way (A large small bunny).</p>
<h3>Plurality</h3>
<p>UI elements are given a plural definition. Groups of elements can share properties, in the same way "There are two tall men" provides a shortcut to saying "there is a tall man, and another tall man".</p>
<p>Some plural relationships are not as concrete as individual instances of the same thing. For example a form is a collection of related UI elements, but not all items of the same type. Semantic allows for these grouping to be defined as well, so that common grouping of elements can function together.</p>
<h3>Just Show Me the Code</h3>
<p>If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.</p>

101
docs/stylesheets/example.css
View File

@ -33,7 +33,9 @@
font-style: normal;
font-size-adjust: 0.448;
}
/*******************************
Global
*******************************/
body#example {
font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
background: #FCFCFC url(../images/bg.jpg) repeat;
@ -41,89 +43,96 @@ body#example {
padding: 0px 0px 150px;
}
/* links */
a {
color: #009FDA;
text-decoration: none;
}
a:hover {
color: #00BAFF;
}
#example .sidr {
font-weight: bold;
}
#example .sidr ul li ul {
font-weight: normal;
}
#example .sidr ul li ul li a {
font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
font-size: 15px;
color: #666666;
}
#example .sidr .active {
background-color: #555555;
}
#example .sidr .active > a {
color: #FFFFFF;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* text and headers */
#example h1 {
h1 {
margin: 0px 0px 20px;
padding: 50px 0px 5px;
border-bottom: 1px solid #DDDDDD;
}
#example h1 {
h1 {
margin: 0px auto;
}
#example h1:first-child {
h1:first-child {
margin-top: 0px;
padding-top: 0px;
}
#example h2 {
h2 {
margin: 35px 0px 30px;
padding-bottom: 10px;
border-bottom: 1px solid #DDDDDD;
}
#example h3 {
h3 {
font-size: 20px;
margin: 40px 0px 15px;
}
#example h4 {
margin: 30px 0px 10px;
h4 {
margin: 30px 0px 3px;
font-size: 16px;
font-weight: normal;
font-weight: bold;
color: #555555;
}
#example pre {
h4 + p {
margin: 0px 0px 20px;
}
pre {
background-color: #F0F0F0;
}
#example code {
code {
position: relative;
background-color: #F0F0F0;
border: 1px solid #DDDDDD;
padding: 3px 5px;
}
#example pre code {
pre code {
border: none;
padding: 0px;
}
#example table pre,
#example table code {
table pre,
table code {
margin: 0px;
padding: 0px;
background-color: transparent;
}
#example p {
p {
margin: 10px 0px;
color: #555555;
}
p > a {
font-weight: bold;
}
/* links */
a {
color: #009FDA;
text-decoration: none;
}
#example p > a {
a:hover {
color: #00BAFF;
}
#example .sidr {
font-weight: bold;
}
#example .sidr ul li ul {
font-weight: normal;
}
#example .sidr ul li ul li a {
font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
font-size: 15px;
color: #666666;
}
#example .sidr .active {
background-color: #555555;
}
#example .sidr .active > a {
color: #FFFFFF;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#example .section.dropdown .menu {
left: -46px;
width: 215px;

2
src/ui/flat/block.css
View File

@ -48,7 +48,7 @@
/* block with child list */
.ui.block ul.list {
list-style-position: inside;
margin: 5px 0px 0px;
margin: 0px 0px 0px;
padding: 0px;
}
.ui.block ul.list li {

5
src/ui/flat/button.css
View File

@ -94,6 +94,11 @@
.ui.button.hover {
background-color: #DDDDDD;
}
/*--------------
Down (:active)
---------------*/
/* Down */
.ui.button.down {
-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;

26
src/ui/flat/dividers.css → src/ui/flat/divider.css
View File

@ -2,8 +2,16 @@
Horizontal Dividers
---------------------*/
form.ui .divider,
.ui.divider {
margin: 1em 0em;
height: 1px;
background-color: rgba(0, 0, 0, 0.1);
border-top: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
.ui.vertical.divider,
.ui.horizontal.divider {
position: relative;
margin: 25px 0px 10px;
@ -16,7 +24,6 @@ form.ui .divider,
font-weight: bold;
}
form.ui .divider .rule,
.ui.divider .rule {
position: absolute;
top: 6px;
@ -31,17 +38,14 @@ form.ui .divider .rule,
border-bottom: 1px solid rgba(255, 255, 255, 0.9)
}
form.ui .divider .left.rule,
.ui.divider .left.rule {
left: 0px;
}
form.ui .divider .right.rule,
.ui.divider .right.rule {
right: 0px;
}
form.ui .divider .label,
.ui.divider .label {
display: block;
margin: 14px 0px 0px;
@ -100,23 +104,11 @@ form.ui .divider .label,
font-size: 14px;
line-height: 14px;
text-align: center;
text-transform: uppercase;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
vertical-align: middle;
text-transform: none;
color: #333333;
}
.ui.divider.simple {
margin: 20px 0px;
height: 1px;
background-color: rgba(0, 0, 0, 0.1);
border-top: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
/* Inverted Color Divider (Black BG) */
.ui.divider.inverted {
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
color: #FFFFFF;

236
src/ui/flat/form.css
View File

@ -23,6 +23,17 @@
position: relative;
width: 450px;
}
.ui.form :first-child {
margin-top: 0px;
}
/*--------------------
Content
---------------------*/
.ui.form p {
margin: 1em 0;
}
/*--------------------
Field
@ -30,7 +41,7 @@
.ui.form .field {
clear: both;
margin: 0px 0px 15px;
margin: 0em 0em 1em;
}
/*--------------------
@ -38,7 +49,7 @@
---------------------*/
.ui.form .field > label {
margin: 0px 0px 0.3em;
margin: 0em 0em 0.3em;
display: block;
color: #555555;
@ -56,13 +67,12 @@
.ui.textarea,
.ui.input {
width: 100%;
height: 32px;
padding: 7px 10px;
padding: 0.5em 0.7em;
font-size: 0.825em;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
font-size: 14px;
color: #555555;
-webkit-border-radius: 4px;
@ -83,8 +93,11 @@
box-sizing: border-box;
}
.ui.textarea,
.ui.form textarea {
height: 100px;
min-height: 67px;
height: 101px;
max-height: 202px;
resize: vertical;
}
.ui.form select {
@ -105,6 +118,12 @@
display: none;
}
/* Assumptions */
.ui.form .block:first-child {
margin-top: 0px;
}
/*******************************
States
*******************************/
@ -122,32 +141,12 @@
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15) inset;
}
/*--------------------
Empty (Placeholder)
---------------------*/
.ui.form input[placeholder],
.ui.form [placeholder],
.ui.form *[placeholder] {
color: #BBBBBB;
}
.ui.form input:focus[placeholder],
.ui.form :focus[placeholder],
.ui.form *[placeholder] {
color: #555555;
}
.ui.form textarea.empty,
.ui.form input.empty {
color: #CCCCCC;
}
/*--------------------
Error
---------------------*/
/* On Form */
.ui.form.error .error.block {
.ui.form.warning .warning.block {
display: block;
}
@ -156,41 +155,98 @@
---------------------*/
/* On Form */
.ui.form.warning .warning.block {
.ui.form.error .error.block {
display: block;
}
/* On Field */
/* On Field(s) */
.ui.form .fields.error .field label,
.ui.form .field.error label {
color: #AC3A3A;
font-weight: bold;
color: #EF3F49;
}
.ui.form .fields.error .field textarea,
.ui.form .fields.error .field input[type="text"],
.ui.form .fields.error .field input[type="password"],
.ui.form .field.error textarea,
.ui.form .field.error input[type="text"],
.ui.form .field.error input[type="password"] {
background-color: #FFEFEF;
border-color: #FF9999;
color: #F0BBBB;
}
.ui.form .field.error textarea,
.ui.form .field.error input[type="password"],
.ui.form .field.error textarea.filled,
.ui.form .field.error input.filled {
color: #AC3A3A;
background-color: #FFFAFA;
border-color: rgba(255, 80, 80, 0.7);
color: rgba(255, 80, 80, 0.7);
}
.ui.form .field.error textarea:focus,
.ui.form .field.error input:focus {
border-color: #E68585;
color: #AC3A3A;
border-color: rgba(255, 80, 80, 1);
color: rgba(255, 80, 80, 1);
}
/*--------------------
Empty (Placeholder)
---------------------*/
/* browsers require these rules separate */
.ui.form ::-webkit-input-placeholder {
color: #CCCCCC;
}
.ui.form ::-moz-placeholder {
color: #CCCCCC;
}
.ui.form :focus::-webkit-input-placeholder {
color: #AAAAAA;
}
.ui.form :focus::-moz-placeholder {
color: #AAAAAA;
}
.ui.form textarea.empty,
.ui.form input.empty {
color: #CCCCCC;
}
/* Error Placeholder */
.ui.form .error ::-webkit-input-placeholder {
color: rgba(255, 80, 80, 0.4);
}
.ui.form .error ::-moz-placeholder {
color: rgba(255, 80, 80, 0.4);
}
.ui.form .error :focus::-webkit-input-placeholder {
color: rgba(255, 80, 80, 0.7);
}
.ui.form .error :focus::-moz-placeholder {
color: rgba(255, 80, 80, 0.7);
}
/*--------------------
Disabled
---------------------*/
.ui.form .field :disabled,
.ui.form .field.disabled {
opacity: 0.5;
}
.ui.form .field.disabled :disabled {
opacity: 1;
}
/*--------------------
Loading State
---------------------*/
/* On Form */
.ui.form.loading .loading,
.ui.form.loading i.throbber {
display: block;
.ui.form.loading {
position: relative;
}
.ui.form.loading:after {
position: absolute;
top: 0%;
left: 0%;
content: '';
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8) url(../images/throbber-large.gif) no-repeat 50% 50%;
}
@ -247,21 +303,20 @@
/*--------------------
Higher Contrast
---------------------*/
.ui.form.contrast label {
.ui.contrasting.form label {
color: #FFFFFF;
}
.ui.form .field.error textarea,
.ui.form .field.error input[type="text"] {
.ui.contrasting.form .field.error textarea,
.ui.contrasting.form .field.error input[type="text"] {
background-color: #FFAAAA;
border-color: #FF3333;
color: #AA5555;
}
.ui.form.contrast .field.error label {
.ui.contrasting.form .field.error label {
color: #FF3333;
}
.ui.form.contrast .notices,
.ui.form.contrast .errors {
.ui.contrasting.form .notices,
.ui.contrasting.form .errors {
border-color: #FF3333;
background-image: -webkit-linear-gradient(top , #F36666 0px, #E14242 100%);
background-image: -moz-linear-gradient(top , #F36666 0px, #E14242 100%);
@ -280,7 +335,14 @@
/* Split fields */
.ui.form .fields {
clear: both;
overflow: hidden;
}
.ui.form .fields:after {
content: ' ';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.ui.form .fields .field {
clear: none;
@ -332,63 +394,53 @@
Inline Fields
---------------------*/
.ui.form .inline.field > :first-child {
margin-right: 5px;
.ui.form .inline.fields .field {
width: auto;
}
.ui.form .inline.field label,
.ui.form .inline.field input,
.ui.form .inline.field select {
.ui.form .inline.fields .field > label,
.ui.form .inline.fields .field > p,
.ui.form .inline.fields .field > input,
.ui.form .inline.fields .field > select,
.ui.form .inline.field > label,
.ui.form .inline.field > p,
.ui.form .inline.field > input,
.ui.form .inline.field > select {
display: inline-block;
vertical-align: middle;
width: auto;
}
/*--------------------
Success Messages
---------------------*/
.ui.form .block:first-child {
margin-top: 0px;
}
.ui.form .notices {
color: #67a210;
background-color: #ebf8d8;
.ui.form .inline.fields .field > :first-child,
.ui.form .inline.field > :first-child {
margin-right: 0.5em;
}
/*--------------------
Sizes
---------------------*/
.ui.form {
font-size: 16px;
}
.ui.large.form {
width: 440px;
}
.ui.large.fluid.form {
width: 100%;
/* Standard */
.ui.small.form {
font-size: 14px;
}
.ui.large.form .field {
margin-bottom: 20px;
.ui.small.form textarea,
.ui.small.form input[type="text"],
.ui.small.form input[type="password"],
.ui.small.form label {
font-size: 1em;
}
.ui.large.form .divider {
margin: 30px 0px;
.ui.form {
font-size: 16px;
}
.ui.large.form .field input[type="text"] {
height: 38px;
padding: 10px 12px;
font-size: 14px;
/* Large */
.ui.large.form {
font-size: 18px;
}
.ui.large.form .field textarea {
height: 140px;
padding: 10px 12px;
.ui.large.form label {
font-weight: bold;
}

23
src/ui/flat/menu.css
View File

@ -125,9 +125,11 @@
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05);
}
/*--------------
Active
---------------*/
.ui.menu .item.down,
.ui.menu .link.item:active,
.ui.menu a.item:active,
@ -143,6 +145,17 @@
font-weight: bold;
}
/*--------------
Disabled
---------------*/
.ui.menu .item.disabled,
.ui.menu .item.disabled:hover,
.ui.menu .item.disabled.hover {
cursor: default;
opacity: 0.3;
background-color: transparent;
}
/*******************************
Variations
@ -268,7 +281,17 @@
padding: 5px 10px;
font-size: 14px;
}
.ui.menu .item > a {
display: block;
margin: -5px -10px;
padding: 5px 10px;
}
.ui.large.menu .item {
padding: 12px 10px;
font-size: 16px;
}
.ui.menu .item > a {
display: block;
margin: -12px -10px;
padding: 12px 10px;
}

2
src/ui/flat/segment.css
View File

@ -9,7 +9,7 @@
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
padding: 15px;
padding: 1em;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;

2
src/ui/shaded/text.css
View File

@ -143,6 +143,8 @@
/* block with child list */
.ui.block ul.list {
margin: 5px 0px 0px;
padding: 0px;
list-style-position: inside;
}
.ui.block ul.list li {
list-style-type: disc;

Write Preview
Loading…
Cancel
Save