mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 06:14:59 +00:00
115 lines
2.7 KiB
SCSS
115 lines
2.7 KiB
SCSS
// NativeSelect component styles
|
|
|
|
.native-select {
|
|
position: relative;
|
|
display: inline-flex;
|
|
min-width: 120px;
|
|
|
|
&--full-width {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
&--disabled {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&--error {
|
|
.native-select__input {
|
|
border-color: var(--color-error, #d32f2f);
|
|
|
|
&:focus {
|
|
border-color: var(--color-error, #d32f2f);
|
|
box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
appearance: none;
|
|
width: 100%;
|
|
padding: 10px 32px 10px 12px;
|
|
font-size: 1rem;
|
|
font-family: inherit;
|
|
line-height: 1.5;
|
|
color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
|
|
background-color: transparent;
|
|
border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.23));
|
|
border-radius: var(--border-radius, 4px);
|
|
cursor: pointer;
|
|
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&:hover:not(:disabled) {
|
|
border-color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary, #1976d2);
|
|
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
|
|
}
|
|
|
|
&:disabled {
|
|
color: var(--color-text-disabled, rgba(0, 0, 0, 0.38));
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// Remove default dropdown arrow in IE
|
|
&::-ms-expand {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
color: var(--color-text-secondary, rgba(0, 0, 0, 0.54));
|
|
}
|
|
|
|
// Variant: outlined (default)
|
|
&--outlined {
|
|
.native-select__input {
|
|
border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.23));
|
|
}
|
|
}
|
|
|
|
// Variant: filled
|
|
&--filled {
|
|
.native-select__input {
|
|
background-color: var(--color-fill-light, rgba(0, 0, 0, 0.06));
|
|
border: none;
|
|
border-bottom: 1px solid var(--color-divider, rgba(0, 0, 0, 0.42));
|
|
border-radius: var(--border-radius, 4px) var(--border-radius, 4px) 0 0;
|
|
padding: 25px 32px 8px 12px;
|
|
|
|
&:focus {
|
|
background-color: var(--color-fill-dark, rgba(0, 0, 0, 0.09));
|
|
box-shadow: none;
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: var(--color-primary, #1976d2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Variant: standard
|
|
&--standard {
|
|
.native-select__input {
|
|
border: none;
|
|
border-bottom: 1px solid var(--color-divider, rgba(0, 0, 0, 0.42));
|
|
border-radius: 0;
|
|
padding: 4px 24px 5px 0;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: var(--color-primary, #1976d2);
|
|
}
|
|
}
|
|
}
|
|
}
|