67 lines
1.7 KiB
SCSS
67 lines
1.7 KiB
SCSS
.dropdownField {
|
|
display: flex;
|
|
height: var(--ktc-dimension-height-dropdown-field);
|
|
padding: var(--ktc-dimension-padding-dropdown-field);
|
|
align-items: center;
|
|
gap: var(--ktc-dimension-gap-dropdown-field);
|
|
border-radius: var(--ktc-border-radius-all-dropdown-field);
|
|
border: 1px solid var(--ktc-color-border-dropdown-field-default, #d3d3d5);
|
|
background: var(--ktc-color-background-dropdown-field-default, #fff);
|
|
width: 100%;
|
|
&:hover {
|
|
border-color: var(--ktc-color-border-dropdown-field-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:active {
|
|
border-color: var(--ktc-color-border-dropdown-field-active);
|
|
}
|
|
|
|
// &:focus {
|
|
// outline: none;
|
|
// box-shadow: var(--kts-box-shadow-item-focused);
|
|
// }
|
|
|
|
&__disabled {
|
|
border-color: var(ktc-color-border-dropdown-field-disabled);
|
|
background-color: var(--ktc-color-background-dropdown-field-disabled);
|
|
}
|
|
|
|
&__error {
|
|
border-color: var(--ktc-color-border-dropdown-field-error);
|
|
}
|
|
|
|
&__expanded {
|
|
border-color: var(--ktc-color-border-dropdown-field-active) !important;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
width: 100%;
|
|
text-align: left;
|
|
font-family: var(
|
|
--ktc-typography-component-dropdown-menu-item-label-font-family
|
|
);
|
|
font-size: var(--ktc-typography-component-dropdown-menu-item-label-font-size);
|
|
font-weight: var(
|
|
--ktc-typography-component-dropdown-menu-item-label-font-weight
|
|
);
|
|
|
|
letter-spacing: var(
|
|
--ktc-typography-component-dropdown-menu-item-label-letter-spacing
|
|
);
|
|
line-height: var(
|
|
--ktc-typography-component-dropdown-menu-item-label-line-height
|
|
);
|
|
|
|
// Todo: add typography token : var(ktc-typography-dropdown-text);
|
|
|
|
&__keyword {
|
|
color: var(--ktc-color-text-dropdown-text);
|
|
}
|
|
|
|
&__placeholder {
|
|
color: var(--ktc-color-text-dropdown-helper);
|
|
}
|
|
}
|