62 lines
1.7 KiB
SCSS
62 lines
1.7 KiB
SCSS
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ktc-dimension-gap-dropdown-vertical);
|
|
|
|
.dropdownWrapper {
|
|
position: relative;
|
|
& > ul {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: calc(100% + 4px);
|
|
box-sizing: border-box;
|
|
max-height: calc(
|
|
var(--ktc-dimension-height-dropdown-menu-item) * 4.5
|
|
); //max-height of the container is 4.5 time the height of an option.
|
|
overflow: scroll;
|
|
}
|
|
|
|
& > button[aria-expanded='false'] ~ ul {
|
|
visibility: hidden;
|
|
}
|
|
|
|
& > button[aria-expanded='true'] ~ ul {
|
|
visibility: visible;
|
|
}
|
|
|
|
&__up > ul {
|
|
bottom: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.label {
|
|
color: var(--ktc-color-text-dropdown-label);
|
|
font-family: var(--ktc-typography-component-dropdown-label-font-family);
|
|
font-size: var(--ktc-typography-component-dropdown-label-font-size);
|
|
font-weight: var(--ktc-typography-component-dropdown-label-font-weight);
|
|
letter-spacing: var(--ktc-typography-component-dropdown-label-letter-spacing);
|
|
line-height: var(--ktc-typography-component-dropdown-label-line-height);
|
|
}
|
|
|
|
.helper {
|
|
color: var(--ktc-color-text-dropdown-helper);
|
|
font-family: var(--ktc-typography-component-dropdown-helper-font-family);
|
|
font-size: var(--ktc-typography-component-dropdown-helper-font-size);
|
|
font-weight: var(--ktc-typography-component-dropdown-helper-font-weight);
|
|
letter-spacing: var(
|
|
--ktc-typography-component-dropdown-helper-letter-spacing
|
|
);
|
|
line-height: var(--ktc-typography-component-dropdown-helper-line-height);
|
|
|
|
&__error {
|
|
color: var(--ktc-color-text-dropdown-error);
|
|
}
|
|
}
|
|
|
|
.headingButton {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
}
|