@keenmate/pure-admin-core 2.3.0 → 2.3.2

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.
Files changed (69) hide show
  1. package/README.md +7 -5
  2. package/dist/css/main.css +207 -181
  3. package/package.json +1 -1
  4. package/snippets/buttons.html +375 -365
  5. package/src/scss/_base-css-variables.scss +8 -0
  6. package/src/scss/_core.scss +121 -121
  7. package/src/scss/core-components/_alerts.scss +227 -227
  8. package/src/scss/core-components/_badges.scss +16 -16
  9. package/src/scss/core-components/_base.scss +125 -125
  10. package/src/scss/core-components/_buttons.scss +580 -548
  11. package/src/scss/core-components/_callouts.scss +152 -152
  12. package/src/scss/core-components/_cards.scss +488 -488
  13. package/src/scss/core-components/_checkbox-lists.scss +289 -289
  14. package/src/scss/core-components/_code.scss +141 -141
  15. package/src/scss/core-components/_command-palette.scss +509 -509
  16. package/src/scss/core-components/_comparison.scss +172 -172
  17. package/src/scss/core-components/_data-display.scss +9 -9
  18. package/src/scss/core-components/_data-viz.scss +9 -9
  19. package/src/scss/core-components/_detail-panel.scss +1 -1
  20. package/src/scss/core-components/_file-selector.scss +780 -780
  21. package/src/scss/core-components/_filter-card.scss +58 -58
  22. package/src/scss/core-components/_forms.scss +16 -16
  23. package/src/scss/core-components/_grid.scss +293 -293
  24. package/src/scss/core-components/_layout.scss +15 -15
  25. package/src/scss/core-components/_lists.scss +211 -211
  26. package/src/scss/core-components/_loaders.scss +277 -277
  27. package/src/scss/core-components/_logic-tree.scss +280 -280
  28. package/src/scss/core-components/_modals.scss +203 -203
  29. package/src/scss/core-components/_notifications.scss +320 -320
  30. package/src/scss/core-components/_pagers.scss +141 -141
  31. package/src/scss/core-components/_popconfirm.scss +170 -170
  32. package/src/scss/core-components/_profile.scss +405 -405
  33. package/src/scss/core-components/_scrollbars.scss +40 -40
  34. package/src/scss/core-components/_settings-panel.scss +141 -141
  35. package/src/scss/core-components/_statistics.scss +200 -201
  36. package/src/scss/core-components/_tables.scss +900 -900
  37. package/src/scss/core-components/_tabs.scss +504 -504
  38. package/src/scss/core-components/_timeline.scss +589 -589
  39. package/src/scss/core-components/_toasts.scss +425 -425
  40. package/src/scss/core-components/_tooltips.scss +605 -605
  41. package/src/scss/core-components/_utilities.scss +1 -1
  42. package/src/scss/core-components/_web-components-theme.scss +21 -21
  43. package/src/scss/core-components/badges/_badge-base.scss +121 -121
  44. package/src/scss/core-components/badges/_badge-group.scss +25 -25
  45. package/src/scss/core-components/badges/_composite-badge-variants.scss +396 -396
  46. package/src/scss/core-components/badges/_composite-badge.scss +70 -70
  47. package/src/scss/core-components/badges/_index.scss +10 -10
  48. package/src/scss/core-components/badges/_labels.scss +155 -155
  49. package/src/scss/core-components/forms/_checkboxes-radios.scss +205 -205
  50. package/src/scss/core-components/forms/_form-inputs.scss +136 -135
  51. package/src/scss/core-components/forms/_form-layout.scss +66 -66
  52. package/src/scss/core-components/forms/_form-states.scss +115 -115
  53. package/src/scss/core-components/forms/_index.scss +12 -12
  54. package/src/scss/core-components/forms/_input-groups.scss +154 -154
  55. package/src/scss/core-components/forms/_input-wrapper.scss +89 -89
  56. package/src/scss/core-components/forms/_query-editor.scss +313 -313
  57. package/src/scss/core-components/layout/_index.scss +11 -11
  58. package/src/scss/core-components/layout/_layout-container.scss +168 -168
  59. package/src/scss/core-components/layout/_layout-responsive.scss +99 -99
  60. package/src/scss/core-components/layout/_navbar-elements.scss +250 -250
  61. package/src/scss/core-components/layout/_navbar.scss +83 -83
  62. package/src/scss/core-components/layout/_sidebar-states.scss +237 -237
  63. package/src/scss/core-components/layout/_sidebar.scss +234 -234
  64. package/src/scss/main.scss +7 -7
  65. package/src/scss/utilities.scss +740 -740
  66. package/src/scss/variables/_base.scss +228 -228
  67. package/src/scss/variables/_components.scss +748 -748
  68. package/src/scss/variables/_layout.scss +65 -65
  69. package/src/scss/variables/_typography.scss +37 -37
package/src/scss/core-components/badges/_composite-badge-variants.scss CHANGED
@@ -1,396 +1,396 @@
1
- /* ========================================
2
- Composite Badge Variants
3
- Color variations for composite badges
4
- ======================================== */
5
- @use '../../variables' as *;
6
- @use "sass:color";
7
-
8
- .pa-composite-badge {
9
- // Standard color variations - all sections match
10
- &--primary {
11
- .pa-composite-badge__icon {
12
- background-color: $btn-primary-bg;
13
- color: $btn-primary-text;
14
- }
15
- .pa-composite-badge__label {
16
- background-color: $accent-light;
17
- color: $btn-primary-bg;
18
- &:hover {
19
- background-color: $accent-hover;
20
- }
21
- }
22
- .pa-composite-badge__button {
23
- background-color: $btn-primary-bg;
24
- color: $btn-primary-text;
25
- &:hover {
26
- background-color: $btn-primary-bg-hover;
27
- }
28
- &:focus {
29
- box-shadow: 0 0 0 $focus-outline-width $accent-hover;
30
- }
31
- }
32
- }
33
-
34
- &--secondary {
35
- .pa-composite-badge__icon {
36
- background-color: $btn-secondary-bg;
37
- color: $btn-secondary-text;
38
- }
39
- .pa-composite-badge__label {
40
- background-color: $page-bg;
41
- color: var(--pa-text-color-2);
42
- &:hover {
43
- background-color: $table-hover-bg;
44
- }
45
- }
46
- .pa-composite-badge__button {
47
- background-color: $btn-secondary-bg;
48
- color: $btn-secondary-text;
49
- &:hover {
50
- background-color: $btn-secondary-bg-hover;
51
- }
52
- &:focus {
53
- box-shadow: 0 0 0 $focus-outline-width $accent-hover;
54
- }
55
- }
56
- }
57
-
58
- &--success {
59
- .pa-composite-badge__icon {
60
- background-color: $btn-success-bg;
61
- color: $btn-success-text;
62
- }
63
- .pa-composite-badge__label {
64
- background-color: $badge-success-bg;
65
- color: $badge-success-text;
66
- &:hover {
67
- background-color: color.adjust($badge-success-bg, $lightness: -5%);
68
- }
69
- }
70
- .pa-composite-badge__button {
71
- background-color: $btn-success-bg;
72
- color: $btn-success-text;
73
- &:hover {
74
- background-color: $btn-success-bg-hover;
75
- }
76
- &:focus {
77
- box-shadow: 0 0 0 $focus-outline-width $accent-hover;
78
- }
79
- }
80
- }
81
-
82
- &--danger {
83
- .pa-composite-badge__icon {
84
- background-color: $btn-danger-bg;
85
- color: $btn-danger-text;
86
- }
87
- .pa-composite-badge__label {
88
- background-color: $badge-danger-bg;
89
- color: $badge-danger-text;
90
- &:hover {
91
- background-color: color.adjust($badge-danger-bg, $lightness: -5%);
92
- }
93
- }
94
- .pa-composite-badge__button {
95
- background-color: $btn-danger-bg;
96
- color: $btn-danger-text;
97
- &:hover {
98
- background-color: $btn-danger-bg-hover;
99
- }
100
- &:focus {
101
- box-shadow: 0 0 0 $focus-outline-width $accent-hover;
102
- }
103
- }
104
- }
105
-
106
- &--warning {
107
- .pa-composite-badge__icon {
108
- background-color: $btn-warning-bg;
109
- color: $btn-warning-text;
110
- }
111
- .pa-composite-badge__label {
112
- background-color: $badge-warning-bg;
113
- color: $badge-warning-text;
114
- &:hover {
115
- background-color: color.adjust($badge-warning-bg, $lightness: -5%);
116
- }
117
- }
118
- .pa-composite-badge__button {
119
- background-color: $btn-warning-bg;
120
- color: $btn-warning-text;
121
- &:hover {
122
- background-color: $btn-warning-bg-hover;
123
- }
124
- &:focus {
125
- box-shadow: 0 0 0 $focus-outline-width $accent-hover;
126
- }
127
- }
128
- }
129
-
130
- &--info {
131
- .pa-composite-badge__icon {
132
- background-color: $btn-info-bg;
133
- color: $btn-info-text;
134
- }
135
- .pa-composite-badge__label {
136
- background-color: $badge-info-bg;
137
- color: $badge-info-text;
138
- &:hover {
139
- background-color: color.adjust($badge-info-bg, $lightness: -5%);
140
- }
141
- }
142
- .pa-composite-badge__button {
143
- background-color: $btn-info-bg;
144
- color: $btn-info-text;
145
- &:hover {
146
- background-color: $btn-info-bg-hover;
147
- }
148
- &:focus {
149
- box-shadow: 0 0 0 $focus-outline-width $accent-hover;
150
- }
151
- }
152
- }
153
-
154
- &--light {
155
- .pa-composite-badge__icon {
156
- background-color: $btn-light-bg;
157
- color: $btn-light-text;
158
- }
159
- .pa-composite-badge__label {
160
- background-color: $header-bg;
161
- color: $btn-light-text;
162
- &:hover {
163
- background-color: $btn-light-bg-hover;
164
- }
165
- }
166
- .pa-composite-badge__button {
167
- background-color: $btn-light-bg;
168
- color: $btn-light-text;
169
- &:hover {
170
- background-color: $btn-light-bg-hover;
171
- }
172
- &:focus {
173
- box-shadow: 0 0 0 $focus-outline-width $accent-hover;
174
- }
175
- }
176
- }
177
-
178
- &--dark {
179
- .pa-composite-badge__icon {
180
- background-color: $btn-dark-bg;
181
- color: $btn-dark-text;
182
- }
183
- .pa-composite-badge__label {
184
- background-color: $table-hover-bg;
185
- color: var(--pa-text-color-1);
186
- &:hover {
187
- background-color: $border-color;
188
- }
189
- }
190
- .pa-composite-badge__button {
191
- background-color: $btn-dark-bg;
192
- color: $btn-dark-text;
193
- &:hover {
194
- background-color: $btn-dark-bg-hover;
195
- }
196
- &:focus {
197
- box-shadow: 0 0 0 $focus-outline-width $accent-hover;
198
- }
199
- }
200
- }
201
-
202
- // Color variants for icon section only
203
- &--primary &__icon {
204
- background-color: $btn-primary-bg;
205
- }
206
-
207
- &--secondary &__icon {
208
- background-color: $btn-secondary-bg;
209
- }
210
-
211
- &--success &__icon {
212
- background-color: $btn-success-bg;
213
- }
214
-
215
- &--danger &__icon {
216
- background-color: $btn-danger-bg;
217
- }
218
-
219
- &--warning &__icon {
220
- background-color: $btn-warning-bg;
221
- color: $btn-warning-color;
222
- }
223
-
224
- &--info &__icon {
225
- background-color: $btn-info-bg;
226
- }
227
-
228
- &--light &__icon {
229
- background-color: $btn-light-bg;
230
- color: $btn-light-text;
231
- }
232
-
233
- &--dark &__icon {
234
- background-color: $btn-dark-bg;
235
- }
236
-
237
- // Color variants for label section
238
- &--label-primary &__label {
239
- background-color: color.adjust($btn-primary-bg, $lightness: 40%);
240
- color: color.adjust($btn-primary-bg, $lightness: -30%);
241
-
242
- &:hover {
243
- background-color: color.adjust($btn-primary-bg, $lightness: 35%);
244
- }
245
- }
246
-
247
- &--label-secondary &__label {
248
- background-color: color.adjust($btn-secondary-bg, $lightness: 35%);
249
- color: $secondary-text;
250
-
251
- &:hover {
252
- background-color: color.adjust($btn-secondary-bg, $lightness: 30%);
253
- }
254
- }
255
-
256
- &--label-success &__label {
257
- background-color: $badge-success-bg;
258
- color: $badge-success-text;
259
-
260
- &:hover {
261
- background-color: color.adjust($badge-success-bg, $lightness: -5%);
262
- }
263
- }
264
-
265
- &--label-danger &__label {
266
- background-color: $badge-danger-bg;
267
- color: $badge-danger-text;
268
-
269
- &:hover {
270
- background-color: color.adjust($badge-danger-bg, $lightness: -5%);
271
- }
272
- }
273
-
274
- &--label-warning &__label {
275
- background-color: $badge-warning-bg;
276
- color: $badge-warning-text;
277
-
278
- &:hover {
279
- background-color: color.adjust($badge-warning-bg, $lightness: -5%);
280
- }
281
- }
282
-
283
- &--label-info &__label {
284
- background-color: $badge-info-bg;
285
- color: $badge-info-text;
286
-
287
- &:hover {
288
- background-color: color.adjust($badge-info-bg, $lightness: -5%);
289
- }
290
- }
291
-
292
- &--label-light &__label {
293
- background-color: color.adjust($btn-light-bg, $lightness: 2%);
294
- color: $btn-light-text;
295
-
296
- &:hover {
297
- background-color: color.adjust($btn-secondary-bg, $lightness: 35%);
298
- }
299
- }
300
-
301
- &--label-dark &__label {
302
- background-color: color.adjust($btn-dark-bg, $lightness: 50%);
303
- color: color.adjust($btn-dark-bg, $lightness: 5%);
304
-
305
- &:hover {
306
- background-color: color.adjust($btn-dark-bg, $lightness: 45%);
307
- }
308
- }
309
-
310
- // Color variants for button section
311
- &--btn-primary &__button {
312
- background-color: $btn-primary-bg;
313
-
314
- &:hover {
315
- background-color: $btn-primary-bg-hover;
316
- }
317
-
318
- &:focus {
319
- box-shadow: 0 0 0 $focus-outline-width rgba($btn-primary-bg, $btn-focus-ring-opacity);
320
- }
321
- }
322
-
323
- &--btn-secondary &__button {
324
- background-color: $btn-secondary-bg;
325
-
326
- &:hover {
327
- background-color: $btn-secondary-bg-hover;
328
- }
329
-
330
- &:focus {
331
- box-shadow: 0 0 0 $focus-outline-width rgba($btn-secondary-bg, $btn-focus-ring-opacity);
332
- }
333
- }
334
-
335
- &--btn-success &__button {
336
- background-color: $btn-success-bg;
337
-
338
- &:hover {
339
- background-color: $btn-success-bg-hover;
340
- }
341
-
342
- &:focus {
343
- box-shadow: 0 0 0 $focus-outline-width rgba($btn-success-bg, $btn-focus-ring-opacity);
344
- }
345
- }
346
-
347
- &--btn-warning &__button {
348
- background-color: $btn-warning-bg;
349
- color: $btn-warning-color;
350
-
351
- &:hover {
352
- background-color: $btn-warning-bg-hover;
353
- }
354
-
355
- &:focus {
356
- box-shadow: 0 0 0 $focus-outline-width rgba($btn-warning-bg, $btn-focus-ring-opacity);
357
- }
358
- }
359
-
360
- &--btn-info &__button {
361
- background-color: $btn-info-bg;
362
-
363
- &:hover {
364
- background-color: $btn-info-bg-hover;
365
- }
366
-
367
- &:focus {
368
- box-shadow: 0 0 0 $focus-outline-width rgba($btn-info-bg, $btn-focus-ring-opacity);
369
- }
370
- }
371
-
372
- &--btn-light &__button {
373
- background-color: $btn-light-bg;
374
- color: $btn-light-text;
375
-
376
- &:hover {
377
- background-color: $btn-light-bg-hover;
378
- }
379
-
380
- &:focus {
381
- box-shadow: 0 0 0 $focus-outline-width rgba($btn-light-bg, $btn-focus-ring-opacity);
382
- }
383
- }
384
-
385
- &--btn-dark &__button {
386
- background-color: $btn-dark-bg;
387
-
388
- &:hover {
389
- background-color: $btn-dark-bg-hover;
390
- }
391
-
392
- &:focus {
393
- box-shadow: 0 0 0 $focus-outline-width rgba($btn-dark-bg, $btn-focus-ring-opacity);
394
- }
395
- }
396
- }
1
+ /* ========================================
2
+ Composite Badge Variants
3
+ Color variations for composite badges
4
+ ======================================== */
5
+ @use '../../variables' as *;
6
+ @use "sass:color";
7
+
8
+ .pa-composite-badge {
9
+ // Standard color variations - all sections match
10
+ &--primary {
11
+ .pa-composite-badge__icon {
12
+ background-color: $btn-primary-bg;
13
+ color: $btn-primary-text;
14
+ }
15
+ .pa-composite-badge__label {
16
+ background-color: $accent-light;
17
+ color: $btn-primary-bg;
18
+ &:hover {
19
+ background-color: $accent-hover;
20
+ }
21
+ }
22
+ .pa-composite-badge__button {
23
+ background-color: $btn-primary-bg;
24
+ color: $btn-primary-text;
25
+ &:hover {
26
+ background-color: $btn-primary-bg-hover;
27
+ }
28
+ &:focus {
29
+ box-shadow: 0 0 0 $focus-outline-width $accent-hover;
30
+ }
31
+ }
32
+ }
33
+
34
+ &--secondary {
35
+ .pa-composite-badge__icon {
36
+ background-color: $btn-secondary-bg;
37
+ color: $btn-secondary-text;
38
+ }
39
+ .pa-composite-badge__label {
40
+ background-color: $page-bg;
41
+ color: var(--pa-text-color-2);
42
+ &:hover {
43
+ background-color: $table-hover-bg;
44
+ }
45
+ }
46
+ .pa-composite-badge__button {
47
+ background-color: $btn-secondary-bg;
48
+ color: $btn-secondary-text;
49
+ &:hover {
50
+ background-color: $btn-secondary-bg-hover;
51
+ }
52
+ &:focus {
53
+ box-shadow: 0 0 0 $focus-outline-width $accent-hover;
54
+ }
55
+ }
56
+ }
57
+
58
+ &--success {
59
+ .pa-composite-badge__icon {
60
+ background-color: $btn-success-bg;
61
+ color: $btn-success-text;
62
+ }
63
+ .pa-composite-badge__label {
64
+ background-color: $badge-success-bg;
65
+ color: $badge-success-text;
66
+ &:hover {
67
+ background-color: color.adjust($badge-success-bg, $lightness: -5%);
68
+ }
69
+ }
70
+ .pa-composite-badge__button {
71
+ background-color: $btn-success-bg;
72
+ color: $btn-success-text;
73
+ &:hover {
74
+ background-color: $btn-success-bg-hover;
75
+ }
76
+ &:focus {
77
+ box-shadow: 0 0 0 $focus-outline-width $accent-hover;
78
+ }
79
+ }
80
+ }
81
+
82
+ &--danger {
83
+ .pa-composite-badge__icon {
84
+ background-color: $btn-danger-bg;
85
+ color: $btn-danger-text;
86
+ }
87
+ .pa-composite-badge__label {
88
+ background-color: $badge-danger-bg;
89
+ color: $badge-danger-text;
90
+ &:hover {
91
+ background-color: color.adjust($badge-danger-bg, $lightness: -5%);
92
+ }
93
+ }
94
+ .pa-composite-badge__button {
95
+ background-color: $btn-danger-bg;
96
+ color: $btn-danger-text;
97
+ &:hover {
98
+ background-color: $btn-danger-bg-hover;
99
+ }
100
+ &:focus {
101
+ box-shadow: 0 0 0 $focus-outline-width $accent-hover;
102
+ }
103
+ }
104
+ }
105
+
106
+ &--warning {
107
+ .pa-composite-badge__icon {
108
+ background-color: $btn-warning-bg;
109
+ color: $btn-warning-text;
110
+ }
111
+ .pa-composite-badge__label {
112
+ background-color: $badge-warning-bg;
113
+ color: $badge-warning-text;
114
+ &:hover {
115
+ background-color: color.adjust($badge-warning-bg, $lightness: -5%);
116
+ }
117
+ }
118
+ .pa-composite-badge__button {
119
+ background-color: $btn-warning-bg;
120
+ color: $btn-warning-text;
121
+ &:hover {
122
+ background-color: $btn-warning-bg-hover;
123
+ }
124
+ &:focus {
125
+ box-shadow: 0 0 0 $focus-outline-width $accent-hover;
126
+ }
127
+ }
128
+ }
129
+
130
+ &--info {
131
+ .pa-composite-badge__icon {
132
+ background-color: $btn-info-bg;
133
+ color: $btn-info-text;
134
+ }
135
+ .pa-composite-badge__label {
136
+ background-color: $badge-info-bg;
137
+ color: $badge-info-text;
138
+ &:hover {
139
+ background-color: color.adjust($badge-info-bg, $lightness: -5%);
140
+ }
141
+ }
142
+ .pa-composite-badge__button {
143
+ background-color: $btn-info-bg;
144
+ color: $btn-info-text;
145
+ &:hover {
146
+ background-color: $btn-info-bg-hover;
147
+ }
148
+ &:focus {
149
+ box-shadow: 0 0 0 $focus-outline-width $accent-hover;
150
+ }
151
+ }
152
+ }
153
+
154
+ &--light {
155
+ .pa-composite-badge__icon {
156
+ background-color: $btn-light-bg;
157
+ color: $btn-light-text;
158
+ }
159
+ .pa-composite-badge__label {
160
+ background-color: $header-bg;
161
+ color: $btn-light-text;
162
+ &:hover {
163
+ background-color: $btn-light-bg-hover;
164
+ }
165
+ }
166
+ .pa-composite-badge__button {
167
+ background-color: $btn-light-bg;
168
+ color: $btn-light-text;
169
+ &:hover {
170
+ background-color: $btn-light-bg-hover;
171
+ }
172
+ &:focus {
173
+ box-shadow: 0 0 0 $focus-outline-width $accent-hover;
174
+ }
175
+ }
176
+ }
177
+
178
+ &--dark {
179
+ .pa-composite-badge__icon {
180
+ background-color: $btn-dark-bg;
181
+ color: $btn-dark-text;
182
+ }
183
+ .pa-composite-badge__label {
184
+ background-color: $table-hover-bg;
185
+ color: var(--pa-text-color-1);
186
+ &:hover {
187
+ background-color: $border-color;
188
+ }
189
+ }
190
+ .pa-composite-badge__button {
191
+ background-color: $btn-dark-bg;
192
+ color: $btn-dark-text;
193
+ &:hover {
194
+ background-color: $btn-dark-bg-hover;
195
+ }
196
+ &:focus {
197
+ box-shadow: 0 0 0 $focus-outline-width $accent-hover;
198
+ }
199
+ }
200
+ }
201
+
202
+ // Color variants for icon section only
203
+ &--primary &__icon {
204
+ background-color: $btn-primary-bg;
205
+ }
206
+
207
+ &--secondary &__icon {
208
+ background-color: $btn-secondary-bg;
209
+ }
210
+
211
+ &--success &__icon {
212
+ background-color: $btn-success-bg;
213
+ }
214
+
215
+ &--danger &__icon {
216
+ background-color: $btn-danger-bg;
217
+ }
218
+
219
+ &--warning &__icon {
220
+ background-color: $btn-warning-bg;
221
+ color: $btn-warning-color;
222
+ }
223
+
224
+ &--info &__icon {
225
+ background-color: $btn-info-bg;
226
+ }
227
+
228
+ &--light &__icon {
229
+ background-color: $btn-light-bg;
230
+ color: $btn-light-text;
231
+ }
232
+
233
+ &--dark &__icon {
234
+ background-color: $btn-dark-bg;
235
+ }
236
+
237
+ // Color variants for label section
238
+ &--label-primary &__label {
239
+ background-color: color.adjust($btn-primary-bg, $lightness: 40%);
240
+ color: color.adjust($btn-primary-bg, $lightness: -30%);
241
+
242
+ &:hover {
243
+ background-color: color.adjust($btn-primary-bg, $lightness: 35%);
244
+ }
245
+ }
246
+
247
+ &--label-secondary &__label {
248
+ background-color: color.adjust($btn-secondary-bg, $lightness: 35%);
249
+ color: $secondary-text;
250
+
251
+ &:hover {
252
+ background-color: color.adjust($btn-secondary-bg, $lightness: 30%);
253
+ }
254
+ }
255
+
256
+ &--label-success &__label {
257
+ background-color: $badge-success-bg;
258
+ color: $badge-success-text;
259
+
260
+ &:hover {
261
+ background-color: color.adjust($badge-success-bg, $lightness: -5%);
262
+ }
263
+ }
264
+
265
+ &--label-danger &__label {
266
+ background-color: $badge-danger-bg;
267
+ color: $badge-danger-text;
268
+
269
+ &:hover {
270
+ background-color: color.adjust($badge-danger-bg, $lightness: -5%);
271
+ }
272
+ }
273
+
274
+ &--label-warning &__label {
275
+ background-color: $badge-warning-bg;
276
+ color: $badge-warning-text;
277
+
278
+ &:hover {
279
+ background-color: color.adjust($badge-warning-bg, $lightness: -5%);
280
+ }
281
+ }
282
+
283
+ &--label-info &__label {
284
+ background-color: $badge-info-bg;
285
+ color: $badge-info-text;
286
+
287
+ &:hover {
288
+ background-color: color.adjust($badge-info-bg, $lightness: -5%);
289
+ }
290
+ }
291
+
292
+ &--label-light &__label {
293
+ background-color: color.adjust($btn-light-bg, $lightness: 2%);
294
+ color: $btn-light-text;
295
+
296
+ &:hover {
297
+ background-color: color.adjust($btn-secondary-bg, $lightness: 35%);
298
+ }
299
+ }
300
+
301
+ &--label-dark &__label {
302
+ background-color: color.adjust($btn-dark-bg, $lightness: 50%);
303
+ color: color.adjust($btn-dark-bg, $lightness: 5%);
304
+
305
+ &:hover {
306
+ background-color: color.adjust($btn-dark-bg, $lightness: 45%);
307
+ }
308
+ }
309
+
310
+ // Color variants for button section
311
+ &--btn-primary &__button {
312
+ background-color: $btn-primary-bg;
313
+
314
+ &:hover {
315
+ background-color: $btn-primary-bg-hover;
316
+ }
317
+
318
+ &:focus {
319
+ box-shadow: 0 0 0 $focus-outline-width rgba($btn-primary-bg, $btn-focus-ring-opacity);
320
+ }
321
+ }
322
+
323
+ &--btn-secondary &__button {
324
+ background-color: $btn-secondary-bg;
325
+
326
+ &:hover {
327
+ background-color: $btn-secondary-bg-hover;
328
+ }
329
+
330
+ &:focus {
331
+ box-shadow: 0 0 0 $focus-outline-width rgba($btn-secondary-bg, $btn-focus-ring-opacity);
332
+ }
333
+ }
334
+
335
+ &--btn-success &__button {
336
+ background-color: $btn-success-bg;
337
+
338
+ &:hover {
339
+ background-color: $btn-success-bg-hover;
340
+ }
341
+
342
+ &:focus {
343
+ box-shadow: 0 0 0 $focus-outline-width rgba($btn-success-bg, $btn-focus-ring-opacity);
344
+ }
345
+ }
346
+
347
+ &--btn-warning &__button {
348
+ background-color: $btn-warning-bg;
349
+ color: $btn-warning-color;
350
+
351
+ &:hover {
352
+ background-color: $btn-warning-bg-hover;
353
+ }
354
+
355
+ &:focus {
356
+ box-shadow: 0 0 0 $focus-outline-width rgba($btn-warning-bg, $btn-focus-ring-opacity);
357
+ }
358
+ }
359
+
360
+ &--btn-info &__button {
361
+ background-color: $btn-info-bg;
362
+
363
+ &:hover {
364
+ background-color: $btn-info-bg-hover;
365
+ }
366
+
367
+ &:focus {
368
+ box-shadow: 0 0 0 $focus-outline-width rgba($btn-info-bg, $btn-focus-ring-opacity);
369
+ }
370
+ }
371
+
372
+ &--btn-light &__button {
373
+ background-color: $btn-light-bg;
374
+ color: $btn-light-text;
375
+
376
+ &:hover {
377
+ background-color: $btn-light-bg-hover;
378
+ }
379
+
380
+ &:focus {
381
+ box-shadow: 0 0 0 $focus-outline-width rgba($btn-light-bg, $btn-focus-ring-opacity);
382
+ }
383
+ }
384
+
385
+ &--btn-dark &__button {
386
+ background-color: $btn-dark-bg;
387
+
388
+ &:hover {
389
+ background-color: $btn-dark-bg-hover;
390
+ }
391
+
392
+ &:focus {
393
+ box-shadow: 0 0 0 $focus-outline-width rgba($btn-dark-bg, $btn-focus-ring-opacity);
394
+ }
395
+ }
396
+ }