02aa441b3b
This way initially added for the multi select but after some discussions we decided to keep the label vertical even for the multi select. But this could be useful in the future.
59 lines
1.0 KiB
SCSS
59 lines
1.0 KiB
SCSS
.labelled-box {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
|
|
%text-style {
|
|
font-size: var(--c--components--forms-input--font-size);
|
|
font-weight: var(--c--components--forms-input--font-weight);
|
|
}
|
|
|
|
label {
|
|
position: absolute;
|
|
font-size: var(--c--theme--font--sizes--s);
|
|
left: 0;
|
|
top: 0.5rem;
|
|
transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
|
|
color: var(--c--theme--colors--greyscale-900);
|
|
opacity: 0.8;
|
|
|
|
&.placeholder {
|
|
@extend %text-style;
|
|
top: 16px;
|
|
}
|
|
}
|
|
|
|
&__children {
|
|
padding: 1.5rem 0 0 0;
|
|
display: flex;
|
|
}
|
|
|
|
&--no-label {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.labelled-box__children {
|
|
padding-top: 0;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
&--horizontal {
|
|
display: flex;
|
|
align-items: center;
|
|
height: auto;
|
|
|
|
label {
|
|
padding-top: 0;
|
|
position: static;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.labelled-box__children {
|
|
flex-grow: 1;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|