5a9d77042f
Previously we enforced the height of the LabelledBox div with height: 100%, but if the parent container of LabelledBox had an auto height this wasn't working anymore. Setting height: 100% to a child works only if its parent has a fixed height. In our situation we needed the LabelledBox to work for the multi select which has a auto growing height. To solve this issue we just have to force the parent containers of LabelledBox to display flex in order for it to stretches its children to take all of its height, including LabelledBox div.
58 lines
1.0 KiB
SCSS
58 lines
1.0 KiB
SCSS
.labelled-box {
|
|
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;
|
|
}
|
|
}
|
|
}
|