diff options
author | Volpeon <git@volpeon.ink> | 2024-10-14 16:15:34 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-14 16:15:34 +0200 |
commit | ef117e73dec37973b366722a56b2b5a17b9f0a2b (patch) | |
tree | e87dd64728ae8808e850e99319242333c5b4ce6e /src/objects | |
parent | More (diff) | |
download | iro-design-ef117e73dec37973b366722a56b2b5a17b9f0a2b.tar.gz iro-design-ef117e73dec37973b366722a56b2b5a17b9f0a2b.tar.bz2 iro-design-ef117e73dec37973b366722a56b2b5a17b9f0a2b.zip |
Color adjustments, borderless cards
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_card.scss | 41 |
1 files changed, 23 insertions, 18 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index f56a96c..650ec3f 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
@@ -4,13 +4,16 @@ | |||
4 | @include iro.props-namespace('card') { | 4 | @include iro.props-namespace('card') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --border: fn.global-dim(--border --thin), | ||
8 | --divider: fn.global-dim(--border --thin), | 7 | --divider: fn.global-dim(--border --thin), |
9 | --pad-i: fn.global-dim(--size --300), | 8 | --pad-i: fn.global-dim(--size --300), |
10 | --pad-b: fn.global-dim(--size --250), | 9 | --pad-b: fn.global-dim(--size --250), |
11 | --spacing: fn.global-dim(--size --200), | 10 | --spacing: fn.global-dim(--size --200), |
12 | --rounding: fn.global-dim(--rounding), | 11 | --rounding: fn.global-dim(--rounding), |
13 | 12 | ||
13 | --hover: ( | ||
14 | --offset-b: calc(-1 * fn.global-dim(--size --65)), | ||
15 | ), | ||
16 | |||
14 | --key-focus: ( | 17 | --key-focus: ( |
15 | --border: fn.global-dim(--key-focus --border), | 18 | --border: fn.global-dim(--key-focus --border), |
16 | --border-offset: fn.global-dim(--key-focus --border-offset), | 19 | --border-offset: fn.global-dim(--key-focus --border-offset), |
@@ -19,13 +22,8 @@ | |||
19 | ), | 22 | ), |
20 | --colors: ( | 23 | --colors: ( |
21 | --bg: fn.global-color(--bg-l2), | 24 | --bg: fn.global-color(--bg-l2), |
22 | --border: fn.global-color(--border-mute), | ||
23 | --divider: fn.global-color(--border-mute), | 25 | --divider: fn.global-color(--border-mute), |
24 | 26 | ||
25 | --hover: ( | ||
26 | --border: fn.global-color(--border), | ||
27 | ), | ||
28 | |||
29 | --key-focus: ( | 27 | --key-focus: ( |
30 | --label: fn.global-color(--focus --text), | 28 | --label: fn.global-color(--focus --text), |
31 | --border: fn.global-color(--focus --border), | 29 | --border: fn.global-color(--focus --border), |
@@ -44,20 +42,22 @@ | |||
44 | 42 | ||
45 | @include iro.bem-object(iro.props-namespace()) { | 43 | @include iro.bem-object(iro.props-namespace()) { |
46 | display: block; | 44 | display: block; |
47 | border: fn.dim(--border) solid fn.color(--border); | 45 | margin: calc(-1 * fn.dim(--key-focus --border)); |
48 | border-radius: fn.dim(--rounding); | 46 | transition: transform .2s; |
47 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
48 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
49 | background-color: fn.color(--bg); | 49 | background-color: fn.color(--bg); |
50 | background-clip: content-box; | ||
50 | 51 | ||
51 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | 52 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
52 | &:hover, | 53 | &:hover, |
53 | &:focus-visible, | 54 | &:active, |
54 | &:active { | 55 | &:focus-visible { |
55 | border-color: fn.color(--hover --border); | 56 | transform: translateY(fn.dim(--hover --offset-b)); |
56 | } | 57 | } |
57 | 58 | ||
58 | &:focus-visible { | 59 | &:focus-visible { |
59 | border-color: fn.color(--key-focus --border); | 60 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); |
60 | outline: fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border)); | ||
61 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 61 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); |
62 | } | 62 | } |
63 | } | 63 | } |
@@ -71,15 +71,16 @@ | |||
71 | display: block; | 71 | display: block; |
72 | inline-size: 100%; | 72 | inline-size: 100%; |
73 | object-fit: cover; | 73 | object-fit: cover; |
74 | transition: transform .2s, opacity .2s; | ||
74 | 75 | ||
75 | &:first-child { | 76 | &:first-child { |
76 | border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 77 | border-start-start-radius: fn.dim(--rounding); |
77 | border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 78 | border-start-end-radius: fn.dim(--rounding); |
78 | } | 79 | } |
79 | 80 | ||
80 | &:last-child { | 81 | &:last-child { |
81 | border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 82 | border-end-start-radius: fn.dim(--rounding); |
82 | border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | 83 | border-end-end-radius: fn.dim(--rounding); |
83 | } | 84 | } |
84 | 85 | ||
85 | @include iro.bem-next-elem('avatar') { | 86 | @include iro.bem-next-elem('avatar') { |
@@ -123,8 +124,12 @@ | |||
123 | 124 | ||
124 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | 125 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
125 | &:hover, | 126 | &:hover, |
126 | &:active { | 127 | &:active, |
128 | &:focus-visible { | ||
129 | transform: none; | ||
130 | |||
127 | @include iro.bem-elem('image') { | 131 | @include iro.bem-elem('image') { |
132 | transform: translateY(fn.dim(--hover --offset-b)); | ||
128 | opacity: .75; | 133 | opacity: .75; |
129 | background-color: fn.color(--quiet --hover --image); | 134 | background-color: fn.color(--quiet --hover --image); |
130 | } | 135 | } |