@dialpad/dialtone-css/lib/build/less/components/input.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: INPUTS
//
//  These are input classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/inputs
//
//  TABLE OF CONTENTS
//  • VARIABLES
//  • INPUTS & TEXTAREAS
//    - Base Style
//    - Wrapper
//    - Validation States
//    - Sizes
//  • INPUT ICONS
//

//  $  INPUTS
//  ----------------------------------------------------------------------------
.d-input,
.d-input--md,
.d-textarea,
.d-textarea--md,
.d-input__wrapper--md,
.d-input__wrapper {
    //  Component CSS Vars
    //  ------------------------------------------------------------------------
    --input-color-border: var(--dt-inputs-color-border-default);
    --input-color-border-hover: var(--dt-inputs-color-border-hover);
    --input-color-background: var(--dt-inputs-color-background-default);
    --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
    --input-color-text: var(--dt-inputs-color-foreground-default);
    --input-border-width: var(--dt-size-border-100);
    --input-border-radius: var(--dt-inputs-size-radius-md);
    --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
    --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
    --input-typography: var(--dt-typography-inputs-md);

    position: relative;
    display: inline-flex;
    flex: 1 0%;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: var(--input-padding-y) var(--input-padding-x);
    color: var(--input-color-text);
    font: var(--input-typography);
    background-color: var(--input-color-background);
    border: var(--input-border-width) solid var(--input-color-border);
    border-radius: var(--input-border-radius);
    outline: none;
    box-shadow: none;
    appearance: none;
    caret-color: fieldtext;

    &:has(.d-textarea) {
        border-end-end-radius: var(--dt-inputs-size-radius-xs);
    }

    &:has(.d-input--xs),
    &:has(.d-textarea--xs) {
        --input-border-radius: var(--dt-inputs-size-radius-xs);
    }

    &:has(.d-input--sm),
    &:has(.d-textarea--sm) {
        --input-border-radius: var(--dt-inputs-size-radius-sm);
    }

    &:has(.d-input--md),
    &:has(.d-textarea--md) {
        --input-border-radius: var(--dt-inputs-size-radius-md);
    }

    &:has(.d-input--lg),
    &:has(.d-textarea--lg) {
        --input-border-radius: var(--dt-inputs-size-radius-lg);
    }

    &:has(.d-input--xl),
    &:has(.d-textarea--xl) {
        --input-border-radius: var(--dt-inputs-size-radius-xl);
    }


    //  --  Placeholder copy
    &::placeholder {
        color: var(--dt-inputs-color-foreground-placeholder);
    }
    //  --  Remove input EDGE additions
    &::-ms-clear {
        display: none;
    }
    //  --  HOVER STATE

    &:hover {
        --input-color-border: var(--input-color-border-hover);
    }

    //  --  FOCUS STATE
    &:focus,
    &:focus-within {
        --input-color-background: var(--dt-inputs-color-background-focus);
        --input-color-border: var(--dt-inputs-color-border-focus) !important;

        box-shadow: 0 0 0 var(--dt-size-border-100) var(--dt-inputs-color-border-focus) inset;
    }
    //  --  DISABLED / READ-ONLY
    &[disabled],
    &[read-only] {
        --input-color-border: var(--dt-inputs-color-border-disabled) !important;
        --input-color-background: var(--dt-inputs-color-background-disabled);
        --input-color-text: var(--dt-inputs-color-foreground-disabled);

        &:focus,
        &:focus-within {
            box-shadow: none !important;
        }

        //  --  Placeholder copy
        &::placeholder {
            color: var(--dt-inputs-color-foreground-placeholder);
        }
    }

    //  --  DISABLED
    &[disabled] {
        cursor: not-allowed;
    }

    //  --  BROWSER-SPECIFIC
    &::-moz-focus-inner {
        outline: none !important;
    }

    &:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 var(--dt-color-black-900);
    }

    &::-ms-expand {
        display: none;
    }

    //  --  SEARCH INPUTS
    // remove the search input's default styling
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        display: none;
    }
}

.d-input__length-description {
    margin-bottom: var(--dt-space-200);
}

.d-input--hidden {
    visibility: hidden;
}

//  $$  INPUT WRAPPER
//  ----------------------------------------------------------------------------
.d-input__wrapper {
    padding: 0;
    overflow-y: auto;

    .d-textarea + .d-input-icon--right {
      position: absolute;
      right: var(--dt-space-450);
    }

    .d-input-icon--left:has(+ .d-textarea) {
        align-items: flex-start;
    }

    .d-input-icon:has(+ .d-textarea),
    .d-textarea+.d-input-icon {
        padding-top: calc(var(--input-padding-y) + var(--dt-space-200));
    }

    .d-input-icon:has(+ .d-textarea--xs),
    .d-textarea--xs + .d-input-icon {
        #d-internal__input-and-select-xs();

        padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
    }

    .d-input-icon:has(+ .d-textarea--sm),
    .d-textarea--sm+.d-input-icon {
        #d-internal__input-and-select-sm();

        padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
    }

    .d-input-icon:has(+ .d-textarea--lg),
    .d-textarea--lg+.d-input-icon {
        #d-internal__input-and-select-lg();

        padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
    }

    .d-input-icon:has(+ .d-textarea--xl),
    .d-textarea--xl+.d-input-icon {
        #d-internal__input-and-select-xl();

        padding-top: calc(var(--input-padding-y) + (var(--dt-space-350) - var(--dt-space-100)));
    }

    .d-input,
    .d-textarea {
        flex: 1;
        background-color: transparent;
        border: none;

        &:focus,
        &:focus-within {
            border: none;
            outline: 0;
            box-shadow: none !important;
        }
    }
}

//  $$  SIZES
//  ----------------------------------------------------------------------------
.d-input.d-input--xs {
    #d-internal__input-and-select-xs();
}

.d-input.d-input--sm {
    #d-internal__input-and-select-sm();
}

.d-input.d-input--lg {
    #d-internal__input-and-select-lg();
}

.d-input.d-input--xl {
    #d-internal__input-and-select-xl();
}

//  ============================================================================
//  $  TEXTAREAS
//  ----------------------------------------------------------------------------
.d-textarea {
    min-height: calc(var(--dt-size-300) * 20); // 80
    vertical-align: top;
    resize: vertical;
    scroll-padding-block: var(--input-padding-y);
}

//  $$  SIZES
//  ----------------------------------------------------------------------------
.d-textarea--xs {
    #d-internal__input-and-select-xs();

    min-height: calc(var(--dt-size-300) * 10); // 40
}

.d-textarea--sm {
    #d-internal__input-and-select-sm();

    min-height: var(--dt-size-650); // 48
}

.d-textarea--lg {
    #d-internal__input-and-select-lg();

    min-height: calc(var(--dt-size-300) * 23); // 92
}

.d-textarea--xl {
    #d-internal__input-and-select-xl();

    min-height: calc(var(--dt-size-300) * 25); // 100
}

//  $$  VALIDATION STATES
//  ----------------------------------------------------------------------------
.d-input--warning {
    --input-color-border: var(--dt-inputs-color-border-warning) !important;
}

.d-input--error {
    --input-color-border: var(--dt-inputs-color-border-critical) !important;
}

.d-input--success {
    --input-color-border: var(--dt-inputs-color-border-success) !important;
}

//  ============================================================================
//  $  INPUT ICONS
//  ----------------------------------------------------------------------------
.d-input-icon {
    display: none;

    &:not(:empty) {
        display: inline-flex;
        align-items: center;
    }

    &--right:not(:empty) {
        margin-right: var(--dt-space-400);

        .d-btn {
            margin-right: var(--dt-space-350-negative);
        }
    }

    &--left:not(:empty) {
        margin-left: var(--dt-space-400);
    }
}