Skip to content

Commit 8b43c66

Browse files
deoostfreesdeoostfrees
committed
[TASK] Add new CSS custom properties
1 parent 904abf0 commit 8b43c66

File tree

3 files changed

+51
-36
lines changed

3 files changed

+51
-36
lines changed

‎dist/css/parvus.css

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
:root {
22
--parvus-transition-duration: 300ms;
33
--parvus-transition-timing-function: cubic-bezier(0.62, 0.16, 0.13, 1.01);
4-
--parvus-overlay-color: hsl(23deg 40% 96%);
5-
--parvus-overlay-text: hsl(228deg 24% 23%);
6-
--parvus-button-color: hsl(228deg 24% 23%);
7-
--parvus-button-text: hsl(0deg 0% 100%);
8-
--parvus-button-hover-color: hsl(229deg 24% 33%);
9-
--parvus-button-hover-text: hsl(0deg 0% 100%);
4+
--parvus-background-color: var(--parvus-overlay-color, hsl(23deg 40% 96%));
5+
--parvus-color: var(--parvus-overlay-text, hsl(228deg 24% 23%));
6+
--parvus-btn-background-color: var(--parvus-button-color, hsl(228deg 24% 23%));
7+
--parvus-btn-color: var(--parvus-button-text, hsl(0deg 0% 100%));
8+
--parvus-btn-hover-background-color: var(--parvus-button-hover-color, hsl(229deg 24% 33%));
9+
--parvus-btn-hover-color: var(--parvus-button-hover-text, hsl(0deg 0% 100%));
10+
--parvus-btn-disabled-background-color: hsla(229, 24%, 33%, 0.6);
11+
--parvus-btn-disabled-color: hsl(0deg 0% 100%);
1012
--parvus-caption-background-color: transparent;
1113
--parvus-caption-color: hsl(228deg 24% 23%);
12-
--parvus-error-loading-error-background-color: hsl(0deg 0% 100%);
13-
--parvus-image-loading-error-color: hsl(228deg 24% 23%);
14+
--parvus-loading-error-background-color: var(--parvus-error-loading-error-background-color, hsl(0deg 0% 100%));
15+
--parvus-loading-error-color: hsl(228deg 24% 23%);
1416
--parvus-loader-background-color: hsl(23deg 40% 96%);
1517
--parvus-loader-color: hsl(228deg 24% 23%);
1618
}
@@ -29,8 +31,8 @@
2931
}
3032
.parvus-zoom__indicator {
3133
align-items: center;
32-
background-color: var(--parvus-button-color);
33-
color: var(--parvus-button-text);
34+
background-color: var(--parvus-btn-background-color);
35+
color: var(--parvus-btn-color);
3436
display: flex;
3537
justify-content: center;
3638
padding: 0.5rem;
@@ -62,7 +64,8 @@
6264
display: none;
6365
}
6466
.parvus__overlay {
65-
background-color: var(--parvus-overlay-color);
67+
background-color: var(--parvus-background-color);
68+
color: var(--parvus-color);
6669
inset: 0;
6770
position: absolute;
6871
}
@@ -105,8 +108,8 @@
105108
inline-size: auto;
106109
}
107110
.parvus__content--error {
108-
background-color: var(--parvus-error-loading-error-background-color);
109-
color: var(--parvus-error-loading-error-color);
111+
background-color: var(--parvus-loading-error-background-color);
112+
color: var(--parvus-loading-error-color);
110113
padding-block: 0.5rem;
111114
padding-inline: 1rem;
112115
}
@@ -150,11 +153,11 @@
150153
}
151154
.parvus__btn {
152155
appearance: none;
153-
background-color: var(--parvus-button-color);
156+
background-color: var(--parvus-btn-background-color);
154157
background-image: none;
155158
border-radius: 0;
156159
border: 0.0625rem solid transparent;
157-
color: var(--parvus-button-text);
160+
color: var(--parvus-btn-color);
158161
cursor: pointer;
159162
display: flex;
160163
font: inherit;
@@ -165,8 +168,8 @@
165168
z-index: 7;
166169
}
167170
.parvus__btn:hover {
168-
background-color: var(--parvus-button-hover-color);
169-
color: var(--parvus-button-hover-text);
171+
background-color: var(--parvus-btn-hover-background-color);
172+
color: var(--parvus-btn-hover-color);
170173
}
171174
.parvus__btn--previous {
172175
inset-inline-start: 0;
@@ -186,6 +189,10 @@
186189
.parvus__btn[aria-hidden=true] {
187190
display: none;
188191
}
192+
.parvus__btn[aria-disabled=true] {
193+
background-color: var(--parvus-btn-disabled-background-color);
194+
color: var(--parvus-btn-disabled-color);
195+
}
189196
.parvus__counter {
190197
position: relative;
191198
z-index: 7;

‎dist/css/parvus.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/scss/parvus.scss

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,24 @@
44
--parvus-transition-timing-function: cubic-bezier(0.62, 0.16, 0.13, 1.01);
55

66
// Overlay
7-
--parvus-overlay-color: hsl(23deg 40% 96%);
8-
--parvus-overlay-text: hsl(228deg 24% 23%);
7+
--parvus-background-color: var(--parvus-overlay-color, hsl(23deg 40% 96%));
8+
--parvus-color: var(--parvus-overlay-text, hsl(228deg 24% 23%));
99

1010
// Button
11-
--parvus-button-color: hsl(228deg 24% 23%);
12-
--parvus-button-text: hsl(0deg 0% 100%);
13-
--parvus-button-hover-color: hsl(229deg 24% 33%);
14-
--parvus-button-hover-text: hsl(0deg 0% 100%);
11+
--parvus-btn-background-color: var(--parvus-button-color, hsl(228deg 24% 23%));
12+
--parvus-btn-color: var(--parvus-button-text, hsl(0deg 0% 100%));
13+
--parvus-btn-hover-background-color: var(--parvus-button-hover-color, hsl(229deg 24% 33%));
14+
--parvus-btn-hover-color: var(--parvus-button-hover-text, hsl(0deg 0% 100%));
15+
--parvus-btn-disabled-background-color: hsla(229, 24%, 33%, 0.6);
16+
--parvus-btn-disabled-color: hsl(0deg 0% 100%);
1517

1618
// Caption
1719
--parvus-caption-background-color: transparent;
1820
--parvus-caption-color: hsl(228deg 24% 23%);
1921

20-
// Error
21-
--parvus-error-loading-error-background-color: hsl(0deg 0% 100%);
22-
--parvus-image-loading-error-color: hsl(228deg 24% 23%);
22+
// Loading error
23+
--parvus-loading-error-background-color: var(--parvus-error-loading-error-background-color, hsl(0deg 0% 100%));
24+
--parvus-loading-error-color: hsl(228deg 24% 23%);
2325

2426
// Loader
2527
--parvus-loader-background-color: hsl(23deg 40% 96%);
@@ -42,8 +44,8 @@
4244

4345
&__indicator {
4446
align-items: center;
45-
background-color: var(--parvus-button-color);
46-
color: var(--parvus-button-text);
47+
background-color: var(--parvus-btn-background-color);
48+
color: var(--parvus-btn-color);
4749
display: flex;
4850
justify-content: center;
4951
padding: 0.5rem;
@@ -82,7 +84,8 @@
8284
}
8385

8486
&__overlay {
85-
background-color: var(--parvus-overlay-color);
87+
background-color: var(--parvus-background-color);
88+
color: var(--parvus-color);
8689
inset: 0;
8790
position: absolute;
8891
}
@@ -139,8 +142,8 @@
139142

140143

141144
&--error {
142-
background-color: var(--parvus-error-loading-error-background-color);
143-
color: var(--parvus-error-loading-error-color);
145+
background-color: var(--parvus-loading-error-background-color);
146+
color: var(--parvus-loading-error-color);
144147
padding-block: 0.5rem;
145148
padding-inline: 1rem;
146149
}
@@ -191,11 +194,11 @@
191194

192195
&__btn {
193196
appearance: none;
194-
background-color: var(--parvus-button-color);
197+
background-color: var(--parvus-btn-background-color);
195198
background-image: none;
196199
border-radius: 0;
197200
border: 0.0625rem solid transparent;
198-
color: var(--parvus-button-text);
201+
color: var(--parvus-btn-color);
199202
cursor: pointer;
200203
display: flex;
201204
font: inherit;
@@ -206,8 +209,8 @@
206209
z-index: 7;
207210

208211
&:hover {
209-
background-color: var(--parvus-button-hover-color);
210-
color: var(--parvus-button-hover-text);
212+
background-color: var(--parvus-btn-hover-background-color);
213+
color: var(--parvus-btn-hover-color);
211214
}
212215

213216

@@ -232,6 +235,11 @@
232235
&[aria-hidden='true'] {
233236
display: none;
234237
}
238+
239+
&[aria-disabled='true'] {
240+
background-color: var(--parvus-btn-disabled-background-color);
241+
color: var(--parvus-btn-disabled-color);
242+
}
235243
}
236244

237245
&__counter {

0 commit comments

Comments
 (0)