@acorex/styles 16.19.47 → 16.19.49

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 (2) hide show
  1. package/package.json +1 -1
  2. package/scss/master.scss +279 -291
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "16.19.47",
3
+ "version": "16.19.49",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/master.scss CHANGED
@@ -1,329 +1,317 @@
1
-
2
- @use "sass:meta";
3
- @use "./variables.scss" as varibles;
1
+ @use 'sass:meta';
2
+ @use './variables.scss' as varibles;
4
3
  :root {
5
- --ax-border-color: #e0f4e0;
6
- --ax-border-dark-color: rgba(34, 36, 38, 0.3);
7
- --ax-size: 7px;
8
- --ax-base-size: var(--ax-size);
9
- --ax-base-ratio: 6;
10
- --ax-overlay-full-width: 93;
11
-
12
- // Create Sizes
13
- @each $name,
14
- $size in varibles.$sizes {
15
- @if meta.type-of($size)=="map" {
16
-
17
- @each $subname,
18
- $variant in $size {
19
- @if $name=="" {
20
- --ax-size-#{$name}#{$subname}: #{$variant};
21
- }
22
-
23
- @else {
24
- --ax-size-#{$name}-#{$subname}: #{$variant};
25
- }
26
- }
4
+ --ax-border-color: #e0f4e0;
5
+ --ax-border-dark-color: rgba(34, 36, 38, 0.3);
6
+ --ax-size: 7px;
7
+ --ax-base-size: var(--ax-size);
8
+ --ax-base-ratio: 6;
9
+ --ax-overlay-full-width: 93;
10
+
11
+ // Create Sizes
12
+ @each $name, $size in varibles.$sizes {
13
+ @if meta.type-of($size) == 'map' {
14
+ @each $subname, $variant in $size {
15
+ @if $name== '' {
16
+ --ax-size-#{$name}#{$subname}: #{$variant};
17
+ } @else {
18
+ --ax-size-#{$name}-#{$subname}: #{$variant};
27
19
  }
20
+ }
28
21
  }
29
-
30
- // Create Colors
31
- @each $name,
32
- $color in varibles.$colors {
33
- @if meta.type-of($color)=="map" {
34
-
35
- @each $subname,
36
- $variant in $color {
37
- @if $subname=="" {
38
- --ax-#{$name}-#{varibles.$color-suffix}: #{$variant};
39
- }
40
-
41
- @else {
42
- --ax-#{$name}-#{$subname}-#{varibles.$color-suffix}: #{$variant};
43
- }
44
- }
45
- }
46
-
47
- @else {
48
- --ax-#{$name}-#{varibles.$color-suffix}: #{$color};
22
+ }
23
+
24
+ // Create Colors
25
+ @each $name, $color in varibles.$colors {
26
+ @if meta.type-of($color) == 'map' {
27
+ @each $subname, $variant in $color {
28
+ @if $subname== '' {
29
+ --ax-#{$name}-#{varibles.$color-suffix}: #{$variant};
30
+ } @else {
31
+ --ax-#{$name}-#{$subname}-#{varibles.$color-suffix}: #{$variant};
49
32
  }
33
+ }
34
+ } @else {
35
+ --ax-#{$name}-#{varibles.$color-suffix}: #{$color};
50
36
  }
37
+ }
51
38
  }
52
39
 
53
- @each $name,
54
- $color in varibles.$colors {
55
- @if meta.type-of($color)=="map" {
56
-
57
- @each $subname,
58
- $variant in $color {
59
- @if $subname=="" {
60
- .ax-text-#{$name} {
61
- color: var(--ax-#{$name}-#{varibles.$color-suffix});
62
- }
63
-
64
- .ax-bg-#{$name} {
65
- background: var(--ax-#{$name}-#{varibles.$color-suffix});
66
- }
67
-
68
- .ax-border-#{$name} {
69
- border-color: var(--ax-#{$name}-#{varibles.$color-suffix});
70
- }
71
- }
72
-
73
- @else {
74
- .ax-text-#{$name}-#{$subname} {
75
- color: var(--ax-#{$name}-#{$subname}-#{varibles.$color-suffix});
76
- }
77
-
78
- .ax-bg-#{$name}-#{$subname} {
79
- background: var(--ax-#{$name}-#{$subname}-#{varibles.$color-suffix});
80
- }
40
+ @each $name, $color in varibles.$colors {
41
+ @if meta.type-of($color) == 'map' {
42
+ @each $subname, $variant in $color {
43
+ @if $subname== '' {
44
+ .ax-text-#{$name} {
45
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
46
+ }
81
47
 
82
- .ax-border-#{$name}-#{$subname} {
83
- background: var(--ax-#{$name}-#{$subname}-#{varibles.$color-suffix});
84
- }
85
- }
48
+ .ax-bg-#{$name} {
49
+ background: var(--ax-#{$name}-#{varibles.$color-suffix});
86
50
  }
87
- }
88
- }
89
51
 
90
- // Sizes
91
- .ax {
92
- &.form-control,&.form-group {
93
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
94
- // padding: 0 0.5rem;
95
- font-size: 1rem;
96
- font-weight: 500;
97
-
98
- // &.sm,
99
- // &.md,
100
- // &.lg {
101
- // &.ax-button-icon {
102
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
103
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
104
- // }
105
- // }
106
- &.sm {
107
- --ax-base-size: calc(var(--ax-size) - 2px);
108
- font-size: 0.875rem;
52
+ .ax-border-#{$name} {
53
+ border-color: var(--ax-#{$name}-#{varibles.$color-suffix});
54
+ }
55
+ } @else {
56
+ .ax-text-#{$name}-#{$subname} {
57
+ color: var(--ax-#{$name}-#{$subname}-#{varibles.$color-suffix});
109
58
  }
110
59
 
111
- &.md {
112
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
113
- font-size: 1rem;
114
- font-weight: 500;
60
+ .ax-bg-#{$name}-#{$subname} {
61
+ background: var(--ax-#{$name}-#{$subname}-#{varibles.$color-suffix});
115
62
  }
116
63
 
117
- &.lg {
118
- --ax-base-size: calc(var(--ax-size) + 2px);
119
- font-size: 1.5rem;
64
+ .ax-border-#{$name}-#{$subname} {
65
+ background: var(--ax-#{$name}-#{$subname}-#{varibles.$color-suffix});
120
66
  }
67
+ }
121
68
  }
69
+ }
122
70
  }
123
71
 
72
+ // Sizes
124
73
  .ax {
74
+ &.form-control {
75
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
76
+ // padding: 0 0.5rem;
77
+ font-size: 1rem;
78
+ font-weight: 500;
79
+
80
+ // &.sm,
81
+ // &.md,
82
+ // &.lg {
83
+ // &.ax-button-icon {
84
+ // width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
85
+ // height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
86
+ // }
87
+ // }
125
88
  &.sm {
126
- --ax-base-size: calc(var(--ax-size) - 2px);
89
+ --ax-base-size: calc(var(--ax-size) - 2px);
90
+ font-size: 0.875rem;
91
+ }
92
+
93
+ &.md {
94
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
95
+ font-size: 1rem;
96
+ font-weight: 500;
127
97
  }
128
98
 
129
99
  &.lg {
130
- --ax-base-size: calc(var(--ax-size) + 2px);
100
+ --ax-base-size: calc(var(--ax-size) + 2px);
101
+ font-size: 1.5rem;
131
102
  }
103
+ }
132
104
  }
133
105
 
134
- @each $name,
135
- $size in varibles.$sizes {
136
- @if meta.type-of($size)=="map" {
106
+ .ax {
107
+ &.sm {
108
+ --ax-base-size: calc(var(--ax-size) - 2px);
109
+ }
137
110
 
138
- @each $subname,
139
- $variant in $size {
140
- @if $name=="" {
141
- .ax-mrg-#{$subname} {
142
- margin: var(--ax-size-#{$subname}) !important;
143
- }
111
+ &.lg {
112
+ --ax-base-size: calc(var(--ax-size) + 2px);
113
+ }
114
+ }
144
115
 
145
- .ax-pad-#{$subname} {
146
- padding: var(--ax-size-#{$subname}) !important;
147
- }
148
- }
116
+ @each $name, $size in varibles.$sizes {
117
+ @if meta.type-of($size) == 'map' {
118
+ @each $subname, $variant in $size {
119
+ @if $name== '' {
120
+ .ax-mrg-#{$subname} {
121
+ margin: var(--ax-size-#{$subname}) !important;
149
122
  }
123
+
124
+ .ax-pad-#{$subname} {
125
+ padding: var(--ax-size-#{$subname}) !important;
126
+ }
127
+ }
150
128
  }
129
+ }
151
130
  }
152
131
 
153
132
  // Create Classes
154
133
  @each $name, $color in varibles.$colors {
155
- .ax {
156
- @if meta.type-of($color) == "map" {
157
-
158
- @each $subname, $variant in $color {
159
- @if $subname == "" {
160
- &.bg-#{$name} {
161
- background-color: var(--ax-#{$name}-#{varibles.$color-suffix});
162
- }
163
-
164
- &.bg-light-#{$name} {
165
- background-color: var(--ax-#{$name}-light-#{varibles.$color-suffix});
166
- }
167
-
168
- &.bg-dark-#{$name} {
169
- background-color: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
170
- }
171
-
172
- &.bg-lighten-#{$name} {
173
- background-color: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
174
- }
175
-
176
- &.text-#{$name} {
177
- color: var(--ax-#{$name}-#{varibles.$color-suffix});
178
- }
179
-
180
- &.lighten-#{$name} {
181
- color: var(--ax-#{$name}-#{varibles.$color-suffix});
182
- background-color: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
183
- }
184
-
185
- &.#{$name} {
186
- background: var(--ax-#{$name}-#{varibles.$color-suffix});
187
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
188
-
189
- &:hover,
190
- &:focus {
191
- background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
192
- }
193
-
194
- &:active {
195
- background: var(--ax-#{$name}-light-#{varibles.$color-suffix});
196
- }
197
-
198
- &.selected {
199
- background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
200
- }
201
-
202
- &.disabled {
203
- cursor: not-allowed;
204
- background: var(--ax-gray-light-color) !important;
205
- color: var(--ax-gray-fore-color) !important;
206
- border-color: var(--ax-gray-light-color) !important;
207
- }
208
-
209
- &.twotone {
210
- background: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
211
- border-color: transparent;
212
-
213
- @if ($name =="light") {
214
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
215
- }
216
-
217
- @else {
218
- color: var(--ax-#{$name}-#{varibles.$color-suffix});
219
- }
220
-
221
- &:hover:not(.disabled),
222
- &:focus:not(.disabled) {
223
- background: var(--ax-#{$name}-light-#{varibles.$color-suffix});
224
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
225
- }
226
-
227
- &:active {
228
- background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
229
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
230
- }
231
-
232
- &.selected {
233
- background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
234
- color: var (--ax-#{$name}-fore-#{varibles.$color-suffix});
235
- }
236
- }
237
-
238
- &.outline {
239
- background: transparent;
240
- border: 1px solid;
241
- border-color: var(--ax-#{$name}-#{varibles.$color-suffix});
242
-
243
- @if ($name =="light") {
244
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
245
- }
246
-
247
- @else {
248
- color: var(--ax-#{$name}-#{varibles.$color-suffix});
249
- }
250
-
251
- &:hover:not(.disabled),
252
- &:focus:not(.disabled) {
253
- background: var(--ax-#{$name}-#{varibles.$color-suffix});
254
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
255
- }
256
-
257
- &:active {
258
- background: var(--ax-#{$name}-light-#{varibles.$color-suffix});
259
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
260
- border-color: var(--ax-#{$name}-light-#{varibles.$color-suffix});
261
- }
262
-
263
- &.selected {
264
- background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
265
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
266
- border-color: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
267
- }
268
- }
269
-
270
- &.blank {
271
- background: transparent;
272
- border-color: transparent;
273
-
274
- @if ($name =="light") {
275
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
276
- }
277
-
278
- @else {
279
- color: var(--ax-#{$name}-#{varibles.$color-suffix});
280
- }
281
-
282
- &:hover,
283
- &:focus {
284
- @if ($name =="light") {
285
- background: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
286
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
287
- }
288
-
289
- @else {
290
- background: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
291
- color: var(--ax-#{$name}-#{varibles.$color-suffix});
292
- }
293
- }
294
-
295
- &:active {
296
- @if ($name =="light") {
297
- background: var(--ax-#{$name}-trans-dark-#{varibles.$color-suffix});
298
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
299
- }
300
-
301
- @else {
302
- background: var(--ax-#{$name}-trans-dark-#{varibles.$color-suffix});
303
- color: var(--ax-#{$name}-#{varibles.$color-suffix});
304
- }
305
- }
306
-
307
- &.selected {
308
- @if ($name =="light") {
309
- background: var(--ax-#{$name}-trans-dark-#{varibles.$color-suffix});
310
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
311
- }
312
-
313
- @else {
314
- background: var(--ax-#{$name}-trans-dark-#{varibles.$color-suffix});
315
- color: var(--ax-#{$name}-#{varibles.$color-suffix});
316
- }
317
- }
318
- }
319
-
320
- &.panel {
321
- color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
322
- background-color: var(--ax-#{$name}-#{varibles.$color-suffix});
323
- }
324
- }
134
+ .ax {
135
+ @if meta.type-of($color) == 'map' {
136
+ @each $subname, $variant in $color {
137
+ @if $subname == '' {
138
+ &.bg-#{$name} {
139
+ background-color: var(--ax-#{$name}-#{varibles.$color-suffix});
140
+ }
141
+
142
+ &.bg-light-#{$name} {
143
+ background-color: var(
144
+ --ax-#{$name}-light-#{varibles.$color-suffix}
145
+ );
146
+ }
147
+
148
+ &.bg-dark-#{$name} {
149
+ background-color: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
150
+ }
151
+
152
+ &.bg-lighten-#{$name} {
153
+ background-color: var(
154
+ --ax-#{$name}-trans-light-#{varibles.$color-suffix}
155
+ );
156
+ }
157
+
158
+ &.text-#{$name} {
159
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
160
+ }
161
+
162
+ &.lighten-#{$name} {
163
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
164
+ background-color: var(
165
+ --ax-#{$name}-trans-light-#{varibles.$color-suffix}
166
+ );
167
+ }
168
+
169
+ &.#{$name} {
170
+ background: var(--ax-#{$name}-#{varibles.$color-suffix});
171
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
172
+
173
+ &:hover,
174
+ &:focus {
175
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
176
+ }
177
+
178
+ &:active {
179
+ background: var(--ax-#{$name}-light-#{varibles.$color-suffix});
180
+ }
181
+
182
+ &.selected {
183
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
184
+ }
185
+
186
+ &.disabled {
187
+ cursor: not-allowed;
188
+ background: var(--ax-gray-light-color) !important;
189
+ color: var(--ax-gray-fore-color) !important;
190
+ border-color: var(--ax-gray-light-color) !important;
191
+ }
192
+
193
+ &.twotone {
194
+ background: var(
195
+ --ax-#{$name}-trans-light-#{varibles.$color-suffix}
196
+ );
197
+ border-color: transparent;
198
+
199
+ @if ($name == 'light') {
200
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
201
+ } @else {
202
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
203
+ }
204
+
205
+ &:hover:not(.disabled),
206
+ &:focus:not(.disabled) {
207
+ background: var(--ax-#{$name}-light-#{varibles.$color-suffix});
208
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
209
+ }
210
+
211
+ &:active {
212
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
213
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
214
+ }
215
+
216
+ &.selected {
217
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
218
+ color: var (--ax-#{$name}-fore-#{varibles.$color-suffix});
219
+ }
220
+ }
221
+
222
+ &.outline {
223
+ background: transparent;
224
+ border: 1px solid;
225
+ border-color: var(--ax-#{$name}-#{varibles.$color-suffix});
226
+
227
+ @if ($name == 'light') {
228
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
229
+ } @else {
230
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
231
+ }
232
+
233
+ &:hover:not(.disabled),
234
+ &:focus:not(.disabled) {
235
+ background: var(--ax-#{$name}-#{varibles.$color-suffix});
236
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
237
+ }
238
+
239
+ &:active {
240
+ background: var(--ax-#{$name}-light-#{varibles.$color-suffix});
241
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
242
+ border-color: var(
243
+ --ax-#{$name}-light-#{varibles.$color-suffix}
244
+ );
245
+ }
246
+
247
+ &.selected {
248
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
249
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
250
+ border-color: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
251
+ }
252
+ }
253
+
254
+ &.blank {
255
+ background: transparent;
256
+ border-color: transparent;
257
+
258
+ @if ($name == 'light') {
259
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
260
+ } @else {
261
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
262
+ }
263
+
264
+ &:hover,
265
+ &:focus {
266
+ @if ($name == 'light') {
267
+ background: var(
268
+ --ax-#{$name}-trans-light-#{varibles.$color-suffix}
269
+ );
270
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
271
+ } @else {
272
+ background: var(
273
+ --ax-#{$name}-trans-light-#{varibles.$color-suffix}
274
+ );
275
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
276
+ }
277
+ }
278
+
279
+ &:active {
280
+ @if ($name == 'light') {
281
+ background: var(
282
+ --ax-#{$name}-trans-dark-#{varibles.$color-suffix}
283
+ );
284
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
285
+ } @else {
286
+ background: var(
287
+ --ax-#{$name}-trans-dark-#{varibles.$color-suffix}
288
+ );
289
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
290
+ }
291
+ }
292
+
293
+ &.selected {
294
+ @if ($name == 'light') {
295
+ background: var(
296
+ --ax-#{$name}-trans-dark-#{varibles.$color-suffix}
297
+ );
298
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
299
+ } @else {
300
+ background: var(
301
+ --ax-#{$name}-trans-dark-#{varibles.$color-suffix}
302
+ );
303
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
325
304
  }
305
+ }
326
306
  }
307
+
308
+ &.panel {
309
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
310
+ background-color: var(--ax-#{$name}-#{varibles.$color-suffix});
311
+ }
312
+ }
327
313
  }
314
+ }
328
315
  }
329
- }
316
+ }
317
+ }