diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/_utils.scss | 4 | ||||
| -rw-r--r-- | src/layouts/_form.scss | 6 | ||||
| -rw-r--r-- | src/objects/_dialog.scss | 1 | ||||
| -rw-r--r-- | src/objects/_field-label.scss | 8 |
4 files changed, 13 insertions, 6 deletions
diff --git a/src/_utils.scss b/src/_utils.scss index 8ac1b01..ce0220a 100644 --- a/src/_utils.scss +++ b/src/_utils.scss | |||
| @@ -63,7 +63,7 @@ $dirs: ( | |||
| 63 | margin#{$suffix}: auto; | 63 | margin#{$suffix}: auto; |
| 64 | } | 64 | } |
| 65 | 65 | ||
| 66 | @each $size in (0 50 100) { | 66 | @each $size in (0 10 50 100 200) { |
| 67 | @include iro.bem-utility('m#{$dir}-#{$size}') { | 67 | @include iro.bem-utility('m#{$dir}-#{$size}') { |
| 68 | margin#{$suffix}: fn.global-dim(--size --#{$size}); | 68 | margin#{$suffix}: fn.global-dim(--size --#{$size}); |
| 69 | } | 69 | } |
| @@ -75,7 +75,7 @@ $dirs: ( | |||
| 75 | padding#{$suffix}: auto; | 75 | padding#{$suffix}: auto; |
| 76 | } | 76 | } |
| 77 | 77 | ||
| 78 | @each $size in (0 50 100) { | 78 | @each $size in (0 10 50 100 200) { |
| 79 | @include iro.bem-utility('p#{$dir}-#{$size}') { | 79 | @include iro.bem-utility('p#{$dir}-#{$size}') { |
| 80 | padding#{$suffix}: fn.global-dim(--size --#{$size}); | 80 | padding#{$suffix}: fn.global-dim(--size --#{$size}); |
| 81 | } | 81 | } |
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index 8228c44..15dca2e 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss | |||
| @@ -15,13 +15,17 @@ | |||
| 15 | @include iro.bem-layout(iro.props-namespace()) { | 15 | @include iro.bem-layout(iro.props-namespace()) { |
| 16 | display: flex; | 16 | display: flex; |
| 17 | flex-direction: column; | 17 | flex-direction: column; |
| 18 | align-items: baseline; | ||
| 19 | gap: fn.dim(--item-spacing-y) fn.dim(--label-spacing-x); | 18 | gap: fn.dim(--item-spacing-y) fn.dim(--label-spacing-x); |
| 20 | 19 | ||
| 20 | @include iro.bem-elem('item') { | ||
| 21 | display: block; | ||
| 22 | } | ||
| 23 | |||
| 21 | @include iro.bem-modifier('labels-left', 'labels-right') { | 24 | @include iro.bem-modifier('labels-left', 'labels-right') { |
| 22 | display: grid; | 25 | display: grid; |
| 23 | grid-template-columns: auto 1fr; | 26 | grid-template-columns: auto 1fr; |
| 24 | grid-template-rows: auto; | 27 | grid-template-rows: auto; |
| 28 | align-items: baseline; | ||
| 25 | 29 | ||
| 26 | @include iro.bem-elem('item') { | 30 | @include iro.bem-elem('item') { |
| 27 | display: contents; | 31 | display: contents; |
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index b0b435f..ad6e7db 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss | |||
| @@ -76,6 +76,7 @@ | |||
| 76 | grid-area: body; | 76 | grid-area: body; |
| 77 | min-height: 0; | 77 | min-height: 0; |
| 78 | margin-top: fn.dim(--title-body-spacing); | 78 | margin-top: fn.dim(--title-body-spacing); |
| 79 | overflow: auto; | ||
| 79 | } | 80 | } |
| 80 | 81 | ||
| 81 | @include iro.bem-elem('footer') { | 82 | @include iro.bem-elem('footer') { |
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index e990568..4195e11 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
| @@ -21,10 +21,11 @@ | |||
| 21 | ), 'colors'); | 21 | ), 'colors'); |
| 22 | 22 | ||
| 23 | @include iro.bem-object(iro.props-namespace()) { | 23 | @include iro.bem-object(iro.props-namespace()) { |
| 24 | display: inline-block; | 24 | display: block; |
| 25 | 25 | ||
| 26 | @include iro.bem-elem('label') { | 26 | @include iro.bem-elem('label') { |
| 27 | display: block; | 27 | display: block; |
| 28 | flex: 0 0 auto; | ||
| 28 | padding-right: fn.dim(--spacing-x); | 29 | padding-right: fn.dim(--spacing-x); |
| 29 | color: fn.color(--label); | 30 | color: fn.color(--label); |
| 30 | font-size: fn.dim(--label-font-size); | 31 | font-size: fn.dim(--label-font-size); |
| @@ -37,7 +38,8 @@ | |||
| 37 | } | 38 | } |
| 38 | 39 | ||
| 39 | @include iro.bem-elem('content') { | 40 | @include iro.bem-elem('content') { |
| 40 | display: inline-block; | 41 | display: block; |
| 42 | width: 100%; | ||
| 41 | } | 43 | } |
| 42 | 44 | ||
| 43 | @include iro.bem-elem('hint') { | 45 | @include iro.bem-elem('hint') { |
| @@ -60,7 +62,7 @@ | |||
| 60 | } | 62 | } |
| 61 | 63 | ||
| 62 | @include iro.bem-modifier('left', 'right') { | 64 | @include iro.bem-modifier('left', 'right') { |
| 63 | display: inline-flex; | 65 | display: flex; |
| 64 | align-items: baseline; | 66 | align-items: baseline; |
| 65 | 67 | ||
| 66 | @include iro.bem-elem('label') { | 68 | @include iro.bem-elem('label') { |
