@henriquepetrelli/hp-design-system 1.1.7 → 1.1.9
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
|
@@ -1245,39 +1245,39 @@ body {
|
|
|
1245
1245
|
.toggle-switch__input:disabled + .toggle-switch__label[data-v-14c54b46] {
|
|
1246
1246
|
cursor: not-allowed;
|
|
1247
1247
|
opacity: 0.6;
|
|
1248
|
-
}.theme-switcher-container[data-v-
|
|
1248
|
+
}.theme-switcher-container[data-v-699fb0fe] {
|
|
1249
1249
|
position: relative;
|
|
1250
1250
|
display: inline-block;
|
|
1251
1251
|
}
|
|
1252
|
-
.toggle--checkbox[data-v-
|
|
1252
|
+
.toggle--checkbox[data-v-699fb0fe] {
|
|
1253
1253
|
position: absolute;
|
|
1254
1254
|
opacity: 0;
|
|
1255
1255
|
height: 0;
|
|
1256
1256
|
width: 0;
|
|
1257
1257
|
}
|
|
1258
|
-
.toggle--checkbox:checked ~ .background[data-v-
|
|
1258
|
+
.toggle--checkbox:checked ~ .background[data-v-699fb0fe] {
|
|
1259
1259
|
background: #1357a6;
|
|
1260
1260
|
}
|
|
1261
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1261
|
+
.toggle--checkbox:checked + .toggle--label[data-v-699fb0fe] {
|
|
1262
1262
|
background: var(--dark-background-color);
|
|
1263
1263
|
border-color: var(--dark-border-color);
|
|
1264
1264
|
}
|
|
1265
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1265
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-699fb0fe] {
|
|
1266
1266
|
left: 14px;
|
|
1267
1267
|
width: 2px;
|
|
1268
1268
|
}
|
|
1269
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1269
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-699fb0fe]:before {
|
|
1270
1270
|
width: 2px;
|
|
1271
1271
|
height: 2px;
|
|
1272
1272
|
top: -6px;
|
|
1273
1273
|
}
|
|
1274
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1274
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-699fb0fe]:after {
|
|
1275
1275
|
width: 2px;
|
|
1276
1276
|
height: 2px;
|
|
1277
1277
|
left: -8px;
|
|
1278
1278
|
top: 4px;
|
|
1279
1279
|
}
|
|
1280
|
-
.toggle--label[data-v-
|
|
1280
|
+
.toggle--label[data-v-699fb0fe] {
|
|
1281
1281
|
width: 48px;
|
|
1282
1282
|
height: 24px;
|
|
1283
1283
|
background: var(--light-background-color);
|
|
@@ -1288,12 +1288,12 @@ body {
|
|
|
1288
1288
|
transition: all 350ms ease-in;
|
|
1289
1289
|
cursor: pointer;
|
|
1290
1290
|
}
|
|
1291
|
-
.toggle--label[data-v-
|
|
1291
|
+
.toggle--label[data-v-699fb0fe]:focus-visible {
|
|
1292
1292
|
outline: 2px solid #005fcc;
|
|
1293
1293
|
outline-offset: 2px;
|
|
1294
1294
|
transition: 0s;
|
|
1295
1295
|
}
|
|
1296
|
-
.toggle--label-background[data-v-
|
|
1296
|
+
.toggle--label-background[data-v-699fb0fe] {
|
|
1297
1297
|
width: 4px;
|
|
1298
1298
|
height: 2px;
|
|
1299
1299
|
border-radius: 2px;
|
|
@@ -1303,7 +1303,7 @@ body {
|
|
|
1303
1303
|
top: 11px;
|
|
1304
1304
|
transition: all 150ms ease-in;
|
|
1305
1305
|
}
|
|
1306
|
-
.toggle--label-background[data-v-
|
|
1306
|
+
.toggle--label-background[data-v-699fb0fe]:before {
|
|
1307
1307
|
content: "";
|
|
1308
1308
|
position: absolute;
|
|
1309
1309
|
top: -4px;
|
|
@@ -1314,7 +1314,7 @@ body {
|
|
|
1314
1314
|
left: -5px;
|
|
1315
1315
|
transition: all 150ms ease-in;
|
|
1316
1316
|
}
|
|
1317
|
-
.toggle--label-background[data-v-
|
|
1317
|
+
.toggle--label-background[data-v-699fb0fe]:after {
|
|
1318
1318
|
content: "";
|
|
1319
1319
|
position: absolute;
|
|
1320
1320
|
top: 4px;
|
|
@@ -1325,7 +1325,7 @@ body {
|
|
|
1325
1325
|
left: -3px;
|
|
1326
1326
|
transition: all 150ms ease-in;
|
|
1327
1327
|
}
|
|
1328
|
-
.toggle--label[data-v-
|
|
1328
|
+
.toggle--label[data-v-699fb0fe]:before {
|
|
1329
1329
|
content: "";
|
|
1330
1330
|
width: 18px;
|
|
1331
1331
|
height: 18px;
|
|
@@ -1336,18 +1336,18 @@ body {
|
|
|
1336
1336
|
top: 1px;
|
|
1337
1337
|
left: 1px;
|
|
1338
1338
|
transition: all 350ms ease-in;
|
|
1339
|
-
animation-name: reverse-
|
|
1339
|
+
animation-name: reverse-699fb0fe;
|
|
1340
1340
|
animation-duration: 350ms;
|
|
1341
1341
|
animation-fill-mode: forwards;
|
|
1342
1342
|
}
|
|
1343
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1343
|
+
.toggle--checkbox:checked + .toggle--label[data-v-699fb0fe]:before {
|
|
1344
1344
|
background: #fff;
|
|
1345
1345
|
border-color: #e8e8ea;
|
|
1346
|
-
animation-name: switch-
|
|
1346
|
+
animation-name: switch-699fb0fe;
|
|
1347
1347
|
animation-duration: 350ms;
|
|
1348
1348
|
animation-fill-mode: forwards;
|
|
1349
1349
|
}
|
|
1350
|
-
.toggle--label[data-v-
|
|
1350
|
+
.toggle--label[data-v-699fb0fe]:after {
|
|
1351
1351
|
content: "";
|
|
1352
1352
|
position: absolute;
|
|
1353
1353
|
box-shadow: #e8e8ea 1px 0 0 1px, #e8e8ea -2px 4px 0 -1px;
|
|
@@ -1360,11 +1360,11 @@ body {
|
|
|
1360
1360
|
opacity: 0;
|
|
1361
1361
|
transition: all 250ms ease-in;
|
|
1362
1362
|
}
|
|
1363
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1363
|
+
.toggle--checkbox:checked + .toggle--label[data-v-699fb0fe]:after {
|
|
1364
1364
|
opacity: 1;
|
|
1365
1365
|
transition-delay: 350ms;
|
|
1366
1366
|
}
|
|
1367
|
-
.theme-icons[data-v-
|
|
1367
|
+
.theme-icons[data-v-699fb0fe] {
|
|
1368
1368
|
position: absolute;
|
|
1369
1369
|
top: 50%;
|
|
1370
1370
|
transform: translateY(-50%);
|
|
@@ -1373,24 +1373,24 @@ body {
|
|
|
1373
1373
|
width: 80%;
|
|
1374
1374
|
left: 10%;
|
|
1375
1375
|
}
|
|
1376
|
-
.sun-icon[data-v-
|
|
1377
|
-
.moon-icon[data-v-
|
|
1376
|
+
.sun-icon[data-v-699fb0fe],
|
|
1377
|
+
.moon-icon[data-v-699fb0fe] {
|
|
1378
1378
|
font-size: 10px;
|
|
1379
1379
|
transition: opacity 0.3s ease;
|
|
1380
1380
|
}
|
|
1381
|
-
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-
|
|
1381
|
+
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-699fb0fe] {
|
|
1382
1382
|
opacity: 1;
|
|
1383
1383
|
}
|
|
1384
|
-
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-
|
|
1384
|
+
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-699fb0fe] {
|
|
1385
1385
|
opacity: 0.5;
|
|
1386
1386
|
}
|
|
1387
|
-
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-
|
|
1387
|
+
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-699fb0fe] {
|
|
1388
1388
|
opacity: 0.5;
|
|
1389
1389
|
}
|
|
1390
|
-
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-
|
|
1390
|
+
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-699fb0fe] {
|
|
1391
1391
|
opacity: 1;
|
|
1392
1392
|
}
|
|
1393
|
-
@keyframes switch-
|
|
1393
|
+
@keyframes switch-699fb0fe {
|
|
1394
1394
|
0% {
|
|
1395
1395
|
left: 1px;
|
|
1396
1396
|
}
|
|
@@ -1403,7 +1403,7 @@ body {
|
|
|
1403
1403
|
width: 18px;
|
|
1404
1404
|
}
|
|
1405
1405
|
}
|
|
1406
|
-
@keyframes reverse-
|
|
1406
|
+
@keyframes reverse-699fb0fe {
|
|
1407
1407
|
0% {
|
|
1408
1408
|
left: 25px;
|
|
1409
1409
|
width: 18px;
|