more dropdown examples, tweaks to code

build/minified/modules/dropdown.js

@@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
             module.intent.bind();
           }
           $menu
-            .show()
+            .fadeIn(200)
           ;
           $.proxy(settings.onChange, $menu.get())();
           $.proxy(settings.onShow, $menu.get())();

build/minified/modules/dropdown.min.css

@@ -1 +1 @@
-.ui.dropdown{position:relative;display:inline-block;line-height:1;white-space:nowrap}.ui.dropdown>.icon.down.triangle{float:right}.ui.dropdown .menu{position:absolute;display:none;top:100%;background-color:#FFF;min-width:100%;-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset,0 -1px 0 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset;box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset,0 -1px 0 0 rgba(0,0,0,.1) inset;-moz-border-radius:0 0 .325em .325em;-webkit-border-radius:0 0 .325em .325em;border-radius:0 0 .325em .325em;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out;transition:opacity .2s ease-out;z-index:11}.ui.dropdown .menu{left:1px}.ui.dropdown:last-child .menu{left:auto;right:1px}.ui.dropdown .menu .item{cursor:pointer;border:0;border-top:1px solid rgba(0,0,0,.05);font-size:.9em;display:block;color:rgba(0,0,0,.75);padding:.85em 1em;font-size:.9rem;text-transform:none;font-weight:400;text-align:left;-webkit-touch-callout:none}.ui.dropdown .menu .item .icon{margin-right:.75em}.ui.dropdown .menu .item:first-child{border-top:0}.ui.selection.dropdown{display:inline-block;background-color:#FFF;border:1px solid rgba(0,0,0,.1);padding:.5em 1em;line-height:1.33;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.selection.dropdown>.icon{float:right;margin:.2em .2em .2em .5em}.ui.dropdown.visible{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.selection.dropdown:hover,.ui.selection.dropdown.hover{border:1px solid rgba(0,0,0,.2)}.ui.dropdown .menu .item:hover{background-color:rgba(0,0,0,.02)}.ui.dropdown .menu .active.item{font-weight:700}
+.ui.dropdown{position:relative;display:inline-block;line-height:1;white-space:nowrap}.ui.dropdown .menu{position:absolute;display:none;top:100%;background-color:#FFF;min-width:100%;-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset,0 -1px 0 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset;box-shadow:0 2px 0 0 rgba(0,0,0,.1),1px 0 0 0 rgba(0,0,0,.1) inset,-1px 0 0 0 rgba(0,0,0,.1) inset,0 -1px 0 0 rgba(0,0,0,.1) inset;-moz-border-radius:0 0 .325em .325em;-webkit-border-radius:0 0 .325em .325em;border-radius:0 0 .325em .325em;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;-ms-transition:opacity .2s ease-out;transition:opacity .2s ease-out;z-index:11}.ui.dropdown .menu{left:0}.ui.dropdown:last-child .menu{left:auto;right:0}.ui.dropdown .menu .item{cursor:pointer;border:0;border-top:1px solid rgba(0,0,0,.05);font-size:.9em;display:block;color:rgba(0,0,0,.75);padding:.85em 1em;font-size:.9rem;text-transform:none;font-weight:400;text-align:left;-webkit-touch-callout:none}.ui.dropdown .menu .item .icon{margin-right:.75em}.ui.dropdown .menu .item:first-child{border-top:0}.ui.dropdown.visible{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ui.dropdown .menu .item:hover{background-color:rgba(0,0,0,.02)}.ui.dropdown .menu .active.item{font-weight:700}.ui.selection.dropdown{cursor:pointer;display:inline-block;background-color:#FFF;padding:.5em 1em;line-height:1.33;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.selection.dropdown>.dropdown.icon{float:right;margin:.2em 0 .2em .5em}.ui.selection.dropdown,.ui.selection.dropdown .menu{-webkit-transition:box-shadow .2s ease-out;-moz-transition:box-shadow .2s ease-out;-o-transition:box-shadow .2s ease-out;-ms-transition:box-shadow .2s ease-out;transition:box-shadow .2s ease-out}.ui.selection.dropdown .menu{-webkit-box-shadow:0 1px 0 1px #EEE;-moz-box-shadow:0 1px 0 1px #EEE;box-shadow:0 1px 0 1px #EEE}.ui.selection.dropdown:hover,.ui.selection.dropdown.hover{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.ui.dropdown:hover .menu{-webkit-box-shadow:0 1px 0 1px #D3D3D3;-moz-box-shadow:0 1px 0 1px #D3D3D3;box-shadow:0 1px 0 1px #D3D3D3}

build/minified/modules/dropdown.min.js

@@ -1 +1 @@
-(function(e,t,n,o){e.fn.dropdown=function(t){var a,i=e(this),s=e(n),r=e.extend(!0,{},e.fn.dropdown.settings,t),c="."+r.namespace,l="module-"+r.namespace,u=(i.selector||"",(new Date).getTime()),d=[],f=arguments[0],m="string"==typeof f,p=[].slice.call(arguments,1);return i.each(function(){var t,g=e(this),h=e(this).find(r.selector.menu),v="ontouchstart"in n.documentElement,b=g.selector||"",y=this,x=g.data("module-"+r.namespace),C=r.className,w=r.namespace,T=r.errors;t={initialize:function(){r.context&&""!==b?(t.verbose("Initializing dropdown with delegated events",g),e(y,r.context).on(b,"click"+c,t.toggle).data(l,t)):(t.verbose("Initializing dropdown with bound events",g),g.on(t.get.event()+c,t.toggle),g.data(l,t))},intent:{test:function(n){t.debug("Checking if click was inside the dropdown",n.target),0==e(n.target).closest(g).size()&&(t.hide(),t.intent.unbind())},bind:function(){t.verbose("Binding hide intent event to document"),e(n).on("click",t.intent.test)},unbind:function(){t.verbose("Removing hide intent event from document"),s.off("click")}},is:{clickable:function(){return v||"click"==r.on}},get:{event:function(){return v?"touchstart":"hover"==r.on?"hover":"click"==r.on?"click":o}},can:{show:function(){return!g.hasClass(C.disabled)}},destroy:function(){t.verbose("Destroying previous dropdown for",g),g.off(w)},show:function(){t.debug("Enabling dropdown"),g.addClass(C.active),t.is.clickable()&&t.intent.bind(),h.show(),e.proxy(r.onChange,h.get())(),e.proxy(r.onShow,h.get())()},hide:function(){t.debug("Disabling dropdown"),g.removeClass(C.active),t.is.clickable()&&t.intent.unbind(),h.hide(),e.proxy(r.onChange,h.get())(),e.proxy(r.onHide,h.get())()},toggle:function(){t.can.show()&&h.is(":not(:visible)")?t.show():t.hide()},setting:function(t,n){return n===o?r[t]:(e.isPlainObject(t)?e.extend(!0,r,t):r[t]=n,o)},internal:function(n,a){return a===o?t[n]:(e.isPlainObject(n)?e.extend(!0,t,n):t[n]=a,o)},debug:function(){r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},verbose:function(){r.verbose&&r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},error:function(){console.log!==o&&(t.error=Function.prototype.bind.call(console.log,console,r.moduleName+":"))},performance:{log:function(e){var n,o,a;r.performance&&(n=(new Date).getTime(),a=u||n,o=n-a,u=n,d.push({Element:y,Name:e,"Execution Time":o}),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100))},display:function(){var t=r.moduleName,n=(r.moduleName+": "+b+"("+i.size()+" elements)",0);b&&(t+="Performance ("+b+")"),(console.group!==o||console.table!==o)&&d.length>0&&(console.groupCollapsed(t),console.table?(e.each(d,function(e,t){n+=t["Execution Time"]}),console.table(d)):e.each(d,function(e,t){n+=t["Execution Time"]}),console.log("Total Execution Time:",n+"ms"),console.groupEnd(),d=[],u=!1)}},invoke:function(n,a,i){var s,r;return a=a||p,i=y||i,"string"==typeof n&&x!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,a){return e.isPlainObject(x[a])&&n!=s?(x=x[a],!0):x[a]!==o?(r=x[a],!0):(t.error(T.method),!1)})),e.isFunction(r)?(t.verbose("Executing invoked function",r),r.apply(i,a)):r||!1}},m?(x===o&&t.initialize(),a=t.invoke(f)):(x!==o&&t.destroy(),t.initialize())}),a?a:this},e.fn.dropdown.settings={moduleName:"Dropdown Module",namespace:"dropdown",verbose:!0,debug:!0,performance:!1,on:"click",onChange:function(){},onShow:function(){},onHide:function(){},errors:{method:"The method you called is not defined."},selector:{menu:".menu"},className:{active:"visible"}}})(jQuery,window,document);
+(function(e,t,n,o){e.fn.dropdown=function(t){var a,i=e(this),s=e(n),r=e.extend(!0,{},e.fn.dropdown.settings,t),c="."+r.namespace,l="module-"+r.namespace,u=(i.selector||"",(new Date).getTime()),d=[],f=arguments[0],m="string"==typeof f,p=[].slice.call(arguments,1);return i.each(function(){var t,g=e(this),h=e(this).find(r.selector.menu),v="ontouchstart"in n.documentElement,b=g.selector||"",y=this,x=g.data("module-"+r.namespace),C=r.className,w=r.namespace,T=r.errors;t={initialize:function(){r.context&&""!==b?(t.verbose("Initializing dropdown with delegated events",g),e(y,r.context).on(b,"click"+c,t.toggle).data(l,t)):(t.verbose("Initializing dropdown with bound events",g),g.on(t.get.event()+c,t.toggle),g.data(l,t))},intent:{test:function(n){t.debug("Checking if click was inside the dropdown",n.target),0==e(n.target).closest(g).size()&&(t.hide(),t.intent.unbind())},bind:function(){t.verbose("Binding hide intent event to document"),e(n).on("click",t.intent.test)},unbind:function(){t.verbose("Removing hide intent event from document"),s.off("click")}},is:{clickable:function(){return v||"click"==r.on}},get:{event:function(){return v?"touchstart":"hover"==r.on?"hover":"click"==r.on?"click":o}},can:{show:function(){return!g.hasClass(C.disabled)}},destroy:function(){t.verbose("Destroying previous dropdown for",g),g.off(w)},show:function(){t.debug("Enabling dropdown"),g.addClass(C.active),t.is.clickable()&&t.intent.bind(),h.fadeIn(200),e.proxy(r.onChange,h.get())(),e.proxy(r.onShow,h.get())()},hide:function(){t.debug("Disabling dropdown"),g.removeClass(C.active),t.is.clickable()&&t.intent.unbind(),h.hide(),e.proxy(r.onChange,h.get())(),e.proxy(r.onHide,h.get())()},toggle:function(){t.can.show()&&h.is(":not(:visible)")?t.show():t.hide()},setting:function(t,n){return n===o?r[t]:(e.isPlainObject(t)?e.extend(!0,r,t):r[t]=n,o)},internal:function(n,a){return a===o?t[n]:(e.isPlainObject(n)?e.extend(!0,t,n):t[n]=a,o)},debug:function(){r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},verbose:function(){r.verbose&&r.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,r.moduleName+":"))},error:function(){console.log!==o&&(t.error=Function.prototype.bind.call(console.log,console,r.moduleName+":"))},performance:{log:function(e){var n,o,a;r.performance&&(n=(new Date).getTime(),a=u||n,o=n-a,u=n,d.push({Element:y,Name:e,"Execution Time":o}),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100))},display:function(){var t=r.moduleName,n=(r.moduleName+": "+b+"("+i.size()+" elements)",0);b&&(t+="Performance ("+b+")"),(console.group!==o||console.table!==o)&&d.length>0&&(console.groupCollapsed(t),console.table?(e.each(d,function(e,t){n+=t["Execution Time"]}),console.table(d)):e.each(d,function(e,t){n+=t["Execution Time"]}),console.log("Total Execution Time:",n+"ms"),console.groupEnd(),d=[],u=!1)}},invoke:function(n,a,i){var s,r;return a=a||p,i=y||i,"string"==typeof n&&x!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,a){return e.isPlainObject(x[a])&&n!=s?(x=x[a],!0):x[a]!==o?(r=x[a],!0):(t.error(T.method),!1)})),e.isFunction(r)?(t.verbose("Executing invoked function",r),r.apply(i,a)):r||!1}},m?(x===o&&t.initialize(),a=t.invoke(f)):(x!==o&&t.destroy(),t.initialize())}),a?a:this},e.fn.dropdown.settings={moduleName:"Dropdown Module",namespace:"dropdown",verbose:!0,debug:!0,performance:!1,on:"click",onChange:function(){},onShow:function(){},onHide:function(){},errors:{method:"The method you called is not defined."},selector:{menu:".menu"},className:{active:"visible"}}})(jQuery,window,document);

build/packaged/modules/dropdown.js

@@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
             module.intent.bind();
           }
           $menu
-            .show()
+            .fadeIn(200)
           ;
           $.proxy(settings.onChange, $menu.get())();
           $.proxy(settings.onShow, $menu.get())();

build/uncompressed/elements/icons.css

@@ -536,18 +536,24 @@ i.icon.zoom.out:before {
 /*--------------
    Spacing Fix
 ---------------*/
+/* dropdown arrows are to the right */
+i.dropdown.icon {
+  margin: 0em 0em 0em 0.5em;
+}
 /* stars are usually consecutive */
 i.icon.star {
   width: auto;
   margin: 0em;
   vertical-align: middle;
 }
+/* left side icons */
 i.icon.left,
 i.icon.left,
 i.icon.left {
   width: auto;
   margin: 0em 0.5em 0em 0em;
 }
+/* right side icons */
 i.icon.up,
 i.icon.down,
 i.icon.right {
@@ -562,6 +568,10 @@ i.icon.delete:before {
   content: '\e80d';
 }
 /* '' */
+i.icon.dropdown:before {
+  content: '\25be';
+}
+/* '▾' */
 i.icon.help:before {
   content: '\e704';
 }

build/uncompressed/modules/dropdown.css

@@ -18,9 +18,6 @@
   line-height: 1;
   white-space: nowrap;
 }
-.ui.dropdown > .icon.down.triangle {
-  float: right;
-}
 .ui.dropdown .menu {
   position: absolute;
   display: none;
@@ -42,11 +39,11 @@
 }
 /* Flyout Direction */
 .ui.dropdown .menu {
-  left: 1px;
+  left: 0px;
 }
 .ui.dropdown:last-child .menu {
   left: auto;
-  right: 1px;
+  right: 0px;
 }
 .ui.dropdown .menu .item {
   cursor: pointer;
@@ -68,40 +65,63 @@
 .ui.dropdown .menu .item:first-child {
   border-top: none;
 }
+/*******************************
+            States
+*******************************/
+.ui.dropdown.visible {
+  border-bottom-left-radius: 0em !important;
+  border-bottom-right-radius: 0em !important;
+}
+.ui.dropdown .menu .item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+.ui.dropdown .menu .active.item {
+  font-weight: bold;
+}
+/*******************************
+           Variations
+*******************************/
 /*--------------
     Selection
 ---------------*/
 .ui.selection.dropdown {
+  cursor: pointer;
   display: inline-block;
   background-color: #FFFFFF;
-  border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 0.5em 1em;
   line-height: 1.33;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -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);
   -webkit-border-radius: 0.3125em;
   -moz-border-radius: 0.3125em;
   border-radius: 0.3125em;
 }
-.ui.selection.dropdown > .icon {
+.ui.selection.dropdown > .dropdown.icon {
   float: right;
-  margin: 0.2em 0.2em 0.2em 0.5em;
+  margin: 0.2em 0em 0.2em 0.5em;
 }
-/*******************************
-            States
-*******************************/
-.ui.dropdown.visible {
-  border-bottom-left-radius: 0em;
-  border-bottom-right-radius: 0em;
+.ui.selection.dropdown,
+.ui.selection.dropdown .menu {
+  -webkit-transition: box-shadow 0.2s ease-out;
+  -moz-transition: box-shadow 0.2s ease-out;
+  -o-transition: box-shadow 0.2s ease-out;
+  -ms-transition: box-shadow 0.2s ease-out;
+  transition: box-shadow 0.2s ease-out;
+}
+.ui.selection.dropdown .menu {
+  -webkit-box-shadow: 0px 1px 0px 1px #EEEEEE;
+  -moz-box-shadow: 0px 1px 0px 1px #EEEEEE;
+  box-shadow: 0px 1px 0px 1px #EEEEEE;
 }
 .ui.selection.dropdown:hover,
 .ui.selection.dropdown.hover {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
 }
-.ui.dropdown .menu .item:hover {
-  background-color: rgba(0, 0, 0, 0.02);
+.ui.dropdown:hover .menu {
+  -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
+  -moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
+  box-shadow: 0px 1px 0px 1px #D3D3D3;
 }
-.ui.dropdown .menu .active.item {
-  font-weight: bold;
-}
-/*******************************
-           Variations
-*******************************/

build/uncompressed/modules/dropdown.js

@@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
             module.intent.bind();
           }
           $menu
-            .show()
+            .fadeIn(200)
           ;
           $.proxy(settings.onChange, $menu.get())();
           $.proxy(settings.onShow, $menu.get())();

node/src/documents/collections/menu.html

@@ -42,7 +42,7 @@ type   : 'UI Collection'
             <input class="ui input" type="text" placeholder="Search...">
         </div>
         <div class="dropdown item">
-          More <i class="icon down triangle"></i>
+          More <i class="icon dropdown"></i>
           <div class="menu">
             <div class="item"><i class="icon edit"></i> Edit Profile</div>
             <div class="item"><i class="icon globe"></i> Choose Language</div>
@@ -104,7 +104,7 @@ type   : 'UI Collection'
               <input class="ui input" type="text" placeholder="Search...">
           </div>
           <div class="dropdown item">
-            More <i class="icon down triangle"></i>
+            More <i class="icon dropdown"></i>
             <div class="menu">
               <div class="item"><i class="icon edit"></i> Edit Profile</div>
               <div class="item"><i class="icon globe"></i> Choose Language</div>
@@ -143,7 +143,7 @@ type   : 'UI Collection'
           <input class="ui input" type="text" placeholder="Search...">
       </div>
       <div class="dropdown item">
-        More <i class="icon down triangle"></i>
+        More <i class="icon dropdown"></i>
         <div class="menu">
           <div class="item"><i class="icon edit"></i> Edit Profile</div>
           <div class="item"><i class="icon globe"></i> Choose Language</div>
@@ -173,7 +173,7 @@ type   : 'UI Collection'
             <input class="ui input" type="text" placeholder="Search...">
         </div>
         <div class="dropdown item">
-          More <i class="icon down triangle"></i>
+          More <i class="icon dropdown"></i>
           <div class="menu">
             <div class="item"><i class="icon edit"></i> Edit Profile</div>
             <div class="item"><i class="icon globe"></i> Choose Language</div>

node/src/documents/modules/dropdown.html

@@ -33,8 +33,8 @@ type   : 'UI Module'
     <h4 class="ui header">Dropdown</h4>
     <p>The markup for a dropdown</p>
     <div class="ui dropdown">
-      <i class="icon down triangle"></i>
       Select
+      <i class="icon dropdown"></i>
       <div class="menu">
         <div class="item"><i class="edit icon"></i>Edit</div>
         <div class="item"><i class="delete icon"></i>Remove</div>
@@ -62,7 +62,7 @@ type   : 'UI Module'
     <div class="ui teal buttons">
       <div class="ui button">Save</div>
       <div class="ui teal dropdown icon button">
-        <i class="down triangle icon"></i>
+        <i class="dropdown icon"></i>
         <div class="menu">
           <div class="item"><i class="edit icon"></i>Edit</div>
           <div class="item"><i class="delete icon"></i>Remove</div>
@@ -71,6 +71,27 @@ type   : 'UI Module'
       </div>
     </div>
   </div>
+
+  <div class="example">
+    <h4 class="ui header">Menu Dropdown</h4>
+    <p>A button can be formatted with a dropdown beside it</p>
+      <div class="ui compact purple inverted menu">
+        <a class="active item">
+          <i class="icon home"></i> Home
+        </a>
+        <a class="ui dynamic dropdown item">
+          <i class="icon mail"></i> Messages <i class="dropdown icon"></i>
+          <div class="menu">
+            <div class="item"><i class="mail icon"></i>Inbox</div>
+            <div class="item"><i class="book icon"></i>Archive</div>
+          </div>
+        </a>
+        <a class="item">
+          <i class="icon community"></i> Browse
+        </a>
+      </div>
+  </div>
+  
   
   <div class="example">
     <h4 class="ui header">Select</h4>
@@ -90,7 +111,7 @@ type   : 'UI Module'
       <div class="field">
         <label>Gender</label>
         <div class="ui dropdown selection">
-          <i class="icon down triangle"></i> 
+          <i class="icon dropdown"></i> 
           Male
           <div class="menu">
             <div class="item">Male</div>

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

@@ -536,18 +536,24 @@ i.icon.zoom.out:before {
 /*--------------
    Spacing Fix
 ---------------*/
+/* dropdown arrows are to the right */
+i.dropdown.icon {
+  margin: 0em 0em 0em 0.5em;
+}
 /* stars are usually consecutive */
 i.icon.star {
   width: auto;
   margin: 0em;
   vertical-align: middle;
 }
+/* left side icons */
 i.icon.left,
 i.icon.left,
 i.icon.left {
   width: auto;
   margin: 0em 0.5em 0em 0em;
 }
+/* right side icons */
 i.icon.up,
 i.icon.down,
 i.icon.right {
@@ -562,6 +568,10 @@ i.icon.delete:before {
   content: '\e80d';
 }
 /* '' */
+i.icon.dropdown:before {
+  content: '\25be';
+}
+/* '▾' */
 i.icon.help:before {
   content: '\e704';
 }

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

@@ -18,9 +18,6 @@
   line-height: 1;
   white-space: nowrap;
 }
-.ui.dropdown > .icon.down.triangle {
-  float: right;
-}
 .ui.dropdown .menu {
   position: absolute;
   display: none;
@@ -42,11 +39,11 @@
 }
 /* Flyout Direction */
 .ui.dropdown .menu {
-  left: 1px;
+  left: 0px;
 }
 .ui.dropdown:last-child .menu {
   left: auto;
-  right: 1px;
+  right: 0px;
 }
 .ui.dropdown .menu .item {
   cursor: pointer;
@@ -68,40 +65,63 @@
 .ui.dropdown .menu .item:first-child {
   border-top: none;
 }
+/*******************************
+            States
+*******************************/
+.ui.dropdown.visible {
+  border-bottom-left-radius: 0em !important;
+  border-bottom-right-radius: 0em !important;
+}
+.ui.dropdown .menu .item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+.ui.dropdown .menu .active.item {
+  font-weight: bold;
+}
+/*******************************
+           Variations
+*******************************/
 /*--------------
     Selection
 ---------------*/
 .ui.selection.dropdown {
+  cursor: pointer;
   display: inline-block;
   background-color: #FFFFFF;
-  border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 0.5em 1em;
   line-height: 1.33;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -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);
   -webkit-border-radius: 0.3125em;
   -moz-border-radius: 0.3125em;
   border-radius: 0.3125em;
 }
-.ui.selection.dropdown > .icon {
+.ui.selection.dropdown > .dropdown.icon {
   float: right;
-  margin: 0.2em 0.2em 0.2em 0.5em;
+  margin: 0.2em 0em 0.2em 0.5em;
 }
-/*******************************
-            States
-*******************************/
-.ui.dropdown.visible {
-  border-bottom-left-radius: 0em;
-  border-bottom-right-radius: 0em;
+.ui.selection.dropdown,
+.ui.selection.dropdown .menu {
+  -webkit-transition: box-shadow 0.2s ease-out;
+  -moz-transition: box-shadow 0.2s ease-out;
+  -o-transition: box-shadow 0.2s ease-out;
+  -ms-transition: box-shadow 0.2s ease-out;
+  transition: box-shadow 0.2s ease-out;
+}
+.ui.selection.dropdown .menu {
+  -webkit-box-shadow: 0px 1px 0px 1px #EEEEEE;
+  -moz-box-shadow: 0px 1px 0px 1px #EEEEEE;
+  box-shadow: 0px 1px 0px 1px #EEEEEE;
 }
 .ui.selection.dropdown:hover,
 .ui.selection.dropdown.hover {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
 }
-.ui.dropdown .menu .item:hover {
-  background-color: rgba(0, 0, 0, 0.02);
+.ui.dropdown:hover .menu {
+  -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
+  -moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
+  box-shadow: 0px 1px 0px 1px #D3D3D3;
 }
-.ui.dropdown .menu .active.item {
-  font-weight: bold;
-}
-/*******************************
-           Variations
-*******************************/

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

@@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
             module.intent.bind();
           }
           $menu
-            .show()
+            .fadeIn(200)
           ;
           $.proxy(settings.onChange, $menu.get())();
           $.proxy(settings.onShow, $menu.get())();

src/elements/icons.less

@@ -197,6 +197,11 @@ i.icon.zoom.out:before { content: '\e751'; } /* '' */
    Spacing Fix
 ---------------*/
 
+/* dropdown arrows are to the right */
+i.dropdown.icon {
+  margin: 0em 0em 0em 0.5em;
+}
+
 /* stars are usually consecutive */
 i.icon.star {
   width: auto;
@@ -204,6 +209,7 @@ i.icon.star {
   vertical-align: middle;
 }
 
+/* left side icons */
 i.icon.left,
 i.icon.left,
 i.icon.left {
@@ -211,6 +217,7 @@ i.icon.left {
   margin: 0em 0.5em 0em 0em;
 }
 
+/* right side icons */
 i.icon.up,
 i.icon.down,
 i.icon.right {
@@ -224,6 +231,7 @@ i.icon.right {
 
 /* aliases for convenience */
 i.icon.delete:before { content: '\e80d'; } /* '' */
+i.icon.dropdown:before { content: '\25be'; } /* '▾' */
 
 i.icon.help:before { content: '\e704'; } /* '' */
 i.icon.info:before { content: '\e705'; } /* '' */

src/modules/dropdown.js

@@ -142,7 +142,7 @@ $.fn.dropdown = function(parameters) {
             module.intent.bind();
           }
           $menu
-            .show()
+            .fadeIn(200)
           ;
           $.proxy(settings.onChange, $menu.get())();
           $.proxy(settings.onShow, $menu.get())();

src/modules/dropdown.less

@@ -22,9 +22,6 @@
   line-height: 1;
   white-space: nowrap;
 }
-.ui.dropdown > .icon.down.triangle {
-  float: right;
-}
 
 .ui.dropdown .menu {
   position: absolute;
@@ -32,7 +29,7 @@
   top: 100%;
   background-color: #FFFFFF;
   min-width: 100%;
-  
+
   -webkit-box-shadow: 
     0px 2px 0px 0px rgba(0, 0, 0, 0.1),
     1px 0px 0px 0px rgba(0, 0, 0, 0.1) inset,
@@ -65,11 +62,11 @@
 
 /* Flyout Direction */
 .ui.dropdown .menu { 
-  left: 1px;
+  left: 0px;
 }
 .ui.dropdown:last-child .menu {
   left: auto;
-  right: 1px;
+  right: 0px;
 }
 
 .ui.dropdown .menu .item {
@@ -97,51 +94,76 @@
   border-top: none;
 }
 
+
+/*******************************
+            States
+*******************************/
+
+.ui.dropdown.visible {
+  border-bottom-left-radius: 0em !important;
+  border-bottom-right-radius: 0em !important;
+}
+.ui.dropdown .menu .item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+.ui.dropdown .menu .active.item {
+  font-weight: bold;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
 /*--------------
     Selection
 ---------------*/
 
 .ui.selection.dropdown {
+  cursor: pointer;
   display: inline-block;
 
   background-color: #FFFFFF;
-  border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 0.5em 1em;
 
   line-height: 1.33;
 
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -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);
+
   -webkit-border-radius: 0.3125em;
   -moz-border-radius: 0.3125em;
   border-radius: 0.3125em;
 }
-.ui.selection.dropdown > .icon {
+.ui.selection.dropdown > .dropdown.icon {
   float: right;
-  margin: 0.2em 0.2em 0.2em 0.5em;
+  margin: 0.2em 0em 0.2em 0.5em;
 }
 
-
-/*******************************
-            States
-*******************************/
-
-.ui.dropdown.visible {
-  border-bottom-left-radius: 0em;
-  border-bottom-right-radius: 0em;
+.ui.selection.dropdown,
+.ui.selection.dropdown .menu {
+  -webkit-transition: box-shadow 0.2s ease-out;
+  -moz-transition: box-shadow 0.2s ease-out;
+  -o-transition: box-shadow 0.2s ease-out;
+  -ms-transition: box-shadow 0.2s ease-out;
+  transition: box-shadow 0.2s ease-out;
 }
 
+.ui.selection.dropdown .menu {
+  -webkit-box-shadow: 0px 1px 0px 1px #EEEEEE;
+  -moz-box-shadow: 0px 1px 0px 1px #EEEEEE;
+  box-shadow: 0px 1px 0px 1px #EEEEEE;
+}
 
 .ui.selection.dropdown:hover,
 .ui.selection.dropdown.hover {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
 }
-.ui.dropdown .menu .item:hover {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-.ui.dropdown .menu .active.item {
-  font-weight: bold;
-}
-
-
-/*******************************
-           Variations
-*******************************/
+.ui.dropdown:hover .menu {
+  -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
+  -moz-box-shadow: 0px 1px 0px 1px #D3D3D3;
+  box-shadow: 0px 1px 0px 1px #D3D3D3;
+}