@acorex/styles 4.2.23 → 4.2.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.
- package/package.json +1 -1
- package/scss/buttons.scss +7 -1
- package/scss/checkbox.scss +7 -9
- package/scss/forms.scss +19 -21
- package/scss/master.scss +18 -44
- package/scss/menu.scss +0 -7
- package/scss/selection-list.scss +6 -8
package/package.json
CHANGED
package/scss/buttons.scss
CHANGED
|
@@ -31,7 +31,13 @@
|
|
|
31
31
|
text-align: center;
|
|
32
32
|
text-decoration: none;
|
|
33
33
|
overflow: hidden;
|
|
34
|
-
|
|
34
|
+
padding: 0 1rem;
|
|
35
|
+
height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
36
|
+
&.ax-button-icon {
|
|
37
|
+
width: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
38
|
+
height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
39
|
+
padding: 0;
|
|
40
|
+
}
|
|
35
41
|
.button-inner-content {
|
|
36
42
|
display: flex;
|
|
37
43
|
flex-direction: row;
|
package/scss/checkbox.scss
CHANGED
|
@@ -5,14 +5,12 @@
|
|
|
5
5
|
span {
|
|
6
6
|
margin-inline-start: 0.5rem;
|
|
7
7
|
}
|
|
8
|
-
&.readonly
|
|
8
|
+
&.readonly,
|
|
9
|
+
&.disabled {
|
|
9
10
|
opacity: 0.7;
|
|
10
11
|
}
|
|
11
|
-
&.disabled{
|
|
12
|
-
|
|
13
|
-
background-color: var(--ax-gray-light-color);
|
|
14
|
-
}
|
|
15
|
-
|
|
12
|
+
&.disabled {
|
|
13
|
+
cursor: not-allowed;
|
|
16
14
|
}
|
|
17
15
|
.ax-checkbox {
|
|
18
16
|
width: 16px;
|
|
@@ -26,14 +24,14 @@
|
|
|
26
24
|
outline: 2px solid transparent;
|
|
27
25
|
outline-offset: 2px;
|
|
28
26
|
color: var(--ax-primary-color);
|
|
29
|
-
|
|
27
|
+
&.checked {
|
|
30
28
|
border-color: var(--ax-primary-color);
|
|
31
29
|
background-repeat: no-repeat;
|
|
32
30
|
background-color: currentColor;
|
|
33
31
|
background-size: contain;
|
|
34
32
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
|
35
33
|
}
|
|
36
|
-
|
|
34
|
+
|
|
37
35
|
&.indeterminate {
|
|
38
36
|
border-color: var(--ax-primary-color);
|
|
39
37
|
background-repeat: no-repeat;
|
|
@@ -45,4 +43,4 @@
|
|
|
45
43
|
border-color: var(--ax-primary-color);
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
|
-
}
|
|
46
|
+
}
|
package/scss/forms.scss
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
&.form-control {
|
|
5
5
|
&.disabled {
|
|
6
6
|
background: var(--ax-gray-light-color) !important;
|
|
7
|
-
.chips-container{
|
|
7
|
+
.chips-container {
|
|
8
8
|
background-color: var(--ax-gray-light-color-color);
|
|
9
9
|
}
|
|
10
10
|
}
|
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
position: relative;
|
|
27
27
|
width: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
28
28
|
height: 100%;
|
|
29
|
-
ax-button{
|
|
30
|
-
button{
|
|
29
|
+
ax-button {
|
|
30
|
+
button {
|
|
31
31
|
height: 50% !important;
|
|
32
32
|
position: absolute;
|
|
33
33
|
padding: 0.4rem !important;
|
|
34
34
|
}
|
|
35
|
-
&:first-child{
|
|
36
|
-
button{
|
|
35
|
+
&:first-child {
|
|
36
|
+
button {
|
|
37
37
|
top: 0;
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
|
-
&:last-child{
|
|
41
|
-
button{
|
|
40
|
+
&:last-child {
|
|
41
|
+
button {
|
|
42
42
|
bottom: 0;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
@@ -98,7 +98,6 @@
|
|
|
98
98
|
@include ax-border-radius(var(--ax-size-border-radius));
|
|
99
99
|
-webkit-transition: opacity 0.3s ease;
|
|
100
100
|
transition: opacity 0.3s ease;
|
|
101
|
-
|
|
102
101
|
}
|
|
103
102
|
}
|
|
104
103
|
&.disabled {
|
|
@@ -114,6 +113,7 @@
|
|
|
114
113
|
flex: 1 0 auto;
|
|
115
114
|
font-family: inherit;
|
|
116
115
|
font-size: 0.875rem;
|
|
116
|
+
padding: 0 0.5rem;
|
|
117
117
|
outline: 0;
|
|
118
118
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
119
119
|
text-align: start;
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
&::placeholder {
|
|
133
133
|
color: var(--ax-gray-dark-color) !important;
|
|
134
134
|
}
|
|
135
|
-
|
|
135
|
+
|
|
136
136
|
// &.clear {
|
|
137
137
|
// margin-inline-end: 3em !important;
|
|
138
138
|
// }
|
|
@@ -219,18 +219,19 @@
|
|
|
219
219
|
flex-direction: column;
|
|
220
220
|
width: 100%;
|
|
221
221
|
}
|
|
222
|
+
|
|
222
223
|
&.form-item {
|
|
223
224
|
background-color: var(--ax-white-color);
|
|
224
225
|
position: relative;
|
|
225
226
|
display: flex;
|
|
226
|
-
flex-wrap: wrap;
|
|
227
|
+
// flex-wrap: wrap;
|
|
227
228
|
align-items: stretch;
|
|
228
229
|
width: 100%;
|
|
229
230
|
overflow: hidden;
|
|
230
231
|
border: 1px solid;
|
|
231
232
|
border-color: var(--ax-border-color);
|
|
232
233
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
233
|
-
|
|
234
|
+
height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
234
235
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
235
236
|
&:focus-within {
|
|
236
237
|
border-color: var(--ax-primary-color);
|
|
@@ -241,10 +242,8 @@
|
|
|
241
242
|
}
|
|
242
243
|
}
|
|
243
244
|
}
|
|
244
|
-
|
|
245
|
-
|
|
245
|
+
|
|
246
246
|
&.required-state {
|
|
247
|
-
|
|
248
247
|
border-inline-start-width: 2px;
|
|
249
248
|
border-inline-start-style: solid;
|
|
250
249
|
border-inline-start-color: var(--ax-warning-color) !important;
|
|
@@ -257,7 +256,6 @@
|
|
|
257
256
|
}
|
|
258
257
|
}
|
|
259
258
|
}
|
|
260
|
-
|
|
261
259
|
}
|
|
262
260
|
&.success-state {
|
|
263
261
|
border-inline-start-width: 2px;
|
|
@@ -300,14 +298,14 @@
|
|
|
300
298
|
}
|
|
301
299
|
.readonly {
|
|
302
300
|
opacity: 0.8;
|
|
303
|
-
|
|
301
|
+
|
|
304
302
|
input {
|
|
305
303
|
cursor: no-drop;
|
|
306
304
|
}
|
|
307
|
-
.button{
|
|
305
|
+
.button {
|
|
308
306
|
&.disabled {
|
|
309
|
-
|
|
310
|
-
|
|
307
|
+
background: transparent !important;
|
|
308
|
+
}
|
|
311
309
|
}
|
|
312
310
|
}
|
|
313
311
|
|
|
@@ -316,11 +314,11 @@
|
|
|
316
314
|
border: none;
|
|
317
315
|
box-shadow: none;
|
|
318
316
|
}
|
|
319
|
-
|
|
320
317
|
}
|
|
321
318
|
.content {
|
|
322
319
|
border: none;
|
|
323
320
|
position: relative;
|
|
321
|
+
display: flex;
|
|
324
322
|
flex: 1 1 auto;
|
|
325
323
|
width: 1%;
|
|
326
324
|
min-width: 0;
|
|
@@ -477,7 +475,7 @@
|
|
|
477
475
|
}
|
|
478
476
|
.chips-blank {
|
|
479
477
|
border: none;
|
|
480
|
-
background-color:transparent;
|
|
478
|
+
background-color: transparent;
|
|
481
479
|
flex: unset;
|
|
482
480
|
&:hover {
|
|
483
481
|
border: none;
|
package/scss/master.scss
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
--ax-border-color: #d1d5db;
|
|
4
4
|
--ax-border-dark-color: rgba(34, 36, 38, 0.3);
|
|
5
|
-
--ax-
|
|
6
|
-
--ax-base-
|
|
5
|
+
--ax-size: 8px;
|
|
6
|
+
--ax-base-size: var(--ax-size);
|
|
7
|
+
--ax-base-ratio: 6;
|
|
7
8
|
// Create Sizes
|
|
8
9
|
@each $name, $size in $sizes {
|
|
9
10
|
@if type-of($size) == "map" {
|
|
@@ -62,55 +63,28 @@
|
|
|
62
63
|
|
|
63
64
|
// Sizes
|
|
64
65
|
.ax {
|
|
65
|
-
&.
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
&.sm {
|
|
70
|
-
height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px);
|
|
71
|
-
line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px);
|
|
72
|
-
padding: 0 0.3rem;
|
|
66
|
+
&.sm {
|
|
67
|
+
--ax-base-size: calc(var(--ax-size) - 2px);
|
|
68
|
+
font-size: 0.75rem;
|
|
69
|
+
* {
|
|
73
70
|
font-size: 0.75rem;
|
|
74
|
-
&.ax-button-icon {
|
|
75
|
-
padding: 0.3rem;
|
|
76
|
-
}
|
|
77
71
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
72
|
+
}
|
|
73
|
+
&.md {
|
|
74
|
+
--ax-base-size: var(--ax-size);
|
|
75
|
+
font-size: 0.875rem;
|
|
76
|
+
* {
|
|
82
77
|
font-size: 0.875rem;
|
|
83
|
-
&.ax-button-icon {
|
|
84
|
-
padding: 0.7rem;
|
|
85
|
-
}
|
|
86
78
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
padding: 0.9rem;
|
|
94
|
-
}
|
|
79
|
+
}
|
|
80
|
+
&.lg {
|
|
81
|
+
--ax-base-size: calc(var(--ax-size) + 2px);
|
|
82
|
+
font-size: 1rem;
|
|
83
|
+
* {
|
|
84
|
+
font-size: 1rem;
|
|
95
85
|
}
|
|
96
86
|
}
|
|
97
87
|
}
|
|
98
|
-
|
|
99
|
-
// @each $name,
|
|
100
|
-
// $size in $sizes {
|
|
101
|
-
// .ax {
|
|
102
|
-
// @if type-of($size)=="map" {
|
|
103
|
-
// @each $subname,
|
|
104
|
-
// $variant in $size {
|
|
105
|
-
// @if $name=="" {
|
|
106
|
-
// &.#{$subname} {
|
|
107
|
-
// font-size: var(--ax-size-#{$subname}) !important;
|
|
108
|
-
// }
|
|
109
|
-
// }
|
|
110
|
-
// }
|
|
111
|
-
// }
|
|
112
|
-
// }
|
|
113
|
-
// }
|
|
114
88
|
@each $name, $size in $sizes {
|
|
115
89
|
@if type-of($size) == "map" {
|
|
116
90
|
@each $subname, $variant in $size {
|
package/scss/menu.scss
CHANGED
|
@@ -1,16 +1,9 @@
|
|
|
1
|
-
.ax-toolbar-menu-container {
|
|
2
|
-
.ax.nav-menu {
|
|
3
|
-
box-shadow: none;
|
|
4
|
-
}
|
|
5
|
-
}
|
|
6
1
|
.ax {
|
|
7
2
|
&.nav-menu {
|
|
8
3
|
list-style: none;
|
|
9
4
|
margin: 0;
|
|
10
5
|
padding: 0;
|
|
11
6
|
display: flex;
|
|
12
|
-
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
|
13
|
-
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
14
7
|
&.nav-vertical {
|
|
15
8
|
background-color: var(--ax-white-color);
|
|
16
9
|
flex-direction: column;
|
package/scss/selection-list.scss
CHANGED
|
@@ -33,16 +33,14 @@
|
|
|
33
33
|
-moz-user-select: none;
|
|
34
34
|
-ms-user-select: none;
|
|
35
35
|
user-select: none;
|
|
36
|
-
|
|
37
|
-
&.disabled
|
|
38
|
-
|
|
39
|
-
border-color: var(--ax-light-light-color) !important;
|
|
40
|
-
cursor: not-allowed;
|
|
36
|
+
&.readonly,
|
|
37
|
+
&.disabled {
|
|
38
|
+
opacity: 0.7;
|
|
41
39
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
background-color: var(--ax-gray-color) !important;
|
|
40
|
+
&.disabled {
|
|
41
|
+
cursor: not-allowed;
|
|
45
42
|
}
|
|
43
|
+
|
|
46
44
|
}
|
|
47
45
|
|
|
48
46
|
/* Hide the browser's default radio */
|