@finqu/cool 1.3.0 → 2.0.2

package/scss/_forms.scss

@@ -0,0 +1,613 @@
+@use "variables" as *;
+/* Forms ========================================================================== */
+
+@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;
+            }
+        }
+
+        &::placeholder {
+            color: var(--cool-input-placeholder-color);
+            opacity: 1;
+        }
+
+        &:disabled,
+        &[readonly] {
+            background-color: var(--cool-input-disabled-bg);
+            opacity: 1;
+            color: var(--cool-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);
+    }
+
+    .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;
+
+        @supports (resize: vertical) {
+            resize: vertical;
+        }
+    }
+
+    select.form-control {
+        &[size],
+        &[multiple] {
+            height: auto;
+        }
+
+        &: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);
+        }
+    }
+
+    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);
+    }
+
+    .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);
+    }
+
+    .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);
+    }
+
+    .form-group {
+        margin-bottom: var(--cool-form-group-margin-bottom);
+    }
+
+    .form-label-group {
+        position: relative;
+
+        select {
+            -webkit-appearance: none;
+            appearance: none;
+
+            @-moz-document url-prefix() {
+                text-indent: -2px;
+            }
+        }
+
+        & > 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;
+        }
+
+        input::-webkit-input-placeholder,
+        input:-ms-input-placeholder,
+        input::-ms-input-placeholder,
+        input::-moz-placeholder,
+        input::placeholder {
+            color: transparent;
+        }
+
+        &: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);
+                }
+            }
+        }
+
+        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);
+
+            & ~ 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);
+            }
+        }
+
+        &.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-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);
+        }
+
+        & + .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;
+            }
+        }
+    }
+
+    .form-check {
+        display: inline-flex;
+
+        &:has(input[type="radio"]) {
+            --cool-form-check-input-radius: 50%;
+        }
+
+        label {
+            display: inline-flex;
+            align-items: center;
+            margin: 0;
+            user-select: none;
+            cursor: pointer;
+            font-size: inherit;
+
+            &:hover .form-check-icon {
+                border-color: var(--cool-form-check-input-color);
+            }
+        }
+
+        .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;
+                }
+            }
+        }
+
+        .form-check-label {
+            display: inline-block;
+            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;
+        }
+
+        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;
+
+        & + label {
+            margin-left: var(--cool-spacing-2);
+            margin-bottom: 0;
+            flex-basis: 0;
+            flex-grow: 1;
+        }
+
+        .form-switch-input {
+            display: none;
+
+            &:disabled {
+                cursor: not-allowed;
+                pointer-events: none;
+
+                & + .form-switch-label {
+                    opacity: 0.4;
+
+                    &:hover {
+                        cursor: not-allowed;
+                    }
+                }
+            }
+        }
+
+        .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;
+}