diff options
Diffstat (limited to 'src/objects/_card.scss')
-rw-r--r-- | src/objects/_card.scss | 72 |
1 files changed, 67 insertions, 5 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 5783ac1..9f84d7a 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
@@ -18,18 +18,26 @@ | |||
18 | ), | 18 | ), |
19 | ), | 19 | ), |
20 | --colors: ( | 20 | --colors: ( |
21 | --bg: fn.global-color(--bg-l2), | 21 | --bg: fn.global-color(--bg-l2), |
22 | --border: fn.global-color(--border-mute), | 22 | --image-bg: fn.global-color(--border-mute), |
23 | --divider: fn.global-color(--border-mute), | 23 | --border: fn.global-color(--border-mute), |
24 | --divider: fn.global-color(--border-mute), | ||
24 | 25 | ||
25 | --hover: ( | 26 | --hover: ( |
26 | --border: fn.global-color(--border), | 27 | --border: fn.global-color(--border), |
27 | ), | 28 | ), |
29 | |||
28 | --key-focus: ( | 30 | --key-focus: ( |
29 | --label: fn.global-color(--focus --text), | 31 | --label: fn.global-color(--focus --text), |
30 | --border: fn.global-color(--focus --border), | 32 | --border: fn.global-color(--focus --border), |
31 | --outline: fn.global-color(--focus --outline), | 33 | --outline: fn.global-color(--focus --outline), |
32 | ), | 34 | ), |
35 | |||
36 | --quiet: ( | ||
37 | --hover: ( | ||
38 | --border: fn.global-color(--text-disabled), | ||
39 | ), | ||
40 | ), | ||
33 | ), | 41 | ), |
34 | )); | 42 | )); |
35 | 43 | ||
@@ -59,8 +67,20 @@ | |||
59 | } | 67 | } |
60 | 68 | ||
61 | @include iro.bem-elem('image') { | 69 | @include iro.bem-elem('image') { |
62 | position: relative; | 70 | position: relative; |
63 | width: 100%; | 71 | width: 100%; |
72 | overflow: hidden; | ||
73 | background-color: fn.color(--image-bg); | ||
74 | |||
75 | &:first-child { | ||
76 | border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | ||
77 | border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | ||
78 | } | ||
79 | |||
80 | &:last-child { | ||
81 | border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | ||
82 | border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | ||
83 | } | ||
64 | 84 | ||
65 | @include iro.bem-next-elem('avatar') { | 85 | @include iro.bem-next-elem('avatar') { |
66 | margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); | 86 | margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); |
@@ -102,5 +122,47 @@ | |||
102 | background-color: fn.color(--divider); | 122 | background-color: fn.color(--divider); |
103 | } | 123 | } |
104 | } | 124 | } |
125 | |||
126 | @include iro.bem-modifier('quiet') { | ||
127 | position: relative; | ||
128 | border: 0; | ||
129 | background-color: transparent; | ||
130 | |||
131 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | ||
132 | &:hover, | ||
133 | &:active { | ||
134 | @include iro.bem-elem('image') { | ||
135 | outline: fn.dim(--border) solid fn.color(--quiet --hover --border); | ||
136 | outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border)); | ||
137 | } | ||
138 | } | ||
139 | |||
140 | &:focus-visible { | ||
141 | outline: none; | ||
142 | box-shadow: none; | ||
143 | |||
144 | @include iro.bem-elem('image') { | ||
145 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
146 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
147 | } | ||
148 | } | ||
149 | } | ||
150 | |||
151 | @include iro.bem-elem('image') { | ||
152 | margin: calc(-1 * fn.dim(--key-focus --border)); | ||
153 | border: fn.dim(--key-focus --border) solid transparent; | ||
154 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); | ||
155 | background-clip: padding-box; | ||
156 | } | ||
157 | |||
158 | @include iro.bem-elem('body') { | ||
159 | padding: 0; | ||
160 | padding-block-start: fn.dim(--spacing); | ||
161 | } | ||
162 | |||
163 | @include iro.bem-elem('footer') { | ||
164 | padding-inline: 0; | ||
165 | } | ||
166 | } | ||
105 | } | 167 | } |
106 | } | 168 | } |