cirrus-ui/src/components/form-ext.scss

A lightweight UI framework written in SCSS

@use 'sass:map';
@use '../src/internal' as *;

/* Mixins */
@if should-generate-classes($FORMS-EXT) {
    /* EXTENDED FORM */


    /* Base class layout for extended form */
    .form-ext-control {
        padding-left: 1rem;
        position: relative;

        /* Checkbox */
        &.form-ext-checkbox {
            .form-ext-input:checked ~ .form-ext-label:after {
                background-image: url($img-checkbox);
            }

            .form-ext-label:before {
                border-radius: 0.25rem;
            }
        }

        /* Radio Button */
        &.form-ext-radio {
            .form-ext-input:checked ~ .form-ext-label:after {
                background-image: url($img-radio);
            }

            .form-ext-label:before {
                border-radius: 50%;
            }
        }

        /* Hides the original input */
        .form-ext-input {
            opacity: 0;
            position: absolute;
            z-index: -1;

            &:disabled ~ .form-ext-label {
                opacity: 0.4;
            }

            /* Checked state */
            &:checked ~ .form-ext-label:before {
                background-color: fill('primary');
            }

            @each $color, $value in $control-themes {
                &.form-ext-input--#{$color}:checked ~ .form-ext-label {
                    color: map.get($value, bg);

                    &:before {
                        background-color: map.get($value, bg);
                    }
                }
                &.form-ext-input--#{$color}:focus ~ .form-ext-label:before {
                    border-color: inherit;
                    box-shadow: 0 0 0 0.2rem transparentize($color: map.get($value, bg), $amount: 1 - $focus-opacity),
                        inset 0 1px 8px rgba(0, 0, 0, 0.07);
                }
            }
        }

        .form-ext-input:disabled ~ .form-ext-toggle__toggler {
            opacity: 0.5;
        }

        // TODO: This is not the correct naming convention since this is outside of form-ext-toggle
        .form-ext-toggle__label {
            align-items: center;
            display: flex;
            justify-content: space-between;
        }

        /* Toggle Switches */
        .form-ext-toggle {
            cursor: pointer;
            position: relative;

            input[type='checkbox'],
            input[type='radio'] {
                opacity: 0;
                position: absolute;
                z-index: -1;
            }

            .form-ext-toggle__toggler {
                border: 1px solid $cirrus-gray;
                border-radius: 6.25rem;
                color: $cirrus-gray;
                display: block;
                font-size: 9px;
                height: 1.5rem;
                position: relative;
                width: 3rem;

                i {
                    display: inline-block;
                }
            }

            input[type='checkbox']:checked + .form-ext-toggle__toggler,
            input[type='checkbox']:checked + * .form-ext-toggle__toggler,
            input[type='radio']:checked + .form-ext-toggle__toggler,
            input[type='radio']:checked + * .form-ext-toggle__toggler {
                background-color: fill('primary');
                border-color: fill('primary');
                color: #fff;
                position: relative;
                transition: all 0.4s ease;

                i::after {
                    background-color: #fff;
                    left: calc(100% - 20px);
                }

                i::before {
                    color: #fff;
                    content: attr(data-check-icon);
                    text-align: left;
                }
            }

            /* Toggle themes */
            @each $color, $value in $control-themes {
                &.form-ext-toggle--#{$color} input[type='checkbox']:checked + .form-ext-toggle__toggler,
                &.form-ext-toggle--#{$color} input[type='checkbox']:checked + * .form-ext-toggle__toggler,
                &.form-ext-toggle--#{$color} input[type='radio']:checked + .form-ext-toggle__toggler,
                &.form-ext-toggle--#{$color} input[type='radio']:checked + * .form-ext-toggle__toggler {
                    background-color: map.get($value, bg);
                    border-color: map.get($value, bg);
                }

                .form-ext-toggle--#{$color} .form-ext-toggle__toggler {
                    border-color: map.get($value, bg);
                    color: map.get($value, bg);
                }

                .form-ext-toggle--#{$color} .form-ext-toggle__toggler i::after {
                    background-color: map.get($value, bg);
                }

                /**
             * Accessibility
             */
                .form-ext-input:focus + .form-ext-toggle__toggler,
                .form-ext-input:focus ~ .form-ext-label:before {
                    box-shadow: 0 0 0 0.2rem transparentize($color: map.get($value, bg), $amount: 1 - $focus-opacity),
                        inset 0 1px 8px rgba(0, 0, 0, 0.07);
                }

                &.form-ext-toggle--#{$color} .form-ext-input:focus + .form-ext-toggle__toggler {
                    box-shadow: 0 0 0 0.2rem transparentize($color: map.get($value, bg), $amount: 1 - $focus-opacity),
                        inset 0 1px 8px rgba(0, 0, 0, 0.07);
                }
            }

            .form-ext-toggle__toggler i::before,
            .form-ext-toggle__toggler i::after {
                content: '';
                display: block;
                position: absolute;
            }

            .form-ext-toggle__toggler i::before {
                content: attr(data-uncheck-icon);
                padding: 2px 7px;
                line-height: 18px;
                text-align: right;
                top: 0;
                width: 55%;
                font-size: 12px;
            }

            .form-ext-toggle__toggler i::after {
                background-color: $cirrus-gray;
                border-radius: 50%;
                height: 16px;
                left: 4px;
                width: 16px;
                transform: translateY(-50%);
                transition: left var(--animation-duration) ease;
                text-align: left;
                top: 50%;
            }
        }

        .form-ext-label {
            margin-bottom: 0;
            position: relative;

            /* Base of custom form inputs */
            &:before,
            &:after {
                content: '';
                display: block;
                height: 1rem;
                left: -1.5rem;
                position: absolute;
                top: 0.3rem;
                transition: all var(--animation-duration);
                width: 1rem;
            }

            &:before {
                background-color: fill('light');
                border: 1px solid fill('gray', '300');
                border-radius: 0.25rem;
                pointer-events: none;
                user-select: none;
                box-sizing: border-box;
            }

            &:after {
                background-position: center;
                background-repeat: no-repeat;
                background-size: 50% 50%;
            }
        }
    }

    .form-ext-control .form-ext-input:checked ~ .form-ext-label:before {
        border: none;
    }
}