@henriquepetrelli/hp-design-system 1.1.5 → 1.1.6
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
|
@@ -1158,49 +1158,39 @@ body {
|
|
|
1158
1158
|
.toggle-switch__input:disabled + .toggle-switch__label[data-v-14c54b46] {
|
|
1159
1159
|
cursor: not-allowed;
|
|
1160
1160
|
opacity: 0.6;
|
|
1161
|
-
}.theme-switcher-container[data-v-
|
|
1161
|
+
}.theme-switcher-container[data-v-715118dd] {
|
|
1162
1162
|
position: relative;
|
|
1163
1163
|
display: inline-block;
|
|
1164
1164
|
}
|
|
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] {
|
|
1165
|
+
.toggle--checkbox[data-v-715118dd] {
|
|
1176
1166
|
position: absolute;
|
|
1177
1167
|
opacity: 0;
|
|
1178
1168
|
height: 0;
|
|
1179
1169
|
width: 0;
|
|
1180
1170
|
}
|
|
1181
|
-
.toggle--checkbox:checked ~ .background[data-v-
|
|
1171
|
+
.toggle--checkbox:checked ~ .background[data-v-715118dd] {
|
|
1182
1172
|
background: #1357a6;
|
|
1183
1173
|
}
|
|
1184
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1174
|
+
.toggle--checkbox:checked + .toggle--label[data-v-715118dd] {
|
|
1185
1175
|
background: var(--dark-background-color);
|
|
1186
1176
|
border-color: var(--dark-border-color);
|
|
1187
1177
|
}
|
|
1188
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1178
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-715118dd] {
|
|
1189
1179
|
left: 14px;
|
|
1190
1180
|
width: 2px;
|
|
1191
1181
|
}
|
|
1192
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1182
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-715118dd]:before {
|
|
1193
1183
|
width: 2px;
|
|
1194
1184
|
height: 2px;
|
|
1195
1185
|
top: -6px;
|
|
1196
1186
|
}
|
|
1197
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1187
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-715118dd]:after {
|
|
1198
1188
|
width: 2px;
|
|
1199
1189
|
height: 2px;
|
|
1200
1190
|
left: -8px;
|
|
1201
1191
|
top: 4px;
|
|
1202
1192
|
}
|
|
1203
|
-
.toggle--label[data-v-
|
|
1193
|
+
.toggle--label[data-v-715118dd] {
|
|
1204
1194
|
width: 48px;
|
|
1205
1195
|
height: 24px;
|
|
1206
1196
|
background: var(--light-background-color);
|
|
@@ -1211,12 +1201,12 @@ body {
|
|
|
1211
1201
|
transition: all 350ms ease-in;
|
|
1212
1202
|
cursor: pointer;
|
|
1213
1203
|
}
|
|
1214
|
-
.toggle--label[data-v-
|
|
1204
|
+
.toggle--label[data-v-715118dd]:focus-visible {
|
|
1215
1205
|
outline: 2px solid #005fcc;
|
|
1216
1206
|
outline-offset: 2px;
|
|
1217
1207
|
transition: 0s;
|
|
1218
1208
|
}
|
|
1219
|
-
.toggle--label-background[data-v-
|
|
1209
|
+
.toggle--label-background[data-v-715118dd] {
|
|
1220
1210
|
width: 4px;
|
|
1221
1211
|
height: 2px;
|
|
1222
1212
|
border-radius: 2px;
|
|
@@ -1226,7 +1216,7 @@ body {
|
|
|
1226
1216
|
top: 11px;
|
|
1227
1217
|
transition: all 150ms ease-in;
|
|
1228
1218
|
}
|
|
1229
|
-
.toggle--label-background[data-v-
|
|
1219
|
+
.toggle--label-background[data-v-715118dd]:before {
|
|
1230
1220
|
content: "";
|
|
1231
1221
|
position: absolute;
|
|
1232
1222
|
top: -4px;
|
|
@@ -1237,7 +1227,7 @@ body {
|
|
|
1237
1227
|
left: -5px;
|
|
1238
1228
|
transition: all 150ms ease-in;
|
|
1239
1229
|
}
|
|
1240
|
-
.toggle--label-background[data-v-
|
|
1230
|
+
.toggle--label-background[data-v-715118dd]:after {
|
|
1241
1231
|
content: "";
|
|
1242
1232
|
position: absolute;
|
|
1243
1233
|
top: 4px;
|
|
@@ -1248,7 +1238,7 @@ body {
|
|
|
1248
1238
|
left: -3px;
|
|
1249
1239
|
transition: all 150ms ease-in;
|
|
1250
1240
|
}
|
|
1251
|
-
.toggle--label[data-v-
|
|
1241
|
+
.toggle--label[data-v-715118dd]:before {
|
|
1252
1242
|
content: "";
|
|
1253
1243
|
width: 18px;
|
|
1254
1244
|
height: 18px;
|
|
@@ -1259,18 +1249,18 @@ body {
|
|
|
1259
1249
|
top: 1px;
|
|
1260
1250
|
left: 1px;
|
|
1261
1251
|
transition: all 350ms ease-in;
|
|
1262
|
-
animation-name: reverse-
|
|
1252
|
+
animation-name: reverse-715118dd;
|
|
1263
1253
|
animation-duration: 350ms;
|
|
1264
1254
|
animation-fill-mode: forwards;
|
|
1265
1255
|
}
|
|
1266
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1256
|
+
.toggle--checkbox:checked + .toggle--label[data-v-715118dd]:before {
|
|
1267
1257
|
background: #fff;
|
|
1268
1258
|
border-color: #e8e8ea;
|
|
1269
|
-
animation-name: switch-
|
|
1259
|
+
animation-name: switch-715118dd;
|
|
1270
1260
|
animation-duration: 350ms;
|
|
1271
1261
|
animation-fill-mode: forwards;
|
|
1272
1262
|
}
|
|
1273
|
-
.toggle--label[data-v-
|
|
1263
|
+
.toggle--label[data-v-715118dd]:after {
|
|
1274
1264
|
content: "";
|
|
1275
1265
|
position: absolute;
|
|
1276
1266
|
box-shadow: #e8e8ea 1px 0 0 1px, #e8e8ea -2px 4px 0 -1px;
|
|
@@ -1283,11 +1273,11 @@ body {
|
|
|
1283
1273
|
opacity: 0;
|
|
1284
1274
|
transition: all 250ms ease-in;
|
|
1285
1275
|
}
|
|
1286
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1276
|
+
.toggle--checkbox:checked + .toggle--label[data-v-715118dd]:after {
|
|
1287
1277
|
opacity: 1;
|
|
1288
1278
|
transition-delay: 350ms;
|
|
1289
1279
|
}
|
|
1290
|
-
.theme-icons[data-v-
|
|
1280
|
+
.theme-icons[data-v-715118dd] {
|
|
1291
1281
|
position: absolute;
|
|
1292
1282
|
top: 50%;
|
|
1293
1283
|
transform: translateY(-50%);
|
|
@@ -1296,24 +1286,24 @@ body {
|
|
|
1296
1286
|
width: 80%;
|
|
1297
1287
|
left: 10%;
|
|
1298
1288
|
}
|
|
1299
|
-
.sun-icon[data-v-
|
|
1300
|
-
.moon-icon[data-v-
|
|
1289
|
+
.sun-icon[data-v-715118dd],
|
|
1290
|
+
.moon-icon[data-v-715118dd] {
|
|
1301
1291
|
font-size: 10px;
|
|
1302
1292
|
transition: opacity 0.3s ease;
|
|
1303
1293
|
}
|
|
1304
|
-
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-
|
|
1294
|
+
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-715118dd] {
|
|
1305
1295
|
opacity: 1;
|
|
1306
1296
|
}
|
|
1307
|
-
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-
|
|
1297
|
+
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-715118dd] {
|
|
1308
1298
|
opacity: 0.5;
|
|
1309
1299
|
}
|
|
1310
|
-
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-
|
|
1300
|
+
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-715118dd] {
|
|
1311
1301
|
opacity: 0.5;
|
|
1312
1302
|
}
|
|
1313
|
-
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-
|
|
1303
|
+
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-715118dd] {
|
|
1314
1304
|
opacity: 1;
|
|
1315
1305
|
}
|
|
1316
|
-
@keyframes switch-
|
|
1306
|
+
@keyframes switch-715118dd {
|
|
1317
1307
|
0% {
|
|
1318
1308
|
left: 1px;
|
|
1319
1309
|
}
|
|
@@ -1326,7 +1316,7 @@ body {
|
|
|
1326
1316
|
width: 18px;
|
|
1327
1317
|
}
|
|
1328
1318
|
}
|
|
1329
|
-
@keyframes reverse-
|
|
1319
|
+
@keyframes reverse-715118dd {
|
|
1330
1320
|
0% {
|
|
1331
1321
|
left: 25px;
|
|
1332
1322
|
width: 18px;
|