@finqu/cool 1.2.29 → 2.0.2

package/scss/_forms.scss

@@ -1,258 +1,613 @@
-// Forms
-// ---------------------------------------------------------------------------------------------------------------
+@use "variables" as *;
+/* Forms ========================================================================== */
 
-html.dom-ready .form-control {
-    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-}
+@mixin cool-forms {
+    .form-control {
+        display: block;
+        width: 100%;
+        height: var(--cool-input-height);
+        padding: var(--cool-input-padding-y) var(--cool-input-padding-x);
+        font-family: var(--cool-input-font-family);
+        font-size: var(--cool-input-font-size);
+        font-weight: var(--cool-input-font-weight);
+        line-height: var(--cool-input-line-height);
+        color: var(--cool-input-color);
+        background-color: var(--cool-input-bg);
+        background-clip: padding-box;
+        border: var(--cool-input-border-width) solid var(--cool-input-border-color);
+        border-radius: var(--cool-input-border-radius);
+        transition:
+            color 0.15s ease-in-out,
+            box-shadow 0.15s ease-in-out;
+
+        &:focus {
+            border-color: var(--cool-input-focus-border-color);
+            outline: 0;
+
+            @supports selector(:focus-visible) {
+                outline: 0;
+            }
+        }
 
-.form-control {
-    display: block;
-    width: 100%;
-    height: $input-height;
-    padding: $input-padding-y $input-padding-x;
-    font-family: $input-font-family;
-    font-size: $input-font-size;
-    font-weight: $input-font-weight;
-    line-height: $input-line-height;
-    color: $input-color;
-    background-color: $input-bg;
-    background-clip: padding-box;
-    border: $input-border-width solid $input-border-color;
-    border-radius: $input-border-radius;
-    @include form-control-focus;
-
-    // Unstyle the caret on `<select>`s in IE10+.
-    &::-ms-expand {
-        background-color: transparent;
-        border: 0;
-    }
+        &::placeholder {
+            color: var(--cool-input-placeholder-color);
+            opacity: 1;
+        }
 
-    // Placeholder
-    &::placeholder {
-        color: $input-placeholder-color;
-        opacity: 1;
+        &:disabled,
+        &[readonly] {
+            background-color: var(--cool-input-disabled-bg);
+            opacity: 1;
+            color: var(--cool-input-disabled-color);
+        }
     }
 
-    // Disabled and read-only inputs
-    &:disabled,
-    &[readonly] {
-        background-color: $input-disabled-bg;
-        opacity: 1;
-        color: $input-disabled-color;
+    .form-control-sm {
+        --cool-input-padding-y: var(--cool-input-padding-y-sm);
+        --cool-input-padding-x: var(--cool-input-padding-x-sm);
+        --cool-input-font-size: var(--cool-input-font-size-sm);
+        --cool-input-line-height: var(--cool-input-line-height-sm);
+        --cool-input-border-radius: var(--cool-input-border-radius-sm);
+        --cool-input-height: var(--cool-input-height-sm);
     }
-}
 
-select.form-control {
-    // Suppress the nested default white text on blue background highlight on ie and edge
-    &:focus::-ms-value {
-        color: $input-color;
-        background-color: $input-bg;
+    .form-control-lg {
+        --cool-input-padding-y: var(--cool-input-padding-y-lg);
+        --cool-input-padding-x: var(--cool-input-padding-x-lg);
+        --cool-input-font-size: var(--cool-input-font-size-lg);
+        --cool-input-line-height: var(--cool-input-line-height-lg);
+        --cool-input-border-radius: var(--cool-input-border-radius-lg);
+        --cool-input-height: var(--cool-input-height-lg);
     }
-}
 
+    textarea.form-control {
+        height: auto;
 
-// Labels
-.col-form-label {
-    padding-top: calc(#{$input-padding-y} + #{$input-border-width});
-    padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
-    margin-bottom: 0;
-    font-size: inherit;
-    line-height: $input-line-height;
-}
+        @supports (resize: vertical) {
+            resize: vertical;
+        }
+    }
 
-.col-form-label-lg {
-    padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
-    padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
-    font-size: $input-font-size-lg;
-    line-height: $input-line-height-lg;
-}
+    select.form-control {
+        &[size],
+        &[multiple] {
+            height: auto;
+        }
 
-.col-form-label-sm {
-    padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
-    padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
-    font-size: $input-font-size-sm;
-    line-height: $input-line-height-sm;
-}
+        &:focus::-ms-value {
+            color: var(--cool-input-color);
+            background-color: var(--cool-input-bg);
+        }
+    }
 
+    .form-control-underline {
+        display: inline-block;
+        width: auto;
+        height: auto;
+        min-height: 1.5em;
+        border: none;
+        border-bottom: var(--cool-input-border-width) solid var(--cool-input-border-color);
+        border-radius: 0;
+        padding: 2px;
+        margin: 0 2px;
+        font-size: 1em;
+        line-height: 1.5;
+        vertical-align: baseline;
+        color: currentColor;
+        appearance: none;
+        background-color: var(--cool-input-bg);
+
+        &:focus {
+            outline: none;
+            box-shadow: none;
+            border-bottom-color: var(--cool-input-focus-border-color);
+        }
+    }
 
-// Readonly controls as plain text
-.form-control-plaintext {
-    display: block;
-    width: 100%;
-    padding-top: $input-padding-y;
-    padding-bottom: $input-padding-y;
-    margin-bottom: 0;
-    line-height: $input-line-height;
-    color: $input-plaintext-color;
-    background-color: transparent;
-    border: solid transparent;
-    border-width: $input-border-width 0;
-
-    &.form-control-sm,
-    &.form-control-lg {
-        padding-right: 0;
-        padding-left: 0;
+    select.form-control-underline {
+        padding-right: 1.5em;
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
+        background-repeat: no-repeat;
+        background-position: bottom -0.35em right -0.5em;
     }
-}
 
+    .col-form-label {
+        padding-top: calc(var(--cool-input-padding-y) + var(--cool-input-border-width));
+        padding-bottom: calc(var(--cool-input-padding-y) + var(--cool-input-border-width));
+        margin-bottom: 0;
+        font-size: inherit;
+        line-height: var(--cool-input-line-height);
+    }
 
-// Form control sizing
-.form-control-sm {
-    height: $input-height-sm;
-    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;
-}
+    .col-form-label-lg {
+        padding-top: calc(var(--cool-input-padding-y-lg) + var(--cool-input-border-width));
+        padding-bottom: calc(var(--cool-input-padding-y-lg) + var(--cool-input-border-width));
+        font-size: var(--cool-input-font-size-lg);
+        line-height: var(--cool-input-line-height-lg);
+    }
 
-.form-control-lg {
-    height: $input-height-lg;
-    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;
-}
+    .col-form-label-sm {
+        padding-top: calc(var(--cool-input-padding-y-sm) + var(--cool-input-border-width));
+        padding-bottom: calc(var(--cool-input-padding-y-sm) + var(--cool-input-border-width));
+        font-size: var(--cool-input-font-size-sm);
+        line-height: var(--cool-input-line-height-sm);
+    }
 
-select.form-control {
-    &[size],
-    &[multiple] {
-        height: auto;
+    .form-group {
+        margin-bottom: var(--cool-form-group-margin-bottom);
     }
-}
 
-textarea.form-control {
-    height: auto;
-}
+    .form-label-group {
+        position: relative;
 
+        select {
+            -webkit-appearance: none;
+            appearance: none;
 
-// Form groups
-.form-group {
-    margin-bottom: $form-group-margin-bottom;
-}
+            @-moz-document url-prefix() {
+                text-indent: -2px;
+            }
+        }
 
-.form-text {
-    display: block;
-    margin-top: $form-text-margin-top;
-}
+        & > input,
+        select,
+        textarea,
+        label,
+        & > .input-group > label {
+            padding: var(--cool-input-padding-y) var(--cool-input-padding-x);
+        }
 
+        & > label,
+        & > .input-group > label {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: block;
+            width: 100%;
+            margin-bottom: 0;
+            line-height: var(--cool-input-line-height);
+            color: var(--cool-input-placeholder-color);
+            border: 1px solid transparent;
+            border-radius: var(--cool-border-radius);
+            transition: var(--cool-form-transition-fast);
+            pointer-events: none;
+            font-size: var(--cool-input-font-size);
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
 
-// Form grid
-.form-row {
-    display: flex;
-    flex-wrap: wrap;
-    margin-right: -$form-grid-gutter-width / 2;
-    margin-left: -$form-grid-gutter-width / 2;
+        input::-webkit-input-placeholder,
+        input:-ms-input-placeholder,
+        input::-ms-input-placeholder,
+        input::-moz-placeholder,
+        input::placeholder {
+            color: transparent;
+        }
 
-    > .col,
-    > [class*="col-"] {
-        padding-right: $form-grid-gutter-width / 2;
-        padding-left: $form-grid-gutter-width / 2;
-    }
-}
+        &:not(.label-on-top) .show-when-label-on-top {
+            display: none;
+        }
 
+        &.label-on-top {
+            & > label,
+            & > .input-group > label {
+                line-height: 1;
+                font-size: 10px;
+            }
+
+            input,
+            select,
+            textarea {
+                padding-top: calc(var(--cool-input-padding-y) + var(--cool-input-padding-y) * (2 / 3));
+                padding-bottom: calc(var(--cool-input-padding-y) / 3);
+
+                & ~ label {
+                    padding-top: calc(var(--cool-input-padding-y) / 3);
+                    padding-bottom: calc(var(--cool-input-padding-y) / 3);
+                    font-size: var(--cool-small-font-size);
+                    color: var(--cool-input-placeholder-color);
+                }
+            }
+        }
 
-// Checkboxes and radios
-.form-check {
-    position: relative;
-    display: block;
-    padding-left: $form-check-input-gutter;
-}
+        input:-webkit-autofill {
+            padding-top: calc(var(--cool-input-padding-y) + var(--cool-input-padding-y) * (2 / 3));
+            padding-bottom: calc(var(--cool-input-padding-y) / 3);
 
-.form-check-input {
-    position: absolute;
-    margin-top: $form-check-input-margin-y;
-    margin-left: -$form-check-input-gutter;
+            & ~ label {
+                padding-top: calc(var(--cool-input-padding-y) / 3);
+                padding-bottom: calc(var(--cool-input-padding-y) / 3);
+                font-size: var(--cool-small-font-size);
+                color: var(--cool-input-placeholder-color);
+            }
+        }
 
-    &:disabled ~ .form-check-label {
-        color: theme-color('medium')
+        &.form-label-group-lg {
+            &.label-on-top {
+                input,
+                select,
+                textarea {
+                    padding-top: calc(var(--cool-input-padding-y-lg) + var(--cool-input-padding-y-lg) * (2 / 3));
+                    padding-bottom: calc(var(--cool-input-padding-y-lg) / 3);
+
+                    & ~ label {
+                        padding-top: calc(var(--cool-input-padding-y-lg) / 3);
+                        padding-bottom: calc(var(--cool-input-padding-y-lg) / 3);
+                        font-size: var(--cool-small-font-size);
+                        color: var(--cool-input-placeholder-color);
+                    }
+                }
+            }
+
+            & > input,
+            select,
+            textarea,
+            label,
+            & > .input-group > label {
+                padding: var(--cool-input-padding-y-lg) var(--cool-input-padding-x-lg);
+            }
+
+            input:-webkit-autofill {
+                padding-top: calc(var(--cool-input-padding-y-lg) + var(--cool-input-padding-y-lg) * (2 / 3));
+                padding-bottom: calc(var(--cool-input-padding-y-lg) / 3);
+
+                & ~ label {
+                    padding-top: calc(var(--cool-input-padding-y-lg) / 3);
+                    padding-bottom: calc(var(--cool-input-padding-y-lg) / 3);
+                    font-size: var(--cool-small-font-size);
+                    color: var(--cool-input-placeholder-color);
+                }
+            }
+        }
     }
-}
 
-.form-check-label {
-    margin-bottom: 0;
-}
-
-.form-check-inline {
-    display: inline-flex;
-    align-items: center;
-    padding-left: 0; // Override base .form-check
-    margin-right: $form-check-inline-margin-x;
-
-    // Undo .form-check-input defaults and add some `margin-right`.
-    .form-check-input {
-        position: static;
-        margin-top: 0;
-        margin-right: $form-check-inline-input-margin-x;
-        margin-left: 0;
-    }
-}
+    .form-control-placeholder {
+        display: block;
+        width: 100%;
+        height: var(--cool-input-height);
+        padding: var(--cool-input-padding-y) var(--cool-input-padding-x);
+        font-family: var(--cool-input-font-family);
+        font-size: var(--cool-input-font-size);
+        line-height: var(--cool-input-line-height);
+        color: var(--cool-body-color);
+        box-sizing: border-box;
+
+        &.input-lg {
+            --cool-input-padding-y: var(--cool-input-padding-y-lg);
+            --cool-input-padding-x: var(--cool-input-padding-x-lg);
+            --cool-input-font-size: var(--cool-input-font-size-lg);
+            --cool-input-line-height: var(--cool-input-line-height-lg);
+            --cool-input-height: var(--cool-input-height-lg);
+        }
 
+        &.input-sm {
+            --cool-input-padding-y: var(--cool-input-padding-y-sm);
+            --cool-input-padding-x: var(--cool-input-padding-x-sm);
+            --cool-input-font-size: var(--cool-input-font-size-sm);
+            --cool-input-line-height: var(--cool-input-line-height-sm);
+            --cool-input-height: var(--cool-input-height-sm);
+        }
 
-// Form validation
-@each $state, $data in $form-validation-states {
-    @include form-validation-state($state, map-get($data, color));
-}
+        & + .input-validation {
+            width: 100%;
+            flex: 1;
+        }
+    }
 
+    .form-inline {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        gap: 0.5rem;
+
+        @include media-breakpoint-up(sm) {
+            label {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 0;
+            }
+
+            .form-group {
+                display: flex;
+                flex: 0 0 auto;
+                flex-flow: row wrap;
+                align-items: center;
+                margin-bottom: 0;
+            }
+
+            .form-control {
+                display: inline-block;
+                width: auto;
+                vertical-align: middle;
+            }
+
+            .input-group {
+                width: auto;
+            }
+        }
+    }
 
-// Inline forms
-.form-inline {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
     .form-check {
-        width: 100%;
-    }
+        display: inline-flex;
 
-    // Kick in the inline
-    @include media-breakpoint-up(sm) {
+        &:has(input[type="radio"]) {
+            --cool-form-check-input-radius: 50%;
+        }
 
         label {
-            display: flex;
+            display: inline-flex;
             align-items: center;
-            justify-content: center;
-            margin-bottom: 0;
+            margin: 0;
+            user-select: none;
+            cursor: pointer;
+            font-size: inherit;
+
+            &:hover .form-check-icon {
+                border-color: var(--cool-form-check-input-color);
+            }
         }
 
-        // Inline-block all the things for "inline"
-        .form-group {
-            display: flex;
-            flex: 0 0 auto;
-            flex-flow: row wrap;
-            align-items: center;
-            margin-bottom: 0;
+        .form-check-icon {
+            position: relative;
+            width: var(--cool-form-check-input-size);
+            height: var(--cool-form-check-input-size);
+            min-width: var(--cool-form-check-input-size);
+            min-height: var(--cool-form-check-input-size);
+            border-radius: var(--cool-form-check-input-radius);
+            border: var(--cool-form-check-input-border-width) solid var(--cool-form-check-input-border-color);
+            border-radius: var(--cool-form-check-input-radius);
+            transition: var(--cool-form-transition-fast);
+            transform: scale(1);
+            vertical-align: middle;
+
+            svg {
+                position: absolute;
+                top: 4px;
+                left: 3.5px;
+                fill: none;
+                stroke: #ffffff;
+                stroke-width: 2.5px;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+                stroke-dasharray: var(--cool-form-check-input-size);
+                stroke-dashoffset: var(--cool-form-check-input-size);
+                transition: var(--cool-form-transition-normal);
+                transition-delay: 0.1s;
+
+                @include media-breakpoint-down(md) {
+                    left: 3px;
+                }
+            }
         }
 
-        // Allow folks to *not* use `.form-group`
-        .form-control {
+        .form-check-label {
             display: inline-block;
-            width: auto;
             vertical-align: middle;
+            width: 100%;
+            padding-left: var(--cool-spacing-2);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-family: var(--cool-font-family-base);
+            font-style: normal;
+            font-weight: var(--cool-font-weight-base);
+            line-height: var(--cool-line-height-base);
+            text-align: start;
+            text-decoration: none;
+            text-shadow: none;
+            text-transform: none;
+            letter-spacing: normal;
+            word-break: normal;
+            word-spacing: normal;
+            white-space: normal;
+            line-break: auto;
         }
 
-        // Make static controls behave like regular ones
-        .form-control-plaintext {
-            display: inline-block;
+        input[type="checkbox"],
+        input[type="radio"] {
+            display: none;
+
+            &:checked + label .form-check-icon {
+                background: var(--cool-form-check-input-color);
+                border-color: var(--cool-form-check-input-color);
+                animation: check-animation 0.4s ease;
+
+                svg {
+                    stroke-dashoffset: 0;
+                }
+            }
+
+            &:disabled + label .form-check-icon,
+            &.disabled + label .form-check-icon {
+                cursor: not-allowed;
+                background-color: var(--cool-theme-color-light);
+                border: var(--cool-form-check-input-border-width) solid var(--cool-form-check-input-border-color);
+                opacity: 0.35;
+            }
+
+            &:disabled + label:hover .form-check-icon,
+            &.disabled + label:hover .form-check-icon {
+                border: var(--cool-form-check-input-border-width) solid var(--cool-form-check-input-border-color);
+            }
+
+            &:disabled:checked + label .form-check-icon,
+            &.disabled:checked + label .form-check-icon {
+                background: color-mix(in srgb, var(--cool-theme-color-info) 85%, white);
+            }
         }
+    }
+
+    .form-switch {
+        display: inline-flex;
+        vertical-align: middle;
+        position: relative;
+        user-select: none;
+        width: var(--cool-form-switch-width);
+        padding: 0;
 
-        .input-group {
-            width: auto;
+        & + label {
+            margin-left: var(--cool-spacing-2);
+            margin-bottom: 0;
+            flex-basis: 0;
+            flex-grow: 1;
         }
 
-        // Remove default margin on radios/checkboxes that were used for stacking, and then undo the floating of radios and checkboxes to match.
-        .form-check {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: auto;
-            padding-left: 0;
+        .form-switch-input {
+            display: none;
+
+            &:disabled {
+                cursor: not-allowed;
+                pointer-events: none;
+
+                & + .form-switch-label {
+                    opacity: 0.4;
+
+                    &:hover {
+                        cursor: not-allowed;
+                    }
+                }
+            }
         }
 
-        .form-check-input {
-            position: relative;
-            flex-shrink: 0;
-            margin-top: 0;
-            margin-right: $form-check-input-margin-x;
-            margin-left: 0;
+        .form-switch-label {
+            display: block;
+            width: 100%;
+            overflow: hidden;
+            cursor: pointer;
+            height: var(--cool-form-check-input-size);
+            padding: 0;
+            line-height: var(--cool-form-check-input-size);
+            border: 2px solid var(--cool-color-grey-600);
+            border-radius: var(--cool-form-check-input-size);
+            background-color: var(--cool-color-grey-600);
+            margin-bottom: 0;
+            box-sizing: content-box;
+            transition:
+                background-color var(--cool-switch-transition),
+                border-color var(--cool-switch-transition);
+
+            &:before {
+                content: "";
+                display: block;
+                width: var(--cool-form-check-input-size);
+                height: var(--cool-form-check-input-size);
+                margin: 0px;
+                background: #ffffff;
+                position: absolute;
+                top: 0;
+                right: var(--cool-form-check-input-size);
+                bottom: 0;
+                border: 2px solid var(--cool-color-grey-600);
+                border-radius: var(--cool-form-check-input-size);
+                transition:
+                    background-color var(--cool-switch-transition),
+                    border-color var(--cool-switch-transition),
+                    right var(--cool-switch-transition);
+                box-sizing: content-box;
+            }
+        }
+
+        .form-switch-input:checked + .form-switch-label {
+            background-color: var(--cool-theme-color-info);
+        }
+
+        .form-switch-input:checked + .form-switch-label,
+        .form-switch-input:checked + .form-switch-label:before {
+            border-color: var(--cool-theme-color-info);
+        }
+
+        .form-switch-input:checked + .form-switch-label:before {
+            right: 0px;
         }
     }
-}
+
+    // Validation
+    .valid-feedback {
+        display: none;
+        width: 100%;
+        margin-top: var(--cool-form-feedback-margin-top);
+        font-size: var(--cool-form-feedback-font-size);
+        color: var(--cool-form-feedback-valid-color);
+    }
+
+    .invalid-feedback {
+        display: none;
+        width: 100%;
+        margin-top: var(--cool-form-feedback-margin-top);
+        font-size: var(--cool-form-feedback-font-size);
+        color: var(--cool-form-feedback-invalid-color);
+    }
+
+    .input-group {
+        .was-validated &:valid,
+        &.is-valid {
+            .form-control,
+            .input-group-text,
+            .input-dropdown {
+                border-color: var(--cool-form-feedback-valid-color);
+            }
+
+            ~ .valid-feedback {
+                display: block;
+            }
+        }
+
+        .was-validated &:invalid,
+        &.is-invalid {
+            .form-control,
+            .input-group-text,
+            .input-dropdown {
+                border-color: var(--cool-form-feedback-invalid-color);
+            }
+
+            ~ .invalid-feedback {
+                display: block;
+            }
+        }
+    }
+
+    .form-control {
+        .was-validated &:valid,
+        &.is-valid {
+            border-color: var(--cool-form-feedback-valid-color);
+
+            &:focus {
+                border-color: var(--cool-form-feedback-valid-color);
+            }
+
+            ~ .valid-feedback {
+                display: block;
+            }
+        }
+
+        .was-validated &:invalid,
+        &.is-invalid {
+            border-color: var(--cool-form-feedback-invalid-color);
+
+            &:focus {
+                border-color: var(--cool-form-feedback-invalid-color);
+            }
+
+            ~ .invalid-feedback {
+                display: block;
+            }
+        }
+    }
+
+    @keyframes check-animation {
+        50% {
+            transform: scale(0.9);
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-forms;
+    }
+} @else {
+    @include cool-forms;
+}