fixes to dropdown docs

build/minified/collections/grid.min.css

@@ -1 +1 @@
-.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:1.33%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:960px){.ui.stackable.grid{display:block!important}.ui.stackable.grid .column{display:block!important;width:auto!important;margin:1.5em 3em 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.grid .column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.divided.grid .column:first-child,.ui.stackable.celled.grid .column:first-child{border-top:0!important}}
+.ui.grid{width:100%;display:block;text-align:center;font-size:0;margin:0 -1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.33%;padding-right:1.33%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:2%;padding-top:2%}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.333%;margin-right:-1.333%}.ui.page.grid{padding:0 2%}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 20%}}.ui.grid .one.wide.column{width:8.3333%}.ui.grid .two.wide.column{width:16.66667%}.ui.grid .three.wide.column{width:25%}.ui.grid .four.wide.column{width:33.3333%}.ui.grid .five.wide.column{width:41.6666%}.ui.grid .six.wide.column{width:50%}.ui.grid .seven.wide.column{width:58.3333%}.ui.grid .eight.wide.column{width:66.6666%}.ui.grid .nine.wide.column{width:75%}.ui.grid .ten.wide.column{width:83.3333%}.ui.grid .eleven.wide.column{width:91.666%}.ui.grid .twelve.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:8.3333%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.two.column.grid .column{width:50%}.ui.three.column.grid .column{width:33.3333%}.ui.four.column.grid .column{width:25%}.ui.five.column.grid .column{width:20%}.ui.six.column.grid .column{width:16.66667%}.ui.seven.column.grid .column{width:14.2857%}.ui.eight.column.grid .column{width:12.5%}.ui.nine.column.grid .column{width:11.1111%}.ui.ten.column.grid .column{width:10%}.ui.eleven.column.grid .column{width:9.0909%}.ui.padded.grid{margin-left:0;margin-right:0}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{display:table;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:1.33%;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid .column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row .column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid .column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row .column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid .column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row .column{text-align:right}.ui.top.aligned.grid .column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row .column{vertical-align:top}.ui.middle.aligned.grid .column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row .column{vertical-align:middle}.ui.bottom.aligned.grid .column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row .column{vertical-align:bottom}.ui.grid .equal.row{display:table}.ui.grid .equal.row .column{display:table-cell}@media only screen and (max-width:960px){.ui.stackable.grid{display:block!important}.ui.stackable.grid .column{display:block!important;width:auto!important;margin:1.5em 3em 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.grid .column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.divided.grid .column:first-child,.ui.stackable.celled.grid .column:first-child{border-top:0!important}}

build/minified/modules/dropdown.js

@@ -74,6 +74,11 @@ $.fn.dropdown = function(parameters) {
               .on('mouseleave' + eventNamespace, module.delayedHide)
             ;
           }
+          else {
+            $module
+              .on(settings.on + eventNamespace, module.toggle)
+            ;
+          }
 
           $item
             .on('click' + eventNamespace, module.event.item.click)

build/packaged/modules/dropdown.js

@@ -74,6 +74,11 @@ $.fn.dropdown = function(parameters) {
               .on('mouseleave' + eventNamespace, module.delayedHide)
             ;
           }
+          else {
+            $module
+              .on(settings.on + eventNamespace, module.toggle)
+            ;
+          }
 
           $item
             .on('click' + eventNamespace, module.event.item.click)

build/uncompressed/collections/grid.css

@@ -238,6 +238,7 @@
          Celled
 -----------------------*/
 .ui.celled.grid {
+  display: table;
   -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF;
   -moz-box-shadow: 0px 0px 0px 1px #DFDFDF;
   box-shadow: 0px 0px 0px 1px #DFDFDF;
@@ -308,6 +309,9 @@
 /*----------------------
   Equal Height Columns
 -----------------------*/
+.ui.grid .equal.row {
+  display: table;
+}
 .ui.grid .equal.row .column {
   display: table-cell;
 }

build/uncompressed/elements/button.css

@@ -446,6 +446,7 @@ Containing Icon
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
   margin: 0em;
+  width: auto;
   vertical-align: top;
 }
 /*--------------

build/uncompressed/elements/label.css

@@ -16,13 +16,12 @@
   display: inline-block;
   vertical-align: middle;
   background-color: #F5F5F5;
-  padding: 0.6em 1em;
+  padding: 0.5em 0.8em;
   color: rgba(0, 0, 0, 0.65);
-  font-weight: bold;
   text-transform: uppercase;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 0.325em;
+  -moz-border-radius: 0.325em;
+  border-radius: 0.325em;
   -webkit-transition: background 0.1s linear
   ;
   -moz-transition: background 0.1s linear

build/uncompressed/modules/dropdown.js

@@ -74,6 +74,11 @@ $.fn.dropdown = function(parameters) {
               .on('mouseleave' + eventNamespace, module.delayedHide)
             ;
           }
+          else {
+            $module
+              .on(settings.on + eventNamespace, module.toggle)
+            ;
+          }
 
           $item
             .on('click' + eventNamespace, module.event.item.click)

node/src/documents/modules/dropdown.html

@@ -59,7 +59,7 @@ type   : 'UI Module'
 
   <div class="example">
     <h4 class="ui header">Combo Dropdown</h4>
-    <p>A button can be formatted with a dropdown beside it</p>
+    <p>A button group can be formatted with a dropdown</p>
     <div class="ui teal buttons">
       <div class="ui button">Update Post</div>
       <div class="ui teal dropdown icon button">
@@ -131,30 +131,100 @@ type   : 'UI Module'
   </div>
 
   <h2 class="ui dividing header">Variations</h2>
+  <div class="example">
+    <h4 class="ui header">Simple</h4>
+    <p>A dropdown can open without javascript</p>
+    <div class="ui menu">
+      <div class="ui simple dropdown item">
+        Dropdown <i class="dropdown icon"></i>
+        <div class="menu">
+          <div class="item">Choice 1</div>
+          <div class="item">Choice 2</div>
+          <div class="item">Choice 3</div>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <h2 class="ui dividing header">Behavior</h2>
 
   <div class="example">
-    <p>A checkbox can change to show a user has selected it</p>
+    <h4>Trigger event</h4>
+    <p>A dropdown can trigger based on a variety of user events</p>
     <div class="ignore code">
-    $('.ui.checkbox')
-      .checkbox('enable')
+    // changes dropdown visibility on hover
+    $('.ui.dropdown')
+      .dropdown({
+        on: 'hover'
+      })
+    ;
+    // changes dropdown visibility on click
+    $('.ui.dropdown')
+      .dropdown({
+        on: 'click'
+      })
     ;
     </div>
   </div>
   <div class="example">
-    <p>A checkbox can change to show a user has not selected it</p>
+    <h4>Dropdown Action</h4>
+    <p>A dropdown can trigger different behaviors on selection</p>
     <div class="ignore code">
-    $('.ui.checkbox')
-      .checkbox('disable')
+    // just hides content
+    $('.ui.dropdown')
+      .dropdown({
+        action: 'hide'
+      })
+    ;
+    // changes text of matching text selector
+    $('.ui.dropdown')
+      .dropdown({
+        action: 'changeText'
+      })
+    ;
+    // changes text of matching text selector and hidden input field
+    $('.ui.dropdown')
+      .dropdown({
+        action: 'form'
+      })
+    ;
+    // triggers custom action
+    $('.ui.dropdown')
+      .dropdown({
+        action: function() {
+          // custom action
+        }
+      })
+    ;
+    // triggers a default action and a custom action
+    $('.ui.dropdown')
+      .dropdown({
+        action: 'hide',
+        onChange: function() {
+          // do something
+        }
+      })
     ;
     </div>
   </div>
   <div class="example">
-    <p>A checkbox can toggle between states</p>
+    <h4>Display state</h4>
+    <p>A dropdown can show or hide itself</p>
     <div class="ignore code">
-    $('.ui.checkbox')
-      .checkbox('toggle')
+    $('.ui.dropdown')
+      .dropdown('show')
+    ;
+    $('.ui.dropdown')
+      .dropdown('hide')
+    ;
+    </div>
+  </div>
+  <div class="example">
+    <h4>Toggle</h4>
+    <p>A dropdown can toggle between states</p>
+    <div class="ignore code">
+    $('.ui.dropdown')
+      .dropdown('toggle')
     ;
     </div>
   </div>

node/src/files/components/semantic/collections/grid.css

@@ -238,6 +238,7 @@
          Celled
 -----------------------*/
 .ui.celled.grid {
+  display: table;
   -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF;
   -moz-box-shadow: 0px 0px 0px 1px #DFDFDF;
   box-shadow: 0px 0px 0px 1px #DFDFDF;
@@ -308,6 +309,9 @@
 /*----------------------
   Equal Height Columns
 -----------------------*/
+.ui.grid .equal.row {
+  display: table;
+}
 .ui.grid .equal.row .column {
   display: table-cell;
 }

node/src/files/components/semantic/elements/button.css

@@ -446,6 +446,7 @@ Containing Icon
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
   margin: 0em;
+  width: auto;
   vertical-align: top;
 }
 /*--------------

node/src/files/components/semantic/elements/label.css

@@ -16,13 +16,12 @@
   display: inline-block;
   vertical-align: middle;
   background-color: #F5F5F5;
-  padding: 0.6em 1em;
+  padding: 0.5em 0.8em;
   color: rgba(0, 0, 0, 0.65);
-  font-weight: bold;
   text-transform: uppercase;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 0.325em;
+  -moz-border-radius: 0.325em;
+  border-radius: 0.325em;
   -webkit-transition: background 0.1s linear
   ;
   -moz-transition: background 0.1s linear

node/src/files/components/semantic/modules/dropdown.js

@@ -74,6 +74,11 @@ $.fn.dropdown = function(parameters) {
               .on('mouseleave' + eventNamespace, module.delayedHide)
             ;
           }
+          else {
+            $module
+              .on(settings.on + eventNamespace, module.toggle)
+            ;
+          }
 
           $item
             .on('click' + eventNamespace, module.event.item.click)

node/src/files/stylesheets/semantic.css

@@ -260,6 +260,9 @@ a:hover {
   background-color: #FFFFFF;
   border-bottom: 1px solid #DDDDDD;
 }
+#example .segment h1.dividing.header {
+  margin-top: 35px;
+}
 #example .download.menu {
   margin-top: 15px;
   float: right;

src/collections/grid.less

@@ -317,6 +317,7 @@
 -----------------------*/
 
 .ui.celled.grid {
+  display: table;
   -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF;
   -moz-box-shadow: 0px 0px 0px 1px #DFDFDF;
   box-shadow: 0px 0px 0px 1px #DFDFDF;
@@ -394,6 +395,9 @@
   Equal Height Columns
 -----------------------*/
 
+.ui.grid .equal.row {
+  display: table;
+}
 .ui.grid .equal.row .column {
   display: table-cell;
 }

src/elements/button.less

@@ -545,6 +545,7 @@ Containing Icon
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
   margin: 0em;
+  width: auto;
   vertical-align: top;
 }
 

src/elements/label.less

@@ -19,15 +19,14 @@
   vertical-align: middle;
 
   background-color: #F5F5F5;
-  padding: 0.6em 1em;
+  padding: 0.5em 0.8em;
   color: rgba(0, 0, 0, 0.65);
 
-  font-weight: bold;
   text-transform: uppercase;
 
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 0.325em;
+  -moz-border-radius: 0.325em;
+  border-radius: 0.325em;
 
   -webkit-transition:
     background 0.1s linear

src/modules/dropdown.js

@@ -74,6 +74,11 @@ $.fn.dropdown = function(parameters) {
               .on('mouseleave' + eventNamespace, module.delayedHide)
             ;
           }
+          else {
+            $module
+              .on(settings.on + eventNamespace, module.toggle)
+            ;
+          }
 
           $item
             .on('click' + eventNamespace, module.event.item.click)