blob: 564ab2b9d04b5186ff6ca4294839fd16536fee42 (
plain) (
tree)
|
|
@use 'sass:meta';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use '../props' as *;
@forward 'field-label.vars';
@use 'field-label.vars' as vars;
@mixin styles {
@include materialize-at-root(meta.module-variables('vars'));
@include bem.object('field-label') {
@include bem.elem('label') {
display: block;
flex: 0 0 auto;
padding-inline-end: props.get(vars.$spacing-i);
font-size: props.get(vars.$label-font-size);
font-weight: 400;
line-height: 1.3;
color: props.get(vars.$label-color);
@include bem.next-elem('content') {
margin-block-start: props.get(vars.$spacing-b);
}
}
@include bem.elem('content') {
display: block;
flex: 1 1 auto;
}
@include bem.elem('hint') {
display: block;
margin-block-start: props.get(vars.$spacing-b);
font-size: props.get(vars.$hint-font-size);
color: props.get(vars.$hint-color);
}
@include bem.is('invalid') {
@include bem.elem('hint') {
color: props.get(vars.$error-hint-color);
}
}
@include bem.is('disabled') {
@include bem.elem('label', 'hint') {
color: props.get(vars.$disabled-color);
}
}
@include bem.modifier('align-start', 'align-end') {
display: flex;
align-items: baseline;
@include bem.elem('label') {
display: inline-block;
@include bem.next-elem('content') {
margin-block-start: 0;
}
}
}
@include bem.modifier('align-start') {
@include bem.elem('label') {
text-align: start;
}
}
@include bem.modifier('align-end') {
@include bem.elem('label') {
text-align: end;
}
}
}
}
|