@henriquepetrelli/hp-design-system 1.1.6 → 1.1.8
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/hp-design-system.es.js +41 -46
- package/dist/hp-design-system.es.js.map +1 -1
- package/dist/hp-design-system.umd.js +41 -46
- package/dist/hp-design-system.umd.js.map +1 -1
- package/dist/style.css +153 -66
- package/package.json +1 -1
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
|
-
--color-warning: rgb(193, 158, 61);
|
|
127
|
-
--color-info: rgb(52, 73, 102);
|
|
128
|
-
--color-error: rgb(121, 1, 24);
|
|
129
|
-
--color-success-background: rgb(243, 255, 243);
|
|
130
|
-
--color-warning-background: rgb(255, 249, 245);
|
|
131
|
-
--color-info-background: rgb(230, 235, 245);
|
|
132
|
-
--color-error-background: rgb(251, 243, 244);
|
|
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);
|
|
135
126
|
}
|
|
136
127
|
|
|
137
|
-
.
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
--color-success: rgb(130, 169, 67);
|
|
143
|
-
--color-warning: rgb(193, 158, 61);
|
|
144
|
-
--color-info: rgb(52, 73, 102);
|
|
145
|
-
--color-error: rgb(121, 1, 24);
|
|
146
|
-
--color-success-background: rgb(243, 255, 243);
|
|
147
|
-
--color-warning-background: rgb(255, 249, 245);
|
|
148
|
-
--color-info-background: rgb(230, 235, 245);
|
|
149
|
-
--color-error-background: rgb(251, 243, 244);
|
|
150
|
-
--color-text: rgb(229, 229, 229);
|
|
151
|
-
--color-text-disabled: rgb(128, 124, 123);
|
|
128
|
+
.toggle--checkbox {
|
|
129
|
+
position: absolute;
|
|
130
|
+
opacity: 0;
|
|
131
|
+
height: 0;
|
|
132
|
+
width: 0;
|
|
152
133
|
}
|
|
153
134
|
|
|
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;
|
|
206
|
+
}
|
|
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,39 +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-699fb0fe] {
|
|
1162
1249
|
position: relative;
|
|
1163
1250
|
display: inline-block;
|
|
1164
1251
|
}
|
|
1165
|
-
.toggle--checkbox[data-v-
|
|
1252
|
+
.toggle--checkbox[data-v-699fb0fe] {
|
|
1166
1253
|
position: absolute;
|
|
1167
1254
|
opacity: 0;
|
|
1168
1255
|
height: 0;
|
|
1169
1256
|
width: 0;
|
|
1170
1257
|
}
|
|
1171
|
-
.toggle--checkbox:checked ~ .background[data-v-
|
|
1258
|
+
.toggle--checkbox:checked ~ .background[data-v-699fb0fe] {
|
|
1172
1259
|
background: #1357a6;
|
|
1173
1260
|
}
|
|
1174
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1261
|
+
.toggle--checkbox:checked + .toggle--label[data-v-699fb0fe] {
|
|
1175
1262
|
background: var(--dark-background-color);
|
|
1176
1263
|
border-color: var(--dark-border-color);
|
|
1177
1264
|
}
|
|
1178
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1265
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-699fb0fe] {
|
|
1179
1266
|
left: 14px;
|
|
1180
1267
|
width: 2px;
|
|
1181
1268
|
}
|
|
1182
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1269
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-699fb0fe]:before {
|
|
1183
1270
|
width: 2px;
|
|
1184
1271
|
height: 2px;
|
|
1185
1272
|
top: -6px;
|
|
1186
1273
|
}
|
|
1187
|
-
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-
|
|
1274
|
+
.toggle--checkbox:checked + .toggle--label .toggle--label-background[data-v-699fb0fe]:after {
|
|
1188
1275
|
width: 2px;
|
|
1189
1276
|
height: 2px;
|
|
1190
1277
|
left: -8px;
|
|
1191
1278
|
top: 4px;
|
|
1192
1279
|
}
|
|
1193
|
-
.toggle--label[data-v-
|
|
1280
|
+
.toggle--label[data-v-699fb0fe] {
|
|
1194
1281
|
width: 48px;
|
|
1195
1282
|
height: 24px;
|
|
1196
1283
|
background: var(--light-background-color);
|
|
@@ -1201,12 +1288,12 @@ body {
|
|
|
1201
1288
|
transition: all 350ms ease-in;
|
|
1202
1289
|
cursor: pointer;
|
|
1203
1290
|
}
|
|
1204
|
-
.toggle--label[data-v-
|
|
1291
|
+
.toggle--label[data-v-699fb0fe]:focus-visible {
|
|
1205
1292
|
outline: 2px solid #005fcc;
|
|
1206
1293
|
outline-offset: 2px;
|
|
1207
1294
|
transition: 0s;
|
|
1208
1295
|
}
|
|
1209
|
-
.toggle--label-background[data-v-
|
|
1296
|
+
.toggle--label-background[data-v-699fb0fe] {
|
|
1210
1297
|
width: 4px;
|
|
1211
1298
|
height: 2px;
|
|
1212
1299
|
border-radius: 2px;
|
|
@@ -1216,7 +1303,7 @@ body {
|
|
|
1216
1303
|
top: 11px;
|
|
1217
1304
|
transition: all 150ms ease-in;
|
|
1218
1305
|
}
|
|
1219
|
-
.toggle--label-background[data-v-
|
|
1306
|
+
.toggle--label-background[data-v-699fb0fe]:before {
|
|
1220
1307
|
content: "";
|
|
1221
1308
|
position: absolute;
|
|
1222
1309
|
top: -4px;
|
|
@@ -1227,7 +1314,7 @@ body {
|
|
|
1227
1314
|
left: -5px;
|
|
1228
1315
|
transition: all 150ms ease-in;
|
|
1229
1316
|
}
|
|
1230
|
-
.toggle--label-background[data-v-
|
|
1317
|
+
.toggle--label-background[data-v-699fb0fe]:after {
|
|
1231
1318
|
content: "";
|
|
1232
1319
|
position: absolute;
|
|
1233
1320
|
top: 4px;
|
|
@@ -1238,7 +1325,7 @@ body {
|
|
|
1238
1325
|
left: -3px;
|
|
1239
1326
|
transition: all 150ms ease-in;
|
|
1240
1327
|
}
|
|
1241
|
-
.toggle--label[data-v-
|
|
1328
|
+
.toggle--label[data-v-699fb0fe]:before {
|
|
1242
1329
|
content: "";
|
|
1243
1330
|
width: 18px;
|
|
1244
1331
|
height: 18px;
|
|
@@ -1249,18 +1336,18 @@ body {
|
|
|
1249
1336
|
top: 1px;
|
|
1250
1337
|
left: 1px;
|
|
1251
1338
|
transition: all 350ms ease-in;
|
|
1252
|
-
animation-name: reverse-
|
|
1339
|
+
animation-name: reverse-699fb0fe;
|
|
1253
1340
|
animation-duration: 350ms;
|
|
1254
1341
|
animation-fill-mode: forwards;
|
|
1255
1342
|
}
|
|
1256
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1343
|
+
.toggle--checkbox:checked + .toggle--label[data-v-699fb0fe]:before {
|
|
1257
1344
|
background: #fff;
|
|
1258
1345
|
border-color: #e8e8ea;
|
|
1259
|
-
animation-name: switch-
|
|
1346
|
+
animation-name: switch-699fb0fe;
|
|
1260
1347
|
animation-duration: 350ms;
|
|
1261
1348
|
animation-fill-mode: forwards;
|
|
1262
1349
|
}
|
|
1263
|
-
.toggle--label[data-v-
|
|
1350
|
+
.toggle--label[data-v-699fb0fe]:after {
|
|
1264
1351
|
content: "";
|
|
1265
1352
|
position: absolute;
|
|
1266
1353
|
box-shadow: #e8e8ea 1px 0 0 1px, #e8e8ea -2px 4px 0 -1px;
|
|
@@ -1273,11 +1360,11 @@ body {
|
|
|
1273
1360
|
opacity: 0;
|
|
1274
1361
|
transition: all 250ms ease-in;
|
|
1275
1362
|
}
|
|
1276
|
-
.toggle--checkbox:checked + .toggle--label[data-v-
|
|
1363
|
+
.toggle--checkbox:checked + .toggle--label[data-v-699fb0fe]:after {
|
|
1277
1364
|
opacity: 1;
|
|
1278
1365
|
transition-delay: 350ms;
|
|
1279
1366
|
}
|
|
1280
|
-
.theme-icons[data-v-
|
|
1367
|
+
.theme-icons[data-v-699fb0fe] {
|
|
1281
1368
|
position: absolute;
|
|
1282
1369
|
top: 50%;
|
|
1283
1370
|
transform: translateY(-50%);
|
|
@@ -1286,24 +1373,24 @@ body {
|
|
|
1286
1373
|
width: 80%;
|
|
1287
1374
|
left: 10%;
|
|
1288
1375
|
}
|
|
1289
|
-
.sun-icon[data-v-
|
|
1290
|
-
.moon-icon[data-v-
|
|
1376
|
+
.sun-icon[data-v-699fb0fe],
|
|
1377
|
+
.moon-icon[data-v-699fb0fe] {
|
|
1291
1378
|
font-size: 10px;
|
|
1292
1379
|
transition: opacity 0.3s ease;
|
|
1293
1380
|
}
|
|
1294
|
-
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-
|
|
1381
|
+
.toggle--checkbox:checked + .toggle--label .moon-icon[data-v-699fb0fe] {
|
|
1295
1382
|
opacity: 1;
|
|
1296
1383
|
}
|
|
1297
|
-
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-
|
|
1384
|
+
.toggle--checkbox:checked + .toggle--label .sun-icon[data-v-699fb0fe] {
|
|
1298
1385
|
opacity: 0.5;
|
|
1299
1386
|
}
|
|
1300
|
-
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-
|
|
1387
|
+
.toggle--checkbox:not(:checked) + .toggle--label .moon-icon[data-v-699fb0fe] {
|
|
1301
1388
|
opacity: 0.5;
|
|
1302
1389
|
}
|
|
1303
|
-
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-
|
|
1390
|
+
.toggle--checkbox:not(:checked) + .toggle--label .sun-icon[data-v-699fb0fe] {
|
|
1304
1391
|
opacity: 1;
|
|
1305
1392
|
}
|
|
1306
|
-
@keyframes switch-
|
|
1393
|
+
@keyframes switch-699fb0fe {
|
|
1307
1394
|
0% {
|
|
1308
1395
|
left: 1px;
|
|
1309
1396
|
}
|
|
@@ -1316,7 +1403,7 @@ body {
|
|
|
1316
1403
|
width: 18px;
|
|
1317
1404
|
}
|
|
1318
1405
|
}
|
|
1319
|
-
@keyframes reverse-
|
|
1406
|
+
@keyframes reverse-699fb0fe {
|
|
1320
1407
|
0% {
|
|
1321
1408
|
left: 25px;
|
|
1322
1409
|
width: 18px;
|