@finqu/cool 1.2.29 → 2.0.2

package/scss/_dropdown.scss

@@ -1,233 +1,165 @@
-// Dropdown
-// ---------------------------------------------------------------------------------------------------------------
-
-.dropup,
-.dropright,
-.dropdown,
-.dropleft {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-
-    .dropdown-trigger {
-        > .icon {
-            pointer-events: none;
-        }
-    }
-}
-
-.dropdown-toggle {
-    @include caret-down;
-
-    &:after {
-        margin-top: -2px;
-    }
-}
-
-.dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: $zindex-dropdown;
-    display: none;
-    float: left;
-    min-width: $dropdown-min-width;
-    padding: $dropdown-padding-y 0;
-    margin: $dropdown-spacer 0 0;
-    font-size: $font-size-base;
-    text-align: left;
-    list-style: none;
-    background-color: $dropdown-bg;
-    background-clip: padding-box;
-    border: $dropdown-border-width solid $dropdown-border-color;
-    color: $dropdown-color;
-    box-sizing: border-box;
-    overflow: hidden;
-    box-shadow: $dropdown-box-shadow;
-    border-radius: $dropdown-border-radius;
-    font-family: $font-family-sans-serif;
-
-    // IE11 fix for flexboxes
-    @media all and (-ms-high-contrast:none) {
-        max-width: 100%;
-    }
-}
-
-.dropdown-menu-right {
-    right: 0;
-    left: auto;
-}
-
-.dropdown-menu-text-wrap {
-    .dropdown-item {
-        white-space: normal;
-    }
-}
-
-.dropup {
-    .dropdown-menu {
-        top: auto;
-        bottom: 100%;
-        margin-top: 0;
-        margin-bottom: $dropdown-spacer;
-    }
-
-    .dropdown-toggle {
-        @include caret-up;
-    }
-}
-
-.dropright {
-    .dropdown-menu {
-        top: 0;
-        right: auto;
-        left: 100%;
-        margin-top: 0;
-        margin-left: $dropdown-spacer;
-    }
-
-    .dropdown-toggle {
-        @include caret-right;
-    }
-}
-
-.dropleft {
-    .dropdown-menu {
-        top: 0;
-        right: 100%;
-        left: auto;
-        margin-top: 0;
-        margin-right: $dropdown-spacer;
-    }
-
-    .dropdown-toggle {
-        @include caret-left;
-    }
-}
-
-.dropdown-menu {
-    &[x-placement^="top"],
-    &[x-placement^="right"],
-    &[x-placement^="bottom"],
-    &[x-placement^="left"] {
-        right: auto;
-        bottom: auto;
-    }
-}
-
-.dropdown-divider {
-    @include nav-divider($dropdown-divider-bg);
-}
-
-.dropdown-item {
-    display: block;
-    width: 100%;
-    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-    clear: both;
-    font-weight: $font-weight-normal;
-    color: $dropdown-link-color;
-    text-align: inherit;
-    white-space: nowrap;
-    background-color: transparent;
-    border: 0;
-    box-sizing: border-box;
-    appearance: none;
-    font-family: $font-family-sans-serif;
-
-    &:hover,
-    &:focus {
-        color: $dropdown-link-hover-color;
-        text-decoration: none;
-        cursor: pointer;
-        @include gradient-bg($dropdown-link-hover-bg);
-    }
-
-    &.active,
-    &:active {
-        color: $dropdown-link-active-color;
-        text-decoration: none;
-        @include gradient-bg($dropdown-link-active-bg);
-    }
-
-    &.disabled,
-    &:disabled {
-        color: $dropdown-link-disabled-color;
-        background: transparent;
-        cursor: default;
-    }
-
-    .icon + span {
-        margin-left: $icon-spacer;
-    }
-}
-
-button.dropdown-item {
-    cursor: pointer;
-    outline: 0;
-}
-
-.dropdown-menu.show {
-    display: block;
-}
-
-.dropdown-header {
-    display: block;
-    padding-top: $dropdown-item-padding-y;
-    padding-right: $dropdown-item-padding-x;
-    padding-bottom: $dropdown-item-padding-y + $nav-divider-margin-y;
-    padding-left: $dropdown-item-padding-x;
-    margin-top: 0;
-    margin-bottom: $nav-divider-margin-y;
-    font-size: $font-size-sm;
-    color: $dropdown-header-color;
-    white-space: nowrap;
-    border-bottom: 1px solid $nav-divider-color;
-}
-
-.dropdown-item-text {
-    display: block;
-    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-    color: $dropdown-link-color;
-}
-
-.dropdown-scrollable-content {
-    position: relative;
-}
-
-.dropdown-list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-
-    li {
-
-        a {
-            display: block;
-            width: 100%;
-            font-weight: $font-weight-normal;
-            color: $dropdown-link-color;
-            white-space: nowrap;
-            box-sizing: border-box;
-
-            &:hover,
-            &:focus {
-                color: $dropdown-link-hover-color;
-                text-decoration: none;
-                @include gradient-bg($dropdown-link-hover-bg);
-            }
-
-            &.active,
-            &:active {
-                color: $dropdown-link-active-color;
-                text-decoration: none;
-                @include gradient-bg($dropdown-link-active-bg);
-            }
-
-            &.disabled,
-            &:disabled {
-                color: $dropdown-link-disabled-color;
-                background-color: transparent;
-            }
-        }
-    }
-}
+@use "variables" as *;
+/* Dropdown ========================================================================== */
+
+@mixin cool-dropdown {
+    .dropdown {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+
+        .dropdown-trigger {
+            > .icon {
+                pointer-events: none;
+            }
+        }
+    }
+
+    .dropdown-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: var(--cool-zindex-dropdown);
+        display: none;
+        float: left;
+        min-width: var(--cool-dropdown-width);
+        padding: var(--cool-dropdown-padding-y) 0;
+        margin: 0;
+        font-size: var(--cool-dropdown-font-size);
+        text-align: left;
+        list-style: none;
+        background-color: var(--cool-dropdown-bg);
+        background-clip: padding-box;
+        border: var(--cool-dropdown-border-width) solid var(--cool-dropdown-border-color);
+        color: var(--cool-dropdown-color);
+        overflow: hidden;
+        box-shadow: var(--cool-dropdown-box-shadow);
+        border-radius: var(--cool-dropdown-border-radius);
+        font-family: var(--cool-font-family-sans-serif);
+    }
+
+    .dropdown-divider {
+        height: 0;
+        margin: var(--cool-nav-divider-margin-y) 0;
+        overflow: hidden;
+        border-top: var(--cool-dropdown-border-width) solid var(--cool-dropdown-divider-bg);
+    }
+
+    .dropdown-content {
+        width: 100%;
+        padding: var(--cool-dropdown-item-padding-y) var(--cool-dropdown-item-padding-x);
+    }
+
+    .dropdown-item {
+        display: block;
+        width: 100%;
+        padding: var(--cool-dropdown-item-padding-y) var(--cool-dropdown-item-padding-x);
+        color: var(--cool-dropdown-link-color);
+        font-family: var(--cool-font-family-sans-serif);
+        font-weight: var(--cool-font-weight-normal);
+        line-height: var(--cool-dropdown-line-height);
+        text-align: inherit;
+        background-color: transparent;
+        appearance: none;
+        white-space: nowrap;
+        border: 0;
+
+        &:hover,
+        &:focus {
+            color: var(--cool-dropdown-link-hover-color);
+            text-decoration: none;
+            cursor: pointer;
+            background-color: var(--cool-dropdown-link-hover-bg);
+        }
+
+        &.active,
+        &:active {
+            color: var(--cool-dropdown-link-active-color);
+            text-decoration: none;
+            background-color: var(--cool-dropdown-link-active-bg);
+        }
+
+        &.disabled,
+        &:disabled {
+            color: var(--cool-dropdown-link-disabled-color);
+            background: transparent;
+            cursor: default;
+        }
+
+        .icon + span {
+            margin-left: var(--cool-icon-spacer);
+        }
+    }
+
+    button.dropdown-item {
+        cursor: pointer;
+        outline: 0;
+    }
+
+    .dropdown-menu.show {
+        display: block;
+    }
+
+    .dropdown-title {
+        display: block;
+        padding: var(--cool-dropdown-item-padding-y) var(--cool-dropdown-item-padding-x);
+        font-size: var(--cool-font-size-xs);
+        color: var(--cool-dropdown-title-color);
+        text-transform: uppercase;
+        letter-spacing: 0.2px;
+    }
+
+    .dropdown-item-text {
+        display: block;
+        padding: var(--cool-dropdown-item-padding-y) var(--cool-dropdown-item-padding-x);
+        color: var(--cool-dropdown-link-color);
+    }
+
+    .dropdown-scrollable-content {
+        position: relative;
+    }
+
+    .dropdown-list {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+
+        li {
+            a {
+                display: block;
+                width: 100%;
+                font-weight: var(--cool-font-weight-normal);
+                color: var(--cool-dropdown-link-color);
+                white-space: nowrap;
+                box-sizing: border-box;
+
+                &:hover,
+                &:focus {
+                    color: var(--cool-dropdown-link-hover-color);
+                    text-decoration: none;
+                    background-color: var(--cool-dropdown-link-hover-bg);
+                }
+
+                &.active,
+                &:active {
+                    color: var(--cool-dropdown-link-active-color);
+                    text-decoration: none;
+                    background-color: var(--cool-dropdown-link-active-bg);
+                }
+
+                &.disabled,
+                &:disabled {
+                    color: var(--cool-dropdown-link-disabled-color);
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-dropdown;
+    }
+} @else {
+    @include cool-dropdown;
+}