procode-vs-theme 1.0.7 → 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 -393
  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 -393
  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,393 +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
-
54
- &:hover {
55
- background-color: cl.$background-primary;
56
- border-color: cl.$border-primary;
57
- }
58
- }
59
- }
60
-
61
- &.qo-btn-default {
62
- background-color: cl.$background-default;
63
- border: bo.$border-width-sm solid cl.$border-default;
64
- color: cl.$text-dark;
65
- cursor: pointer;
66
- transition: background-color 0.2s ease, border-color 0.2s ease;
67
-
68
- &:hover {
69
- background-color: cl.$background-secondary;
70
- border-color: cl.$border-secondary;
71
- }
72
-
73
- &:active {
74
- background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
75
- border-color: cl.$border-secondary;
76
- }
77
-
78
- &:disabled {
79
- opacity: 0.5;
80
- cursor: not-allowed;
81
-
82
- &:hover {
83
- background-color: cl.$background-default;
84
- border-color: cl.$border-default;
85
- }
86
- }
87
- }
88
-
89
- &.qo-btn-danger {
90
- background-color: cl.$background-danger;
91
- border: bo.$border-width-sm solid cl.$border-danger;
92
- color: cl.$text-danger;
93
- cursor: pointer;
94
- transition: background-color 0.2s ease, border-color 0.2s ease;
95
-
96
- &:hover {
97
- background-color: color.change(cl.$background-danger, $alpha: 0.06);
98
- }
99
-
100
- &:active {
101
- background-color: color.change(cl.$background-danger, $alpha: 0.12);
102
- }
103
-
104
- &:disabled {
105
- opacity: 0.5;
106
- cursor: not-allowed;
107
- border-color: cl.$border-default;
108
- color: cl.$text-default;
109
-
110
- &:hover {
111
- background-color: cl.$background-default;
112
- }
113
- }
114
- }
115
-
116
- &.qo-btn-success {
117
- background-color: cl.$background-success;
118
- border: bo.$border-width-sm solid cl.$border-success;
119
- color: cl.$text-light;
120
- cursor: pointer;
121
- transition: background-color 0.2s ease, border-color 0.2s ease;
122
-
123
- &:hover {
124
- background-color: color.adjust(cl.$background-success, $lightness: -8%);
125
- border-color: color.adjust(cl.$border-success, $lightness: -8%);
126
- }
127
-
128
- &:active {
129
- background-color: color.adjust(cl.$background-success, $lightness: -12%);
130
- border-color: color.adjust(cl.$border-success, $lightness: -12%);
131
- }
132
-
133
- &:disabled {
134
- opacity: 0.5;
135
- cursor: not-allowed;
136
-
137
- &:hover {
138
- background-color: cl.$background-success;
139
- border-color: cl.$border-success;
140
- }
141
- }
142
- }
143
-
144
- &.qo-btn-warning {
145
- background-color: cl.$background-warning;
146
- border: bo.$border-width-sm solid cl.$border-warning;
147
- color: cl.$text-light;
148
- cursor: pointer;
149
- transition: background-color 0.2s ease, border-color 0.2s ease;
150
-
151
- &:hover {
152
- background-color: color.adjust(cl.$background-warning, $lightness: -8%);
153
- border-color: color.adjust(cl.$border-warning, $lightness: -8%);
154
- }
155
-
156
- &:active {
157
- background-color: color.adjust(cl.$background-warning, $lightness: -12%);
158
- border-color: color.adjust(cl.$border-warning, $lightness: -12%);
159
- }
160
-
161
- &:disabled {
162
- opacity: 0.5;
163
- cursor: not-allowed;
164
-
165
- &:hover {
166
- background-color: cl.$background-warning;
167
- border-color: cl.$border-warning;
168
- }
169
- }
170
- }
171
-
172
- &.qo-btn-info {
173
- background-color: cl.$background-info;
174
- border: bo.$border-width-sm solid cl.$border-info;
175
- color: cl.$text-light;
176
- cursor: pointer;
177
- transition: background-color 0.2s ease, border-color 0.2s ease;
178
-
179
- &:hover {
180
- background-color: color.adjust(cl.$background-info, $lightness: -8%);
181
- border-color: color.adjust(cl.$border-info, $lightness: -8%);
182
- }
183
-
184
- &:active {
185
- background-color: color.adjust(cl.$background-info, $lightness: -12%);
186
- border-color: color.adjust(cl.$border-info, $lightness: -12%);
187
- }
188
-
189
- &:disabled {
190
- opacity: 0.5;
191
- cursor: not-allowed;
192
-
193
- &:hover {
194
- background-color: cl.$background-info;
195
- border-color: cl.$border-info;
196
- }
197
- }
198
- }
199
-
200
- // Outline variants: transparent bg + colored border/text → hover fills color + white text
201
-
202
- &.qo-btn-outline-primary {
203
- background-color: transparent;
204
- border: bo.$border-width-sm solid cl.$border-primary;
205
- color: cl.$text-primary;
206
- cursor: pointer;
207
- transition: background-color 0.2s ease, border-color 0.2s ease,
208
- color 0.2s ease;
209
-
210
- &:hover {
211
- background-color: cl.$background-primary;
212
- border-color: cl.$border-primary;
213
- color: cl.$text-light;
214
- }
215
-
216
- &:active {
217
- background-color: color.adjust(cl.$background-primary, $lightness: -8%);
218
- border-color: color.adjust(cl.$border-primary, $lightness: -8%);
219
- color: cl.$text-light;
220
- }
221
-
222
- &:disabled {
223
- opacity: 0.5;
224
- cursor: not-allowed;
225
-
226
- &:hover {
227
- background-color: transparent;
228
- border-color: cl.$border-primary;
229
- color: cl.$text-primary;
230
- }
231
- }
232
- }
233
-
234
- &.qo-btn-outline-default {
235
- background-color: transparent;
236
- border: bo.$border-width-sm solid cl.$border-default;
237
- color: cl.$text-light;
238
- cursor: pointer;
239
- transition: background-color 0.2s ease, border-color 0.2s ease,
240
- color 0.2s ease;
241
-
242
- &:hover {
243
- background-color: cl.$background-secondary;
244
- border-color: cl.$border-secondary;
245
- color: color.adjust(cl.$text-dark, $lightness: 20%);
246
- }
247
-
248
- &:active {
249
- background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
250
- border-color: cl.$border-secondary;
251
- color: cl.$text-light;
252
- }
253
-
254
- &:disabled {
255
- opacity: 0.5;
256
- cursor: not-allowed;
257
-
258
- &:hover {
259
- background-color: transparent;
260
- border-color: cl.$border-default;
261
- color: cl.$text-light;
262
- }
263
- }
264
- }
265
-
266
- &.qo-btn-outline-danger {
267
- background-color: transparent;
268
- border: bo.$border-width-sm solid cl.$border-danger;
269
- color: cl.$text-danger;
270
- cursor: pointer;
271
- transition: background-color 0.2s ease, border-color 0.2s ease,
272
- color 0.2s ease;
273
-
274
- &:hover {
275
- background-color: cl.$background-danger;
276
- border-color: cl.$border-danger;
277
- color: cl.$text-light;
278
- }
279
-
280
- &:active {
281
- background-color: color.adjust(cl.$background-danger, $lightness: -8%);
282
- border-color: color.adjust(cl.$border-danger, $lightness: -8%);
283
- color: cl.$text-light;
284
- }
285
-
286
- &:disabled {
287
- opacity: 0.5;
288
- cursor: not-allowed;
289
-
290
- &:hover {
291
- background-color: transparent;
292
- border-color: cl.$border-danger;
293
- color: cl.$text-danger;
294
- }
295
- }
296
- }
297
-
298
- &.qo-btn-outline-success {
299
- background-color: transparent;
300
- border: bo.$border-width-sm solid cl.$border-success;
301
- color: cl.$text-success;
302
- cursor: pointer;
303
- transition: background-color 0.2s ease, border-color 0.2s ease,
304
- color 0.2s ease;
305
-
306
- &:hover {
307
- background-color: cl.$background-success;
308
- border-color: cl.$border-success;
309
- color: cl.$text-light;
310
- }
311
-
312
- &:active {
313
- background-color: color.adjust(cl.$background-success, $lightness: -8%);
314
- border-color: color.adjust(cl.$border-success, $lightness: -8%);
315
- color: cl.$text-light;
316
- }
317
-
318
- &:disabled {
319
- opacity: 0.5;
320
- cursor: not-allowed;
321
-
322
- &:hover {
323
- background-color: transparent;
324
- border-color: cl.$border-success;
325
- color: cl.$text-success;
326
- }
327
- }
328
- }
329
-
330
- &.qo-btn-outline-warning {
331
- background-color: transparent;
332
- border: bo.$border-width-sm solid cl.$border-warning;
333
- color: cl.$text-warning;
334
- cursor: pointer;
335
- transition: background-color 0.2s ease, border-color 0.2s ease,
336
- color 0.2s ease;
337
-
338
- &:hover {
339
- background-color: cl.$background-warning;
340
- border-color: cl.$border-warning;
341
- color: cl.$text-light;
342
- }
343
-
344
- &:active {
345
- background-color: color.adjust(cl.$background-warning, $lightness: -8%);
346
- border-color: color.adjust(cl.$border-warning, $lightness: -8%);
347
- color: cl.$text-light;
348
- }
349
-
350
- &:disabled {
351
- opacity: 0.5;
352
- cursor: not-allowed;
353
-
354
- &:hover {
355
- background-color: transparent;
356
- border-color: cl.$border-warning;
357
- color: cl.$text-warning;
358
- }
359
- }
360
- }
361
-
362
- &.qo-btn-outline-info {
363
- background-color: transparent;
364
- border: bo.$border-width-sm solid cl.$border-info;
365
- color: cl.$text-info;
366
- cursor: pointer;
367
- transition: background-color 0.2s ease, border-color 0.2s ease,
368
- color 0.2s ease;
369
-
370
- &:hover {
371
- background-color: cl.$background-info;
372
- border-color: cl.$border-info;
373
- color: cl.$text-light;
374
- }
375
-
376
- &:active {
377
- background-color: color.adjust(cl.$background-info, $lightness: -8%);
378
- border-color: color.adjust(cl.$border-info, $lightness: -8%);
379
- color: cl.$text-light;
380
- }
381
-
382
- &:disabled {
383
- opacity: 0.5;
384
- cursor: not-allowed;
385
-
386
- &:hover {
387
- background-color: transparent;
388
- border-color: cl.$border-info;
389
- color: cl.$text-info;
390
- }
391
- }
392
- }
393
- }
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
+ }