@dialpad/dialtone-css/lib/build/less/components/radio-checkbox.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: RADIOS & CHECKBOXES
//
//  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
//  • SHARED STYLES
//  • WRAPPERS
//  • INPUT & COPY BLOCKS
//  • LABELS
//  • CHECKBOXES
//    - Modifications
//  • RADIOS
//    - Modifications
//
//  ============================================================================
//  $   RADIOS & CHECKBOXES
//  ----------------------------------------------------------------------------

.d-checkbox,
.d-radio {
    //  Component specific CSS Vars
    //  ------------------------------------------------------------------------
    --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
    --check-radio-color-border-checked: var(--dt-checkbox-color-border-checked);
    --check-radio-color-border-disabled: var(--dt-inputs-color-border-disabled);
    --check-radio-color-background: var(--dt-inputs-color-background-default);
    --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
    --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
    --check-radio-border-width: var(--dt-size-border-100);

    //  [1] Check to see if we can use custom styles, if so reset the defaults
    //  ------------------------------------------------------------------------
    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
        width: var(--dt-size-500); // 16
        height: var(--dt-size-500); // 16

        //  [2]  Now re-style the checkboxes and radios
        //  --------------------------------------------------------------------
        margin: 0;
        font-size: inherit;
        background-color: var(--check-radio-color-background);
        border: var(--check-radio-border-width) solid var(--check-radio-color-border);
        outline: 0;
        box-shadow: none;
        cursor: pointer;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;

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

        &:focus,
        &:checked:focus {
          outline: 0;
          box-shadow: var(--dt-shadow-focus);
        }

        &:checked {
            --check-radio-color-border: var(--check-radio-color-border-checked);
        }
    }

    flex: 0 auto;
    align-self: flex-start;
    transition-timing-function: var(--ttf-out-quint);
    transition-duration: var(--td200);
    transition-property: box-shadow;

    //  --  DISABLED
    &[disabled],
    &--disabled {
        --check-radio-color: var(--dt-color-foreground-disabled);
        --check-radio-color-border: var(--check-radio-color-border-disabled);
        --check-radio-color-background: var(--check-radio-color-background-disabled);

        cursor: not-allowed;
    }
}


//  ============================================================================
//  $   RADIO / CHECKBOX WRAPPERS
//  ----------------------------------------------------------------------------
.d-checkbox-group,
.d-radio-group {
    display: inline-flex;
    gap: var(--dt-space-400); // 8

    //  --  Wrapper Disabled State
    &.d-checkbox-group--disabled,
    &.d-radio-group--disabled {
        .d-checkbox__label,
        .d-radio__label {
            color: var(--dt-color-foreground-disabled);
            cursor: not-allowed;
        }
    }
}

.d-input-group__fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    &__label {
        display: flex;
        flex: 1 0%;
        align-items: baseline;
        justify-content: space-between;
        box-sizing: border-box;
        margin-bottom: var(--dt-space-300);
        color: var(--dt-color-foreground-secondary);
        font-weight: var(--dt-font-weight-semi-bold);
        font-size: var(--dt-font-size-200);
        font-family: inherit;
        line-height: var(--dt-font-line-height-300);
        word-break: break-word;
        overflow-wrap: break-word;
    }
}


//  ============================================================================
//  $   INPUT BLOCKS
//      This holds the radio or checkbox input
//  ----------------------------------------------------------------------------
.d-checkbox__input,
.d-radio__input {
    display: flex;
    align-self: flex-start;
    padding-top: var(--dt-space-300);
}


//  ============================================================================
//  $   COPY BLOCKS
//      This holds the label and description copy
//  ----------------------------------------------------------------------------
.d-checkbox__copy,
.d-radio__copy {
    display: inline-flex;
    flex-direction: column;
}

.d-checkbox__label,
.d-radio__label {
    display: inline-flex;
    flex: 1 auto;
    flex-direction: column;
    align-items: flex-start;
    color: var(--dt-color-foreground-primary);
    font: var(--dt-typography-label-md-plain);
    cursor: pointer;
}

.d-checkbox__description {
    display: flex;
    box-sizing: border-box;
    color: var(--dt-color-foreground-tertiary);
    font-size: var(--dt-font-size-100);
    font-family: inherit;
    line-height: var(--dt-font-line-height-400);
    fill: currentColor;
  }

//  ============================================================================
//  $   CHECKBOXES
//  ----------------------------------------------------------------------------
.d-checkbox {
    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        border-radius: var(--dt-size-radius-300);

        &:focus-visible,
        &:checked:focus-visible {
            box-shadow: var(--dt-shadow-focus);
        }

        &:checked {
            --check-radio-color-background: var(--check-radio-color-background-checked);

            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/></svg>");

            //  Disabled
            &[disabled] {
                --check-radio-color-background: var(--check-radio-color-background-disabled);

                background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/></svg>");
            }
        }

        &--disabled:checked {
            --check-radio-color-background: var(--check-radio-color-background-disabled);
            --check-radio-color-border: var(--check-radio-color-border-disabled);

            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/></svg>");
        }

        &--indeterminate,
        &:indeterminate {
            --check-radio-color-background: var(--check-radio-color-background-checked);
            --check-radio-color-border: var(--check-radio-color-border-checked);

            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='%23fff'/></svg>");

            &[disabled] {
                --check-radio-color-background: var(--check-radio-color-background-disabled);
                --check-radio-color-border: var(--check-radio-color-border-disabled);

                background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/></svg>");
            }
        }

        &--indeterminate&--disabled,
        &:indeterminate&--disabled {
            --check-radio-color-background: var(--check-radio-color-background-disabled);
            --check-radio-color-border: var(--check-radio-color-border-disabled);

            background-image: url("data:image/svg+xml,<svg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/></svg>");
        }

        //  Disabled
        &[disabled],
        &--disabled {
            --check-radio-color: var(--dt-color-foreground-disabled);
            --check-radio-color-border: var(--check-radio-color-border-disabled);
            --check-radio-color-background: var(--check-radio-color-background-disabled);
        }
    }
}

//  ============================================================================
//  $   RADIOS
//  ----------------------------------------------------------------------------
.d-radio {
    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
        border-radius: var(--dt-size-radius-circle);

        // Disabled
        &[disabled],
        &--disabled {
            --check-radio-color: var(--dt-color-foreground-disabled);
            --check-radio-color-border: var(--check-radio-color-border-disabled);
            --check-radio-color-background: var(--check-radio-color-background-disabled);
        }

        &:focus-visible,
        &:checked:focus-visible {
          box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
        }

        &:checked {
            --check-radio-color-background: var(--check-radio-color-background-checked);

            box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);

            // Disabled
            &[disabled] {
                --check-radio-color-background: var(--check-radio-color-background-disabled);
            }
        }

        &--disabled:checked {
            --check-radio-color-border: var(--check-radio-color-border-disabled);
            --check-radio-color-background: var(--check-radio-color-background-disabled);
        }
    }
}