fomantic-ui 2.9.3-beta.63 → 2.9.3-beta.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.3-beta.63+26b15d2",
+  "version": "2.9.3-beta.64+a8dd05e",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/modules/dropdown.less

@@ -435,20 +435,24 @@ select.ui.dropdown {
     }
 
     /* Selection Menu */
-    .ui.selection.dropdown .menu {
+    .ui.selection.dropdown:not(.unlimited) .menu {
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        border-top-width: 0 !important;
+    }
+    .ui.selection.dropdown .menu {
         outline: none;
         margin: 0 -@menuBorderWidth;
         min-width: @menuMinWidth;
         width: @menuMinWidth;
-        border-radius: @selectionMenuBorderRadius;
         box-shadow: @selectionMenuBoxShadow;
         transition: @selectionMenuTransition;
     }
+    .ui.selection.dropdown:not(.pointing):not(.floating) .menu {
+        border-top-width: 0;
+        border-radius: @selectionMenuBorderRadius;
+    }
     .ui.selection.dropdown .menu::after,
     .ui.selection.dropdown .menu::before {
         display: none;
@@ -471,7 +475,7 @@ select.ui.dropdown {
                 max-height: @selectionMobileMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionMobileMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -492,7 +496,7 @@ select.ui.dropdown {
                 max-height: @selectionTabletMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionTabletMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -513,7 +517,7 @@ select.ui.dropdown {
                 max-height: @selectionComputerMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionComputerMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -534,7 +538,7 @@ select.ui.dropdown {
                 max-height: @selectionWidescreenMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionWidescreenMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -554,6 +558,12 @@ select.ui.dropdown {
         white-space: normal;
         word-wrap: normal;
     }
+    & when (@variationDropdownPointing) or (@variationDropdownFloating) {
+        .ui.selection.pointing.dropdown .menu > .item:first-child,
+        .ui.selection.floating.dropdown .menu > .item:first-child {
+            border-top: none;
+        }
+    }
 
     /* User Item */
     .ui.selection.dropdown .menu > .hidden.addition.item {
@@ -621,7 +631,7 @@ select.ui.dropdown {
     }
 
     /* Connecting Border */
-    .ui.active.selection.dropdown {
+    .ui.active.selection.dropdown:not(.pointing):not(.floating) {
         border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
         border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
     }
@@ -749,29 +759,29 @@ select.ui.dropdown {
     }
 
     /* Search Menu */
-    .ui.search.dropdown .menu {
+    .ui.search.dropdown:not(.unlimited) .menu {
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
     }
     @media only screen and (max-width: @largestMobileScreen) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchMobileMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @tabletBreakpoint) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchTabletMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @computerBreakpoint) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchComputerMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchWidescreenMaxMenuHeight;
         }
     }
@@ -1283,9 +1293,9 @@ select.ui.dropdown {
 
     & when (@variationDropdownSelection) {
         /* Selection */
-        .ui.ui.upward.selection.dropdown .menu {
-            border-top-width: @menuBorderWidth !important;
-            border-bottom-width: 0 !important;
+        .ui.ui.upward.selection.dropdown:not(.pointing):not(.floating) .menu {
+            border-top-width: @menuBorderWidth;
+            border-bottom-width: 0;
             box-shadow: @upwardSelectionMenuBoxShadow;
             border-radius: @upwardSelectionMenuBorderRadius;
         }
@@ -1294,21 +1304,23 @@ select.ui.dropdown {
         }
 
         /* Active Upward */
-        .ui.active.upward.selection.dropdown {
+        .ui.active.upward.selection.dropdown:not(.pointing):not(.floating) {
             border-radius: @upwardSelectionVisibleBorderRadius !important;
         }
 
         /* Visible Upward */
         .ui.upward.selection.dropdown.visible {
             box-shadow: @upwardSelectionVisibleBoxShadow;
-            border-radius: @upwardSelectionVisibleBorderRadius !important;
+            &:not(.pointing):not(.floating) {
+                border-radius: @upwardSelectionVisibleBorderRadius !important;
+            }
         }
 
         /* Visible Hover Upward */
         .ui.upward.active.selection.dropdown:hover {
             box-shadow: @upwardSelectionActiveHoverBoxShadow;
         }
-        .ui.upward.active.selection.dropdown:hover .menu {
+        .ui.upward.active.selection.dropdown:hover:not(.pointing):not(.floating) .menu {
             box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
         }
     }
@@ -1623,6 +1635,22 @@ select.ui.dropdown {
         z-index: @pointingArrowZIndex;
     }
 
+    @supports selector(:has(.f)) {
+        .ui.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
+        .ui.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
+            background: @hoveredItemBackground;
+        }
+        .ui.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
+        .ui.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
+            background: @selectedBackground;
+        }
+    }
+
+    & when (@variationDropdownSelection) {
+        .ui.selection.pointing.dropdown > .menu::after {
+            box-shadow: @pointingArrowBoxShadowSelection;
+        }
+    }
     .ui.pointing.dropdown > .menu:not(.hidden)::after {
         top: @pointingArrowOffset;
         left: 50%;
@@ -1768,6 +1796,12 @@ select.ui.dropdown {
         margin: @pointingArrowOffset 0 0;
     }
 
+    & when (@variationDropdownSelection) {
+        .ui.selection.pointing.upward.dropdown .menu::after {
+            box-shadow: @pointingUpwardArrowBoxShadowSelection;
+        }
+    }
+
     /* Right Pointing Upward */
     .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
         top: auto !important;
@@ -1795,6 +1829,19 @@ select.ui.dropdown {
     }
 }
 
+& when (@variationDropdownPointing) or (@variationDropdownFloating) {
+    .ui.floating.dropdown .menu .item:first-child,
+    .ui.pointing.dropdown .menu .item:first-child {
+        border-top-left-radius: @borderRadius;
+        border-top-right-radius: @borderRadius;
+    }
+    .ui.floating.dropdown .menu .item:last-child,
+    .ui.pointing.dropdown .menu .item:last-child {
+        border-bottom-left-radius: @borderRadius;
+        border-bottom-right-radius: @borderRadius;
+    }
+}
+
 /* --------------------
         Sizes
 --------------------- */
@@ -2008,6 +2055,21 @@ select.ui.dropdown {
             background: @invertedPointingArrowBackground;
             box-shadow: @invertedPointingArrowBoxShadow;
         }
+        & when (@variationDropdownUpward) {
+            .ui.inverted.upward.pointing.dropdown > .menu::after {
+                box-shadow: @invertedPointingUpwardArrowBoxShadow;
+            }
+        }
+        @supports selector(:has(.f)) {
+            .ui.inverted.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
+            .ui.inverted.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
+                background: @invertedHoveredItemBackground;
+            }
+            .ui.inverted.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
+            .ui.inverted.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
+                background: @invertedSelectedBackground;
+            }
+        }
     }
 }
 

package/src/definitions/modules/slider.js

@@ -674,7 +674,8 @@
                         var
                             step = module.get.step(),
                             min = module.get.min(),
-                            quotient = step === 0 ? 0 : Math.floor((settings.max - min) / step),
+                            precision = module.get.precision(),
+                            quotient = step === 0 ? 0 : Math.floor(Math.round(((settings.max - min) / step) * precision) / precision),
                             remainder = step === 0 ? 0 : (settings.max - min) % step
                         ;
 
@@ -684,7 +685,9 @@
                         return settings.step;
                     },
                     numLabels: function () {
-                        var value = Math.round((module.get.max() - module.get.min()) / (module.get.step() === 0 ? 1 : module.get.step()));
+                        var step = module.get.step(),
+                            precision = module.get.precision(),
+                            value = Math.round(((module.get.max() - module.get.min()) / (step === 0 ? 1 : step)) * precision) / precision;
                         module.debug('Determined that there should be ' + value + ' labels');
 
                         return value;
@@ -699,7 +702,9 @@
 
                         switch (settings.labelType) {
                             case settings.labelTypes.number: {
-                                return Math.round(((value * (module.get.step() === 0 ? 1 : module.get.step())) + module.get.min()) * precision) / precision;
+                                var step = module.get.step();
+
+                                return Math.round(((value * (step === 0 ? 1 : step)) + module.get.min()) * precision) / precision;
                             }
                             case settings.labelTypes.letter: {
                                 return alphabet[value % 26];

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

@@ -292,7 +292,7 @@
 @additionZIndex: @hoveredZIndex + 1;
 
 /* Hovered */
-@hoveredItemBackground: @transparentBlack;
+@hoveredItemBackground: #f2f2f2;
 @hoveredItemColor: @selectedTextColor;
 @hoveredZIndex: @menuZIndex + 2;
 
@@ -311,7 +311,7 @@
 @activeItemColor: @selectedTextColor;
 
 /* Selected */
-@selectedBackground: @subtleTransparentBlack;
+@selectedBackground: #f7f7f7;
 @selectedColor: @selectedTextColor;
 
 /* Clearable */
@@ -382,6 +382,7 @@
 @pointingArrowBackground: @white;
 @pointingArrowZIndex: 2;
 @pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0 0 @menuBorderColor;
+@pointingArrowBoxShadowSelection: -@menuBorderWidth -@menuBorderWidth 0 0 @selectionVisibleBorderColor;
 @pointingArrowSize: @relative7px;
 
 @pointingMenuDistance: @mini;
@@ -390,6 +391,7 @@
 /* Pointing Upward */
 @pointingUpwardMenuBorderRadius: @borderRadius;
 @pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0 0 @menuBorderColor;
+@pointingUpwardArrowBoxShadowSelection: @menuBorderWidth @menuBorderWidth 0 0 @selectionVisibleBorderColor;
 
 /* Scrollhint */
 @scrollhintWidth: 0.25em;
@@ -416,15 +418,16 @@
 
 @invertedPointingArrowBackground: @black;
 @invertedPointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0 0 @invertedMenuBorderColor;
+@invertedPointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0 0 @invertedMenuBorderColor;
 
-@invertedHoveredItemBackground: @transparentWhite;
+@invertedHoveredItemBackground: #2d2e2f;
 @invertedHoveredItemColor: @invertedMenuColor;
 
 @invertedActiveItemBackground: transparent;
 @invertedActiveItemColor: @invertedMenuColor;
 @invertedActiveItemBoxShadow: none;
 
-@invertedSelectedBackground: @strongTransparentWhite;
+@invertedSelectedBackground: #3d3e3f;
 @invertedSelectedColor: @invertedMenuColor;
 
 @invertedMenuHeaderColor: @white;