@henriquepetrelli/hp-design-system 1.1.5 → 1.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css
CHANGED
|
@@ -110,47 +110,127 @@
|
|
|
110
110
|
font-style: italic;
|
|
111
111
|
font-display: swap;
|
|
112
112
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
--color-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
--color-text: rgb(51, 51, 51);
|
|
134
|
-
--color-text-disabled: rgb(128, 124, 123);
|
|
113
|
+
.theme-switcher-container {
|
|
114
|
+
position: relative;
|
|
115
|
+
display: inline-block;
|
|
116
|
+
}
|
|
117
|
+
.theme-switcher-container .background {
|
|
118
|
+
position: fixed;
|
|
119
|
+
left: 0;
|
|
120
|
+
top: 0;
|
|
121
|
+
z-index: -1;
|
|
122
|
+
width: 100%;
|
|
123
|
+
height: 100%;
|
|
124
|
+
transition: all 250ms ease-in;
|
|
125
|
+
background: var(--color-background, #fff);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.toggle--checkbox {
|
|
129
|
+
position: absolute;
|
|
130
|
+
opacity: 0;
|
|
131
|
+
height: 0;
|
|
132
|
+
width: 0;
|
|
135
133
|
}
|
|
136
134
|
|
|
137
|
-
.
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
--color-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
135
|
+
.toggle--label {
|
|
136
|
+
width: 48px;
|
|
137
|
+
height: 24px;
|
|
138
|
+
border-radius: 12px;
|
|
139
|
+
border: 2px solid var(--color-primary, #000);
|
|
140
|
+
display: flex;
|
|
141
|
+
position: relative;
|
|
142
|
+
transition: all 350ms ease-in;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
}
|
|
145
|
+
.toggle--label:focus-visible {
|
|
146
|
+
outline: 2px solid #005fcc;
|
|
147
|
+
outline-offset: 2px;
|
|
148
|
+
transition: 0s;
|
|
149
|
+
}
|
|
150
|
+
.toggle--label .toggle--label-background {
|
|
151
|
+
width: 4px;
|
|
152
|
+
height: 2px;
|
|
153
|
+
border-radius: 2px;
|
|
154
|
+
position: relative;
|
|
155
|
+
background: #fff;
|
|
156
|
+
left: 28px;
|
|
157
|
+
top: 11px;
|
|
158
|
+
transition: all 150ms ease-in;
|
|
159
|
+
}
|
|
160
|
+
.toggle--label .toggle--label-background:before, .toggle--label .toggle--label-background:after {
|
|
161
|
+
content: "";
|
|
162
|
+
position: absolute;
|
|
163
|
+
border-radius: 2px;
|
|
164
|
+
background: #fff;
|
|
165
|
+
transition: all 150ms ease-in;
|
|
166
|
+
}
|
|
167
|
+
.toggle--label .toggle--label-background:before {
|
|
168
|
+
top: -4px;
|
|
169
|
+
width: 10px;
|
|
170
|
+
height: 2px;
|
|
171
|
+
left: -5px;
|
|
172
|
+
}
|
|
173
|
+
.toggle--label .toggle--label-background:after {
|
|
174
|
+
top: 4px;
|
|
175
|
+
width: 10px;
|
|
176
|
+
height: 2px;
|
|
177
|
+
left: -3px;
|
|
178
|
+
}
|
|
179
|
+
.toggle--label:before {
|
|
180
|
+
content: "";
|
|
181
|
+
width: 18px;
|
|
182
|
+
height: 18px;
|
|
183
|
+
border: 2px solid #f5eb71;
|
|
184
|
+
position: absolute;
|
|
185
|
+
border-radius: 50%;
|
|
186
|
+
background: #fffaa8;
|
|
187
|
+
top: 1px;
|
|
188
|
+
left: 1px;
|
|
189
|
+
transition: all 350ms ease-in;
|
|
190
|
+
animation-name: reverse;
|
|
191
|
+
animation-duration: 350ms;
|
|
192
|
+
animation-fill-mode: forwards;
|
|
193
|
+
}
|
|
194
|
+
.toggle--label:after {
|
|
195
|
+
content: "";
|
|
196
|
+
position: absolute;
|
|
197
|
+
box-shadow: #e8e8ea 1px 0 0 1px, #e8e8ea -2px 4px 0 -1px;
|
|
198
|
+
background: #e8e8ea;
|
|
199
|
+
left: 29px;
|
|
200
|
+
top: 5px;
|
|
201
|
+
width: 4px;
|
|
202
|
+
height: 4px;
|
|
203
|
+
border-radius: 50%;
|
|
204
|
+
opacity: 0;
|
|
205
|
+
transition: all 250ms ease-in;
|
|
152
206
|
}
|
|
153
207
|
|
|
208
|
+
@keyframes switch {
|
|
209
|
+
0% {
|
|
210
|
+
left: 1px;
|
|
211
|
+
}
|
|
212
|
+
60% {
|
|
213
|
+
left: 1px;
|
|
214
|
+
width: 23px;
|
|
215
|
+
}
|
|
216
|
+
100% {
|
|
217
|
+
left: 25px;
|
|
218
|
+
width: 18px;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
@keyframes reverse {
|
|
222
|
+
0% {
|
|
223
|
+
left: 25px;
|
|
224
|
+
width: 18px;
|
|
225
|
+
}
|
|
226
|
+
60% {
|
|
227
|
+
left: 15px;
|
|
228
|
+
width: 23px;
|
|
229
|
+
}
|
|
230
|
+
100% {
|
|
231
|
+
left: 1px;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
154
234
|
*,
|
|
155
235
|
*::before,
|
|
156
236
|
*::after {
|
|
@@ -160,8 +240,15 @@
|
|
|
160
240
|
}
|
|
161
241
|
|
|
162
242
|
body {
|
|
163
|
-
|
|
164
|
-
|
|
243
|
+
font-family: "Nunito", sans-serif;
|
|
244
|
+
line-height: 1.5;
|
|
245
|
+
font-weight: 400;
|
|
246
|
+
font-synthesis: none;
|
|
247
|
+
text-rendering: optimizeLegibility;
|
|
248
|
+
-webkit-font-smoothing: antialiased;
|
|
249
|
+
-moz-osx-font-smoothing: grayscale;
|
|
250
|
+
background-color: var(--color-background, #fff);
|
|
251
|
+
color: var(--color-text, #000);
|
|
165
252
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
166
253
|
}.icon[data-v-0b477588] {
|
|
167
254
|
width: 2em;
|
|
@@ -1158,49 +1245,39 @@ body {
|
|
|
1158
1245
|
.toggle-switch__input:disabled + .toggle-switch__label[data-v-14c54b46] {
|
|
1159
1246
|
cursor: not-allowed;
|
|
1160
1247
|
opacity: 0.6;
|
|
1161
|
-
}.theme-switcher-container[data-v-
|
|
1248
|
+
}.theme-switcher-container[data-v-715118dd] {
|
|
1162
1249
|
position: relative;
|
|
1163
1250
|
display: inline-block;
|
|
1164
1251
|
}
|
|
1165
|
-
.
|
|
1166
|
-
position: fixed;
|
|
1167
|
-
left: 0;
|
|
1168
|
-
top: 0;
|
|
1169
|
-
background: #c2e9f6;
|
|
1170
|
-
z-index: -1;
|
|
1171
|
-
width: 100%;
|
|
1172
|
-
height: 100%;
|
|
1173
|
-
transition: all 250ms ease-in;
|
|
1174
|
-
}
|
|
1175
|
-
.toggle--checkbox[data-v-08fdca46] {
|
|
1252
|
+
.toggle--checkbox[data-v-715118dd] {
|
|
1176
1253
|
position: absolute;
|
|
1177
1254
|
opacity: 0;
|
|
1178
1255
|
height: 0;
|
|
1179
1256
|
width: 0;
|
|
1180
1257
|
}
|
|
1181
|
-
.toggle--checkbox:checked ~ .background[data-v-
|
|
1258
|
+
.toggle--checkbox:checked ~ .background[data-v-715118dd] {
|
|
1182
1259
|
background: #1357a6;
|
|
1183
1260
|
}
|
|
1184
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1261
|
+
.toggle--checkbox:checked + .toggle--label[data-v-715118dd] {
|
|
1185
1262
|
background: var(--dark-background-color);
|
|
1186
1263
|
border-color: var(--dark-border-color);
|
|
1187
1264
|
}
|
|
1188
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1265
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-715118dd] {
|
|
1189
1266
|
left: 14px;
|
|
1190
1267
|
width: 2px;
|
|
1191
1268
|
}
|
|
1192
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1269
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-715118dd]:before {
|
|
1193
1270
|
width: 2px;
|
|
1194
1271
|
height: 2px;
|
|
1195
1272
|
top: -6px;
|
|
1196
1273
|
}
|
|
1197
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1274
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-715118dd]:after {
|
|
1198
1275
|
width: 2px;
|
|
1199
1276
|
height: 2px;
|
|
1200
1277
|
left: -8px;
|
|
1201
1278
|
top: 4px;
|
|
1202
1279
|
}
|
|
1203
|
-
.toggle--label[data-v-
|
|
1280
|
+
.toggle--label[data-v-715118dd] {
|
|
1204
1281
|
width: 48px;
|
|
1205
1282
|
height: 24px;
|
|
1206
1283
|
background: var(--light-background-color);
|
|
@@ -1211,12 +1288,12 @@ body {
|
|
|
1211
1288
|
transition: all 350ms ease-in;
|
|
1212
1289
|
cursor: pointer;
|
|
1213
1290
|
}
|
|
1214
|
-
.toggle--label[data-v-
|
|
1291
|
+
.toggle--label[data-v-715118dd]:focus-visible {
|
|
1215
1292
|
outline: 2px solid #005fcc;
|
|
1216
1293
|
outline-offset: 2px;
|
|
1217
1294
|
transition: 0s;
|
|
1218
1295
|
}
|
|
1219
|
-
.toggle--label-background[data-v-
|
|
1296
|
+
.toggle--label-background[data-v-715118dd] {
|
|
1220
1297
|
width: 4px;
|
|
1221
1298
|
height: 2px;
|
|
1222
1299
|
border-radius: 2px;
|
|
@@ -1226,7 +1303,7 @@ body {
|
|
|
1226
1303
|
top: 11px;
|
|
1227
1304
|
transition: all 150ms ease-in;
|
|
1228
1305
|
}
|
|
1229
|
-
.toggle--label-background[data-v-
|
|
1306
|
+
.toggle--label-background[data-v-715118dd]:before {
|
|
1230
1307
|
content: "";
|
|
1231
1308
|
position: absolute;
|
|
1232
1309
|
top: -4px;
|
|
@@ -1237,7 +1314,7 @@ body {
|
|
|
1237
1314
|
left: -5px;
|
|
1238
1315
|
transition: all 150ms ease-in;
|
|
1239
1316
|
}
|
|
1240
|
-
.toggle--label-background[data-v-
|
|
1317
|
+
.toggle--label-background[data-v-715118dd]:after {
|
|
1241
1318
|
content: "";
|
|
1242
1319
|
position: absolute;
|
|
1243
1320
|
top: 4px;
|
|
@@ -1248,7 +1325,7 @@ body {
|
|
|
1248
1325
|
left: -3px;
|
|
1249
1326
|
transition: all 150ms ease-in;
|
|
1250
1327
|
}
|
|
1251
|
-
.toggle--label[data-v-
|
|
1328
|
+
.toggle--label[data-v-715118dd]:before {
|
|
1252
1329
|
content: "";
|
|
1253
1330
|
width: 18px;
|
|
1254
1331
|
height: 18px;
|
|
@@ -1259,18 +1336,18 @@ body {
|
|
|
1259
1336
|
top: 1px;
|
|
1260
1337
|
left: 1px;
|
|
1261
1338
|
transition: all 350ms ease-in;
|
|
1262
|
-
animation-name: reverse-
|
|
1339
|
+
animation-name: reverse-715118dd;
|
|
1263
1340
|
animation-duration: 350ms;
|
|
1264
1341
|
animation-fill-mode: forwards;
|
|
1265
1342
|
}
|
|
1266
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1343
|
+
.toggle--checkbox:checked + .toggle--label[data-v-715118dd]:before {
|
|
1267
1344
|
background: #fff;
|
|
1268
1345
|
border-color: #e8e8ea;
|
|
1269
|
-
animation-name: switch-
|
|
1346
|
+
animation-name: switch-715118dd;
|
|
1270
1347
|
animation-duration: 350ms;
|
|
1271
1348
|
animation-fill-mode: forwards;
|
|
1272
1349
|
}
|
|
1273
|
-
.toggle--label[data-v-
|
|
1350
|
+
.toggle--label[data-v-715118dd]:after {
|
|
1274
1351
|
content: "";
|
|
1275
1352
|
position: absolute;
|
|
1276
1353
|
box-shadow: #e8e8ea 1px 0 0 1px, #e8e8ea -2px 4px 0 -1px;
|
|
@@ -1283,11 +1360,11 @@ body {
|
|
|
1283
1360
|
opacity: 0;
|
|
1284
1361
|
transition: all 250ms ease-in;
|
|
1285
1362
|
}
|
|
1286
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1363
|
+
.toggle--checkbox:checked + .toggle--label[data-v-715118dd]:after {
|
|
1287
1364
|
opacity: 1;
|
|
1288
1365
|
transition-delay: 350ms;
|
|
1289
1366
|
}
|
|
1290
|
-
.theme-icons[data-v-
|
|
1367
|
+
.theme-icons[data-v-715118dd] {
|
|
1291
1368
|
position: absolute;
|
|
1292
1369
|
top: 50%;
|
|
1293
1370
|
transform: translateY(-50%);
|
|
@@ -1296,24 +1373,24 @@ body {
|
|
|
1296
1373
|
width: 80%;
|
|
1297
1374
|
left: 10%;
|
|
1298
1375
|
}
|
|
1299
|
-
.sun-icon[data-v-
|
|
1300
|
-
.moon-icon[data-v-
|
|
1376
|
+
.sun-icon[data-v-715118dd],
|
|
1377
|
+
.moon-icon[data-v-715118dd] {
|
|
1301
1378
|
font-size: 10px;
|
|
1302
1379
|
transition: opacity 0.3s ease;
|
|
1303
1380
|
}
|
|
1304
|
-
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-
|
|
1381
|
+
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-715118dd] {
|
|
1305
1382
|
opacity: 1;
|
|
1306
1383
|
}
|
|
1307
|
-
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-
|
|
1384
|
+
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-715118dd] {
|
|
1308
1385
|
opacity: 0.5;
|
|
1309
1386
|
}
|
|
1310
|
-
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-
|
|
1387
|
+
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-715118dd] {
|
|
1311
1388
|
opacity: 0.5;
|
|
1312
1389
|
}
|
|
1313
|
-
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-
|
|
1390
|
+
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-715118dd] {
|
|
1314
1391
|
opacity: 1;
|
|
1315
1392
|
}
|
|
1316
|
-
@keyframes switch-
|
|
1393
|
+
@keyframes switch-715118dd {
|
|
1317
1394
|
0% {
|
|
1318
1395
|
left: 1px;
|
|
1319
1396
|
}
|
|
@@ -1326,7 +1403,7 @@ body {
|
|
|
1326
1403
|
width: 18px;
|
|
1327
1404
|
}
|
|
1328
1405
|
}
|
|
1329
|
-
@keyframes reverse-
|
|
1406
|
+
@keyframes reverse-715118dd {
|
|
1330
1407
|
0% {
|
|
1331
1408
|
left: 25px;
|
|
1332
1409
|
width: 18px;
|