@henriquepetrelli/hp-design-system 1.1.15 → 1.1.16
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
|
@@ -1284,39 +1284,39 @@ body {
|
|
|
1284
1284
|
.toggle-switch__input:disabled + .toggle-switch__label[data-v-14c54b46] {
|
|
1285
1285
|
cursor: not-allowed;
|
|
1286
1286
|
opacity: 0.6;
|
|
1287
|
-
}.theme-switcher-container[data-v-
|
|
1287
|
+
}.theme-switcher-container[data-v-ba2225dd] {
|
|
1288
1288
|
position: relative;
|
|
1289
1289
|
display: inline-block;
|
|
1290
1290
|
}
|
|
1291
|
-
.toggle--checkbox[data-v-
|
|
1291
|
+
.toggle--checkbox[data-v-ba2225dd] {
|
|
1292
1292
|
position: absolute;
|
|
1293
1293
|
opacity: 0;
|
|
1294
1294
|
height: 0;
|
|
1295
1295
|
width: 0;
|
|
1296
1296
|
}
|
|
1297
|
-
.toggle--checkbox:checked ~ .background[data-v-
|
|
1297
|
+
.toggle--checkbox:checked ~ .background[data-v-ba2225dd] {
|
|
1298
1298
|
background: #1357a6;
|
|
1299
1299
|
}
|
|
1300
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1300
|
+
.toggle--checkbox:checked + .toggle--label[data-v-ba2225dd] {
|
|
1301
1301
|
background: var(--dark-background-color);
|
|
1302
1302
|
border-color: var(--dark-border-color);
|
|
1303
1303
|
}
|
|
1304
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1304
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-ba2225dd] {
|
|
1305
1305
|
left: 14px;
|
|
1306
1306
|
width: 2px;
|
|
1307
1307
|
}
|
|
1308
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1308
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-ba2225dd]:before {
|
|
1309
1309
|
width: 2px;
|
|
1310
1310
|
height: 2px;
|
|
1311
1311
|
top: -6px;
|
|
1312
1312
|
}
|
|
1313
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1313
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-ba2225dd]:after {
|
|
1314
1314
|
width: 2px;
|
|
1315
1315
|
height: 2px;
|
|
1316
1316
|
left: -8px;
|
|
1317
1317
|
top: 4px;
|
|
1318
1318
|
}
|
|
1319
|
-
.toggle--label[data-v-
|
|
1319
|
+
.toggle--label[data-v-ba2225dd] {
|
|
1320
1320
|
width: 48px;
|
|
1321
1321
|
height: 24px;
|
|
1322
1322
|
background: var(--light-background-color);
|
|
@@ -1327,12 +1327,12 @@ body {
|
|
|
1327
1327
|
transition: all 350ms ease-in;
|
|
1328
1328
|
cursor: pointer;
|
|
1329
1329
|
}
|
|
1330
|
-
.toggle--label[data-v-
|
|
1330
|
+
.toggle--label[data-v-ba2225dd]:focus-visible {
|
|
1331
1331
|
outline: 2px solid #005fcc;
|
|
1332
1332
|
outline-offset: 2px;
|
|
1333
1333
|
transition: 0s;
|
|
1334
1334
|
}
|
|
1335
|
-
.toggle--label-background[data-v-
|
|
1335
|
+
.toggle--label-background[data-v-ba2225dd] {
|
|
1336
1336
|
width: 4px;
|
|
1337
1337
|
height: 2px;
|
|
1338
1338
|
border-radius: 2px;
|
|
@@ -1342,7 +1342,7 @@ body {
|
|
|
1342
1342
|
top: 11px;
|
|
1343
1343
|
transition: all 150ms ease-in;
|
|
1344
1344
|
}
|
|
1345
|
-
.toggle--label-background[data-v-
|
|
1345
|
+
.toggle--label-background[data-v-ba2225dd]:before {
|
|
1346
1346
|
content: "";
|
|
1347
1347
|
position: absolute;
|
|
1348
1348
|
top: -4px;
|
|
@@ -1353,7 +1353,7 @@ body {
|
|
|
1353
1353
|
left: -5px;
|
|
1354
1354
|
transition: all 150ms ease-in;
|
|
1355
1355
|
}
|
|
1356
|
-
.toggle--label-background[data-v-
|
|
1356
|
+
.toggle--label-background[data-v-ba2225dd]:after {
|
|
1357
1357
|
content: "";
|
|
1358
1358
|
position: absolute;
|
|
1359
1359
|
top: 4px;
|
|
@@ -1364,7 +1364,7 @@ body {
|
|
|
1364
1364
|
left: -3px;
|
|
1365
1365
|
transition: all 150ms ease-in;
|
|
1366
1366
|
}
|
|
1367
|
-
.toggle--label[data-v-
|
|
1367
|
+
.toggle--label[data-v-ba2225dd]:before {
|
|
1368
1368
|
content: "";
|
|
1369
1369
|
width: 18px;
|
|
1370
1370
|
height: 18px;
|
|
@@ -1375,18 +1375,18 @@ body {
|
|
|
1375
1375
|
top: 1px;
|
|
1376
1376
|
left: 1px;
|
|
1377
1377
|
transition: all 350ms ease-in;
|
|
1378
|
-
animation-name: reverse-
|
|
1378
|
+
animation-name: reverse-ba2225dd;
|
|
1379
1379
|
animation-duration: 350ms;
|
|
1380
1380
|
animation-fill-mode: forwards;
|
|
1381
1381
|
}
|
|
1382
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1382
|
+
.toggle--checkbox:checked + .toggle--label[data-v-ba2225dd]:before {
|
|
1383
1383
|
background: #fff;
|
|
1384
1384
|
border-color: #e8e8ea;
|
|
1385
|
-
animation-name: switch-
|
|
1385
|
+
animation-name: switch-ba2225dd;
|
|
1386
1386
|
animation-duration: 350ms;
|
|
1387
1387
|
animation-fill-mode: forwards;
|
|
1388
1388
|
}
|
|
1389
|
-
.toggle--label[data-v-
|
|
1389
|
+
.toggle--label[data-v-ba2225dd]:after {
|
|
1390
1390
|
content: "";
|
|
1391
1391
|
position: absolute;
|
|
1392
1392
|
box-shadow: #e8e8ea 1px 0 0 1px, #e8e8ea -2px 4px 0 -1px;
|
|
@@ -1399,11 +1399,11 @@ body {
|
|
|
1399
1399
|
opacity: 0;
|
|
1400
1400
|
transition: all 250ms ease-in;
|
|
1401
1401
|
}
|
|
1402
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1402
|
+
.toggle--checkbox:checked + .toggle--label[data-v-ba2225dd]:after {
|
|
1403
1403
|
opacity: 1;
|
|
1404
1404
|
transition-delay: 350ms;
|
|
1405
1405
|
}
|
|
1406
|
-
.theme-icons[data-v-
|
|
1406
|
+
.theme-icons[data-v-ba2225dd] {
|
|
1407
1407
|
position: absolute;
|
|
1408
1408
|
top: 50%;
|
|
1409
1409
|
transform: translateY(-50%);
|
|
@@ -1412,24 +1412,24 @@ body {
|
|
|
1412
1412
|
width: 80%;
|
|
1413
1413
|
left: 10%;
|
|
1414
1414
|
}
|
|
1415
|
-
.sun-icon[data-v-
|
|
1416
|
-
.moon-icon[data-v-
|
|
1415
|
+
.sun-icon[data-v-ba2225dd],
|
|
1416
|
+
.moon-icon[data-v-ba2225dd] {
|
|
1417
1417
|
font-size: 10px;
|
|
1418
1418
|
transition: opacity 0.3s ease;
|
|
1419
1419
|
}
|
|
1420
|
-
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-
|
|
1420
|
+
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-ba2225dd] {
|
|
1421
1421
|
opacity: 1;
|
|
1422
1422
|
}
|
|
1423
|
-
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-
|
|
1423
|
+
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-ba2225dd] {
|
|
1424
1424
|
opacity: 0.5;
|
|
1425
1425
|
}
|
|
1426
|
-
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-
|
|
1426
|
+
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-ba2225dd] {
|
|
1427
1427
|
opacity: 0.5;
|
|
1428
1428
|
}
|
|
1429
|
-
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-
|
|
1429
|
+
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-ba2225dd] {
|
|
1430
1430
|
opacity: 1;
|
|
1431
1431
|
}
|
|
1432
|
-
@keyframes switch-
|
|
1432
|
+
@keyframes switch-ba2225dd {
|
|
1433
1433
|
0% {
|
|
1434
1434
|
left: 1px;
|
|
1435
1435
|
}
|
|
@@ -1442,7 +1442,7 @@ body {
|
|
|
1442
1442
|
width: 18px;
|
|
1443
1443
|
}
|
|
1444
1444
|
}
|
|
1445
|
-
@keyframes reverse-
|
|
1445
|
+
@keyframes reverse-ba2225dd {
|
|
1446
1446
|
0% {
|
|
1447
1447
|
left: 25px;
|
|
1448
1448
|
width: 18px;
|