summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-27 11:26:15 +0200
committerVolpeon <git@volpeon.ink>2024-06-27 11:26:15 +0200
commit57e28f7fe929f275a0c516d0a702ec8a8739a810 (patch)
treefd84e604e0d19dba9c18d93097837a6b1d58199e /src/layouts
parentUpdate (diff)
downloadiro-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.scss51
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') {