feat(dropdown): support native select elements directly

lubber-de · Jan 30, 2025 · 8138a27 · 8138a27
1 parent 0ba2f15
commit 8138a27
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 6 deletions.
diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -188,6 +188,7 @@
 .ui.dropdown .menu > .header:not(.ui) {
     color: @menuHeaderColor;
     font-size: @menuHeaderFontSize;
+    font-style: @menuHeaderFontStyle;
 }
 .ui.dropdown .menu > .divider {
     border-top: @menuDividerBorder;
@@ -386,11 +387,93 @@
 /*******************************
               Types
 *******************************/
-select.ui.dropdown {
-    height: @selectHeight;
-    padding: @selectPadding;
-    border: @selectBorder;
-    visibility: @selectVisibility;
+& when (@variationDropdownNative) {
+    select.ui.dropdown {
+        height: @selectHeight;
+        padding: @selectPadding;
+        border: @selectBorder;
+        visibility: @selectVisibility;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+
+        &:not([multiple]) {
+            border: none;
+            background: @selectIconBackground @selectIconBackgroundPosition;
+            background-color: @selectIconBackground;
+            background-size: @selectIconBackgroundSize;
+            padding-right: @selectPaddingRight;
+            &.selection {
+                background-position: @selectIconBackgroundPositionSelection;
+            }
+        }
+        &.selection {
+            border: @selectionBorder;
+            border-radius:@selectionBorderRadius;
+            &:hover {
+                border-color: @selectionHoverBorderColor;
+            }
+        }
+    }
+    & when (@supportIE) {
+        /* Hide arrow icon in IE browsers */
+        select.ui.dropdown::-ms-expand {
+            display: none;
+        }
+    }
+    select.ui.dropdown[multiple] {
+        height: 12em;
+        & > option {
+            padding: @itemPadding;
+            margin-left: -@selectMargin;
+            margin-right: -@selectMargin;
+
+            &:first-child {
+                margin-top: -@selectMargin;
+            }
+
+            &:last-child {
+                margin-bottom: -@selectMargin;
+            }
+        }
+    }
+    select.ui.dropdown > optgroup:not([disabled]) > option:not([disabled]):hover,
+    select.ui.dropdown > option:not([disabled]):hover {
+        background: @hoveredItemBackground;
+        color: @hoveredItemColor;
+    }
+    select.ui.dropdown option:checked {
+        background: @selectedBackground;
+        color: @selectedColor;
+        font-weight: @activeFontWeight;
+    }
+    select.ui.dropdown > optgroup:extend(.ui.dropdown .menu > .header) {
+    }
+    select.ui.dropdown > optgroup:extend(.ui.dropdown .menu > .header:not(.ui)) {
+    }
+    select.ui.dropdown hr:extend(.ui.dropdown .menu > .divider) {
+    }
+    select.ui.dropdown > optgroup {
+        &.divider > option:first-child {
+            border-top: @menuDividerBorder;
+        }
+        & > option {
+            text-transform: none;
+            font-size: @selectFontSizeOptgroupOption;
+            padding: @selectPaddingOptgroupOption;
+            margin-left: -@selectMarginOptgroupOption;
+            margin-right: -@selectMarginOptgroupOption;
+            &:first-child {
+                margin-top: @selectMarginOptgroupOption;
+            }
+        }
+    }
+
+    @supports selector(:has(.f)) {
+        select.ui.dropdown[multiple]:has(optgroup) {
+            padding: 0;
+        }
+    }
 }
 
 & when (@variationDropdownSelection) {

diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables
@@ -80,6 +80,7 @@
 @menuHeaderColor: @darkTextColor;
 @menuHeaderFontSize: @relative11px;
 @menuHeaderFontWeight: @bold;
+@menuHeaderFontStyle: @normal;
 @menuHeaderTextTransform: uppercase;
 @menuHeaderMargin: 1rem 0 0.75rem;
 @menuHeaderPadding: 0 @itemHorizontalPadding;
@@ -149,8 +150,26 @@
 /* <select> */
 @selectBorder: 1px solid @borderColor;
 @selectPadding: 0.5em;
+@selectMargin: @selectPadding;
+@selectPaddingRight: 1em;
+@selectPaddingOptgroupOption: (@selectPadding * 2);
+@selectMarginOptgroupOption: @selectPaddingOptgroupOption;
+@selectFontSizeOptgroupOption: 1.2em;
 @selectVisibility: visible;
-@selectHeight: 38px;
+@selectHeight: 2.5em;
+@selectMultipleHeight: 12em;
+
+
+/*
+ * Caret down icon taken from Font Awesome Free 5.15.4 by @fontawesome [https://fontawesome.com]
+ * License - https://fontawesome.com/license/free
+ */
+@selectIconBackground: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") no-repeat;
+@selectIconBackgroundColor: @selectionBackground;
+@selectIconBackgroundPosition: right top 50%;
+@selectIconBackgroundPositionSelection: right 0.7em top 50%;
+@selectIconBackgroundSize: 0.5em auto;
+
 
 @selectionTextColor: @textColor;
 
@@ -439,6 +458,7 @@
 @invertedSelectionBorderColor: @strongTransparentWhite;
 @invertedSelectionBorder: 1px solid @invertedSelectionBorderColor;
 @invertedSelectionBackground: @black;
+@invertedSelectIconBackgroundColor: @invertedSelectionBackground;
 @invertedSelectionTextColor: @invertedMenuColor;
 @invertedSelectionInputTextColor: @white;