summaryrefslogtreecommitdiffstats
path: root/src
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
parentUpdate (diff)
downloadiro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.gz
iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.bz2
iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.zip
Add card
Diffstat (limited to 'src')
-rw-r--r--src/_utils.scss8
-rw-r--r--src/layouts/_media.scss51
-rw-r--r--src/objects/_card.scss24
3 files changed, 38 insertions, 45 deletions
diff --git a/src/_utils.scss b/src/_utils.scss
index 8ba2581..a99d7ec 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -11,7 +11,9 @@ $dirs: (
11 'is': '-inline-start', 11 'is': '-inline-start',
12 'ie': '-inline-end', 12 'ie': '-inline-end',
13 'i': '-inline', 13 'i': '-inline',
14); 14) !default;
15
16$sizes: 0 10 50 75 100 125 200 400 700 800 !default;
15 17
16@include iro.bem-utility('d-block') { 18@include iro.bem-utility('d-block') {
17 display: block; 19 display: block;
@@ -177,7 +179,7 @@ $dirs: (
177 padding#{$suffix}: auto; 179 padding#{$suffix}: auto;
178 } 180 }
179 181
180 @each $size in (0 10 50 75 100 125 200 400 700 800) { 182 @each $size in $sizes {
181 @include iro.bem-utility('m#{$dir}-#{$size}') { 183 @include iro.bem-utility('m#{$dir}-#{$size}') {
182 margin#{$suffix}: fn.global-dim(--size --#{$size}); 184 margin#{$suffix}: fn.global-dim(--size --#{$size});
183 } 185 }
@@ -192,6 +194,6 @@ $dirs: (
192 } 194 }
193 195
194 @include iro.bem-utility('b#{$dir}-1') { 196 @include iro.bem-utility('b#{$dir}-1') {
195 border#{$suffix}: 1px solid fn.global-color(--border); 197 border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border);
196 } 198 }
197} 199}
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') {
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 07256cb..5783ac1 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -53,13 +53,21 @@
53 } 53 }
54 } 54 }
55 55
56 @include iro.bem-elem('thumbnail') { 56 @include iro.bem-elem('avatar') {
57 margin-block-start: fn.dim(--pad-b);
58 margin-inline-start: fn.dim(--pad-i);
59 }
60
61 @include iro.bem-elem('image') {
57 position: relative; 62 position: relative;
58 width: 100%; 63 width: 100%;
59 height: 100%; 64
65 @include iro.bem-next-elem('avatar') {
66 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
67 }
60 } 68 }
61 69
62 @include iro.bem-elem('thumbnail-img') { 70 @include iro.bem-elem('image-img') {
63 display: block; 71 display: block;
64 object-fit: cover; 72 object-fit: cover;
65 width: 100%; 73 width: 100%;
@@ -69,6 +77,16 @@
69 @include iro.bem-elem('body') { 77 @include iro.bem-elem('body') {
70 padding-block: fn.dim(--pad-b); 78 padding-block: fn.dim(--pad-b);
71 padding-inline: fn.dim(--pad-i); 79 padding-inline: fn.dim(--pad-i);
80
81 &::before {
82 content: '';
83 display: block;
84 margin-block: -100em 100em;
85 }
86 }
87
88 @include iro.bem-elem('content') {
89 margin-block-start: fn.dim(--spacing);
72 } 90 }
73 91
74 @include iro.bem-elem('footer') { 92 @include iro.bem-elem('footer') {