71 lines
1.9 KiB
SCSS
71 lines
1.9 KiB
SCSS
|
@use '@beeline/design-tokens/scss/tokens/components/textfield' as *;
|
||
|
|
@use '@beeline/design-tokens/scss/tokens/globals';
|
||
|
|
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
|
||
|
|
|
||
|
|
.textfield {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: globals.$size-control-height-medium;
|
||
|
|
border: globals.$size-border-width-regular solid transparent;
|
||
|
|
padding-top: $textfield-without-label-medium-text-margin-vertical;
|
||
|
|
padding-bottom: $textfield-without-label-medium-text-margin-vertical;
|
||
|
|
background-color: theme.$color-control-background;
|
||
|
|
border-radius: 12px; // globals.$size-border-radius-x6;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: theme.$color-control-background-hover;
|
||
|
|
}
|
||
|
|
|
||
|
|
// input
|
||
|
|
input {
|
||
|
|
outline: none;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// label
|
||
|
|
&--with-label {
|
||
|
|
// padding-top: $textfield-with-label-medium-text-margin-top;
|
||
|
|
// padding-bottom: $textfield-with-label-medium-text-margin-bottom;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__label {
|
||
|
|
// padding-top: $textfield-medium-label-margin-top;
|
||
|
|
|
||
|
|
&.textfield__label--floated {
|
||
|
|
// padding-top: $textfield-medium-label-margin-top-floated;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// small
|
||
|
|
&--small {
|
||
|
|
height: globals.$size-control-height-small;
|
||
|
|
}
|
||
|
|
|
||
|
|
// large
|
||
|
|
&--large {
|
||
|
|
height: globals.$size-control-height-large;
|
||
|
|
padding-top: $textfield-without-label-large-text-margin-vertical;
|
||
|
|
padding-bottom: $textfield-without-label-large-text-margin-vertical;
|
||
|
|
|
||
|
|
&.textfield--with-label {
|
||
|
|
padding-top: $textfield-with-label-large-text-margin-top;
|
||
|
|
padding-bottom: $textfield-with-label-large-text-margin-bottom;
|
||
|
|
}
|
||
|
|
|
||
|
|
.textfield__label {
|
||
|
|
padding-top: $textfield-large-label-margin-top;
|
||
|
|
|
||
|
|
&.textfield__label--floated {
|
||
|
|
padding-top: $textfield-large-label-margin-top-floated;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// states
|
||
|
|
&--focused {
|
||
|
|
border-color: theme.$color-border-focus;
|
||
|
|
background-color: theme.$color-background-base;
|
||
|
|
}
|
||
|
|
}
|