@dialpad/dialtone-css
Version:
Dialpad's design system
296 lines (250 loc) • 12.8 kB
text/less
//
// 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-hover: var(--dt-checkbox-color-border-unchecked-hover);
--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;
}
&:not(:disabled):hover {
border-color: var(--check-radio-color-border-hover);
}
&: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
cursor: pointer;
}
// -- Wrapper Disabled State
.d-checkbox-group--disabled,
.d-radio-group--disabled {
cursor: not-allowed;
.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);
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__messages,
.d-radio__messages {
margin-top: var(--dt-space-200-negative);
margin-left: var(--dt-space-550);
}
.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: auto;
border-radius: var(--dt-size-radius-300);
&:focus,
&: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='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='white'/> </svg>");
border: 0;
[data-dt-theme="dark"] & {
background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='black'/> </svg>");
}
// Disabled
&[disabled] {
--check-radio-color-background: var(--check-radio-color-background-disabled);
background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='gray'/> </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='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='gray'/> </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='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M11.9955 7C11.9955 7.55228 11.5478 8 10.9955 8H3.00415C2.45187 8 2.00415 7.55228 2.00415 7V7C2.00415 6.44772 2.45187 6 3.00415 6H10.9955C11.5478 6 11.9955 6.44772 11.9955 7V7Z' fill='white'/> </svg>");
border: 0;
[data-dt-theme="dark"] & {
background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M11.9955 7C11.9955 7.55228 11.5478 8 10.9955 8H3.00415C2.45187 8 2.00415 7.55228 2.00415 7V7C2.00415 6.44772 2.45187 6 3.00415 6H10.9955C11.5478 6 11.9955 6.44772 11.9955 7V7Z' fill='black'/> </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='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M11.9955 7C11.9955 7.55228 11.5478 8 10.9955 8H3.00415C2.45187 8 2.00415 7.55228 2.00415 7V7C2.00415 6.44772 2.45187 6 3.00415 6H10.9955C11.5478 6 11.9955 6.44772 11.9955 7V7Z' fill='gray'/> </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='14' height='14' 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);
}
&:checked {
--check-radio-color-background: var(--check-radio-color-background-checked);
border-color: transparent;
box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-radio-color-foreground-checked);
// Disabled
&[disabled] {
--check-radio-color-background: var(--check-radio-color-background-disabled);
}
}
&:focus,
&:focus-visible,
&:checked:focus-visible {
box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-200) var(--dt-radio-color-foreground-checked);
}
&--disabled:checked {
--check-radio-color-border: var(--check-radio-color-border-disabled);
--check-radio-color-background: var(--check-radio-color-background-disabled);
}
}
}