diff options
author | Volpeon <git@volpeon.ink> | 2024-06-27 09:56:02 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-27 09:56:02 +0200 |
commit | d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784 (patch) | |
tree | 19e9a649bcf6ca6559ed7ad46b0fd2c23e664521 /src/objects/_card.scss | |
parent | Update (diff) | |
download | iro-design-d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784.tar.gz iro-design-d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784.tar.bz2 iro-design-d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784.zip |
Update
Diffstat (limited to 'src/objects/_card.scss')
-rw-r--r-- | src/objects/_card.scss | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss new file mode 100644 index 0000000..07256cb --- /dev/null +++ b/src/objects/_card.scss | |||
@@ -0,0 +1,88 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('card') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --border: fn.global-dim(--border --thin), | ||
8 | --divider: fn.global-dim(--border --thin), | ||
9 | --pad-i: fn.global-dim(--size --300), | ||
10 | --pad-b: fn.global-dim(--size --250), | ||
11 | --spacing: fn.global-dim(--size --200), | ||
12 | --rounding: fn.global-dim(--rounding), | ||
13 | |||
14 | --key-focus: ( | ||
15 | --border: fn.global-dim(--key-focus --border), | ||
16 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
17 | --outline: fn.global-dim(--key-focus --outline), | ||
18 | ), | ||
19 | ), | ||
20 | --colors: ( | ||
21 | --bg: fn.global-color(--bg-l2), | ||
22 | --border: fn.global-color(--border-mute), | ||
23 | --divider: fn.global-color(--border-mute), | ||
24 | |||
25 | --hover: ( | ||
26 | --border: fn.global-color(--border), | ||
27 | ), | ||
28 | --key-focus: ( | ||
29 | --label: fn.global-color(--focus --text), | ||
30 | --border: fn.global-color(--focus --border), | ||
31 | --outline: fn.global-color(--focus --outline), | ||
32 | ), | ||
33 | ), | ||
34 | )); | ||
35 | |||
36 | @include iro.bem-object(iro.props-namespace()) { | ||
37 | display: block; | ||
38 | border: fn.dim(--border) solid fn.color(--border); | ||
39 | border-radius: fn.dim(--rounding); | ||
40 | background-color: fn.color(--bg); | ||
41 | |||
42 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | ||
43 | &:hover, | ||
44 | &:focus-visible, | ||
45 | &:active { | ||
46 | border-color: fn.color(--hover --border); | ||
47 | } | ||
48 | |||
49 | &:focus-visible { | ||
50 | border-color: fn.color(--key-focus --border); | ||
51 | outline: fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border)); | ||
52 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
53 | } | ||
54 | } | ||
55 | |||
56 | @include iro.bem-elem('thumbnail') { | ||
57 | position: relative; | ||
58 | width: 100%; | ||
59 | height: 100%; | ||
60 | } | ||
61 | |||
62 | @include iro.bem-elem('thumbnail-img') { | ||
63 | display: block; | ||
64 | object-fit: cover; | ||
65 | width: 100%; | ||
66 | height: 100%; | ||
67 | } | ||
68 | |||
69 | @include iro.bem-elem('body') { | ||
70 | padding-block: fn.dim(--pad-b); | ||
71 | padding-inline: fn.dim(--pad-i); | ||
72 | } | ||
73 | |||
74 | @include iro.bem-elem('footer') { | ||
75 | padding-block: 0 fn.dim(--pad-b); | ||
76 | padding-inline: fn.dim(--pad-i); | ||
77 | margin-block-start: calc(-1 * fn.dim(--pad-b)); | ||
78 | |||
79 | &::before { | ||
80 | content: ''; | ||
81 | display: block; | ||
82 | height: fn.dim(--divider); | ||
83 | margin-block: fn.dim(--spacing); | ||
84 | background-color: fn.color(--divider); | ||
85 | } | ||
86 | } | ||
87 | } | ||
88 | } | ||