procode-vs-theme 1.0.8 → 1.0.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.
Files changed (65) hide show
  1. package/dist/src/base/_border.scss +12 -12
  2. package/dist/src/base/_custom-properties.scss +108 -108
  3. package/dist/src/base/_font.scss +37 -37
  4. package/dist/src/base/_size.scss +17 -17
  5. package/dist/src/base/_space.scss +29 -29
  6. package/dist/src/base/mixins/_breakpoints.scss +27 -27
  7. package/dist/src/base/mixins/_meta-class.scss +26 -26
  8. package/dist/src/components/_buttons.scss +420 -420
  9. package/dist/src/components/_disabled.scss +8 -8
  10. package/dist/src/components/_placeholder.scss +46 -46
  11. package/dist/src/components.ts +23 -23
  12. package/dist/src/index.scss +71 -71
  13. package/dist/src/utilities/_cursor.scss +7 -7
  14. package/dist/src/utilities/_display.scss +17 -17
  15. package/dist/src/utilities/_flex.scss +83 -83
  16. package/dist/src/utilities/_opacity.scss +7 -7
  17. package/dist/src/utilities/_overflow.scss +9 -9
  18. package/dist/src/utilities/_position.scss +22 -22
  19. package/dist/src/utilities/_sizing.scss +24 -24
  20. package/dist/src/utilities/_text.scss +43 -43
  21. package/dist/src/utilities/_visibility.scss +4 -4
  22. package/dist/src/utilities/background-color/index.scss +16 -16
  23. package/dist/src/utilities/border/_border-color.scss +11 -11
  24. package/dist/src/utilities/border/_border-radius.scss +10 -10
  25. package/dist/src/utilities/border/_border-size.scss +8 -8
  26. package/dist/src/utilities/box-shadow/index.scss +8 -8
  27. package/dist/src/utilities/spaces/_gap.scss +8 -8
  28. package/dist/src/utilities/spaces/_margin.scss +38 -38
  29. package/dist/src/utilities/spaces/_padding.scss +29 -29
  30. package/dist/src/utilities/typography/_color.scss +33 -33
  31. package/dist/src/utilities/typography/_font.scss +35 -35
  32. package/dist/src/utilities.ts +112 -112
  33. package/package.json +1 -1
  34. package/src/base/_border.scss +12 -12
  35. package/src/base/_custom-properties.scss +108 -108
  36. package/src/base/_font.scss +37 -37
  37. package/src/base/_size.scss +17 -17
  38. package/src/base/_space.scss +29 -29
  39. package/src/base/mixins/_breakpoints.scss +27 -27
  40. package/src/base/mixins/_meta-class.scss +26 -26
  41. package/src/components/_buttons.scss +420 -420
  42. package/src/components/_disabled.scss +8 -8
  43. package/src/components/_placeholder.scss +46 -46
  44. package/src/components.ts +23 -23
  45. package/src/index.scss +71 -71
  46. package/src/utilities/_cursor.scss +7 -7
  47. package/src/utilities/_display.scss +17 -17
  48. package/src/utilities/_flex.scss +83 -83
  49. package/src/utilities/_opacity.scss +7 -7
  50. package/src/utilities/_overflow.scss +9 -9
  51. package/src/utilities/_position.scss +22 -22
  52. package/src/utilities/_sizing.scss +24 -24
  53. package/src/utilities/_text.scss +43 -43
  54. package/src/utilities/_visibility.scss +4 -4
  55. package/src/utilities/background-color/index.scss +16 -16
  56. package/src/utilities/border/_border-color.scss +11 -11
  57. package/src/utilities/border/_border-radius.scss +10 -10
  58. package/src/utilities/border/_border-size.scss +8 -8
  59. package/src/utilities/box-shadow/index.scss +8 -8
  60. package/src/utilities/spaces/_gap.scss +8 -8
  61. package/src/utilities/spaces/_margin.scss +38 -38
  62. package/src/utilities/spaces/_padding.scss +29 -29
  63. package/src/utilities/typography/_color.scss +33 -33
  64. package/src/utilities/typography/_font.scss +35 -35
  65. package/src/utilities.ts +112 -112
package/src/components/_buttons.scss CHANGED
@@ -1,420 +1,420 @@
1
- @use "sass:color";
2
- @use "../base/mixins/font_size-mx" as mx;
3
- @use "../base/font" as ft;
4
- @use "../base/color" as cl;
5
- @use "../base/border" as bo;
6
-
7
- $btn-padding-xs: 5.5px !default;
8
- $btn-padding-md: 8px !default;
9
- $btn-padding-xl: 16px !default;
10
-
11
- .qo-btn {
12
- display: inline-block;
13
- border-radius: bo.$border-radius-sm;
14
-
15
- &.qo-btn-full {
16
- display: block;
17
- border-radius: bo.$border-radius-sm;
18
- width: 100%;
19
- padding: $btn-padding-xl;
20
- @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
21
- }
22
-
23
- &.qo-btn-xs {
24
- padding: $btn-padding-xs;
25
- @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
26
- }
27
-
28
- &.qo-btn-md {
29
- padding: $btn-padding-md;
30
- @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
31
- }
32
-
33
- &.qo-btn-primary {
34
- background-color: cl.$background-primary;
35
- border: bo.$border-width-sm solid cl.$border-primary;
36
- color: cl.$text-light;
37
- cursor: pointer;
38
- transition: background-color 0.2s ease, border-color 0.2s ease;
39
-
40
- &:hover {
41
- background-color: color.adjust(cl.$background-primary, $lightness: -8%);
42
- border-color: color.adjust(cl.$border-primary, $lightness: -8%);
43
- }
44
-
45
- &:active {
46
- background-color: color.adjust(cl.$background-primary, $lightness: -12%);
47
- border-color: color.adjust(cl.$border-primary, $lightness: -12%);
48
- }
49
-
50
- &:disabled {
51
- opacity: 0.5;
52
- cursor: not-allowed;
53
- border-color: cl.$border-primary;
54
- color: cl.$border-primary;
55
- &:hover {
56
- background-color: cl.$background-primary;
57
- border-color: cl.$border-primary;
58
- color: cl.$border-primary;
59
- }
60
- }
61
- }
62
-
63
- &.qo-btn-default {
64
- background-color: cl.$background-default;
65
- border: bo.$border-width-sm solid cl.$border-default;
66
- color: cl.$text-dark;
67
- cursor: pointer;
68
- transition: background-color 0.2s ease, border-color 0.2s ease;
69
-
70
- &:hover {
71
- background-color: cl.$background-secondary;
72
- border-color: cl.$border-secondary;
73
- }
74
-
75
- &:active {
76
- background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
77
- border-color: cl.$border-secondary;
78
- }
79
-
80
- &:disabled {
81
- opacity: 0.5;
82
- cursor: not-allowed;
83
- border-color: cl.$border-default;
84
- color: cl.$border-default;
85
- &:hover {
86
- background-color: cl.$background-default;
87
- border-color: cl.$border-default;
88
- color: cl.$border-default;
89
- }
90
- }
91
- }
92
-
93
- &.qo-btn-danger {
94
- background-color: cl.$background-danger;
95
- border: bo.$border-width-sm solid cl.$border-danger;
96
- color: cl.$text-danger;
97
- cursor: pointer;
98
- transition: background-color 0.2s ease, border-color 0.2s ease;
99
-
100
- &:hover {
101
- background-color: color.change(cl.$background-danger, $alpha: 0.06);
102
- }
103
-
104
- &:active {
105
- background-color: color.change(cl.$background-danger, $alpha: 0.12);
106
- }
107
-
108
- &:disabled {
109
- opacity: 0.5;
110
- cursor: not-allowed;
111
- border-color: cl.$border-danger;
112
- color: cl.$border-danger;
113
-
114
- &:hover {
115
- background-color: cl.$background-danger;
116
- border-color: cl.$border-danger;
117
- color: cl.$border-danger;
118
- }
119
- }
120
- }
121
-
122
- &.qo-btn-success {
123
- background-color: cl.$background-success;
124
- border: bo.$border-width-sm solid cl.$border-success;
125
- color: cl.$text-light;
126
- cursor: pointer;
127
- transition: background-color 0.2s ease, border-color 0.2s ease;
128
-
129
- &:hover {
130
- background-color: color.adjust(cl.$background-success, $lightness: -8%);
131
- border-color: color.adjust(cl.$border-success, $lightness: -8%);
132
- }
133
-
134
- &:active {
135
- background-color: color.adjust(cl.$background-success, $lightness: -12%);
136
- border-color: color.adjust(cl.$border-success, $lightness: -12%);
137
- }
138
-
139
- &:disabled {
140
- opacity: 0.5;
141
- cursor: not-allowed;
142
- border-color: cl.$border-success;
143
- color: cl.$border-success;
144
-
145
- &:hover {
146
- background-color: cl.$background-success;
147
- border-color: cl.$border-success;
148
- color: cl.$border-success;
149
- }
150
- }
151
- }
152
-
153
- &.qo-btn-warning {
154
- background-color: cl.$background-warning;
155
- border: bo.$border-width-sm solid cl.$border-warning;
156
- color: cl.$text-light;
157
- cursor: pointer;
158
- transition: background-color 0.2s ease, border-color 0.2s ease;
159
-
160
- &:hover {
161
- background-color: color.adjust(cl.$background-warning, $lightness: -8%);
162
- border-color: color.adjust(cl.$border-warning, $lightness: -8%);
163
- }
164
-
165
- &:active {
166
- background-color: color.adjust(cl.$background-warning, $lightness: -12%);
167
- border-color: color.adjust(cl.$border-warning, $lightness: -12%);
168
- }
169
-
170
- &:disabled {
171
- opacity: 0.5;
172
- cursor: not-allowed;
173
- border-color: cl.$border-warning;
174
- color: cl.$border-warning;
175
-
176
- &:hover {
177
- background-color: cl.$background-warning;
178
- border-color: cl.$border-warning;
179
- color: cl.$border-warning;
180
- }
181
- }
182
- }
183
-
184
- &.qo-btn-info {
185
- background-color: cl.$background-info;
186
- border: bo.$border-width-sm solid cl.$border-info;
187
- color: cl.$text-light;
188
- cursor: pointer;
189
- transition: background-color 0.2s ease, border-color 0.2s ease;
190
-
191
- &:hover {
192
- background-color: color.adjust(cl.$background-info, $lightness: -8%);
193
- border-color: color.adjust(cl.$border-info, $lightness: -8%);
194
- }
195
-
196
- &:active {
197
- background-color: color.adjust(cl.$background-info, $lightness: -12%);
198
- border-color: color.adjust(cl.$border-info, $lightness: -12%);
199
- }
200
-
201
- &:disabled {
202
- opacity: 0.5;
203
- cursor: not-allowed;
204
- border-color: cl.$border-info;
205
- color: cl.$border-info;
206
-
207
- &:hover {
208
- background-color: cl.$background-info;
209
- border-color: cl.$border-info;
210
- color: cl.$border-info;
211
- }
212
- }
213
- }
214
-
215
- // Outline variants: transparent bg + colored border/text → hover fills color + white text
216
-
217
- &.qo-btn-outline-primary {
218
- background-color: transparent;
219
- border: bo.$border-width-sm solid cl.$border-primary;
220
- color: cl.$text-primary;
221
- cursor: pointer;
222
- transition: background-color 0.2s ease, border-color 0.2s ease,
223
- color 0.2s ease;
224
-
225
- &:hover {
226
- background-color: cl.$background-primary;
227
- border-color: cl.$border-primary;
228
- color: cl.$text-light;
229
- }
230
-
231
- &:active {
232
- background-color: color.adjust(cl.$background-primary, $lightness: -8%);
233
- border-color: color.adjust(cl.$border-primary, $lightness: -8%);
234
- color: cl.$text-light;
235
- }
236
-
237
- &:disabled {
238
- opacity: 0.5;
239
- cursor: not-allowed;
240
- border-color: cl.$border-primary;
241
- color: cl.$border-primary;
242
-
243
- &:hover {
244
- background-color: transparent;
245
- border-color: cl.$border-primary;
246
- color: cl.$border-primary;
247
- }
248
- }
249
- }
250
-
251
- &.qo-btn-outline-default {
252
- background-color: transparent;
253
- border: bo.$border-width-sm solid cl.$border-default;
254
- color: cl.$text-light;
255
- cursor: pointer;
256
- transition: background-color 0.2s ease, border-color 0.2s ease,
257
- color 0.2s ease;
258
-
259
- &:hover {
260
- background-color: cl.$background-secondary;
261
- border-color: cl.$border-secondary;
262
- color: color.adjust(cl.$text-dark, $lightness: 20%);
263
- }
264
-
265
- &:active {
266
- background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
267
- border-color: cl.$border-secondary;
268
- color: cl.$text-light;
269
- }
270
-
271
- &:disabled {
272
- opacity: 0.5;
273
- cursor: not-allowed;
274
- border-color: cl.$border-default;
275
- color: cl.$border-default;
276
-
277
- &:hover {
278
- background-color: transparent;
279
- border-color: cl.$border-default;
280
- color: cl.$border-default;
281
- }
282
- }
283
- }
284
-
285
- &.qo-btn-outline-danger {
286
- background-color: transparent;
287
- border: bo.$border-width-sm solid cl.$border-danger;
288
- color: cl.$text-danger;
289
- cursor: pointer;
290
- transition: background-color 0.2s ease, border-color 0.2s ease,
291
- color 0.2s ease;
292
-
293
- &:hover {
294
- background-color: cl.$background-danger;
295
- border-color: cl.$border-danger;
296
- color: cl.$text-light;
297
- }
298
-
299
- &:active {
300
- background-color: color.adjust(cl.$background-danger, $lightness: -8%);
301
- border-color: color.adjust(cl.$border-danger, $lightness: -8%);
302
- color: cl.$text-light;
303
- }
304
-
305
- &:disabled {
306
- opacity: 0.5;
307
- cursor: not-allowed;
308
- border-color: cl.$border-danger;
309
- color: cl.$border-danger;
310
-
311
- &:hover {
312
- background-color: transparent;
313
- border-color: cl.$border-danger;
314
- color: cl.$border-danger;
315
- }
316
- }
317
- }
318
-
319
- &.qo-btn-outline-success {
320
- background-color: transparent;
321
- border: bo.$border-width-sm solid cl.$border-success;
322
- color: cl.$text-success;
323
- cursor: pointer;
324
- transition: background-color 0.2s ease, border-color 0.2s ease,
325
- color 0.2s ease;
326
-
327
- &:hover {
328
- background-color: cl.$background-success;
329
- border-color: cl.$border-success;
330
- color: cl.$text-light;
331
- }
332
-
333
- &:active {
334
- background-color: color.adjust(cl.$background-success, $lightness: -8%);
335
- border-color: color.adjust(cl.$border-success, $lightness: -8%);
336
- color: cl.$text-light;
337
- }
338
-
339
- &:disabled {
340
- opacity: 0.5;
341
- cursor: not-allowed;
342
- border-color: cl.$border-success;
343
- color: cl.$border-success;
344
-
345
- &:hover {
346
- background-color: transparent;
347
- border-color: cl.$border-success;
348
- color: cl.$border-success;
349
- }
350
- }
351
- }
352
-
353
- &.qo-btn-outline-warning {
354
- background-color: transparent;
355
- border: bo.$border-width-sm solid cl.$border-warning;
356
- color: cl.$text-warning;
357
- cursor: pointer;
358
- transition: background-color 0.2s ease, border-color 0.2s ease,
359
- color 0.2s ease;
360
-
361
- &:hover {
362
- background-color: cl.$background-warning;
363
- border-color: cl.$border-warning;
364
- color: cl.$text-light;
365
- }
366
-
367
- &:active {
368
- background-color: color.adjust(cl.$background-warning, $lightness: -8%);
369
- border-color: color.adjust(cl.$border-warning, $lightness: -8%);
370
- color: cl.$text-light;
371
- }
372
-
373
- &:disabled {
374
- opacity: 0.5;
375
- cursor: not-allowed;
376
- border-color: cl.$border-warning;
377
- color: cl.$border-warning;
378
-
379
- &:hover {
380
- background-color: transparent;
381
- border-color: cl.$border-warning;
382
- color: cl.$border-warning;
383
- }
384
- }
385
- }
386
-
387
- &.qo-btn-outline-info {
388
- background-color: transparent;
389
- border: bo.$border-width-sm solid cl.$border-info;
390
- color: cl.$text-info;
391
- cursor: pointer;
392
- transition: background-color 0.2s ease, border-color 0.2s ease,
393
- color 0.2s ease;
394
-
395
- &:hover {
396
- background-color: cl.$background-info;
397
- border-color: cl.$border-info;
398
- color: cl.$text-light;
399
- }
400
-
401
- &:active {
402
- background-color: color.adjust(cl.$background-info, $lightness: -8%);
403
- border-color: color.adjust(cl.$border-info, $lightness: -8%);
404
- color: cl.$text-light;
405
- }
406
-
407
- &:disabled {
408
- opacity: 0.5;
409
- cursor: not-allowed;
410
- border-color: cl.$border-info;
411
- color: cl.$border-info;
412
-
413
- &:hover {
414
- background-color: transparent;
415
- border-color: cl.$border-info;
416
- color: cl.$border-info;
417
- }
418
- }
419
- }
420
- }
1
+ @use "sass:color";
2
+ @use "../base/mixins/font_size-mx" as mx;
3
+ @use "../base/font" as ft;
4
+ @use "../base/color" as cl;
5
+ @use "../base/border" as bo;
6
+
7
+ $btn-padding-xs: 5.5px !default;
8
+ $btn-padding-md: 8px !default;
9
+ $btn-padding-xl: 16px !default;
10
+
11
+ .qo-btn {
12
+ display: inline-block;
13
+ border-radius: bo.$border-radius-sm;
14
+
15
+ &.qo-btn-full {
16
+ display: block;
17
+ border-radius: bo.$border-radius-sm;
18
+ width: 100%;
19
+ padding: $btn-padding-xl;
20
+ @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
21
+ }
22
+
23
+ &.qo-btn-xs {
24
+ padding: $btn-padding-xs;
25
+ @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
26
+ }
27
+
28
+ &.qo-btn-md {
29
+ padding: $btn-padding-md;
30
+ @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
31
+ }
32
+
33
+ &.qo-btn-primary {
34
+ background-color: cl.$background-primary;
35
+ border: bo.$border-width-sm solid cl.$border-primary;
36
+ color: cl.$text-light;
37
+ cursor: pointer;
38
+ transition: background-color 0.2s ease, border-color 0.2s ease;
39
+
40
+ &:hover {
41
+ background-color: color.adjust(cl.$background-primary, $lightness: -8%);
42
+ border-color: color.adjust(cl.$border-primary, $lightness: -8%);
43
+ }
44
+
45
+ &:active {
46
+ background-color: color.adjust(cl.$background-primary, $lightness: -12%);
47
+ border-color: color.adjust(cl.$border-primary, $lightness: -12%);
48
+ }
49
+
50
+ &:disabled {
51
+ opacity: 0.5;
52
+ cursor: not-allowed;
53
+ border-color: cl.$border-primary;
54
+ color: cl.$border-primary;
55
+ &:hover {
56
+ background-color: cl.$background-primary;
57
+ border-color: cl.$border-primary;
58
+ color: cl.$border-primary;
59
+ }
60
+ }
61
+ }
62
+
63
+ &.qo-btn-default {
64
+ background-color: cl.$background-default;
65
+ border: bo.$border-width-sm solid cl.$border-default;
66
+ color: cl.$text-dark;
67
+ cursor: pointer;
68
+ transition: background-color 0.2s ease, border-color 0.2s ease;
69
+
70
+ &:hover {
71
+ background-color: cl.$background-secondary;
72
+ border-color: cl.$border-secondary;
73
+ }
74
+
75
+ &:active {
76
+ background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
77
+ border-color: cl.$border-secondary;
78
+ }
79
+
80
+ &:disabled {
81
+ opacity: 0.5;
82
+ cursor: not-allowed;
83
+ border-color: cl.$border-default;
84
+ color: cl.$border-default;
85
+ &:hover {
86
+ background-color: cl.$background-default;
87
+ border-color: cl.$border-default;
88
+ color: cl.$border-default;
89
+ }
90
+ }
91
+ }
92
+
93
+ &.qo-btn-danger {
94
+ background-color: cl.$background-danger;
95
+ border: bo.$border-width-sm solid cl.$border-danger;
96
+ color: cl.$text-danger;
97
+ cursor: pointer;
98
+ transition: background-color 0.2s ease, border-color 0.2s ease;
99
+
100
+ &:hover {
101
+ background-color: color.change(cl.$background-danger, $alpha: 0.06);
102
+ }
103
+
104
+ &:active {
105
+ background-color: color.change(cl.$background-danger, $alpha: 0.12);
106
+ }
107
+
108
+ &:disabled {
109
+ opacity: 0.5;
110
+ cursor: not-allowed;
111
+ border-color: cl.$border-danger;
112
+ color: cl.$border-danger;
113
+
114
+ &:hover {
115
+ background-color: cl.$background-danger;
116
+ border-color: cl.$border-danger;
117
+ color: cl.$border-danger;
118
+ }
119
+ }
120
+ }
121
+
122
+ &.qo-btn-success {
123
+ background-color: cl.$background-success;
124
+ border: bo.$border-width-sm solid cl.$border-success;
125
+ color: cl.$text-light;
126
+ cursor: pointer;
127
+ transition: background-color 0.2s ease, border-color 0.2s ease;
128
+
129
+ &:hover {
130
+ background-color: color.adjust(cl.$background-success, $lightness: -8%);
131
+ border-color: color.adjust(cl.$border-success, $lightness: -8%);
132
+ }
133
+
134
+ &:active {
135
+ background-color: color.adjust(cl.$background-success, $lightness: -12%);
136
+ border-color: color.adjust(cl.$border-success, $lightness: -12%);
137
+ }
138
+
139
+ &:disabled {
140
+ opacity: 0.5;
141
+ cursor: not-allowed;
142
+ border-color: cl.$border-success;
143
+ color: cl.$border-success;
144
+
145
+ &:hover {
146
+ background-color: cl.$background-success;
147
+ border-color: cl.$border-success;
148
+ color: cl.$border-success;
149
+ }
150
+ }
151
+ }
152
+
153
+ &.qo-btn-warning {
154
+ background-color: cl.$background-warning;
155
+ border: bo.$border-width-sm solid cl.$border-warning;
156
+ color: cl.$text-light;
157
+ cursor: pointer;
158
+ transition: background-color 0.2s ease, border-color 0.2s ease;
159
+
160
+ &:hover {
161
+ background-color: color.adjust(cl.$background-warning, $lightness: -8%);
162
+ border-color: color.adjust(cl.$border-warning, $lightness: -8%);
163
+ }
164
+
165
+ &:active {
166
+ background-color: color.adjust(cl.$background-warning, $lightness: -12%);
167
+ border-color: color.adjust(cl.$border-warning, $lightness: -12%);
168
+ }
169
+
170
+ &:disabled {
171
+ opacity: 0.5;
172
+ cursor: not-allowed;
173
+ border-color: cl.$border-warning;
174
+ color: cl.$border-warning;
175
+
176
+ &:hover {
177
+ background-color: cl.$background-warning;
178
+ border-color: cl.$border-warning;
179
+ color: cl.$border-warning;
180
+ }
181
+ }
182
+ }
183
+
184
+ &.qo-btn-info {
185
+ background-color: cl.$background-info;
186
+ border: bo.$border-width-sm solid cl.$border-info;
187
+ color: cl.$text-light;
188
+ cursor: pointer;
189
+ transition: background-color 0.2s ease, border-color 0.2s ease;
190
+
191
+ &:hover {
192
+ background-color: color.adjust(cl.$background-info, $lightness: -8%);
193
+ border-color: color.adjust(cl.$border-info, $lightness: -8%);
194
+ }
195
+
196
+ &:active {
197
+ background-color: color.adjust(cl.$background-info, $lightness: -12%);
198
+ border-color: color.adjust(cl.$border-info, $lightness: -12%);
199
+ }
200
+
201
+ &:disabled {
202
+ opacity: 0.5;
203
+ cursor: not-allowed;
204
+ border-color: cl.$border-info;
205
+ color: cl.$border-info;
206
+
207
+ &:hover {
208
+ background-color: cl.$background-info;
209
+ border-color: cl.$border-info;
210
+ color: cl.$border-info;
211
+ }
212
+ }
213
+ }
214
+
215
+ // Outline variants: transparent bg + colored border/text → hover fills color + white text
216
+
217
+ &.qo-btn-outline-primary {
218
+ background-color: transparent;
219
+ border: bo.$border-width-sm solid cl.$border-primary;
220
+ color: cl.$text-primary;
221
+ cursor: pointer;
222
+ transition: background-color 0.2s ease, border-color 0.2s ease,
223
+ color 0.2s ease;
224
+
225
+ &:hover {
226
+ background-color: cl.$background-primary;
227
+ border-color: cl.$border-primary;
228
+ color: cl.$text-light;
229
+ }
230
+
231
+ &:active {
232
+ background-color: color.adjust(cl.$background-primary, $lightness: -8%);
233
+ border-color: color.adjust(cl.$border-primary, $lightness: -8%);
234
+ color: cl.$text-light;
235
+ }
236
+
237
+ &:disabled {
238
+ opacity: 0.5;
239
+ cursor: not-allowed;
240
+ border-color: cl.$border-primary;
241
+ color: cl.$border-primary;
242
+
243
+ &:hover {
244
+ background-color: transparent;
245
+ border-color: cl.$border-primary;
246
+ color: cl.$border-primary;
247
+ }
248
+ }
249
+ }
250
+
251
+ &.qo-btn-outline-default {
252
+ background-color: transparent;
253
+ border: bo.$border-width-sm solid cl.$border-default;
254
+ color: cl.$text-light;
255
+ cursor: pointer;
256
+ transition: background-color 0.2s ease, border-color 0.2s ease,
257
+ color 0.2s ease;
258
+
259
+ &:hover {
260
+ background-color: cl.$background-secondary;
261
+ border-color: cl.$border-secondary;
262
+ color: color.adjust(cl.$text-dark, $lightness: 20%);
263
+ }
264
+
265
+ &:active {
266
+ background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
267
+ border-color: cl.$border-secondary;
268
+ color: cl.$text-light;
269
+ }
270
+
271
+ &:disabled {
272
+ opacity: 0.5;
273
+ cursor: not-allowed;
274
+ border-color: cl.$border-default;
275
+ color: cl.$border-default;
276
+
277
+ &:hover {
278
+ background-color: transparent;
279
+ border-color: cl.$border-default;
280
+ color: cl.$border-default;
281
+ }
282
+ }
283
+ }
284
+
285
+ &.qo-btn-outline-danger {
286
+ background-color: transparent;
287
+ border: bo.$border-width-sm solid cl.$border-danger;
288
+ color: cl.$text-danger;
289
+ cursor: pointer;
290
+ transition: background-color 0.2s ease, border-color 0.2s ease,
291
+ color 0.2s ease;
292
+
293
+ &:hover {
294
+ background-color: cl.$background-danger;
295
+ border-color: cl.$border-danger;
296
+ color: cl.$text-light;
297
+ }
298
+
299
+ &:active {
300
+ background-color: color.adjust(cl.$background-danger, $lightness: -8%);
301
+ border-color: color.adjust(cl.$border-danger, $lightness: -8%);
302
+ color: cl.$text-light;
303
+ }
304
+
305
+ &:disabled {
306
+ opacity: 0.5;
307
+ cursor: not-allowed;
308
+ border-color: cl.$border-danger;
309
+ color: cl.$border-danger;
310
+
311
+ &:hover {
312
+ background-color: transparent;
313
+ border-color: cl.$border-danger;
314
+ color: cl.$border-danger;
315
+ }
316
+ }
317
+ }
318
+
319
+ &.qo-btn-outline-success {
320
+ background-color: transparent;
321
+ border: bo.$border-width-sm solid cl.$border-success;
322
+ color: cl.$text-success;
323
+ cursor: pointer;
324
+ transition: background-color 0.2s ease, border-color 0.2s ease,
325
+ color 0.2s ease;
326
+
327
+ &:hover {
328
+ background-color: cl.$background-success;
329
+ border-color: cl.$border-success;
330
+ color: cl.$text-light;
331
+ }
332
+
333
+ &:active {
334
+ background-color: color.adjust(cl.$background-success, $lightness: -8%);
335
+ border-color: color.adjust(cl.$border-success, $lightness: -8%);
336
+ color: cl.$text-light;
337
+ }
338
+
339
+ &:disabled {
340
+ opacity: 0.5;
341
+ cursor: not-allowed;
342
+ border-color: cl.$border-success;
343
+ color: cl.$border-success;
344
+
345
+ &:hover {
346
+ background-color: transparent;
347
+ border-color: cl.$border-success;
348
+ color: cl.$border-success;
349
+ }
350
+ }
351
+ }
352
+
353
+ &.qo-btn-outline-warning {
354
+ background-color: transparent;
355
+ border: bo.$border-width-sm solid cl.$border-warning;
356
+ color: cl.$text-warning;
357
+ cursor: pointer;
358
+ transition: background-color 0.2s ease, border-color 0.2s ease,
359
+ color 0.2s ease;
360
+
361
+ &:hover {
362
+ background-color: cl.$background-warning;
363
+ border-color: cl.$border-warning;
364
+ color: cl.$text-light;
365
+ }
366
+
367
+ &:active {
368
+ background-color: color.adjust(cl.$background-warning, $lightness: -8%);
369
+ border-color: color.adjust(cl.$border-warning, $lightness: -8%);
370
+ color: cl.$text-light;
371
+ }
372
+
373
+ &:disabled {
374
+ opacity: 0.5;
375
+ cursor: not-allowed;
376
+ border-color: cl.$border-warning;
377
+ color: cl.$border-warning;
378
+
379
+ &:hover {
380
+ background-color: transparent;
381
+ border-color: cl.$border-warning;
382
+ color: cl.$border-warning;
383
+ }
384
+ }
385
+ }
386
+
387
+ &.qo-btn-outline-info {
388
+ background-color: transparent;
389
+ border: bo.$border-width-sm solid cl.$border-info;
390
+ color: cl.$text-info;
391
+ cursor: pointer;
392
+ transition: background-color 0.2s ease, border-color 0.2s ease,
393
+ color 0.2s ease;
394
+
395
+ &:hover {
396
+ background-color: cl.$background-info;
397
+ border-color: cl.$border-info;
398
+ color: cl.$text-light;
399
+ }
400
+
401
+ &:active {
402
+ background-color: color.adjust(cl.$background-info, $lightness: -8%);
403
+ border-color: color.adjust(cl.$border-info, $lightness: -8%);
404
+ color: cl.$text-light;
405
+ }
406
+
407
+ &:disabled {
408
+ opacity: 0.5;
409
+ cursor: not-allowed;
410
+ border-color: cl.$border-info;
411
+ color: cl.$border-info;
412
+
413
+ &:hover {
414
+ background-color: transparent;
415
+ border-color: cl.$border-info;
416
+ color: cl.$border-info;
417
+ }
418
+ }
419
+ }
420
+ }