Update s to form, checkbox, segment. GitHub form and segment theming

RELEASE NOTES.md

@@ -7,6 +7,7 @@
 - **Checkbox** - Checkbox "enable" and "disable" have been replaced with "check" and "uncheck"
 
 **Enhancements**
+- **Checkbox** - All styles have been redone. Standard checkboxes are now based around PX and not EM making sure there are no unusual circles or rounding issues. Checkboxes also now use a custom font for glyphs instead of CSS tricks.
 - **Grid** - Divided and celled grids can now be inverted for dark backgrounds
 - **Grid** - Vertically divided grid now does not include left/right gutters in divider
 - **Grid** - Fixed page grid allows for fixed pixel size containers used with a grid instead of percentage

server/documents/collection.html.eco

@@ -1,4 +1,4 @@
----
+y---
 layout      : 'default'
 css         : 'index'
 

server/documents/collections/form.html.eco

@@ -1,11 +1,15 @@
 ---
 layout      : 'default'
 css         : 'form'
+element     : 'form'
+elementType : 'collection'
 
 title       : 'Form'
 description : 'A form is a collection of user input elements'
 type        : 'UI Collection'
+themes      : ['default', 'GitHub']
 ---
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/form.less" />
 <script src="/javascript/form.js"></script>
 
 <%- @partial('header') %>

server/documents/elements/button.html.eco

@@ -100,12 +100,15 @@ themes      : ['default', 'basic', 'chubby', 'github']
       <div class="ui inverted button">Standard</div>
       <div class="ui inverted black button">Black</div>
       <div class="ui inverted yellow button">Yellow</div>
+      <br><br>
       <div class="ui inverted green button">Green</div>
       <div class="ui inverted blue button">Blue</div>
       <div class="ui inverted orange button">Orange</div>
+      <br><br>
       <div class="ui inverted purple button">Purple</div>
       <div class="ui inverted pink button">Pink</div>
       <div class="ui inverted red button">Red</div>
+      <br><br>
       <div class="ui inverted teal button">Teal</div>
     </div>
 
@@ -280,7 +283,7 @@ themes      : ['default', 'basic', 'chubby', 'github']
   <div class="example">
     <h4 class="ui header">Colors</h4>
     <p>A button can have different colors:</p>
-    <div class="ui black button">Black</divFF8EDF>
+    <div class="ui black button">Black</div>
     <div class="ui yellow button">Yellow</div>
     <div class="ui green button">Green</div>
     <div class="ui blue button">Blue</div>

server/documents/elements/loader.html.eco

@@ -22,7 +22,7 @@ type        : 'UI Element'
   <div class="example">
     <h4 class="ui header">Loader</h4>
     <p>A loader</p>
-    <div class="ui ignored info message">The default loader uses images, this ensures maximum compatability with other components.</div>
+    <div class="ui ignored info message">A standard loader uses images, this ensures maximum compatability with other components.</div>
     <div class="ui ignored info message">Loaders by default are hidden unless inside of a dimmer.</div>
     <div class="ui segment">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>

server/documents/elements/segment.html.eco

@@ -1,11 +1,16 @@
 ---
 layout      : 'default'
 css         : 'segment'
+element     : 'segment'
+elementType : 'element'
+
 title       : 'Segment'
 description : 'A segment is used to create a grouping of related content.'
 type        : 'UI Element'
+themes      : ['default', 'GitHub']
 ---
 <%- @partial('header') %>
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/segment.less" />
 
 <div class="main container">
 
@@ -25,20 +30,6 @@ type        : 'UI Element'
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
     </div>
   </div>
-  <div class="example">
-    <h4 class="ui header">Vertical Segment</h4>
-    <p>A vertical segment divides content vertically</p>
-    <div class="ui vertical segment">
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
-    </div>
-  </div>
-  <div class="example">
-    <h4 class="ui header">Horizontal Segment</h4>
-    <p>A horizontal segment divides content horizontally</p>
-    <div class="ui horizontal segment">
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
-    </div>
-  </div>
 
   <div class="example">
     <h4 class="ui header">Piled</h4>
@@ -61,7 +52,21 @@ type        : 'UI Element'
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Vertical Segment</h4>
+    <p>A vertical segment divides content vertically</p>
+    <div class="ui vertical segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+  </div>
 
+  <div class="example">
+    <h4 class="ui header">Horizontal Segment</h4>
+    <p>A horizontal segment divides content horizontally</p>
+    <div class="ui horizontal segment">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+  </div>
 
   <h2 class="ui dividing header">States</h2>
 
@@ -83,6 +88,22 @@ type        : 'UI Element'
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Attached</h4>
+    <p>A segment can be attached to other content on a page</p>
+
+    <div class="ui top attached segment">
+      <p>This segment is on top</p>
+    </div>
+    <div class="ui attached segment">
+      <p>This segment is attached on both sides</p>
+    </div>
+    <div class="ui bottom attached segment">
+      <p>This segment is on bottom</p>
+    </div>
+  </div>
+
+
   <div class="example">
     <h4 class="ui header">Raised</h4>
     <p>A segment may be formatted to raise above the page.</p>
@@ -223,20 +244,5 @@ type        : 'UI Element'
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
     </div>
   </div>
-  <div class="example">
-    <h4 class="ui header">Attached</h4>
-    <p>A segment can be attached to other content on a page</p>
-
-    <div class="ui top attached segment">
-      <p>This segment is on top</p>
-    </div>
-    <div class="ui attached segment">
-      <p>This segment is attached on both sides</p>
-    </div>
-    <div class="ui bottom attached segment">
-      <p>This segment is on bottom</p>
-    </div>
-  </div>
-
 
 </div>

server/documents/modules/checkbox.html.eco

@@ -1,10 +1,14 @@
 ---
 layout      : 'default'
 css         : 'checkbox'
+element     : 'checkbox'
+elementType : 'module'
+
 
 title       : 'Checkbox'
 description : "A checkbox visually indicates the status of a user's selection"
 type        : 'UI Module'
+themes      : ['default', 'GitHub']
 ---
 <script src="/javascript/checkbox.js"></script>
 
@@ -85,22 +89,6 @@ type        : 'UI Module'
       </div>
     </div>
 
-    <h2 class="ui dividing header">Variations</h2>
-
-    <div class="example">
-      <h4 class="ui header">Size</h4>
-      <p>A checkbox can be a different size.</p>
-      <div class="ui large checkbox">
-        <input type="checkbox" />
-        <label>Add a pro membership</label>
-      </div>
-    </div>
-    <div class="another example">
-      <div class="ui huge checkbox">
-        <input type="checkbox" />
-        <label>Signup for our mailing list</label>
-      </div>
-    </div>
 
   </div>
 
@@ -156,19 +144,19 @@ type        : 'UI Module'
     <div class="example">
       <p>Example of using checkbox states to alter multiple checkboxes</p>
       <div class="evaluated code">
-      $('.enable.button')
+      $('.check.button')
         .on('click', function() {
           $(this)
             .nextAll('.checkbox')
-              .checkbox('enable')
+              .checkbox('check')
           ;
         })
       ;
-      $('.disable.button')
+      $('.uncheck.button')
         .on('click', function() {
           $(this)
             .nextAll('.checkbox')
-              .checkbox('disable')
+              .checkbox('uncheck')
           ;
         })
       ;
@@ -182,8 +170,8 @@ type        : 'UI Module'
       ;
       </div>
       <div class="ui toggle button">Toggle</div>
-      <div class="ui positive enable button">Enable</div>
-      <div class="ui negative disable button">Disable</div>
+      <div class="ui positive check button">Check</div>
+      <div class="ui negative uncheck button">Uncheck</div>
       <br><br>
       <div class="ui slider checkbox">
         <input type="checkbox" />

server/draft/specification/downloading.html

@@ -25,7 +25,7 @@ <h2 class="ui header">Creating an Element</h2>
   <li><b>View</b> - a way to present specific website content</li>
 </ul>
 
-The first step when using semantic is to initialize a directory as using semantic 
+The first step when using semantic is to initialize a directory as using semantic
 <div class="code" data-type="html">
   semantic init
 </div>
@@ -35,7 +35,7 @@ <h2 class="ui header">Creating an Element</h2>
 
   semantic find button
 
-Multiple packages will appear showing possible buttons available to download. 
+Multiple packages will appear showing possible buttons available to download.
 
   There are four button packages:
 
@@ -53,5 +53,5 @@ <h2 class="ui header">Creating an Element</h2>
 To use a button on your page, simple link to the css and js of an element
 
 
-  
+
 </div>

server/files/javascript/semantic.js

@@ -133,7 +133,9 @@ semantic.ready = function() {
           variableURL = '/build/less/themes/packages/{$theme}/{$type}s/{$element}.variables',
           overrideURL = '/build/less/themes/packages/{$theme}/{$type}s/{$element}.overrides',
           urlData     = {
-            theme   : theme,
+            theme   : typeof(theme === 'string')
+              ? theme.toLowerCase()
+              : theme,
             type    : $themeDropdown.data('type'),
             element : $themeDropdown.data('element')
           }

src/definitions/collections/form.less

@@ -59,6 +59,7 @@
 
   color: @labelColor;
   font-size: @labelFontSize;
+  font-weight: @labelFontWeight;
 }
 
 /*--------------------
@@ -472,7 +473,8 @@
 .ui.form .grouped.fields {
   margin: 0em 0em 1em;
 }
-.ui.form .grouped.fields .field {
+.ui.form .grouped.fields .field,
+.ui.form .grouped.inline.fields .field {
   display: block;
   float: none;
   margin: 0.5em 0em;

src/definitions/collections/grid.less

@@ -34,11 +34,6 @@
   box-sizing: border-box;
 }
 
-body > .ui.grid {
-  margin-left: 0% !important;
-  margin-right: 0% !important;
-}
-
 .ui.grid:after,
 .ui.row:after {
   content: ".";

src/definitions/elements/button.less

@@ -82,6 +82,7 @@
 .ui.button:focus {
   background-color: @focusBackgroundColor;
   background-image: @focusBackgroundImage;
+  box-shadow: @focusBoxShadow;
   color: @selectedTextColor;
 }
 
@@ -871,6 +872,7 @@
   width: @orWidth;
   height: @orHeight;
   z-index: 3;
+  text-shadow: none;
 }
 .ui.buttons .or:before {
   position: absolute;