@acorex/styles 7.1.2 → 7.1.5
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/index.scss +14 -14
- package/package.json +18 -18
- package/src/animations/index.scss +86 -86
- package/src/base/_normalize.scss +422 -422
- package/src/base/index.scss +16 -16
- package/src/icons/demo.html +892 -892
- package/src/icons/fonts/acorex-icons.svg +70 -70
- package/src/icons/style.css +210 -210
- package/src/icons/style.scss +335 -335
- package/src/icons/variables.scss +65 -65
- package/src/mixins/_media.scss +27 -27
- package/src/mixins/_util.scss +20 -20
- package/src/mixins/index.scss +1 -1
- package/src/shared/_actionsheet.scss +40 -40
- package/src/shared/_check-box.scss +42 -42
- package/src/shared/_decoration.scss +45 -45
- package/src/shared/_drop-down.scss +155 -155
- package/src/shared/_editor-container.scss +168 -168
- package/src/shared/_general-button.scss +42 -42
- package/src/shared/_inputs.scss +12 -12
- package/src/shared/_list.scss +144 -144
- package/src/shared/_radio.scss +38 -38
- package/src/shared/_skeleton.scss +26 -26
- package/src/shared/_table.scss +111 -111
- package/src/shared/_utils.scss +52 -52
- package/src/shared/index.scss +12 -12
- package/src/themes/default copy.scss +129 -129
- package/src/themes/default.scss +142 -142
- package/src/utility/_mixins.scss +71 -71
- package/src/utility/index.scss +55 -55
- package/src/variables/_colors.scss +2 -2
- package/src/variables/_degrees.scss +1 -1
- package/src/variables/index.scss +1 -1
- package/tailwind.config.js +199 -183
package/src/themes/default.scss
CHANGED
@@ -1,142 +1,142 @@
|
|
1
|
-
:root {
|
2
|
-
--ax-size-base: 2.5rem;
|
3
|
-
--ax-size-default: var(--ax-size-base);
|
4
|
-
|
5
|
-
--ax-rounded-border-default: 0.375rem;
|
6
|
-
--ax-color-border-default: 224, 224, 224;
|
7
|
-
|
8
|
-
--ax-color-background-default: 250, 250, 250;
|
9
|
-
--ax-color-text-default: 18, 18, 18;
|
10
|
-
|
11
|
-
--ax-color-surface: 255, 255, 255;
|
12
|
-
--ax-color-surface-fore: 18, 18, 18;
|
13
|
-
|
14
|
-
--ax-color-on-surface: 244, 244, 244;
|
15
|
-
--ax-color-on-surface-fore: 20, 20, 20;
|
16
|
-
|
17
|
-
--ax-color-input-surface: 255, 255, 255;
|
18
|
-
--ax-color-input-surface-fore: 18, 18, 18;
|
19
|
-
|
20
|
-
--ax-color-ghost-fore: 30, 41, 59;
|
21
|
-
--ax-color-ghost-50: 247, 248, 250;
|
22
|
-
--ax-color-ghost-100: 235, 238, 242;
|
23
|
-
--ax-color-ghost-200: 221, 226, 233;
|
24
|
-
--ax-color-ghost-300: 207, 214, 224;
|
25
|
-
--ax-color-ghost-400: 197, 206, 217;
|
26
|
-
--ax-color-ghost-500: 187, 197, 210;
|
27
|
-
--ax-color-ghost-600: 181, 191, 205;
|
28
|
-
--ax-color-ghost-700: 172, 184, 199;
|
29
|
-
--ax-color-ghost-800: 164, 176, 193;
|
30
|
-
--ax-color-ghost-900: 150, 163, 182;
|
31
|
-
|
32
|
-
--ax-color-primary-fore: 255, 255, 255;
|
33
|
-
--ax-color-primary-50: 239, 246, 255;
|
34
|
-
--ax-color-primary-100: 219, 234, 254;
|
35
|
-
--ax-color-primary-200: 191, 219, 254;
|
36
|
-
--ax-color-primary-300: 147, 197, 253;
|
37
|
-
--ax-color-primary-400: 96, 165, 250;
|
38
|
-
--ax-color-primary-500: 59, 130, 246;
|
39
|
-
--ax-color-primary-600: 37, 99, 235;
|
40
|
-
--ax-color-primary-700: 29, 78, 216;
|
41
|
-
--ax-color-primary-800: 30, 64, 175;
|
42
|
-
--ax-color-primary-900: 30, 58, 138;
|
43
|
-
|
44
|
-
--ax-color-secondary-fore: 255, 255, 255;
|
45
|
-
--ax-color-secondary-50: 233, 234, 236;
|
46
|
-
--ax-color-secondary-100: 200, 203, 208;
|
47
|
-
--ax-color-secondary-200: 164, 169, 176;
|
48
|
-
--ax-color-secondary-300: 128, 134, 144;
|
49
|
-
--ax-color-secondary-400: 100, 108, 121;
|
50
|
-
--ax-color-secondary-500: 73, 82, 97;
|
51
|
-
--ax-color-secondary-600: 66, 75, 89;
|
52
|
-
--ax-color-secondary-700: 57, 65, 79;
|
53
|
-
--ax-color-secondary-800: 49, 56, 69;
|
54
|
-
--ax-color-secondary-900: 33, 40, 51;
|
55
|
-
|
56
|
-
--ax-color-success-fore: 255, 255, 255;
|
57
|
-
--ax-color-success-50: 236, 253, 245;
|
58
|
-
--ax-color-success-100: 209, 250, 229;
|
59
|
-
--ax-color-success-200: 167, 243, 208;
|
60
|
-
--ax-color-success-300: 110, 231, 183;
|
61
|
-
--ax-color-success-400: 52, 211, 153;
|
62
|
-
--ax-color-success-500: 16, 185, 129;
|
63
|
-
--ax-color-success-600: 5, 150, 105;
|
64
|
-
--ax-color-success-700: 4, 120, 87;
|
65
|
-
--ax-color-success-800: 6, 95, 70;
|
66
|
-
--ax-color-success-900: 6, 78, 59;
|
67
|
-
|
68
|
-
--ax-color-danger-fore: 255, 255, 255;
|
69
|
-
--ax-color-danger-50: 254, 242, 242;
|
70
|
-
--ax-color-danger-100: 254, 226, 226;
|
71
|
-
--ax-color-danger-200: 254, 202, 202;
|
72
|
-
--ax-color-danger-300: 252, 165, 165;
|
73
|
-
--ax-color-danger-400: 248, 113, 113;
|
74
|
-
--ax-color-danger-500: 239, 68, 68;
|
75
|
-
--ax-color-danger-600: 220, 38, 38;
|
76
|
-
--ax-color-danger-700: 185, 28, 28;
|
77
|
-
--ax-color-danger-800: 153, 27, 27;
|
78
|
-
--ax-color-danger-900: 127, 29, 29;
|
79
|
-
|
80
|
-
--ax-color-warning-fore: 120, 53, 15;
|
81
|
-
--ax-color-warning-50: 255, 248, 225;
|
82
|
-
--ax-color-warning-100: 255, 236, 179;
|
83
|
-
--ax-color-warning-200: 255, 224, 130;
|
84
|
-
--ax-color-warning-300: 255, 213, 79;
|
85
|
-
--ax-color-warning-400: 255, 202, 40;
|
86
|
-
--ax-color-warning-500: 255, 193, 7;
|
87
|
-
--ax-color-warning-600: 255, 179, 0;
|
88
|
-
--ax-color-warning-700: 255, 160, 0;
|
89
|
-
--ax-color-warning-800: 255, 143, 0;
|
90
|
-
--ax-color-warning-900: 255, 111, 0;
|
91
|
-
|
92
|
-
--ax-color-info-fore: 255, 255, 255;
|
93
|
-
--ax-color-info-50: 226, 244, 252;
|
94
|
-
--ax-color-info-100: 183, 228, 248;
|
95
|
-
--ax-color-info-200: 135, 210, 244;
|
96
|
-
--ax-color-info-300: 86, 192, 240;
|
97
|
-
--ax-color-info-400: 50, 179, 236;
|
98
|
-
--ax-color-info-500: 14, 165, 233;
|
99
|
-
--ax-color-info-600: 12, 157, 230;
|
100
|
-
--ax-color-info-700: 10, 147, 227;
|
101
|
-
--ax-color-info-800: 8, 138, 223;
|
102
|
-
--ax-color-info-900: 4, 121, 217;
|
103
|
-
}
|
104
|
-
|
105
|
-
.ax-dark {
|
106
|
-
--ax-color-background-default: 27, 27, 27;
|
107
|
-
--ax-color-text-default: 224, 224, 224;
|
108
|
-
--ax-color-border-default: 255, 255, 255, 0.13;
|
109
|
-
|
110
|
-
--ax-color-surface: 50, 50, 50;
|
111
|
-
--ax-color-surface-fore: 224, 224, 224;
|
112
|
-
|
113
|
-
--ax-color-on-surface: 62, 62, 62;
|
114
|
-
--ax-color-on-surface-fore: 224, 224, 224;
|
115
|
-
|
116
|
-
--ax-color-input-surface: 0, 0, 0, 0.26;
|
117
|
-
--ax-color-input-surface-fore: 224, 224, 224;
|
118
|
-
|
119
|
-
--ax-color-ghost-fore: 255, 255, 255;
|
120
|
-
--ax-color-ghost-50: 232, 233, 234;
|
121
|
-
--ax-color-ghost-100: 199, 200, 203;
|
122
|
-
--ax-color-ghost-200: 161, 163, 169;
|
123
|
-
--ax-color-ghost-300: 123, 126, 134;
|
124
|
-
--ax-color-ghost-400: 95, 99, 108;
|
125
|
-
--ax-color-ghost-500: 67, 71, 82;
|
126
|
-
--ax-color-ghost-600: 61, 64, 75;
|
127
|
-
--ax-color-ghost-700: 52, 55, 65;
|
128
|
-
--ax-color-ghost-800: 44, 47, 56;
|
129
|
-
--ax-color-ghost-900: 30, 32, 40;
|
130
|
-
|
131
|
-
// --ax-color-primary-fore : 25, 41, 63;
|
132
|
-
// --ax-color-primary-50 : 243, 248, 255;
|
133
|
-
// --ax-color-primary-100 : 226, 236, 254;
|
134
|
-
// --ax-color-primary-200 : 206, 224, 253;
|
135
|
-
// --ax-color-primary-300 : 186, 212, 252;
|
136
|
-
// --ax-color-primary-400 : 172, 202, 252;
|
137
|
-
// --ax-color-primary-500 : 157, 193, 251;
|
138
|
-
// --ax-color-primary-600 : 149, 187, 250;
|
139
|
-
// --ax-color-primary-700 : 139, 179, 250;
|
140
|
-
// --ax-color-primary-800 : 129, 171, 249;
|
141
|
-
// --ax-color-primary-900 : 111, 158, 248
|
142
|
-
}
|
1
|
+
:root {
|
2
|
+
--ax-size-base: 2.5rem;
|
3
|
+
--ax-size-default: var(--ax-size-base);
|
4
|
+
|
5
|
+
--ax-rounded-border-default: 0.375rem;
|
6
|
+
--ax-color-border-default: 224, 224, 224;
|
7
|
+
|
8
|
+
--ax-color-background-default: 250, 250, 250;
|
9
|
+
--ax-color-text-default: 18, 18, 18;
|
10
|
+
|
11
|
+
--ax-color-surface: 255, 255, 255;
|
12
|
+
--ax-color-surface-fore: 18, 18, 18;
|
13
|
+
|
14
|
+
--ax-color-on-surface: 244, 244, 244;
|
15
|
+
--ax-color-on-surface-fore: 20, 20, 20;
|
16
|
+
|
17
|
+
--ax-color-input-surface: 255, 255, 255;
|
18
|
+
--ax-color-input-surface-fore: 18, 18, 18;
|
19
|
+
|
20
|
+
--ax-color-ghost-fore: 30, 41, 59;
|
21
|
+
--ax-color-ghost-50: 247, 248, 250;
|
22
|
+
--ax-color-ghost-100: 235, 238, 242;
|
23
|
+
--ax-color-ghost-200: 221, 226, 233;
|
24
|
+
--ax-color-ghost-300: 207, 214, 224;
|
25
|
+
--ax-color-ghost-400: 197, 206, 217;
|
26
|
+
--ax-color-ghost-500: 187, 197, 210;
|
27
|
+
--ax-color-ghost-600: 181, 191, 205;
|
28
|
+
--ax-color-ghost-700: 172, 184, 199;
|
29
|
+
--ax-color-ghost-800: 164, 176, 193;
|
30
|
+
--ax-color-ghost-900: 150, 163, 182;
|
31
|
+
|
32
|
+
--ax-color-primary-fore: 255, 255, 255;
|
33
|
+
--ax-color-primary-50: 239, 246, 255;
|
34
|
+
--ax-color-primary-100: 219, 234, 254;
|
35
|
+
--ax-color-primary-200: 191, 219, 254;
|
36
|
+
--ax-color-primary-300: 147, 197, 253;
|
37
|
+
--ax-color-primary-400: 96, 165, 250;
|
38
|
+
--ax-color-primary-500: 59, 130, 246;
|
39
|
+
--ax-color-primary-600: 37, 99, 235;
|
40
|
+
--ax-color-primary-700: 29, 78, 216;
|
41
|
+
--ax-color-primary-800: 30, 64, 175;
|
42
|
+
--ax-color-primary-900: 30, 58, 138;
|
43
|
+
|
44
|
+
--ax-color-secondary-fore: 255, 255, 255;
|
45
|
+
--ax-color-secondary-50: 233, 234, 236;
|
46
|
+
--ax-color-secondary-100: 200, 203, 208;
|
47
|
+
--ax-color-secondary-200: 164, 169, 176;
|
48
|
+
--ax-color-secondary-300: 128, 134, 144;
|
49
|
+
--ax-color-secondary-400: 100, 108, 121;
|
50
|
+
--ax-color-secondary-500: 73, 82, 97;
|
51
|
+
--ax-color-secondary-600: 66, 75, 89;
|
52
|
+
--ax-color-secondary-700: 57, 65, 79;
|
53
|
+
--ax-color-secondary-800: 49, 56, 69;
|
54
|
+
--ax-color-secondary-900: 33, 40, 51;
|
55
|
+
|
56
|
+
--ax-color-success-fore: 255, 255, 255;
|
57
|
+
--ax-color-success-50: 236, 253, 245;
|
58
|
+
--ax-color-success-100: 209, 250, 229;
|
59
|
+
--ax-color-success-200: 167, 243, 208;
|
60
|
+
--ax-color-success-300: 110, 231, 183;
|
61
|
+
--ax-color-success-400: 52, 211, 153;
|
62
|
+
--ax-color-success-500: 16, 185, 129;
|
63
|
+
--ax-color-success-600: 5, 150, 105;
|
64
|
+
--ax-color-success-700: 4, 120, 87;
|
65
|
+
--ax-color-success-800: 6, 95, 70;
|
66
|
+
--ax-color-success-900: 6, 78, 59;
|
67
|
+
|
68
|
+
--ax-color-danger-fore: 255, 255, 255;
|
69
|
+
--ax-color-danger-50: 254, 242, 242;
|
70
|
+
--ax-color-danger-100: 254, 226, 226;
|
71
|
+
--ax-color-danger-200: 254, 202, 202;
|
72
|
+
--ax-color-danger-300: 252, 165, 165;
|
73
|
+
--ax-color-danger-400: 248, 113, 113;
|
74
|
+
--ax-color-danger-500: 239, 68, 68;
|
75
|
+
--ax-color-danger-600: 220, 38, 38;
|
76
|
+
--ax-color-danger-700: 185, 28, 28;
|
77
|
+
--ax-color-danger-800: 153, 27, 27;
|
78
|
+
--ax-color-danger-900: 127, 29, 29;
|
79
|
+
|
80
|
+
--ax-color-warning-fore: 120, 53, 15;
|
81
|
+
--ax-color-warning-50: 255, 248, 225;
|
82
|
+
--ax-color-warning-100: 255, 236, 179;
|
83
|
+
--ax-color-warning-200: 255, 224, 130;
|
84
|
+
--ax-color-warning-300: 255, 213, 79;
|
85
|
+
--ax-color-warning-400: 255, 202, 40;
|
86
|
+
--ax-color-warning-500: 255, 193, 7;
|
87
|
+
--ax-color-warning-600: 255, 179, 0;
|
88
|
+
--ax-color-warning-700: 255, 160, 0;
|
89
|
+
--ax-color-warning-800: 255, 143, 0;
|
90
|
+
--ax-color-warning-900: 255, 111, 0;
|
91
|
+
|
92
|
+
--ax-color-info-fore: 255, 255, 255;
|
93
|
+
--ax-color-info-50: 226, 244, 252;
|
94
|
+
--ax-color-info-100: 183, 228, 248;
|
95
|
+
--ax-color-info-200: 135, 210, 244;
|
96
|
+
--ax-color-info-300: 86, 192, 240;
|
97
|
+
--ax-color-info-400: 50, 179, 236;
|
98
|
+
--ax-color-info-500: 14, 165, 233;
|
99
|
+
--ax-color-info-600: 12, 157, 230;
|
100
|
+
--ax-color-info-700: 10, 147, 227;
|
101
|
+
--ax-color-info-800: 8, 138, 223;
|
102
|
+
--ax-color-info-900: 4, 121, 217;
|
103
|
+
}
|
104
|
+
|
105
|
+
.ax-dark {
|
106
|
+
--ax-color-background-default: 27, 27, 27;
|
107
|
+
--ax-color-text-default: 224, 224, 224;
|
108
|
+
--ax-color-border-default: 255, 255, 255, 0.13;
|
109
|
+
|
110
|
+
--ax-color-surface: 50, 50, 50;
|
111
|
+
--ax-color-surface-fore: 224, 224, 224;
|
112
|
+
|
113
|
+
--ax-color-on-surface: 62, 62, 62;
|
114
|
+
--ax-color-on-surface-fore: 224, 224, 224;
|
115
|
+
|
116
|
+
--ax-color-input-surface: 0, 0, 0, 0.26;
|
117
|
+
--ax-color-input-surface-fore: 224, 224, 224;
|
118
|
+
|
119
|
+
--ax-color-ghost-fore: 255, 255, 255;
|
120
|
+
--ax-color-ghost-50: 232, 233, 234;
|
121
|
+
--ax-color-ghost-100: 199, 200, 203;
|
122
|
+
--ax-color-ghost-200: 161, 163, 169;
|
123
|
+
--ax-color-ghost-300: 123, 126, 134;
|
124
|
+
--ax-color-ghost-400: 95, 99, 108;
|
125
|
+
--ax-color-ghost-500: 67, 71, 82;
|
126
|
+
--ax-color-ghost-600: 61, 64, 75;
|
127
|
+
--ax-color-ghost-700: 52, 55, 65;
|
128
|
+
--ax-color-ghost-800: 44, 47, 56;
|
129
|
+
--ax-color-ghost-900: 30, 32, 40;
|
130
|
+
|
131
|
+
// --ax-color-primary-fore : 25, 41, 63;
|
132
|
+
// --ax-color-primary-50 : 243, 248, 255;
|
133
|
+
// --ax-color-primary-100 : 226, 236, 254;
|
134
|
+
// --ax-color-primary-200 : 206, 224, 253;
|
135
|
+
// --ax-color-primary-300 : 186, 212, 252;
|
136
|
+
// --ax-color-primary-400 : 172, 202, 252;
|
137
|
+
// --ax-color-primary-500 : 157, 193, 251;
|
138
|
+
// --ax-color-primary-600 : 149, 187, 250;
|
139
|
+
// --ax-color-primary-700 : 139, 179, 250;
|
140
|
+
// --ax-color-primary-800 : 129, 171, 249;
|
141
|
+
// --ax-color-primary-900 : 111, 158, 248
|
142
|
+
}
|
package/src/utility/_mixins.scss
CHANGED
@@ -1,71 +1,71 @@
|
|
1
|
-
@mixin screen($breakpoint) {
|
2
|
-
// $breakpoint is simply a variable that can have several values
|
3
|
-
|
4
|
-
@if $breakpoint == extraSmall {
|
5
|
-
// Media query for 320px and less
|
6
|
-
@media (max-width: 320px) {
|
7
|
-
@content;
|
8
|
-
}
|
9
|
-
@media (min-width: 321px) and (max-width: 480px) {
|
10
|
-
@content;
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
@if $breakpoint == tablet {
|
15
|
-
// here `laptop` is the value of $breakpoint
|
16
|
-
// when call laptop, we mean the following piece of code
|
17
|
-
|
18
|
-
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
|
19
|
-
@content;
|
20
|
-
}
|
21
|
-
}
|
22
|
-
|
23
|
-
@if $breakpoint == mobile {
|
24
|
-
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
25
|
-
@content;
|
26
|
-
}
|
27
|
-
}
|
28
|
-
|
29
|
-
@if $breakpoint == laptop {
|
30
|
-
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
|
31
|
-
@content;
|
32
|
-
}
|
33
|
-
}
|
34
|
-
}
|
35
|
-
|
36
|
-
|
37
|
-
@mixin responsive($media){
|
38
|
-
@if $media == 'phone'{
|
39
|
-
@media (max-width: 599px) { @content; }
|
40
|
-
}
|
41
|
-
@if $media == 'tablet'{
|
42
|
-
@media (min-width: 600px) { @content; }
|
43
|
-
}
|
44
|
-
@if $media == 'tablet-landscape'{
|
45
|
-
@media (min-width: 900px) { @content; }
|
46
|
-
}
|
47
|
-
@if $media == 'desktop'{
|
48
|
-
@media (min-width: 1200px) { @content; }
|
49
|
-
}
|
50
|
-
@if $media == 'desktop-large'{
|
51
|
-
@media (min-width: 1800px) { @content; }
|
52
|
-
}
|
53
|
-
}
|
54
|
-
|
55
|
-
@mixin color-look-generator() {
|
56
|
-
$colors: ("primary", "secondary", "success", "warning", "danger", "info", "light", "dark");
|
57
|
-
$looks: ("default", "outline", "twotone", "blank");
|
58
|
-
@each $c in $colors {
|
59
|
-
@each $l in $looks {
|
60
|
-
&.ax-#{$c}-#{$l} {
|
61
|
-
@include color-look($c, $l);
|
62
|
-
}
|
63
|
-
}
|
64
|
-
}
|
65
|
-
}
|
66
|
-
|
67
|
-
@mixin rtl {
|
68
|
-
.ax-rtl {
|
69
|
-
@content;
|
70
|
-
}
|
71
|
-
}
|
1
|
+
@mixin screen($breakpoint) {
|
2
|
+
// $breakpoint is simply a variable that can have several values
|
3
|
+
|
4
|
+
@if $breakpoint == extraSmall {
|
5
|
+
// Media query for 320px and less
|
6
|
+
@media (max-width: 320px) {
|
7
|
+
@content;
|
8
|
+
}
|
9
|
+
@media (min-width: 321px) and (max-width: 480px) {
|
10
|
+
@content;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $breakpoint == tablet {
|
15
|
+
// here `laptop` is the value of $breakpoint
|
16
|
+
// when call laptop, we mean the following piece of code
|
17
|
+
|
18
|
+
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
|
19
|
+
@content;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
@if $breakpoint == mobile {
|
24
|
+
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
25
|
+
@content;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
@if $breakpoint == laptop {
|
30
|
+
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
|
31
|
+
@content;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
|
37
|
+
@mixin responsive($media){
|
38
|
+
@if $media == 'phone'{
|
39
|
+
@media (max-width: 599px) { @content; }
|
40
|
+
}
|
41
|
+
@if $media == 'tablet'{
|
42
|
+
@media (min-width: 600px) { @content; }
|
43
|
+
}
|
44
|
+
@if $media == 'tablet-landscape'{
|
45
|
+
@media (min-width: 900px) { @content; }
|
46
|
+
}
|
47
|
+
@if $media == 'desktop'{
|
48
|
+
@media (min-width: 1200px) { @content; }
|
49
|
+
}
|
50
|
+
@if $media == 'desktop-large'{
|
51
|
+
@media (min-width: 1800px) { @content; }
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
@mixin color-look-generator() {
|
56
|
+
$colors: ("primary", "secondary", "success", "warning", "danger", "info", "light", "dark");
|
57
|
+
$looks: ("default", "outline", "twotone", "blank");
|
58
|
+
@each $c in $colors {
|
59
|
+
@each $l in $looks {
|
60
|
+
&.ax-#{$c}-#{$l} {
|
61
|
+
@include color-look($c, $l);
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
@mixin rtl {
|
68
|
+
.ax-rtl {
|
69
|
+
@content;
|
70
|
+
}
|
71
|
+
}
|
package/src/utility/index.scss
CHANGED
@@ -1,55 +1,55 @@
|
|
1
|
-
// .ax-xs {
|
2
|
-
// --ax-size-default: 2rem;
|
3
|
-
// font-size: 0.75rem;
|
4
|
-
// * {
|
5
|
-
// font-size: 0.75rem;
|
6
|
-
// }
|
7
|
-
// }
|
8
|
-
// .ax-sm {
|
9
|
-
// --ax-size-default: 2.25rem;
|
10
|
-
// font-size: 0.875rem;
|
11
|
-
// * {
|
12
|
-
// font-size: 0.875rem;
|
13
|
-
// }
|
14
|
-
// }
|
15
|
-
// .ax-md {
|
16
|
-
// --ax-size-default: 2.5rem;
|
17
|
-
// font-size: 0.875rem;
|
18
|
-
// }
|
19
|
-
// .ax-lg {
|
20
|
-
// --ax-size-default: 3rem;
|
21
|
-
// font-size: 1rem;
|
22
|
-
// * {
|
23
|
-
// font-size: 1rem;
|
24
|
-
// }
|
25
|
-
// }
|
26
|
-
// .ax-xl {
|
27
|
-
// --ax-size-default: 3.5rem;
|
28
|
-
// font-size: 1rem;
|
29
|
-
// * {
|
30
|
-
// font-size: 1rem;
|
31
|
-
// }
|
32
|
-
// }
|
33
|
-
.ax-xs {
|
34
|
-
--ax-size-default: calc(var(--ax-size-base) - 0.5rem);
|
35
|
-
}
|
36
|
-
|
37
|
-
.ax-sm {
|
38
|
-
--ax-size-default: calc(var(--ax-size-base) - 0.25rem);
|
39
|
-
}
|
40
|
-
|
41
|
-
.ax-md {
|
42
|
-
--ax-size-default: 2.5rem;
|
43
|
-
}
|
44
|
-
|
45
|
-
.ax-lg {
|
46
|
-
--ax-size-default: calc(var(--ax-size-base) + 0.5rem);
|
47
|
-
}
|
48
|
-
|
49
|
-
.ax-xl {
|
50
|
-
--ax-size-default: calc(var(--ax-size-base) - 1rem);
|
51
|
-
}
|
52
|
-
|
53
|
-
.ax-filp {
|
54
|
-
transform: scale(-1, 1);
|
55
|
-
}
|
1
|
+
// .ax-xs {
|
2
|
+
// --ax-size-default: 2rem;
|
3
|
+
// font-size: 0.75rem;
|
4
|
+
// * {
|
5
|
+
// font-size: 0.75rem;
|
6
|
+
// }
|
7
|
+
// }
|
8
|
+
// .ax-sm {
|
9
|
+
// --ax-size-default: 2.25rem;
|
10
|
+
// font-size: 0.875rem;
|
11
|
+
// * {
|
12
|
+
// font-size: 0.875rem;
|
13
|
+
// }
|
14
|
+
// }
|
15
|
+
// .ax-md {
|
16
|
+
// --ax-size-default: 2.5rem;
|
17
|
+
// font-size: 0.875rem;
|
18
|
+
// }
|
19
|
+
// .ax-lg {
|
20
|
+
// --ax-size-default: 3rem;
|
21
|
+
// font-size: 1rem;
|
22
|
+
// * {
|
23
|
+
// font-size: 1rem;
|
24
|
+
// }
|
25
|
+
// }
|
26
|
+
// .ax-xl {
|
27
|
+
// --ax-size-default: 3.5rem;
|
28
|
+
// font-size: 1rem;
|
29
|
+
// * {
|
30
|
+
// font-size: 1rem;
|
31
|
+
// }
|
32
|
+
// }
|
33
|
+
.ax-xs {
|
34
|
+
--ax-size-default: calc(var(--ax-size-base) - 0.5rem);
|
35
|
+
}
|
36
|
+
|
37
|
+
.ax-sm {
|
38
|
+
--ax-size-default: calc(var(--ax-size-base) - 0.25rem);
|
39
|
+
}
|
40
|
+
|
41
|
+
.ax-md {
|
42
|
+
--ax-size-default: 2.5rem;
|
43
|
+
}
|
44
|
+
|
45
|
+
.ax-lg {
|
46
|
+
--ax-size-default: calc(var(--ax-size-base) + 0.5rem);
|
47
|
+
}
|
48
|
+
|
49
|
+
.ax-xl {
|
50
|
+
--ax-size-default: calc(var(--ax-size-base) - 1rem);
|
51
|
+
}
|
52
|
+
|
53
|
+
.ax-filp {
|
54
|
+
transform: scale(-1, 1);
|
55
|
+
}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
$color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
|
2
|
-
$look_names: 'default', 'outline', 'blank';
|
1
|
+
$color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
|
2
|
+
$look_names: 'default', 'outline', 'blank';
|
@@ -1 +1 @@
|
|
1
|
-
$degrees: 45, 90, 130, 180;
|
1
|
+
$degrees: 45, 90, 130, 180;
|
package/src/variables/index.scss
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
@import "./colors";
|
1
|
+
@import "./colors";
|
2
2
|
@import "./degrees";
|