@acorex/styles 6.5.21 → 6.5.26

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