@henriquepetrelli/hp-design-system 1.1.6 → 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 +126 -39
- 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;
|