diff options
| author | Volpeon <git@volpeon.ink> | 2024-06-27 11:26:15 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2024-06-27 11:26:15 +0200 |
| commit | 57e28f7fe929f275a0c516d0a702ec8a8739a810 (patch) | |
| tree | fd84e604e0d19dba9c18d93097837a6b1d58199e /src/layouts | |
| parent | Update (diff) | |
| download | iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.gz iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.bz2 iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.zip | |
Add card
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/_media.scss | 51 |
1 files changed, 12 insertions, 39 deletions
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss index 953c8c0..1227486 100644 --- a/src/layouts/_media.scss +++ b/src/layouts/_media.scss | |||
| @@ -1,57 +1,30 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
| 2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
| 3 | 3 | ||
| 4 | $sizes: 'gapless' 'sm' 'lg' 'xl' !default; | ||
| 5 | |||
| 4 | @include iro.props-namespace('media') { | 6 | @include iro.props-namespace('media') { |
| 5 | @include iro.props-store(( | 7 | @include iro.props-store(( |
| 6 | --dims: ( | 8 | --dims: ( |
| 7 | --pad-x: fn.global-dim(--size --150), | 9 | --gap: fn.global-dim(--size --150), |
| 8 | --pad-y: fn.global-dim(--size --85), | ||
| 9 | |||
| 10 | --75: ( | ||
| 11 | --pad-x: fn.global-dim(--size --100), | ||
| 12 | --pad-y: fn.global-dim(--size --50), | ||
| 13 | ), | ||
| 14 | 10 | ||
| 15 | --200: ( | 11 | --gapless: 0, |
| 16 | --pad-x: fn.global-dim(--size --300), | 12 | --sm: fn.global-dim(--size --100), |
| 17 | --pad-y: fn.global-dim(--size --150), | 13 | --lg: fn.global-dim(--size --300), |
| 18 | ), | 14 | --xl: fn.global-dim(--size --450), |
| 19 | |||
| 20 | --300: ( | ||
| 21 | --pad-x: fn.global-dim(--size --450), | ||
| 22 | --pad-y: fn.global-dim(--size --225), | ||
| 23 | ) | ||
| 24 | ) | 15 | ) |
| 25 | )); | 16 | )); |
| 26 | 17 | ||
| 27 | @include iro.bem-layout(iro.props-namespace()) { | 18 | @include iro.bem-layout(iro.props-namespace()) { |
| 28 | display: flex; | 19 | display: flex; |
| 29 | align-items: center; | 20 | align-items: center; |
| 30 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | 21 | gap: fn.dim(--gap); |
| 31 | gap: fn.dim(--pad-x); | ||
| 32 | line-height: 1.4; | 22 | line-height: 1.4; |
| 33 | 23 | ||
| 34 | @include iro.bem-modifier('75') { | 24 | @each $size in $sizes { |
| 35 | padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); | 25 | @include iro.bem-modifier($size) { |
| 36 | gap: fn.dim(--75 --pad-x); | 26 | gap: fn.dim(--#{$size}); |
| 37 | } | 27 | } |
| 38 | |||
| 39 | @include iro.bem-modifier('200') { | ||
| 40 | padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); | ||
| 41 | gap: fn.dim(--200 --pad-x); | ||
| 42 | } | ||
| 43 | |||
| 44 | @include iro.bem-modifier('300') { | ||
| 45 | padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x); | ||
| 46 | gap: fn.dim(--300 --pad-x); | ||
| 47 | } | ||
| 48 | |||
| 49 | @include iro.bem-modifier('flush') { | ||
| 50 | padding: 0; | ||
| 51 | } | ||
| 52 | |||
| 53 | @include iro.bem-modifier('gapless') { | ||
| 54 | gap: 0; | ||
| 55 | } | 28 | } |
| 56 | 29 | ||
| 57 | @include iro.bem-modifier('wrap') { | 30 | @include iro.bem-modifier('wrap') { |