diff options
Diffstat (limited to 'src/objects/_field-label.scss')
| -rw-r--r-- | src/objects/_field-label.scss | 88 |
1 files changed, 44 insertions, 44 deletions
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index aa12eb5..fb664b4 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
| @@ -1,74 +1,74 @@ | |||
| 1 | @use 'sass:meta'; | 1 | @use "sass:meta"; |
| 2 | @use 'iro-sass/src/bem'; | 2 | @use "pkg:iro-sass/bem"; |
| 3 | @use 'iro-sass/src/props'; | 3 | @use "pkg:iro-sass/props"; |
| 4 | @use '../props' as *; | 4 | @use "../props" as *; |
| 5 | 5 | ||
| 6 | @forward 'field-label.vars'; | 6 | @forward "field-label.vars"; |
| 7 | @use 'field-label.vars' as vars; | 7 | @use "field-label.vars" as vars; |
| 8 | 8 | ||
| 9 | @mixin styles { | 9 | @mixin styles { |
| 10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables("vars")); |
| 11 | 11 | ||
| 12 | @include bem.object('field-label') { | 12 | @include bem.object("field-label") { |
| 13 | @include bem.elem('label') { | 13 | @include bem.elem("label") { |
| 14 | display: block; | 14 | display: block; |
| 15 | flex: 0 0 auto; | 15 | flex: 0 0 auto; |
| 16 | padding-inline-end: props.get(vars.$spacing-i); | 16 | padding-inline-end: props.get(vars.$spacing-i); |
| 17 | font-size: props.get(vars.$label-font-size); | 17 | font-size: props.get(vars.$label-font-size); |
| 18 | font-weight: 400; | 18 | font-weight: 400; |
| 19 | line-height: 1.3; | 19 | line-height: 1.3; |
| 20 | color: props.get(vars.$label-color); | 20 | color: props.get(vars.$label-color); |
| 21 | 21 | ||
| 22 | @include bem.next-elem('content') { | 22 | @include bem.next-elem("content") { |
| 23 | margin-block-start: props.get(vars.$spacing-b); | 23 | margin-block-start: props.get(vars.$spacing-b); |
| 24 | } | 24 | } |
| 25 | } | 25 | } |
| 26 | 26 | ||
| 27 | @include bem.elem('content') { | 27 | @include bem.elem("content") { |
| 28 | display: block; | 28 | display: block; |
| 29 | flex: 1 1 auto; | 29 | flex: 1 1 auto; |
| 30 | } | 30 | } |
| 31 | 31 | ||
| 32 | @include bem.elem('hint') { | 32 | @include bem.elem("hint") { |
| 33 | display: block; | 33 | display: block; |
| 34 | margin-block-start: props.get(vars.$spacing-b); | 34 | margin-block-start: props.get(vars.$spacing-b); |
| 35 | font-size: props.get(vars.$hint-font-size); | 35 | font-size: props.get(vars.$hint-font-size); |
| 36 | color: props.get(vars.$hint-color); | 36 | color: props.get(vars.$hint-color); |
| 37 | } | 37 | } |
| 38 | 38 | ||
| 39 | @include bem.is('invalid') { | 39 | @include bem.is("invalid") { |
| 40 | @include bem.elem('hint') { | 40 | @include bem.elem("hint") { |
| 41 | color: props.get(vars.$error-hint-color); | 41 | color: props.get(vars.$error-hint-color); |
| 42 | } | 42 | } |
| 43 | } | 43 | } |
| 44 | 44 | ||
| 45 | @include bem.is('disabled') { | 45 | @include bem.is("disabled") { |
| 46 | @include bem.elem('label', 'hint') { | 46 | @include bem.elem("label", "hint") { |
| 47 | color: props.get(vars.$disabled-color); | 47 | color: props.get(vars.$disabled-color); |
| 48 | } | 48 | } |
| 49 | } | 49 | } |
| 50 | 50 | ||
| 51 | @include bem.modifier('align-start', 'align-end') { | 51 | @include bem.modifier("align-start", "align-end") { |
| 52 | display: flex; | 52 | display: flex; |
| 53 | align-items: baseline; | 53 | align-items: baseline; |
| 54 | 54 | ||
| 55 | @include bem.elem('label') { | 55 | @include bem.elem("label") { |
| 56 | display: inline-block; | 56 | display: inline-block; |
| 57 | 57 | ||
| 58 | @include bem.next-elem('content') { | 58 | @include bem.next-elem("content") { |
| 59 | margin-block-start: 0; | 59 | margin-block-start: 0; |
| 60 | } | 60 | } |
| 61 | } | 61 | } |
| 62 | } | 62 | } |
| 63 | 63 | ||
| 64 | @include bem.modifier('align-start') { | 64 | @include bem.modifier("align-start") { |
| 65 | @include bem.elem('label') { | 65 | @include bem.elem("label") { |
| 66 | text-align: start; | 66 | text-align: start; |
| 67 | } | 67 | } |
| 68 | } | 68 | } |
| 69 | 69 | ||
| 70 | @include bem.modifier('align-end') { | 70 | @include bem.modifier("align-end") { |
| 71 | @include bem.elem('label') { | 71 | @include bem.elem("label") { |
| 72 | text-align: end; | 72 | text-align: end; |
| 73 | } | 73 | } |
| 74 | } | 74 | } |