@finqu/cool 1.2.29 → 2.0.2

package/scss/_input-group.scss

@@ -1,285 +1,326 @@
-// Input group
-// ---------------------------------------------------------------------------------------------------------------
-
-html.dom-ready {
-    .input-group-text,
-    .input-group-dropdown {
-        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-    }
-}
-
-.input-group {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: stretch;
-    width: 100%;
-    border-color: $input-group-addon-border-color;
-
-    > .form-control,
-    > .form-control-plaintext {
-        position: relative;
-        flex: 1 1 auto;
-        // Add width 1% and flex-basis auto to ensure that button will not wrap out
-        // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
-        width: 1%;
-        margin-bottom: 0;
-
-        + .form-control {
-            // Add extra 0.2px to border rendering bug on chrome
-            // margin-left: -#{$input-border-width};
-            margin-left: calc(-#{$input-border-width + 0.2});
-        }
-    }
-
-    > .form-control {
-        &:not(:last-child) {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-            border-right: 0;
-        }
-
-        &:not(:first-child) {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            border-left: 0;
-        }
-    }
-}
-
-
-// Prepend and append
-.input-group-prepend,
-.input-group-append {
-    display: flex;
-    border-color: $input-group-addon-border-color;
-
-    // > .btn {
-    //     height: $input-height;
-    //     box-sizing: border-box;
-    //     //@include button-variant($input-bg, $color: theme-color('brand'), $border: $input-bg, $hover-background: darken($input-bg, 5%), $hover-border: $input-focus-border-color, $enable-shadow: false);
-    // }
-
-    .btn {
-        position: relative;
-        z-index: 2;
-        margin: 0;
-
-        > .icon {
-            margin-right: 0;
-
-            & + * {
-                margin-left: $icon-spacer;
-            }
-        }
-
-        &:focus {
-            z-index: 3;
-        }
-    }
-
-    .btn + .btn,
-    .btn + .input-group-text,
-    .btn + .input-group-dropdown,
-    .input-group-text + .btn,
-    .input-group-text + .input-group-text,
-    .input-group-text + .input-group-dropdown,
-    .input-group-dropdown + .btn,
-    .input-group-dropdown + .input-group-text,
-    .input-group-dropdown + .input-group-dropdown {
-        // Add extra 0.2px to border rendering bug on chrome
-        // margin-left: -#{$input-border-width};
-        margin-left: calc(-#{$input-border-width + 0.2});
-    }
-}
-
-.input-group-prepend {
-    margin-right: -$input-border-width;
-
-    .input-group-text > span {
-        margin-right: $input-border-width;
-    }
-}
-
-.input-group-append {
-    margin-left: -$input-border-width;
-
-    .input-group-text > span {
-        margin-left: $input-border-width;
-    }
-}
-
-
-
-// Textual addons
-// Serves as a catch-all element for any text or radio/checkbox input you wish
-// to prepend or append to an input.
-.input-group-text {
-    display: flex;
-    align-items: center;
-    padding: $input-padding-y $input-padding-x;
-    margin-bottom: 0;
-    font-size: $input-font-size;
-    font-weight: $font-weight-normal;
-    line-height: $input-line-height;
-    color: $input-group-addon-color;
-    text-align: center;
-    white-space: nowrap;
-    background-color: $input-bg;
-    border: $input-border-width solid $input-group-addon-border-color;
-    border-radius: $input-border-radius;
-
-    // Nuke default margins from checkboxes and radios to vertically center within.
-    input[type="radio"],
-    input[type="checkbox"] {
-        margin-top: 0;
-    }
-}
-
-
-// Dropdown
-.input-group-dropdown {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0;
-    font-size: $input-font-size;
-    font-weight: $font-weight-normal;
-    line-height: $input-line-height;
-    color: $input-group-addon-color;
-    text-align: center;
-    white-space: nowrap;
-    background-color: $input-group-addon-bg;
-    border-radius: $input-border-radius;
-    border: $input-border-width solid $input-group-addon-border-color;
-
-    .btn {
-        margin-right: 2px;
-        @include button-size($btn-padding-y - 2 * $input-border-width, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius - 2px);
-        @include button-variant($input-group-addon-bg, $color: $input-group-addon-color, $hover-background: $input-group-addon-bg, $enable-shadow: false);
-
-        &.btn-xs {
-            @include button-size($btn-padding-y-xs - 2 * $input-border-width, $btn-padding-x-xs, $btn-font-size-xs , $btn-line-height-xs, $btn-border-radius-xs - 1px);
-        }
-
-        &.btn-sm {
-            @include button-size($btn-padding-y-sm - 2 * $input-border-width, $btn-padding-x-sm, $btn-font-size-sm , $btn-line-height-sm, $btn-border-radius-sm - 2px);
-        }
-
-        &.btn-lg {
-            @include button-size($btn-padding-y-lg - 2 * $input-border-width, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg - 2px);
-        }
-    }
-}
-
-
-// Focus
-.input-group-focus {
-    .form-control,
-    .input-group-text,
-    .input-group-dropdown,
-    .input-group-append > .btn,
-    .input-group-prepend > .btn {
-        border-color: $input-focus-border-color;
-    }
-}
-
-
-// Sizing
-.input-group-lg > .form-control:not(textarea) {
-    height: $input-height-lg;
-}
-
-.input-group-lg > .form-control,
-.input-group-lg > .input-group-text,
-.input-group-lg > .input-group-dropdown,
-.input-group-lg > .input-group-prepend > .input-group-text,
-.input-group-lg > .input-group-append > .input-group-text,
-.input-group-lg > .input-group-prepend > .input-group-dropdown,
-.input-group-lg > .input-group-append > .input-group-dropdown {
-    padding: $input-padding-y-lg $input-padding-x-lg;
-    font-size: $input-font-size-lg;
-    line-height: $input-line-height-lg;
-    border-radius: $input-border-radius-lg;
-}
-
-.input-group-lg > .input-group-prepend > .btn,
-.input-group-lg > .input-group-append > .btn {
-    padding: $input-padding-y-lg $input-padding-x-lg;
-    font-size: $input-font-size-lg;
-    border-radius: $input-border-radius-lg;
-    height: $input-height-lg;
-}
-
-.input-group-lg .input-group-dropdown .dropdown {
-    margin: -#{$input-padding-y-lg} -#{$input-padding-x-lg};
-}
-
-.input-group-sm > .form-control:not(textarea) {
-    height: $input-height-sm;
-}
-
-.input-group-sm > .form-control,
-.input-group-sm > .input-group-text,
-.input-group-sm > .input-group-dropdown,
-.input-group-sm > .input-group-prepend > .input-group-text,
-.input-group-sm > .input-group-append > .input-group-text,
-.input-group-sm > .input-group-prepend > .input-group-dropdown,
-.input-group-sm > .input-group-append > .input-group-dropdown {
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    font-size: $input-font-size-sm;
-    line-height: $input-line-height-sm;
-    border-radius: $input-border-radius-sm;
-}
-
-.input-group-lg > .input-group-prepend > .btn,
-.input-group-lg > .input-group-append > .btn {
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    font-size: $input-font-size-sm;
-    border-radius: $input-border-radius-sm;
-    height: $input-height-sm;
-}
-
-.input-group-sm .input-group-dropdown .dropdown {
-    margin: -#{$input-padding-y-sm} -#{$input-padding-x-sm};
-}
-
-
-// Prepend and append rounded corners
-// These rulesets must come after the sizing ones to properly override sm and lg
-// border-radius values when extending. They're more specific than we'd like
-// with the `.input-group >` part, but without it, we cannot override the sizing.
-.input-group > .input-group-prepend > .btn,
-.input-group > .input-group-prepend > .input-group-text,
-.input-group > .input-group-prepend > .input-group-dropdown,
-.input-group > .input-group-append:not(:last-child) > .btn,
-.input-group > .input-group-append:not(:last-child) > .input-group-text,
-.input-group > .input-group-append:not(:last-child) > .input-group-dropdown,
-.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
-.input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
-.input-group > .input-group-append:last-child > .input-group-dropdown:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.input-group > .input-group-prepend > .input-group-text:not([class*="bg-"]),
-.input-group > .input-group-append:last-child > .input-group-text:not([class*="bg-"]):not(:last-child) {
-    padding-right: 0;
-}
-
-.input-group > .input-group-append > .btn,
-.input-group > .input-group-append > .input-group-text,
-.input-group > .input-group-append > .input-group-dropdown,
-.input-group > .input-group-prepend:not(:first-child) > .btn,
-.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
-.input-group > .input-group-prepend:not(:first-child) > .input-group-dropdown,
-.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
-.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child),
-.input-group > .input-group-prepend:first-child > .input-group-dropdown:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.input-group > .input-group-append > .input-group-text:not([class*="bg-"]),
-.input-group > .input-group-prepend:first-child > .input-group-text:not([class*="bg-"]):not(:first-child) {
-    padding-left: 0;
-}
+@use "variables" as *;
+/* Input Group ========================================================================== */
+
+@mixin cool-input-group {
+    .input-group {
+        position: relative;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
+        width: 100%;
+        gap: var(--cool-input-group-gap);
+        border-color: var(--cool-input-group-border-color);
+        border-width: var(--cool-input-group-border-width);
+        border-radius: var(--cool-input-group-border-radius);
+        background-color: var(--cool-input-group-bg);
+        color: var(--cool-input-group-color);
+        margin-bottom: 1px;
+
+        > .form-control {
+            position: relative;
+            flex: 1 1 auto;
+            width: 1%;
+            margin-bottom: 0;
+
+            + .form-control {
+                margin-left: calc((var(--cool-input-border-width) + 0.2px) * -1);
+            }
+        }
+
+        > .form-control {
+            &:not(:last-child) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                border-right: 0;
+            }
+
+            &:not(:first-child) {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                border-left: 0;
+            }
+        }
+
+        &.input-group-sm {
+            border-radius: var(--cool-input-border-radius-sm);
+        }
+
+        &.input-group-lg {
+            border-radius: var(--cool-input-border-radius-lg);
+        }
+    }
+
+    .input-group-prepend,
+    .input-group-append {
+        display: flex;
+        border-color: var(--cool-input-group-border-color);
+
+        .btn {
+            position: relative;
+            z-index: 2;
+            margin: 0;
+
+            > .icon {
+                margin-right: 0;
+
+                & + * {
+                    margin-left: var(--cool-icon-spacer);
+                }
+            }
+
+            &:focus {
+                z-index: 3;
+            }
+        }
+
+        .btn + .btn,
+        .btn + .input-group-text,
+        .btn + .input-group-dropdown,
+        .input-group-text + .btn,
+        .input-group-text + .input-group-text,
+        .input-group-text + .input-group-dropdown,
+        .input-group-dropdown + .btn,
+        .input-group-dropdown + .input-group-text,
+        .input-group-dropdown + .input-group-dropdown {
+            margin-left: calc((var(--cool-input-border-width) + 0.2px) * -1);
+        }
+    }
+
+    .input-group-prepend {
+        margin-right: calc(var(--cool-input-border-width) * -1);
+
+        .input-group-text > span {
+            margin-right: var(--cool-input-border-width);
+        }
+    }
+
+    .input-group-append {
+        margin-left: calc(var(--cool-input-border-width) * -1);
+
+        .input-group-text > span {
+            margin-left: var(--cool-input-border-width);
+        }
+    }
+
+    .input-group-text {
+        display: flex;
+        align-items: center;
+        padding: var(--cool-input-padding-y) var(--cool-input-padding-x);
+        margin-bottom: 0;
+        font-size: var(--cool-input-font-size);
+        font-weight: var(--cool-font-weight-normal);
+        line-height: var(--cool-input-line-height);
+        color: var(--cool-input-group-color);
+        text-align: center;
+        white-space: nowrap;
+        background-color: var(--cool-input-bg);
+        border: var(--cool-input-border-width) solid var(--cool-input-group-border-color);
+        border-radius: var(--cool-input-border-radius);
+        transition: box-shadow var(--cool-animation-duration) ease-in-out;
+
+        input[type="radio"],
+        input[type="checkbox"] {
+            margin-top: 0;
+        }
+    }
+
+    .input-group-dropdown {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0;
+        font-size: var(--cool-input-font-size);
+        font-weight: var(--cool-font-weight-normal);
+        line-height: var(--cool-input-line-height);
+        color: var(--cool-input-group-color);
+        text-align: center;
+        white-space: nowrap;
+        background-color: var(--cool-input-group-bg);
+        border-radius: var(--cool-input-border-radius);
+        border: var(--cool-input-border-width) solid var(--cool-input-group-border-color);
+        transition: box-shadow var(--cool-animation-duration) ease-in-out;
+
+        .dropdown {
+            height: 100%;
+        }
+
+        .btn {
+            padding: calc(var(--cool-btn-padding-y) - 2 * var(--cool-input-border-width)) var(--cool-btn-padding-x);
+            font-size: var(--cool-btn-font-size);
+            line-height: var(--cool-btn-line-height);
+            border-radius: calc(var(--cool-btn-border-radius) - 2px);
+            --cool-btn-bg: var(--cool-input-group-bg);
+            --cool-btn-color: var(--cool-input-group-color);
+            --cool-btn-border-color: transparent;
+            --cool-btn-hover-bg: var(--cool-input-group-bg);
+            --cool-btn-hover-color: var(--cool-input-group-color);
+            --cool-btn-hover-border-color: transparent;
+            --cool-btn-active-bg: var(--cool-input-group-bg);
+            --cool-btn-active-color: var(--cool-input-group-color);
+            --cool-btn-active-border-color: transparent;
+            --cool-btn-disabled-bg: var(--cool-input-group-bg);
+            --cool-btn-disabled-color: var(--cool-input-group-color);
+            --cool-btn-disabled-border-color: transparent;
+
+            &.btn-xs {
+                --cool-btn-padding-y: calc(var(--cool-btn-padding-y-xs) - 2 * var(--cool-input-border-width));
+                --cool-btn-padding-x: var(--cool-btn-padding-x-xs);
+                --cool-btn-font-size: var(--cool-btn-font-size-xs);
+                --cool-btn-line-height: var(--cool-btn-line-height-xs);
+                --cool-btn-border-radius: calc(var(--cool-btn-border-radius-xs) - 1px);
+            }
+
+            &.btn-sm {
+                --cool-btn-padding-y: calc(var(--cool-btn-padding-y-sm) - 2 * var(--cool-input-border-width));
+                --cool-btn-padding-x: var(--cool-btn-padding-x-sm);
+                --cool-btn-font-size: var(--cool-btn-font-size-sm);
+                --cool-btn-line-height: var(--cool-btn-line-height-sm);
+                --cool-btn-border-radius: calc(var(--cool-btn-border-radius-sm) - 2px);
+            }
+
+            &.btn-lg {
+                --cool-btn-padding-y: calc(var(--cool-btn-padding-y-lg) - 2 * var(--cool-input-border-width));
+                --cool-btn-padding-x: var(--cool-btn-padding-x-lg);
+                --cool-btn-font-size: var(--cool-btn-font-size-lg);
+                --cool-btn-line-height: var(--cool-btn-line-height-lg);
+                --cool-btn-border-radius: calc(var(--cool-btn-border-radius-lg) - 2px);
+            }
+        }
+    }
+
+    @supports selector(:has(*)) {
+        .input-group:has(input:focus),
+        .input-group:has(textarea:focus) {
+            .form-control,
+            .input-group-text,
+            .input-group-dropdown,
+            .input-group-append > .btn,
+            .input-group-prepend > .btn {
+                outline: none;
+                --cool-btn-border-color: var(--cool-input-focus-border-color);
+                --cool-input-group-border-color: var(--cool-input-focus-border-color);
+
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+
+        .input-group:has(.form-control[readonly]),
+        .input-group:has(.form-control:disabled) {
+            .input-group-text,
+            .input-group-dropdown,
+            .input-group-append > .btn,
+            .input-group-prepend > .btn {
+                background-color: var(--cool-input-disabled-bg);
+                opacity: 1;
+                color: var(--cool-input-disabled-color);
+            }
+        }
+    }
+
+    .input-group-lg > .form-control:not(textarea) {
+        height: var(--cool-input-height-lg);
+    }
+
+    .input-group-lg > .form-control,
+    .input-group-lg > .input-group-text,
+    .input-group-lg > .input-group-dropdown,
+    .input-group-lg > .input-group-prepend > .input-group-text,
+    .input-group-lg > .input-group-append > .input-group-text,
+    .input-group-lg > .input-group-prepend > .input-group-dropdown,
+    .input-group-lg > .input-group-append > .input-group-dropdown {
+        padding: var(--cool-input-padding-y-lg) var(--cool-input-padding-x-lg);
+        font-size: var(--cool-input-font-size-lg);
+        line-height: var(--cool-input-line-height-lg);
+        border-radius: var(--cool-input-border-radius-lg);
+    }
+
+    .input-group-lg > .input-group-prepend > .btn,
+    .input-group-lg > .input-group-append > .btn {
+        padding: var(--cool-input-padding-y-lg) var(--cool-input-padding-x-lg);
+        font-size: var(--cool-input-font-size-lg);
+        border-radius: var(--cool-input-border-radius-lg);
+        height: var(--cool-input-height-lg);
+    }
+
+    .input-group-lg .input-group-dropdown .dropdown {
+        margin: calc(var(--cool-input-padding-y-lg) * -1) calc(var(--cool-input-padding-x-lg) * -1);
+    }
+
+    .input-group-sm > .form-control:not(textarea) {
+        height: var(--cool-input-height-sm);
+    }
+
+    .input-group-sm > .form-control,
+    .input-group-sm > .input-group-text,
+    .input-group-sm > .input-group-dropdown,
+    .input-group-sm > .input-group-prepend > .input-group-text,
+    .input-group-sm > .input-group-append > .input-group-text,
+    .input-group-sm > .input-group-prepend > .input-group-dropdown,
+    .input-group-sm > .input-group-append > .input-group-dropdown {
+        padding: var(--cool-input-padding-y-sm) var(--cool-input-padding-x-sm);
+        font-size: var(--cool-input-font-size-sm);
+        line-height: var(--cool-input-line-height-sm);
+        border-radius: var(--cool-input-border-radius-sm);
+    }
+
+    .input-group-sm > .input-group-prepend > .btn,
+    .input-group-sm > .input-group-append > .btn {
+        padding: var(--cool-input-padding-y-sm) var(--cool-input-padding-x-sm);
+        font-size: var(--cool-input-font-size-sm);
+        border-radius: var(--cool-input-border-radius-sm);
+        height: var(--cool-input-height-sm);
+    }
+
+    .input-group-sm .input-group-dropdown .dropdown {
+        margin: calc(var(--cool-input-padding-y-sm) * -1) calc(var(--cool-input-padding-x-sm) * -1);
+    }
+
+    // Prepend and append rounded corners
+    // These rulesets must come after the sizing ones to properly override sm and lg
+    // border-radius values when extending. They're more specific than we'd like
+    // with the `.input-group >` part, but without it, we cannot override the sizing.
+    .input-group > .input-group-prepend > .btn,
+    .input-group > .input-group-prepend > .input-group-text,
+    .input-group > .input-group-prepend > .input-group-dropdown,
+    .input-group > .input-group-append:not(:last-child) > .btn,
+    .input-group > .input-group-append:not(:last-child) > .input-group-text,
+    .input-group > .input-group-append:not(:last-child) > .input-group-dropdown,
+    .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+    .input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
+    .input-group > .input-group-append:last-child > .input-group-dropdown:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .input-group > .input-group-prepend > .input-group-text:not([class*="bg-"]),
+    .input-group > .input-group-append:last-child > .input-group-text:not([class*="bg-"]):not(:last-child) {
+        padding-right: 0;
+    }
+
+    .input-group > .input-group-append > .btn,
+    .input-group > .input-group-append > .input-group-text,
+    .input-group > .input-group-append > .input-group-dropdown,
+    .input-group > .input-group-prepend:not(:first-child) > .btn,
+    .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
+    .input-group > .input-group-prepend:not(:first-child) > .input-group-dropdown,
+    .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
+    .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child),
+    .input-group > .input-group-prepend:first-child > .input-group-dropdown:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .input-group > .input-group-append > .input-group-text:not([class*="bg-"]),
+    .input-group > .input-group-prepend:first-child > .input-group-text:not([class*="bg-"]):not(:first-child) {
+        padding-left: 0;
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-input-group;
+    }
+} @else {
+    @include cool-input-group;
+}