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.
- package/dist/src/base/_border.scss +12 -12
- package/dist/src/base/_custom-properties.scss +108 -108
- package/dist/src/base/_font.scss +37 -37
- package/dist/src/base/_size.scss +17 -17
- package/dist/src/base/_space.scss +29 -29
- package/dist/src/base/mixins/_breakpoints.scss +27 -27
- package/dist/src/base/mixins/_meta-class.scss +26 -26
- package/dist/src/components/_buttons.scss +420 -393
- package/dist/src/components/_disabled.scss +8 -8
- package/dist/src/components/_placeholder.scss +46 -46
- package/dist/src/components.ts +23 -23
- package/dist/src/index.scss +71 -71
- package/dist/src/utilities/_cursor.scss +7 -7
- package/dist/src/utilities/_display.scss +17 -17
- package/dist/src/utilities/_flex.scss +83 -83
- package/dist/src/utilities/_opacity.scss +7 -7
- package/dist/src/utilities/_overflow.scss +9 -9
- package/dist/src/utilities/_position.scss +22 -22
- package/dist/src/utilities/_sizing.scss +24 -24
- package/dist/src/utilities/_text.scss +43 -43
- package/dist/src/utilities/_visibility.scss +4 -4
- package/dist/src/utilities/background-color/index.scss +16 -16
- package/dist/src/utilities/border/_border-color.scss +11 -11
- package/dist/src/utilities/border/_border-radius.scss +10 -10
- package/dist/src/utilities/border/_border-size.scss +8 -8
- package/dist/src/utilities/box-shadow/index.scss +8 -8
- package/dist/src/utilities/spaces/_gap.scss +8 -8
- package/dist/src/utilities/spaces/_margin.scss +38 -38
- package/dist/src/utilities/spaces/_padding.scss +29 -29
- package/dist/src/utilities/typography/_color.scss +33 -33
- package/dist/src/utilities/typography/_font.scss +35 -35
- package/dist/src/utilities.ts +112 -112
- package/package.json +1 -1
- package/src/base/_border.scss +12 -12
- package/src/base/_custom-properties.scss +108 -108
- package/src/base/_font.scss +37 -37
- package/src/base/_size.scss +17 -17
- package/src/base/_space.scss +29 -29
- package/src/base/mixins/_breakpoints.scss +27 -27
- package/src/base/mixins/_meta-class.scss +26 -26
- package/src/components/_buttons.scss +420 -393
- package/src/components/_disabled.scss +8 -8
- package/src/components/_placeholder.scss +46 -46
- package/src/components.ts +23 -23
- package/src/index.scss +71 -71
- package/src/utilities/_cursor.scss +7 -7
- package/src/utilities/_display.scss +17 -17
- package/src/utilities/_flex.scss +83 -83
- package/src/utilities/_opacity.scss +7 -7
- package/src/utilities/_overflow.scss +9 -9
- package/src/utilities/_position.scss +22 -22
- package/src/utilities/_sizing.scss +24 -24
- package/src/utilities/_text.scss +43 -43
- package/src/utilities/_visibility.scss +4 -4
- package/src/utilities/background-color/index.scss +16 -16
- package/src/utilities/border/_border-color.scss +11 -11
- package/src/utilities/border/_border-radius.scss +10 -10
- package/src/utilities/border/_border-size.scss +8 -8
- package/src/utilities/box-shadow/index.scss +8 -8
- package/src/utilities/spaces/_gap.scss +8 -8
- package/src/utilities/spaces/_margin.scss +38 -38
- package/src/utilities/spaces/_padding.scss +29 -29
- package/src/utilities/typography/_color.scss +33 -33
- package/src/utilities/typography/_font.scss +35 -35
- package/src/utilities.ts +112 -112
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
$border-radius-0: 0 !default;
|
|
2
|
-
$border-radius-sm: 2px !default;
|
|
3
|
-
$border-radius-md: 4px !default;
|
|
4
|
-
$border-radius-lg: 16px !default;
|
|
5
|
-
$border-radius-xl: 1rem !default;
|
|
6
|
-
$border-radius-pill: 50rem !default;
|
|
7
|
-
$border-radius-full: 50% !default;
|
|
8
|
-
|
|
9
|
-
$border-width-none: 0 !default;
|
|
10
|
-
$border-width-sm: 1px !default;
|
|
11
|
-
$border-width-md: 2px !default;
|
|
12
|
-
$border-width-lg: 4px !default;
|
|
1
|
+
$border-radius-0: 0 !default;
|
|
2
|
+
$border-radius-sm: 2px !default;
|
|
3
|
+
$border-radius-md: 4px !default;
|
|
4
|
+
$border-radius-lg: 16px !default;
|
|
5
|
+
$border-radius-xl: 1rem !default;
|
|
6
|
+
$border-radius-pill: 50rem !default;
|
|
7
|
+
$border-radius-full: 50% !default;
|
|
8
|
+
|
|
9
|
+
$border-width-none: 0 !default;
|
|
10
|
+
$border-width-sm: 1px !default;
|
|
11
|
+
$border-width-md: 2px !default;
|
|
12
|
+
$border-width-lg: 4px !default;
|
|
@@ -1,108 +1,108 @@
|
|
|
1
|
-
@use "color" as cl;
|
|
2
|
-
@use "font" as ft;
|
|
3
|
-
@use "space" as sp;
|
|
4
|
-
@use "border" as bo;
|
|
5
|
-
@use "size" as sz;
|
|
6
|
-
|
|
7
|
-
:root {
|
|
8
|
-
// Text colors
|
|
9
|
-
--qo-text-primary: #{cl.$text-primary};
|
|
10
|
-
--qo-text-secondary: #{cl.$text-secondary};
|
|
11
|
-
--qo-text-success: #{cl.$text-success};
|
|
12
|
-
--qo-text-warning: #{cl.$text-warning};
|
|
13
|
-
--qo-text-danger: #{cl.$text-danger};
|
|
14
|
-
--qo-text-info: #{cl.$text-info};
|
|
15
|
-
--qo-text-default: #{cl.$text-default};
|
|
16
|
-
--qo-text-dark: #{cl.$text-dark};
|
|
17
|
-
--qo-text-light: #{cl.$text-light};
|
|
18
|
-
--qo-text-tertiary: #{cl.$text-tertiary};
|
|
19
|
-
--qo-text-placeholder: #{cl.$text-placeholder};
|
|
20
|
-
|
|
21
|
-
// Background colors
|
|
22
|
-
--qo-bg-primary: #{cl.$background-primary};
|
|
23
|
-
--qo-bg-secondary: #{cl.$background-secondary};
|
|
24
|
-
--qo-bg-success: #{cl.$background-success};
|
|
25
|
-
--qo-bg-warning: #{cl.$background-warning};
|
|
26
|
-
--qo-bg-danger: #{cl.$background-danger};
|
|
27
|
-
--qo-bg-info: #{cl.$background-info};
|
|
28
|
-
--qo-bg-default: #{cl.$background-default};
|
|
29
|
-
--qo-bg-dark: #{cl.$background-dark};
|
|
30
|
-
--qo-bg-dark-a: #{cl.$background-dark-a};
|
|
31
|
-
--qo-bg-medium: #{cl.$background-medium};
|
|
32
|
-
--qo-bg-light: #{cl.$background-light};
|
|
33
|
-
--qo-bg-tertiary: #{cl.$background-tertiary};
|
|
34
|
-
--qo-bg-disabled: #{cl.$background-disabled};
|
|
35
|
-
|
|
36
|
-
// Border colors
|
|
37
|
-
--qo-border-primary: #{cl.$border-primary};
|
|
38
|
-
--qo-border-secondary: #{cl.$border-secondary};
|
|
39
|
-
--qo-border-success: #{cl.$border-success};
|
|
40
|
-
--qo-border-warning: #{cl.$border-warning};
|
|
41
|
-
--qo-border-danger: #{cl.$border-danger};
|
|
42
|
-
--qo-border-info: #{cl.$border-info};
|
|
43
|
-
--qo-border-light: #{cl.$border-light};
|
|
44
|
-
--qo-border-dark: #{cl.$border-dark};
|
|
45
|
-
--qo-border-default: #{cl.$border-default};
|
|
46
|
-
|
|
47
|
-
// Font families
|
|
48
|
-
--qo-font-family-primary: #{ft.$font-family-primary};
|
|
49
|
-
--qo-font-family-secondary: #{ft.$font-family-secondary};
|
|
50
|
-
|
|
51
|
-
// Font sizes
|
|
52
|
-
--qo-font-size-xxs: #{ft.$font-size-xxs};
|
|
53
|
-
--qo-font-size-xs: #{ft.$font-size-xs};
|
|
54
|
-
--qo-font-size-sm: #{ft.$font-size-sm};
|
|
55
|
-
--qo-font-size-md: #{ft.$font-size-md};
|
|
56
|
-
--qo-font-size-lg: #{ft.$font-size-lg};
|
|
57
|
-
--qo-font-size-xl: #{ft.$font-size-xl};
|
|
58
|
-
--qo-font-size-xxl: #{ft.$font-size-xxl};
|
|
59
|
-
--qo-font-size-h1: #{ft.$font-size-h1};
|
|
60
|
-
--qo-font-size-h2: #{ft.$font-size-h2};
|
|
61
|
-
--qo-font-size-h3: #{ft.$font-size-h3};
|
|
62
|
-
--qo-font-size-h4: #{ft.$font-size-h4};
|
|
63
|
-
--qo-font-size-h5: #{ft.$font-size-h5};
|
|
64
|
-
--qo-font-size-h6: #{ft.$font-size-h6};
|
|
65
|
-
|
|
66
|
-
// Font weights
|
|
67
|
-
--qo-font-weight-light: #{ft.$font-weight-light};
|
|
68
|
-
--qo-font-weight-regular: #{ft.$font-weight-regular};
|
|
69
|
-
--qo-font-weight-medium: #{ft.$font-weight-medium};
|
|
70
|
-
--qo-font-weight-semibold: #{ft.$font-weight-semibold};
|
|
71
|
-
--qo-font-weight-bold: #{ft.$font-weight-bold};
|
|
72
|
-
--qo-font-weight-extrabold: #{ft.$font-weight-extrabold};
|
|
73
|
-
|
|
74
|
-
// Spacing
|
|
75
|
-
--qo-space-0: #{sp.$space-0};
|
|
76
|
-
--qo-space-1: #{sp.$space-1};
|
|
77
|
-
--qo-space-2: #{sp.$space-2};
|
|
78
|
-
--qo-space-3: #{sp.$space-3};
|
|
79
|
-
--qo-space-4: #{sp.$space-4};
|
|
80
|
-
--qo-space-5: #{sp.$space-5};
|
|
81
|
-
--qo-space-sm: #{sp.$space-sm};
|
|
82
|
-
--qo-space-md: #{sp.$space-md};
|
|
83
|
-
--qo-space-lg: #{sp.$space-lg};
|
|
84
|
-
--qo-space-xl: #{sp.$space-xl};
|
|
85
|
-
|
|
86
|
-
// Border radius
|
|
87
|
-
--qo-border-radius-0: #{bo.$border-radius-0};
|
|
88
|
-
--qo-border-radius-sm: #{bo.$border-radius-sm};
|
|
89
|
-
--qo-border-radius-md: #{bo.$border-radius-md};
|
|
90
|
-
--qo-border-radius-lg: #{bo.$border-radius-lg};
|
|
91
|
-
--qo-border-radius-xl: #{bo.$border-radius-xl};
|
|
92
|
-
--qo-border-radius-pill: #{bo.$border-radius-pill};
|
|
93
|
-
--qo-border-radius-full: #{bo.$border-radius-full};
|
|
94
|
-
|
|
95
|
-
// Border widths
|
|
96
|
-
--qo-border-width-none: #{bo.$border-width-none};
|
|
97
|
-
--qo-border-width-sm: #{bo.$border-width-sm};
|
|
98
|
-
--qo-border-width-md: #{bo.$border-width-md};
|
|
99
|
-
--qo-border-width-lg: #{bo.$border-width-lg};
|
|
100
|
-
|
|
101
|
-
// Sizes
|
|
102
|
-
--qo-size-xs: #{sz.$size-xs};
|
|
103
|
-
--qo-size-sm: #{sz.$size-sm};
|
|
104
|
-
--qo-size-md: #{sz.$size-md};
|
|
105
|
-
--qo-size-lg: #{sz.$size-lg};
|
|
106
|
-
--qo-size-xl: #{sz.$size-xl};
|
|
107
|
-
--qo-size-xxl: #{sz.$size-xxl};
|
|
108
|
-
}
|
|
1
|
+
@use "color" as cl;
|
|
2
|
+
@use "font" as ft;
|
|
3
|
+
@use "space" as sp;
|
|
4
|
+
@use "border" as bo;
|
|
5
|
+
@use "size" as sz;
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
// Text colors
|
|
9
|
+
--qo-text-primary: #{cl.$text-primary};
|
|
10
|
+
--qo-text-secondary: #{cl.$text-secondary};
|
|
11
|
+
--qo-text-success: #{cl.$text-success};
|
|
12
|
+
--qo-text-warning: #{cl.$text-warning};
|
|
13
|
+
--qo-text-danger: #{cl.$text-danger};
|
|
14
|
+
--qo-text-info: #{cl.$text-info};
|
|
15
|
+
--qo-text-default: #{cl.$text-default};
|
|
16
|
+
--qo-text-dark: #{cl.$text-dark};
|
|
17
|
+
--qo-text-light: #{cl.$text-light};
|
|
18
|
+
--qo-text-tertiary: #{cl.$text-tertiary};
|
|
19
|
+
--qo-text-placeholder: #{cl.$text-placeholder};
|
|
20
|
+
|
|
21
|
+
// Background colors
|
|
22
|
+
--qo-bg-primary: #{cl.$background-primary};
|
|
23
|
+
--qo-bg-secondary: #{cl.$background-secondary};
|
|
24
|
+
--qo-bg-success: #{cl.$background-success};
|
|
25
|
+
--qo-bg-warning: #{cl.$background-warning};
|
|
26
|
+
--qo-bg-danger: #{cl.$background-danger};
|
|
27
|
+
--qo-bg-info: #{cl.$background-info};
|
|
28
|
+
--qo-bg-default: #{cl.$background-default};
|
|
29
|
+
--qo-bg-dark: #{cl.$background-dark};
|
|
30
|
+
--qo-bg-dark-a: #{cl.$background-dark-a};
|
|
31
|
+
--qo-bg-medium: #{cl.$background-medium};
|
|
32
|
+
--qo-bg-light: #{cl.$background-light};
|
|
33
|
+
--qo-bg-tertiary: #{cl.$background-tertiary};
|
|
34
|
+
--qo-bg-disabled: #{cl.$background-disabled};
|
|
35
|
+
|
|
36
|
+
// Border colors
|
|
37
|
+
--qo-border-primary: #{cl.$border-primary};
|
|
38
|
+
--qo-border-secondary: #{cl.$border-secondary};
|
|
39
|
+
--qo-border-success: #{cl.$border-success};
|
|
40
|
+
--qo-border-warning: #{cl.$border-warning};
|
|
41
|
+
--qo-border-danger: #{cl.$border-danger};
|
|
42
|
+
--qo-border-info: #{cl.$border-info};
|
|
43
|
+
--qo-border-light: #{cl.$border-light};
|
|
44
|
+
--qo-border-dark: #{cl.$border-dark};
|
|
45
|
+
--qo-border-default: #{cl.$border-default};
|
|
46
|
+
|
|
47
|
+
// Font families
|
|
48
|
+
--qo-font-family-primary: #{ft.$font-family-primary};
|
|
49
|
+
--qo-font-family-secondary: #{ft.$font-family-secondary};
|
|
50
|
+
|
|
51
|
+
// Font sizes
|
|
52
|
+
--qo-font-size-xxs: #{ft.$font-size-xxs};
|
|
53
|
+
--qo-font-size-xs: #{ft.$font-size-xs};
|
|
54
|
+
--qo-font-size-sm: #{ft.$font-size-sm};
|
|
55
|
+
--qo-font-size-md: #{ft.$font-size-md};
|
|
56
|
+
--qo-font-size-lg: #{ft.$font-size-lg};
|
|
57
|
+
--qo-font-size-xl: #{ft.$font-size-xl};
|
|
58
|
+
--qo-font-size-xxl: #{ft.$font-size-xxl};
|
|
59
|
+
--qo-font-size-h1: #{ft.$font-size-h1};
|
|
60
|
+
--qo-font-size-h2: #{ft.$font-size-h2};
|
|
61
|
+
--qo-font-size-h3: #{ft.$font-size-h3};
|
|
62
|
+
--qo-font-size-h4: #{ft.$font-size-h4};
|
|
63
|
+
--qo-font-size-h5: #{ft.$font-size-h5};
|
|
64
|
+
--qo-font-size-h6: #{ft.$font-size-h6};
|
|
65
|
+
|
|
66
|
+
// Font weights
|
|
67
|
+
--qo-font-weight-light: #{ft.$font-weight-light};
|
|
68
|
+
--qo-font-weight-regular: #{ft.$font-weight-regular};
|
|
69
|
+
--qo-font-weight-medium: #{ft.$font-weight-medium};
|
|
70
|
+
--qo-font-weight-semibold: #{ft.$font-weight-semibold};
|
|
71
|
+
--qo-font-weight-bold: #{ft.$font-weight-bold};
|
|
72
|
+
--qo-font-weight-extrabold: #{ft.$font-weight-extrabold};
|
|
73
|
+
|
|
74
|
+
// Spacing
|
|
75
|
+
--qo-space-0: #{sp.$space-0};
|
|
76
|
+
--qo-space-1: #{sp.$space-1};
|
|
77
|
+
--qo-space-2: #{sp.$space-2};
|
|
78
|
+
--qo-space-3: #{sp.$space-3};
|
|
79
|
+
--qo-space-4: #{sp.$space-4};
|
|
80
|
+
--qo-space-5: #{sp.$space-5};
|
|
81
|
+
--qo-space-sm: #{sp.$space-sm};
|
|
82
|
+
--qo-space-md: #{sp.$space-md};
|
|
83
|
+
--qo-space-lg: #{sp.$space-lg};
|
|
84
|
+
--qo-space-xl: #{sp.$space-xl};
|
|
85
|
+
|
|
86
|
+
// Border radius
|
|
87
|
+
--qo-border-radius-0: #{bo.$border-radius-0};
|
|
88
|
+
--qo-border-radius-sm: #{bo.$border-radius-sm};
|
|
89
|
+
--qo-border-radius-md: #{bo.$border-radius-md};
|
|
90
|
+
--qo-border-radius-lg: #{bo.$border-radius-lg};
|
|
91
|
+
--qo-border-radius-xl: #{bo.$border-radius-xl};
|
|
92
|
+
--qo-border-radius-pill: #{bo.$border-radius-pill};
|
|
93
|
+
--qo-border-radius-full: #{bo.$border-radius-full};
|
|
94
|
+
|
|
95
|
+
// Border widths
|
|
96
|
+
--qo-border-width-none: #{bo.$border-width-none};
|
|
97
|
+
--qo-border-width-sm: #{bo.$border-width-sm};
|
|
98
|
+
--qo-border-width-md: #{bo.$border-width-md};
|
|
99
|
+
--qo-border-width-lg: #{bo.$border-width-lg};
|
|
100
|
+
|
|
101
|
+
// Sizes
|
|
102
|
+
--qo-size-xs: #{sz.$size-xs};
|
|
103
|
+
--qo-size-sm: #{sz.$size-sm};
|
|
104
|
+
--qo-size-md: #{sz.$size-md};
|
|
105
|
+
--qo-size-lg: #{sz.$size-lg};
|
|
106
|
+
--qo-size-xl: #{sz.$size-xl};
|
|
107
|
+
--qo-size-xxl: #{sz.$size-xxl};
|
|
108
|
+
}
|
package/dist/src/base/_font.scss
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
$font-family-primary: "IBM Plex Sans", sans-serif !default;
|
|
2
|
-
$font-family-secondary: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono",
|
|
3
|
-
"Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
|
|
4
|
-
|
|
5
|
-
// Base font sizes
|
|
6
|
-
$font-size-xxs: 8px !default;
|
|
7
|
-
$font-size-xs: 10px !default;
|
|
8
|
-
$font-size-sm: 11px !default;
|
|
9
|
-
$font-size-md: 12px !default;
|
|
10
|
-
$font-size-lg: 14px !default;
|
|
11
|
-
$font-size-xl: 16px !default;
|
|
12
|
-
$font-size-xxl: 18px !default;
|
|
13
|
-
|
|
14
|
-
// Heading font sizes
|
|
15
|
-
$font-size-h6: 1rem !default;
|
|
16
|
-
$font-size-h5: 1.25rem !default;
|
|
17
|
-
$font-size-h4: 1.5rem !default;
|
|
18
|
-
$font-size-h3: 1.75rem !default;
|
|
19
|
-
$font-size-h2: 2rem !default;
|
|
20
|
-
$font-size-h1: 2.5rem !default;
|
|
21
|
-
|
|
22
|
-
// Line heights
|
|
23
|
-
$line-height-xxs: 1.25 !default;
|
|
24
|
-
$line-height-xs: 1.3 !default;
|
|
25
|
-
$line-height-sm: 1.27 !default;
|
|
26
|
-
$line-height-md: 1.33 !default;
|
|
27
|
-
$line-height-lg: 1.29 !default;
|
|
28
|
-
$line-height-xl: 1.31 !default;
|
|
29
|
-
$line-height-xxl: 1.28 !default;
|
|
30
|
-
|
|
31
|
-
// Font weights
|
|
32
|
-
$font-weight-light: 300 !default;
|
|
33
|
-
$font-weight-regular: 400 !default;
|
|
34
|
-
$font-weight-medium: 500 !default;
|
|
35
|
-
$font-weight-semibold: 600 !default;
|
|
36
|
-
$font-weight-bold: 700 !default;
|
|
37
|
-
$font-weight-extrabold: 800 !default;
|
|
1
|
+
$font-family-primary: "IBM Plex Sans", sans-serif !default;
|
|
2
|
+
$font-family-secondary: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono",
|
|
3
|
+
"Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
|
|
4
|
+
|
|
5
|
+
// Base font sizes
|
|
6
|
+
$font-size-xxs: 8px !default;
|
|
7
|
+
$font-size-xs: 10px !default;
|
|
8
|
+
$font-size-sm: 11px !default;
|
|
9
|
+
$font-size-md: 12px !default;
|
|
10
|
+
$font-size-lg: 14px !default;
|
|
11
|
+
$font-size-xl: 16px !default;
|
|
12
|
+
$font-size-xxl: 18px !default;
|
|
13
|
+
|
|
14
|
+
// Heading font sizes
|
|
15
|
+
$font-size-h6: 1rem !default;
|
|
16
|
+
$font-size-h5: 1.25rem !default;
|
|
17
|
+
$font-size-h4: 1.5rem !default;
|
|
18
|
+
$font-size-h3: 1.75rem !default;
|
|
19
|
+
$font-size-h2: 2rem !default;
|
|
20
|
+
$font-size-h1: 2.5rem !default;
|
|
21
|
+
|
|
22
|
+
// Line heights
|
|
23
|
+
$line-height-xxs: 1.25 !default;
|
|
24
|
+
$line-height-xs: 1.3 !default;
|
|
25
|
+
$line-height-sm: 1.27 !default;
|
|
26
|
+
$line-height-md: 1.33 !default;
|
|
27
|
+
$line-height-lg: 1.29 !default;
|
|
28
|
+
$line-height-xl: 1.31 !default;
|
|
29
|
+
$line-height-xxl: 1.28 !default;
|
|
30
|
+
|
|
31
|
+
// Font weights
|
|
32
|
+
$font-weight-light: 300 !default;
|
|
33
|
+
$font-weight-regular: 400 !default;
|
|
34
|
+
$font-weight-medium: 500 !default;
|
|
35
|
+
$font-weight-semibold: 600 !default;
|
|
36
|
+
$font-weight-bold: 700 !default;
|
|
37
|
+
$font-weight-extrabold: 800 !default;
|
package/dist/src/base/_size.scss
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
$menu-size: 32px !default;
|
|
2
|
-
|
|
3
|
-
$size-xs: 8px !default;
|
|
4
|
-
$size-sm: 16px !default;
|
|
5
|
-
$size-md: 20px !default;
|
|
6
|
-
$size-lg: 32px !default;
|
|
7
|
-
$size-xl: 48px !default;
|
|
8
|
-
$size-xxl: 64px !default;
|
|
9
|
-
|
|
10
|
-
$sizing-values: (
|
|
11
|
-
xs: $size-xs,
|
|
12
|
-
sm: $size-sm,
|
|
13
|
-
md: $size-md,
|
|
14
|
-
lg: $size-lg,
|
|
15
|
-
xl: $size-xl,
|
|
16
|
-
xxl: $size-xxl,
|
|
17
|
-
) !default;
|
|
1
|
+
$menu-size: 32px !default;
|
|
2
|
+
|
|
3
|
+
$size-xs: 8px !default;
|
|
4
|
+
$size-sm: 16px !default;
|
|
5
|
+
$size-md: 20px !default;
|
|
6
|
+
$size-lg: 32px !default;
|
|
7
|
+
$size-xl: 48px !default;
|
|
8
|
+
$size-xxl: 64px !default;
|
|
9
|
+
|
|
10
|
+
$sizing-values: (
|
|
11
|
+
xs: $size-xs,
|
|
12
|
+
sm: $size-sm,
|
|
13
|
+
md: $size-md,
|
|
14
|
+
lg: $size-lg,
|
|
15
|
+
xl: $size-xl,
|
|
16
|
+
xxl: $size-xxl,
|
|
17
|
+
) !default;
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
// Bootstrap-compatible spacing scale (rem-based)
|
|
2
|
-
$space-0: 0 !default;
|
|
3
|
-
$space-1: 0.25rem !default;
|
|
4
|
-
$space-2: 0.5rem !default;
|
|
5
|
-
$space-3: 1rem !default;
|
|
6
|
-
$space-4: 1.5rem !default;
|
|
7
|
-
$space-5: 3rem !default;
|
|
8
|
-
|
|
9
|
-
// Legacy spacing aliases
|
|
10
|
-
$space-xs: 2.5px !default;
|
|
11
|
-
$space-sm: 5px !default;
|
|
12
|
-
$space-md: 12.5px !default;
|
|
13
|
-
$space-lg: 16.5px !default;
|
|
14
|
-
$space-xl: 21px !default;
|
|
15
|
-
|
|
16
|
-
// Spacers map for loop-based utility generation
|
|
17
|
-
$spacers: (
|
|
18
|
-
0: $space-0,
|
|
19
|
-
1: $space-1,
|
|
20
|
-
2: $space-2,
|
|
21
|
-
3: $space-3,
|
|
22
|
-
4: $space-4,
|
|
23
|
-
5: $space-5,
|
|
24
|
-
xs: $space-xs,
|
|
25
|
-
sm: $space-sm,
|
|
26
|
-
md: $space-md,
|
|
27
|
-
lg: $space-lg,
|
|
28
|
-
xl: $space-xl,
|
|
29
|
-
) !default;
|
|
1
|
+
// Bootstrap-compatible spacing scale (rem-based)
|
|
2
|
+
$space-0: 0 !default;
|
|
3
|
+
$space-1: 0.25rem !default;
|
|
4
|
+
$space-2: 0.5rem !default;
|
|
5
|
+
$space-3: 1rem !default;
|
|
6
|
+
$space-4: 1.5rem !default;
|
|
7
|
+
$space-5: 3rem !default;
|
|
8
|
+
|
|
9
|
+
// Legacy spacing aliases
|
|
10
|
+
$space-xs: 2.5px !default;
|
|
11
|
+
$space-sm: 5px !default;
|
|
12
|
+
$space-md: 12.5px !default;
|
|
13
|
+
$space-lg: 16.5px !default;
|
|
14
|
+
$space-xl: 21px !default;
|
|
15
|
+
|
|
16
|
+
// Spacers map for loop-based utility generation
|
|
17
|
+
$spacers: (
|
|
18
|
+
0: $space-0,
|
|
19
|
+
1: $space-1,
|
|
20
|
+
2: $space-2,
|
|
21
|
+
3: $space-3,
|
|
22
|
+
4: $space-4,
|
|
23
|
+
5: $space-5,
|
|
24
|
+
xs: $space-xs,
|
|
25
|
+
sm: $space-sm,
|
|
26
|
+
md: $space-md,
|
|
27
|
+
lg: $space-lg,
|
|
28
|
+
xl: $space-xl,
|
|
29
|
+
) !default;
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
@use "sass:math";
|
|
3
|
-
|
|
4
|
-
$breakpoints: (
|
|
5
|
-
sm: 576px,
|
|
6
|
-
md: 768px,
|
|
7
|
-
lg: 992px,
|
|
8
|
-
xl: 1200px,
|
|
9
|
-
xxl: 1366px,
|
|
10
|
-
) !default;
|
|
11
|
-
|
|
12
|
-
@mixin respond-above($bp) {
|
|
13
|
-
@if map.has-key($breakpoints, $bp) {
|
|
14
|
-
@media (min-width: map.get($breakpoints, $bp)) {
|
|
15
|
-
@content;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@mixin respond-below($bp) {
|
|
21
|
-
@if map.has-key($breakpoints, $bp) {
|
|
22
|
-
$max: map.get($breakpoints, $bp);
|
|
23
|
-
@media (max-width: calc(#{$max} - 0.02px)) {
|
|
24
|
-
@content;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "sass:math";
|
|
3
|
+
|
|
4
|
+
$breakpoints: (
|
|
5
|
+
sm: 576px,
|
|
6
|
+
md: 768px,
|
|
7
|
+
lg: 992px,
|
|
8
|
+
xl: 1200px,
|
|
9
|
+
xxl: 1366px,
|
|
10
|
+
) !default;
|
|
11
|
+
|
|
12
|
+
@mixin respond-above($bp) {
|
|
13
|
+
@if map.has-key($breakpoints, $bp) {
|
|
14
|
+
@media (min-width: map.get($breakpoints, $bp)) {
|
|
15
|
+
@content;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@mixin respond-below($bp) {
|
|
21
|
+
@if map.has-key($breakpoints, $bp) {
|
|
22
|
+
$max: map.get($breakpoints, $bp);
|
|
23
|
+
@media (max-width: calc(#{$max} - 0.02px)) {
|
|
24
|
+
@content;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
/// Generates two tiers for each utility class:
|
|
2
|
-
///
|
|
3
|
-
/// 1. Regular class: .qo-x { ... } → specificity (0,1,0)
|
|
4
|
-
/// 2. Force-important: [data-prc-col-important~="qo-x"] { ... !important }
|
|
5
|
-
///
|
|
6
|
-
/// @param {String} $class-name — CSS class name without the dot
|
|
7
|
-
/// @param {Map} $properties — map of (property: value) pairs
|
|
8
|
-
///
|
|
9
|
-
/// Usage:
|
|
10
|
-
/// @include meta("qo-padding-sm", (padding: 8px));
|
|
11
|
-
/// @include meta("qo-text-truncate", (overflow: hidden, text-overflow: ellipsis, white-space: nowrap));
|
|
12
|
-
@mixin meta($class-name, $properties) {
|
|
13
|
-
// Normal — direct class usage
|
|
14
|
-
.#{$class-name} {
|
|
15
|
-
@each $prop, $val in $properties {
|
|
16
|
-
#{$prop}: $val;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
// Force override — column metadata with important flag
|
|
21
|
-
[data-prc-col-important~="#{$class-name}"] {
|
|
22
|
-
@each $prop, $val in $properties {
|
|
23
|
-
#{$prop}: $val !important;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
1
|
+
/// Generates two tiers for each utility class:
|
|
2
|
+
///
|
|
3
|
+
/// 1. Regular class: .qo-x { ... } → specificity (0,1,0)
|
|
4
|
+
/// 2. Force-important: [data-prc-col-important~="qo-x"] { ... !important }
|
|
5
|
+
///
|
|
6
|
+
/// @param {String} $class-name — CSS class name without the dot
|
|
7
|
+
/// @param {Map} $properties — map of (property: value) pairs
|
|
8
|
+
///
|
|
9
|
+
/// Usage:
|
|
10
|
+
/// @include meta("qo-padding-sm", (padding: 8px));
|
|
11
|
+
/// @include meta("qo-text-truncate", (overflow: hidden, text-overflow: ellipsis, white-space: nowrap));
|
|
12
|
+
@mixin meta($class-name, $properties) {
|
|
13
|
+
// Normal — direct class usage
|
|
14
|
+
.#{$class-name} {
|
|
15
|
+
@each $prop, $val in $properties {
|
|
16
|
+
#{$prop}: $val;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Force override — column metadata with important flag
|
|
21
|
+
[data-prc-col-important~="#{$class-name}"] {
|
|
22
|
+
@each $prop, $val in $properties {
|
|
23
|
+
#{$prop}: $val !important;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|