Attempting to fix min-size issues with selection dropdown

build/less/definitions/collections/menu.less

@@ -102,12 +102,12 @@
 }
 
 /* Floated Content */
-.ui.menu .item.left,
-.ui.menu .menu.left {
+.ui.menu:not(.vertical) .item.left,
+.ui.menu:not(.vertical) .menu.left {
   float: left;
 }
-.ui.menu .item.right,
-.ui.menu .menu.right {
+.ui.menu:not(.vertical) .item.right,
+.ui.menu:not(.vertical) .menu.right {
   float: right;
 }
 
@@ -270,13 +270,15 @@
 /* Menu Position */
 .ui.menu .dropdown.item .menu {
   background: @dropdownBackground;
-  left: 1px;
+  left: 0px;
   margin: @dropdownMenuOffset 0px 0px;
   min-width: calc(100% - 1px);
   box-shadow: @dropdownBoxShadow;
 }
 .ui.menu .pointing.dropdown.item .menu {
   margin-top: @dropdownPointingDistance;
+  border-top-left-radius: 0em;
+  border-top-right-radius: 0em;
 }
 .ui.menu .simple.dropdown.item .menu {
   margin: 0px !important;
@@ -504,7 +506,7 @@
 .ui.vertical.menu .dropdown.item .menu {
   top: 0% !important;
   left: 100%;
-  margin: 0px 0px 0px @dropdownMenuOffset;
+  margin: @dropdownMenuOffset 0px 0px @dropdownMenuOffset;
   box-shadow: @dropdownVerticalBoxShadow;
 }
 .ui.vertical.menu .dropdown.item.active {

build/less/definitions/modules/sidebar.js

@@ -63,6 +63,7 @@ $.fn.sidebar = function(parameters) {
         element         = this,
         instance        = $module.data(moduleNamespace),
 
+        currentScroll,
         transitionEnd,
 
         module
@@ -296,8 +297,9 @@ $.fn.sidebar = function(parameters) {
             requestAnimationFrame(transition);
           }
           else {
-            $module.scrollTop(0);
             if(module.is.mobile()) {
+              $module.scrollTop(0);
+              currentScroll = $(window).scrollTop();
               window.scrollTo(0, 0);
             }
             module.remove.allVisible();
@@ -319,6 +321,7 @@ $.fn.sidebar = function(parameters) {
           ;
           module.verbose('Removing context push state', module.get.direction());
           module.unbind.clickaway();
+
           $transition
             .on(transitionEnd, function(event) {
               if( event.target == $transition[0] ) {
@@ -327,13 +330,18 @@ $.fn.sidebar = function(parameters) {
                 module.remove.direction();
                 module.remove.outward();
                 module.remove.visible();
+                if(module.is.mobile() && settings.returnScroll) {
+                  window.scrollTo(0, currentScroll);
+                }
                 $.proxy(callback, element)();
               }
             })
           ;
-          module.set.outward();
-          module.remove.active();
-          module.remove.pushed();
+          requestAnimationFrame(function() {
+            module.set.outward();
+            module.remove.active();
+            module.remove.pushed();
+          });
         },
 
         set: {
@@ -662,6 +670,7 @@ $.fn.sidebar.settings = {
   exclusive        : true,
 
   scrollLock       : false,
+  returnScroll     : false,
 
   onChange         : function(){},
   onShow           : function(){},

build/less/themes/packages/default/collections/menu.variables

@@ -125,13 +125,13 @@
 /* Dropdown */
 @dropdownBackground: #FFFFFF;
 @dropdownMenuOffset: 1px;
-@dropdownPointingDistance: 0.75em;
+@dropdownPointingDistance: 1px;
 
 @dropdownTextColor: @textColor;
 @dropdownTextColorHover: @darkTextColor;
 @dropdownIconMargin: 0em 0em 0em 1em;
 
-@dropdownBoxShadow: 0 1px 1px 1px @solidBorderColor;
+@dropdownBoxShadow: 0px 1px 0px 1px @borderColor;
 @dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor;
 
 /* Pointing Arrow */

build/minified/definitions/collections/breadcrumb.min.css

@@ -11,4 +11,4 @@
 * Released: 09/07/2014
 */
 
-.ui.breadcrumb{margin:1em 0;display:inline-block;vertical-align:middle}.ui.breadcrumb:first-child{margin-top:0}.ui.breadcrumb:last-child{margin-bottom:0}.ui.breadcrumb .divider{display:inline-block;opacity:.5;margin:0 .2rem;font-size:.9em;color:rgba(0,0,0,.4);vertical-align:baseline}.ui.breadcrumb a{color:#009fda}.ui.breadcrumb a:hover{color:#00b2f3}.ui.breadcrumb .icon.divider{font-size:.7em;vertical-align:middle}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;padding:.5em 1em}.ui.breadcrumb .active.section{font-weight:700}.ui.mini.breadcrumb{font-size:.7em}.ui.tiny.breadcrumb{font-size:.8em}.ui.small.breadcrumb{font-size:.875em}.ui.breadcrumb{font-size:1em}.ui.large.breadcrumb{font-size:1.125em}.ui.big.breadcrumb{font-size:1.25em}.ui.huge.breadcrumb{font-size:1.375em}.ui.massive.breadcrumb{font-size:1.5em}
+.ui.breadcrumb{margin:1em 0;display:inline-block;vertical-align:middle}.ui.breadcrumb:first-child{margin-top:0}.ui.breadcrumb:last-child{margin-bottom:0}.ui.breadcrumb .divider{display:inline-block;opacity:.5;margin:0 .2rem;font-size:.9em;color:rgba(0,0,0,.4);vertical-align:baseline}.ui.breadcrumb a{color:#009fda}.ui.breadcrumb a:hover{color:#00b2f3}.ui.breadcrumb .icon.divider{font-size:.7em;vertical-align:middle}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;padding:.5em 1em}.ui.breadcrumb .active.section{font-weight:700}.ui.mini.breadcrumb{font-size:.65em}.ui.tiny.breadcrumb{font-size:.7em}.ui.small.breadcrumb{font-size:.75em}.ui.breadcrumb{font-size:1em}.ui.large.breadcrumb{font-size:1.1em}.ui.big.breadcrumb{font-size:1.05em}.ui.huge.breadcrumb{font-size:1.3em}.ui.massive.breadcrumb{font-size:1.5em}

build/packaged/definitions/css/semantic.css

@@ -45,20 +45,6 @@
 /*------------------
      Load Default
 -------------------*/
-/*******************************
-          Breadcrumb
-*******************************/
-/*-------------------
-     Breadcrumb
---------------------*/
-/* Coupling */
-/*-------------------
-       States
---------------------*/
-/* Sizes */
-/*------------------
-     Load Theme
--------------------*/
 /*******************************
          Site Settings
 *******************************/
@@ -150,6 +136,20 @@
 /*---  Standard  ---*/
 /*---  Emotive  ---*/
 /*---  Neutrals  ---*/
+/*******************************
+          Breadcrumb
+*******************************/
+/*-------------------
+     Breadcrumb
+--------------------*/
+/* Coupling */
+/*-------------------
+       States
+--------------------*/
+/* Sizes */
+/*------------------
+     Load Theme
+-------------------*/
 /*------------------
      Load Site
 -------------------*/
@@ -224,25 +224,25 @@
            Variations
 *******************************/
 .ui.mini.breadcrumb {
-  font-size: 0.7em;
+  font-size: 0.65em;
 }
 .ui.tiny.breadcrumb {
-  font-size: 0.8em;
+  font-size: 0.7em;
 }
 .ui.small.breadcrumb {
-  font-size: 0.875em;
+  font-size: 0.75em;
 }
 .ui.breadcrumb {
   font-size: 1em;
 }
 .ui.large.breadcrumb {
-  font-size: 1.125em;
+  font-size: 1.1em;
 }
 .ui.big.breadcrumb {
-  font-size: 1.25em;
+  font-size: 1.05em;
 }
 .ui.huge.breadcrumb {
-  font-size: 1.375em;
+  font-size: 1.3em;
 }
 .ui.massive.breadcrumb {
   font-size: 1.5em;
@@ -2406,12 +2406,12 @@ body > .ui.grid:not(.page) {
   margin: 0em;
 }
 /* Floated Content */
-.ui.menu .item.left,
-.ui.menu .menu.left {
+.ui.menu:not(.vertical) .item.left,
+.ui.menu:not(.vertical) .menu.left {
   float: left;
 }
-.ui.menu .item.right,
-.ui.menu .menu.right {
+.ui.menu:not(.vertical) .item.right,
+.ui.menu:not(.vertical) .menu.right {
   float: right;
 }
 /*--------------
@@ -2550,14 +2550,16 @@ body > .ui.grid:not(.page) {
 /* Menu Position */
 .ui.menu .dropdown.item .menu {
   background: #ffffff;
-  left: 1px;
+  left: 0px;
   margin: 1px 0px 0px;
   min-width: -webkit-calc(99%);
   min-width: calc(99%);
-  box-shadow: 0 1px 1px 1px #dddddd;
+  box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1);
 }
 .ui.menu .pointing.dropdown.item .menu {
-  margin-top: 0.75em;
+  margin-top: 1px;
+  border-top-left-radius: 0em;
+  border-top-right-radius: 0em;
 }
 .ui.menu .simple.dropdown.item .menu {
   margin: 0px !important;
@@ -2749,7 +2751,7 @@ body > .ui.grid:not(.page) {
 .ui.vertical.menu .dropdown.item .menu {
   top: 0% !important;
   left: 100%;
-  margin: 0px 0px 0px 1px;
+  margin: 1px 0px 0px 1px;
   box-shadow: 0 0px 1px 1px #dddddd;
 }
 .ui.vertical.menu .dropdown.item.active {

build/packaged/definitions/javascript/semantic.js

@@ -11923,6 +11923,7 @@ $.fn.sidebar = function(parameters) {
         element         = this,
         instance        = $module.data(moduleNamespace),
 
+        currentScroll,
         transitionEnd,
 
         module
@@ -12156,8 +12157,9 @@ $.fn.sidebar = function(parameters) {
             requestAnimationFrame(transition);
           }
           else {
-            $module.scrollTop(0);
             if(module.is.mobile()) {
+              $module.scrollTop(0);
+              currentScroll = $(window).scrollTop();
               window.scrollTo(0, 0);
             }
             module.remove.allVisible();
@@ -12179,6 +12181,7 @@ $.fn.sidebar = function(parameters) {
           ;
           module.verbose('Removing context push state', module.get.direction());
           module.unbind.clickaway();
+
           $transition
             .on(transitionEnd, function(event) {
               if( event.target == $transition[0] ) {
@@ -12187,13 +12190,18 @@ $.fn.sidebar = function(parameters) {
                 module.remove.direction();
                 module.remove.outward();
                 module.remove.visible();
+                if(module.is.mobile() && settings.returnScroll) {
+                  window.scrollTo(0, currentScroll);
+                }
                 $.proxy(callback, element)();
               }
             })
           ;
-          module.set.outward();
-          module.remove.active();
-          module.remove.pushed();
+          requestAnimationFrame(function() {
+            module.set.outward();
+            module.remove.active();
+            module.remove.pushed();
+          });
         },
 
         set: {
@@ -12522,6 +12530,7 @@ $.fn.sidebar.settings = {
   exclusive        : true,
 
   scrollLock       : false,
+  returnScroll     : false,
 
   onChange         : function(){},
   onShow           : function(){},

build/uncompressed/definitions/collections/breadcrumb.css

@@ -45,20 +45,6 @@
 /*------------------
      Load Default
 -------------------*/
-/*******************************
-          Breadcrumb
-*******************************/
-/*-------------------
-     Breadcrumb
---------------------*/
-/* Coupling */
-/*-------------------
-       States
---------------------*/
-/* Sizes */
-/*------------------
-     Load Theme
--------------------*/
 /*******************************
          Site Settings
 *******************************/
@@ -150,6 +136,20 @@
 /*---  Standard  ---*/
 /*---  Emotive  ---*/
 /*---  Neutrals  ---*/
+/*******************************
+          Breadcrumb
+*******************************/
+/*-------------------
+     Breadcrumb
+--------------------*/
+/* Coupling */
+/*-------------------
+       States
+--------------------*/
+/* Sizes */
+/*------------------
+     Load Theme
+-------------------*/
 /*------------------
      Load Site
 -------------------*/
@@ -224,25 +224,25 @@
            Variations
 *******************************/
 .ui.mini.breadcrumb {
-  font-size: 0.7em;
+  font-size: 0.65em;
 }
 .ui.tiny.breadcrumb {
-  font-size: 0.8em;
+  font-size: 0.7em;
 }
 .ui.small.breadcrumb {
-  font-size: 0.875em;
+  font-size: 0.75em;
 }
 .ui.breadcrumb {
   font-size: 1em;
 }
 .ui.large.breadcrumb {
-  font-size: 1.125em;
+  font-size: 1.1em;
 }
 .ui.big.breadcrumb {
-  font-size: 1.25em;
+  font-size: 1.05em;
 }
 .ui.huge.breadcrumb {
-  font-size: 1.375em;
+  font-size: 1.3em;
 }
 .ui.massive.breadcrumb {
   font-size: 1.5em;

build/uncompressed/definitions/collections/menu.css

@@ -275,12 +275,12 @@
   margin: 0em;
 }
 /* Floated Content */
-.ui.menu .item.left,
-.ui.menu .menu.left {
+.ui.menu:not(.vertical) .item.left,
+.ui.menu:not(.vertical) .menu.left {
   float: left;
 }
-.ui.menu .item.right,
-.ui.menu .menu.right {
+.ui.menu:not(.vertical) .item.right,
+.ui.menu:not(.vertical) .menu.right {
   float: right;
 }
 /*--------------
@@ -419,14 +419,16 @@
 /* Menu Position */
 .ui.menu .dropdown.item .menu {
   background: #ffffff;
-  left: 1px;
+  left: 0px;
   margin: 1px 0px 0px;
   min-width: -webkit-calc(99%);
   min-width: calc(99%);
-  box-shadow: 0 1px 1px 1px #dddddd;
+  box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1);
 }
 .ui.menu .pointing.dropdown.item .menu {
-  margin-top: 0.75em;
+  margin-top: 1px;
+  border-top-left-radius: 0em;
+  border-top-right-radius: 0em;
 }
 .ui.menu .simple.dropdown.item .menu {
   margin: 0px !important;
@@ -618,7 +620,7 @@
 .ui.vertical.menu .dropdown.item .menu {
   top: 0% !important;
   left: 100%;
-  margin: 0px 0px 0px 1px;
+  margin: 1px 0px 0px 1px;
   box-shadow: 0 0px 1px 1px #dddddd;
 }
 .ui.vertical.menu .dropdown.item.active {

build/uncompressed/definitions/modules/sidebar.js

@@ -63,6 +63,7 @@ $.fn.sidebar = function(parameters) {
         element         = this,
         instance        = $module.data(moduleNamespace),
 
+        currentScroll,
         transitionEnd,
 
         module
@@ -296,8 +297,9 @@ $.fn.sidebar = function(parameters) {
             requestAnimationFrame(transition);
           }
           else {
-            $module.scrollTop(0);
             if(module.is.mobile()) {
+              $module.scrollTop(0);
+              currentScroll = $(window).scrollTop();
               window.scrollTo(0, 0);
             }
             module.remove.allVisible();
@@ -319,6 +321,7 @@ $.fn.sidebar = function(parameters) {
           ;
           module.verbose('Removing context push state', module.get.direction());
           module.unbind.clickaway();
+
           $transition
             .on(transitionEnd, function(event) {
               if( event.target == $transition[0] ) {
@@ -327,13 +330,18 @@ $.fn.sidebar = function(parameters) {
                 module.remove.direction();
                 module.remove.outward();
                 module.remove.visible();
+                if(module.is.mobile() && settings.returnScroll) {
+                  window.scrollTo(0, currentScroll);
+                }
                 $.proxy(callback, element)();
               }
             })
           ;
-          module.set.outward();
-          module.remove.active();
-          module.remove.pushed();
+          requestAnimationFrame(function() {
+            module.set.outward();
+            module.remove.active();
+            module.remove.pushed();
+          });
         },
 
         set: {
@@ -662,6 +670,7 @@ $.fn.sidebar.settings = {
   exclusive        : true,
 
   scrollLock       : false,
+  returnScroll     : false,
 
   onChange         : function(){},
   onShow           : function(){},

server/documents/collections/form.html.eco

@@ -173,7 +173,7 @@ themes      : ['Default', 'GitHub']
     </div>
   </div>
 
-  <div class="no example">
+  <div class="example">
     <h4 class="ui header">Checkbox</h4>
     <p><a href="/modules/checkbox.html">UI Checkboxes</a> are styled forms of standard form checkboxes.</p>
     <div class="evaluated code" data-type="javascript" data-label="true">
@@ -204,7 +204,7 @@ themes      : ['Default', 'GitHub']
     </div>
   </div>
 
-  <div class="no form example">
+  <div class="form example">
     <h4 class="ui header">Select</h4>
     <p>A selection dropdown, a type of <a href="/modules/dropdown.html">ui dropdown</a> can be used to allow for a selection from multiple choices</p>
     <div class="evaluated code" data-type="javascript" data-label="true">
@@ -225,7 +225,7 @@ themes      : ['Default', 'GitHub']
     </div>
   </div>
 
-  <div class="no example">
+  <div class="example">
     <h4 class="ui header">Radio Box</h4>
     <p>Radio boxes are styled forms of standard form radio controls.</p>
     <div class="evaluated code" data-type="javascript" data-label="true">

server/documents/modules/dropdown.html.eco

@@ -78,6 +78,66 @@ themes      : ['Default']
         </div>
       </div>
     </div>
+    <div class="another dropdown example">
+      <div class="ui selection dropdown">
+        <input type="hidden" name="state">
+        <div class="default text">State</div>
+        <i class="dropdown icon"></i>
+        <div class="menu">
+          <div class="item" value="AL">Alabama</div>
+          <div class="item" value="AK">Alaska</div>
+          <div class="item" value="AZ">Arizona</div>
+          <div class="item" value="AR">Arkansas</div>
+          <div class="item" value="CA">California</div>
+          <div class="item" value="CO">Colorado</div>
+          <div class="item" value="CT">Connecticut</div>
+          <div class="item" value="DE">Delaware</div>
+          <div class="item" value="DC">District Of Columbia</div>
+          <div class="item" value="FL">Florida</div>
+          <div class="item" value="GA">Georgia</div>
+          <div class="item" value="HI">Hawaii</div>
+          <div class="item" value="ID">Idaho</div>
+          <div class="item" value="IL">Illinois</div>
+          <div class="item" value="IN">Indiana</div>
+          <div class="item" value="IA">Iowa</div>
+          <div class="item" value="KS">Kansas</div>
+          <div class="item" value="KY">Kentucky</div>
+          <div class="item" value="LA">Louisiana</div>
+          <div class="item" value="ME">Maine</div>
+          <div class="item" value="MD">Maryland</div>
+          <div class="item" value="MA">Massachusetts</div>
+          <div class="item" value="MI">Michigan</div>
+          <div class="item" value="MN">Minnesota</div>
+          <div class="item" value="MS">Mississippi</div>
+          <div class="item" value="MO">Missouri</div>
+          <div class="item" value="MT">Montana</div>
+          <div class="item" value="NE">Nebraska</div>
+          <div class="item" value="NV">Nevada</div>
+          <div class="item" value="NH">New Hampshire</div>
+          <div class="item" value="NJ">New Jersey</div>
+          <div class="item" value="NM">New Mexico</div>
+          <div class="item" value="NY">New York</div>
+          <div class="item" value="NC">North Carolina</div>
+          <div class="item" value="ND">North Dakota</div>
+          <div class="item" value="OH">Ohio</div>
+          <div class="item" value="OK">Oklahoma</div>
+          <div class="item" value="OR">Oregon</div>
+          <div class="item" value="PA">Pennsylvania</div>
+          <div class="item" value="RI">Rhode Island</div>
+          <div class="item" value="SC">South Carolina</div>
+          <div class="item" value="SD">South Dakota</div>
+          <div class="item" value="TN">Tennessee</div>
+          <div class="item" value="TX">Texas</div>
+          <div class="item" value="UT">Utah</div>
+          <div class="item" value="VT">Vermont</div>
+          <div class="item" value="VA">Virginia</div>
+          <div class="item" value="WA">Washington</div>
+          <div class="item" value="WV">West Virginia</div>
+          <div class="item" value="WI">Wisconsin</div>
+          <div class="item" value="WY">Wyoming</div>
+        </div>
+      </div>
+    </div>
 
 
     <div class="button example">

server/files/javascript/semantic.js

@@ -311,7 +311,7 @@ semantic.ready = function() {
         $annotation = $example.find('.annotation'),
         $code       = $annotation.find('.code'),
         $header     = $example.not('.another').children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
-        $ignored    = $('i.code:first-child, .code, .existing, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
+        $ignored    = $('i.code:first-child, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
         $demo       = $example.children().not($header).not($ignored),
         code        = ''
       ;

src/definitions/collections/menu.less

@@ -272,7 +272,7 @@
   background: @dropdownBackground;
   left: 0px;
   margin: @dropdownMenuOffset 0px 0px;
-  min-width: calc(100% - 1px);
+  width: ~"calc(100% - 1px)";
   box-shadow: @dropdownBoxShadow;
 }
 .ui.menu .pointing.dropdown.item .menu {

src/definitions/modules/dropdown.js

@@ -748,6 +748,7 @@ $.fn.dropdown = function(parameters) {
           if( module.is.hidden() ) {
             module.hideOthers();
             module.set.active();
+            // module.set.width();
             module.animate.show(function() {
               if( module.can.click() ) {
                 module.bind.intent();

src/definitions/modules/dropdown.less

@@ -57,6 +57,7 @@
   text-shadow: none;
 
   box-shadow: @menuBoxShadow;
+  border: @menuBorder;
   border-radius: @menuBorderRadius;
   transition: @menuTransition;
   z-index: @menuZIndex;
@@ -196,11 +197,10 @@
   display: @selectionDisplay;
   padding: @selectionVerticalPadding @selectionHorizontalPadding;
   color: @selectionTextColor;
-  box-shadow: @selectionBoxShadow !important;
-  border-radius: @selectionBorderRadius !important;
-
-  /* Matches selection dropdown height to input height */
-  border-top: 1px solid transparent;
+  box-shadow: @selectionBoxShadow;
+  border: @selectionBorder;
+  border-radius: @selectionBorderRadius;
+  transition: @selectionTransition;
 }
 .ui.selection.dropdown.active {
   transform: rotateZ(0deg);
@@ -220,23 +220,58 @@
   overflow-y: auto;
   max-height: @selectionMenuMaxHeight;
   box-shadow: @selectionMenuBoxShadow;
+  transition: @selectionMenuTransition;
+  border-top: none !important;
+  width: auto;
+  margin: 0px -1px;
 }
 .ui.selection.dropdown .menu:after,
 .ui.selection.dropdown .menu:before {
   display: none;
 }
+.ui.selection.dropdown .menu .item {
+  padding-left: @selectionHorizontalPadding !important;
+  padding-right: @selectionHorizontalPadding !important;
+  white-space: @selectionMenuWhiteSpace;
+}
 
 /* Hover */
 .ui.selection.dropdown:hover {
-  box-shadow: @selectionHoverBoxShadow !important;
+  border: @selectionHoverBorder;
+  box-shadow: @selectionHoverBoxShadow;
+}
+
+/* Visible Hover */
+.ui.selection.visible.dropdown:hover {
+  border: @selectionVisibleHoverBorder;
+  box-shadow: @selectionVisibleHoverBoxShadow;
 }
-.ui.selection.dropdown:hover .menu {
-  box-shadow: @selectionHoverMenuBoxShadow;
+.ui.selection.visible.dropdown:hover .menu {
+  border: @selectionVisibleHoverMenuBorder;
+  box-shadow: @selectionVisibleHoverMenuBoxShadow;
 }
-.ui.selection.dropdown:hover > .dropdown.icon {
-  opacity: @selectionHoverIconOpacity;
+
+/* Visible */
+.ui.selection.dropdown.active {
+  border: @selectionVisibleBorder;
+  box-shadow: @selectionVisibleBoxShadow;
+}
+.ui.active.selection.dropdown > .dropdown.icon {
+  opacity: @selectionVisibleIconOpacity;
 }
 
+/* Active Item */
+.ui.selection.active.dropdown .text:not(.default),
+.ui.selection.visible.dropdown .text:not(.default) {
+  font-weight: @selectionVisibleTextFontWeight;
+  color: @selectionVisibleTextColor;
+}
+/* Don't Repeat Active Item */
+.ui.selection.dropdown .menu .item.active {
+  display: none;
+}
+
+
 /* Connecting Border */
 .ui.active.selection.dropdown,
 .ui.visible.selection.dropdown {
@@ -244,10 +279,6 @@
   border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
 }
 
-.ui.active.selection.dropdown > .dropdown.icon {
-  opacity: @selectionActiveIconOpacity;
-}
-
 /*--------------
      Inline
 ---------------*/

src/themes/packages/default/elements/input.variables

@@ -19,7 +19,7 @@
 @border: @borderWidth solid rgba(0, 0, 0, 0.15);
 @boxShadow: none;
 
-@borderRadius: 0.3125em;
+@borderRadius: 0.325em;
 @transition:
   background-color 0.3s ease-out,
   box-shadow 0.2s ease,

src/themes/packages/default/modules/dropdown.variables

@@ -34,12 +34,8 @@
 @menuTop: 100%;
 @menuWrap: nowrap;
 
-@menuBorderShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-@menuShadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
-@menuBoxShadow:
-  @menuBorderShadow,
-  @menuShadow
-;
+@menuBorder: 1px solid @borderColor;
+@menuBoxShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
 @menuBorderRadius: 0em 0em @borderRadius @borderRadius;
 @menuTransition: opacity 0.2s ease;
 @menuZIndex: 11;
@@ -77,22 +73,44 @@
 @selectionVerticalPadding: 0.8em;
 @selectionHorizontalPadding: 1.1em;
 @selectionTextColor: @textColor;
-@selectionBoxShadow: 0px 0px 0px 1px @borderColor;
+@selectionBoxShadow: none;
+@selectionBorder: 1px solid @borderColor;
 @selectionBorderRadius: @borderRadius;
 @selectionIconOpacity: 0.8;
 @selectionIconTransition: opacity 0.2s ease;
 @selectionIconMargin: 0em 0em 0em 1em;
-@selectionMenuMaxHeight: 312px;
-@selectionMenuBoxShadow: 0px 1px 0px 1px #E0E0E0;
+@selectionMenuMaxHeight: 280px;
+@selectionMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
 @selectionMenuItemBoxShadow: none;
 
-/* Selection Hover */
-@selectionHoverBoxShadow: 0px 0px 0px 1px @selectedBorderColor;
-@selectionHoverMenuBoxShadow: 0px 1px 0px 1px #D3D3D3;
-@selectionHoverIconOpacity: 1;
+@selectionTransition:
+  @transition,
+  box-shadow 0.2s @defaultEasing,
+  border 0.2s @defaultEasing
+;
+@selectionMenuTransition:
+  box-shadow 0.2s @defaultEasing,
+  border 0.2s @defaultEasing
+;
+
+/* Hover */
+@selectionHoverBorder: 1px solid @selectedBorderColor;
+@selectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
+
+/* Visible */
+@selectionVisibleBorder: 1px solid @borderColor;
+@selectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
+@selectionVisibleTextFontWeight: bold;
+@selectionVisibleTextColor: @selectedTextColor;
+
+/* Visible Hover */
+@selectionVisibleHoverBorder: 1px solid @selectedBorderColor;
+@selectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
+@selectionVisibleHoverMenuBorder: 1px solid @selectedBorderColor;
+@selectionVisibleHoverMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
 
 @selectionVisibleConnectingBorder: 0em;
-@selectionActiveIconOpacity: 1;
+@selectionVisibleIconOpacity: 1;
 
 /* Inline */
 @inlineIconMargin: 0em 0.5em 0em 0.25em;