diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_card.scss | 27 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 23 |
2 files changed, 21 insertions, 29 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index c6c47d7..b7829ff 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
@@ -32,12 +32,6 @@ | |||
32 | --border: fn.global-color(--focus --border), | 32 | --border: fn.global-color(--focus --border), |
33 | --outline: fn.global-color(--focus --outline), | 33 | --outline: fn.global-color(--focus --outline), |
34 | ), | 34 | ), |
35 | |||
36 | --quiet: ( | ||
37 | --hover: ( | ||
38 | --border: fn.global-color(--text-disabled), | ||
39 | ), | ||
40 | ), | ||
41 | ), | 35 | ), |
42 | )); | 36 | )); |
43 | 37 | ||
@@ -67,9 +61,9 @@ | |||
67 | } | 61 | } |
68 | 62 | ||
69 | @include iro.bem-elem('image') { | 63 | @include iro.bem-elem('image') { |
70 | position: relative; | 64 | display: block; |
71 | inline-size: 100%; | 65 | inline-size: 100%; |
72 | overflow: hidden; | 66 | object-fit: cover; |
73 | background-color: fn.color(--image-bg); | 67 | background-color: fn.color(--image-bg); |
74 | 68 | ||
75 | &:first-child { | 69 | &:first-child { |
@@ -87,13 +81,6 @@ | |||
87 | } | 81 | } |
88 | } | 82 | } |
89 | 83 | ||
90 | @include iro.bem-elem('image-img') { | ||
91 | display: block; | ||
92 | object-fit: cover; | ||
93 | inline-size: 100%; | ||
94 | block-size: 100%; | ||
95 | } | ||
96 | |||
97 | @include iro.bem-elem('body') { | 84 | @include iro.bem-elem('body') { |
98 | padding-block: fn.dim(--pad-b); | 85 | padding-block: fn.dim(--pad-b); |
99 | padding-inline: fn.dim(--pad-i); | 86 | padding-inline: fn.dim(--pad-i); |
@@ -130,12 +117,13 @@ | |||
130 | 117 | ||
131 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | 118 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
132 | &:hover, | 119 | &:hover, |
120 | &:focus-visible, | ||
133 | &:active { | 121 | &:active { |
134 | @include iro.bem-elem('image') { | 122 | @include iro.bem-elem('image') { |
135 | outline: fn.dim(--border) solid fn.color(--quiet --hover --border); | 123 | opacity: 0.75; |
136 | } | 124 | } |
137 | } | 125 | } |
138 | 126 | ||
139 | &:focus-visible { | 127 | &:focus-visible { |
140 | outline: none; | 128 | outline: none; |
141 | box-shadow: none; | 129 | box-shadow: none; |
@@ -148,9 +136,10 @@ | |||
148 | } | 136 | } |
149 | 137 | ||
150 | @include iro.bem-elem('image') { | 138 | @include iro.bem-elem('image') { |
139 | position: relative; | ||
151 | margin: calc(-1 * fn.dim(--key-focus --border)); | 140 | margin: calc(-1 * fn.dim(--key-focus --border)); |
152 | border: fn.dim(--key-focus --border) solid transparent; | 141 | border: fn.dim(--key-focus --border-offset) solid transparent; |
153 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); | 142 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); |
154 | background-clip: padding-box; | 143 | background-clip: padding-box; |
155 | } | 144 | } |
156 | 145 | ||
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 7844eae..4902958 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
@@ -10,10 +10,11 @@ $static-themes: 'black' 'white' !default; | |||
10 | --dims: ( | 10 | --dims: ( |
11 | --pad: fn.global-dim(--size --150), | 11 | --pad: fn.global-dim(--size --150), |
12 | --thumbnail: ( | 12 | --thumbnail: ( |
13 | --size: fn.global-dim(--size --700), | 13 | --size: fn.global-dim(--size --700), |
14 | --spacing: fn.global-dim(--size --100), | 14 | --rounding: fn.global-dim(--rounding), |
15 | --idle: fn.global-dim(--border --thin), | 15 | --spacing: fn.global-dim(--size --100), |
16 | --selected: fn.global-dim(--border --medium), | 16 | --idle: fn.global-dim(--border --thin), |
17 | --selected: fn.global-dim(--border --medium), | ||
17 | ), | 18 | ), |
18 | --close-button: ( | 19 | --close-button: ( |
19 | --font-size: fn.global-dim(--font-size --200), | 20 | --font-size: fn.global-dim(--font-size --200), |
@@ -147,12 +148,14 @@ $static-themes: 'black' 'white' !default; | |||
147 | } | 148 | } |
148 | 149 | ||
149 | @include iro.bem-elem('thumbnail') { | 150 | @include iro.bem-elem('thumbnail') { |
150 | position: relative; | 151 | position: relative; |
151 | flex: 0 0 auto; | 152 | flex: 0 0 auto; |
152 | inline-size: fn.dim(--thumbnail --size); | 153 | inline-size: fn.dim(--thumbnail --size); |
153 | block-size: fn.dim(--thumbnail --size); | 154 | block-size: fn.dim(--thumbnail --size); |
154 | outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); | 155 | overflow: hidden; |
155 | opacity: .75; | 156 | border-radius: fn.dim(--thumbnail --rounding); |
157 | outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); | ||
158 | opacity: .75; | ||
156 | 159 | ||
157 | &:hover, | 160 | &:hover, |
158 | &:focus-visible { | 161 | &:focus-visible { |