@acorex/styles 4.2.71 → 4.2.73

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 (11) hide show
  1. package/package.json +1 -1
  2. package/scss/buttons.scss +7 -1
  3. package/scss/checkbox.scss +7 -9
  4. package/scss/data-grid.scss +8 -1
  5. package/scss/drawer.scss +1 -0
  6. package/scss/forms.scss +64 -40
  7. package/scss/master.scss +58 -43
  8. package/scss/menu.scss +74 -97
  9. package/scss/selection-list.scss +6 -8
  10. package/scss/tab.scss +4 -1
  11. package/scss/variables.scss +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "4.2.71",
3
+ "version": "4.2.73",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
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
- .ax-checkbox {
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
- &.checked {
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/data-grid.scss CHANGED
@@ -4,6 +4,13 @@
4
4
  resize: none;
5
5
  }
6
6
 
7
+ // ax-data-grid .ax-toolbar {
8
+ // background: transparent !important;
9
+ // box-shadow: none !important;
10
+ // border: 0 !important;
11
+ // padding: 0rem !important;
12
+ // }
13
+
7
14
  .ax-grid-filter-container {
8
15
  min-width: 140px;
9
16
  margin: var(--sp-sm-size);
@@ -107,4 +114,4 @@ ax-command-cell {
107
114
  }
108
115
  .ag-theme-alpine div.ag-row {
109
116
  font-size: 0.875rem !important;
110
- }
117
+ }
package/scss/drawer.scss CHANGED
@@ -20,6 +20,7 @@ ax-drawer-container {
20
20
  .ax-backdrop {
21
21
  background-color: rgb(0, 0, 0, 0.3);
22
22
  position: absolute;
23
+ width: 100%;
23
24
  height: 100%;
24
25
  z-index: 1;
25
26
  top: 0;
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,18 @@
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
- padding: 0.4rem !important;
34
33
  }
35
- &:first-child{
36
- button{
34
+ &:first-child {
35
+ button {
37
36
  top: 0;
38
37
  }
39
38
  }
40
- &:last-child{
41
- button{
39
+ &:last-child {
40
+ button {
42
41
  bottom: 0;
43
42
  }
44
43
  }
@@ -98,7 +97,6 @@
98
97
  @include ax-border-radius(var(--ax-size-border-radius));
99
98
  -webkit-transition: opacity 0.3s ease;
100
99
  transition: opacity 0.3s ease;
101
-
102
100
  }
103
101
  }
104
102
  &.disabled {
@@ -132,7 +130,7 @@
132
130
  &::placeholder {
133
131
  color: var(--ax-gray-dark-color) !important;
134
132
  }
135
-
133
+
136
134
  // &.clear {
137
135
  // margin-inline-end: 3em !important;
138
136
  // }
@@ -241,10 +239,8 @@
241
239
  }
242
240
  }
243
241
  }
244
-
245
-
242
+
246
243
  &.required-state {
247
-
248
244
  border-inline-start-width: 2px;
249
245
  border-inline-start-style: solid;
250
246
  border-inline-start-color: var(--ax-warning-color) !important;
@@ -257,7 +253,6 @@
257
253
  }
258
254
  }
259
255
  }
260
-
261
256
  }
262
257
  &.success-state {
263
258
  border-inline-start-width: 2px;
@@ -300,14 +295,14 @@
300
295
  }
301
296
  .readonly {
302
297
  opacity: 0.8;
303
-
298
+
304
299
  input {
305
300
  cursor: no-drop;
306
301
  }
307
- .button{
302
+ .button {
308
303
  &.disabled {
309
- background: transparent !important;
310
- }
304
+ background: transparent !important;
305
+ }
311
306
  }
312
307
  }
313
308
 
@@ -316,7 +311,6 @@
316
311
  border: none;
317
312
  box-shadow: none;
318
313
  }
319
-
320
314
  }
321
315
  .content {
322
316
  border: none;
@@ -427,20 +421,19 @@
427
421
  width: 30%;
428
422
  }
429
423
  .chips {
430
- font-size: inherit;
424
+ display: inline-flex;
425
+ overflow: hidden;
431
426
  background: rgba(0, 0, 0, 0.04);
427
+ padding: 0.2rem 0.5rem;
428
+ margin: 0 0.2rem;
429
+ border-radius: var(--ax-size-border-radius);
432
430
  color: var(--ax-gray-fore-color);
433
431
  border: 1px solid var(--ax-border-color);
434
- padding: 0.2em 0.4em;
435
- @include ax-border-radius(var(--ax-size-border-radius));
436
- margin: 0 0.5em;
437
- display: inline-block;
438
- cursor: pointer;
439
- flex: unset;
432
+ flex: none;
433
+ min-width: fit-content;
434
+ max-width: 7rem;
440
435
  white-space: nowrap;
441
- // overflow: hidden;
442
- // text-overflow: ellipsis;
443
- .chips-text {
436
+ .chips-text {
444
437
  display: inline-block;
445
438
  vertical-align: middle;
446
439
  overflow: hidden;
@@ -448,22 +441,53 @@
448
441
  vertical-align: middle;
449
442
  text-overflow: ellipsis;
450
443
  font-size: 0.875rem;
451
- min-width: fit-content;
452
- max-width: 110px;
453
444
  direction: inherit;
454
445
  text-align: inherit;
455
446
  }
456
447
  .close-icon {
457
448
  vertical-align: middle;
458
- }
459
- i {
460
- color: var(--ax-gray-dark-color);
461
- margin-inline-start: 0.3em;
462
- @include ax-transition-all();
463
- &:hover {
464
- color: var(--ax-danger-color);
465
- }
466
- }
449
+ display: flex;
450
+ align-items: center;
451
+ margin-inline-start: 0.25rem;
452
+ cursor: pointer;
453
+ }
454
+ // font-size: inherit;
455
+ // background: rgba(0, 0, 0, 0.04);
456
+ // color: var(--ax-gray-fore-color);
457
+ // border: 1px solid var(--ax-border-color);
458
+ // padding: 0.2em 0.4em;
459
+ // @include ax-border-radius(var(--ax-size-border-radius));
460
+ // margin: 0 0.5em;
461
+ // display: inline-block;
462
+ // cursor: pointer;
463
+ // flex: unset;
464
+ // white-space: nowrap;
465
+ // // overflow: hidden;
466
+ // // text-overflow: ellipsis;
467
+ // .chips-text {
468
+ // display: inline-block;
469
+ // vertical-align: middle;
470
+ // overflow: hidden;
471
+ // white-space: nowrap;
472
+ // vertical-align: middle;
473
+ // text-overflow: ellipsis;
474
+ // font-size: 0.875rem;
475
+ // min-width: fit-content;
476
+ // max-width: 110px;
477
+ // direction: inherit;
478
+ // text-align: inherit;
479
+ // }
480
+ // .close-icon {
481
+ // vertical-align: middle;
482
+ // }
483
+ // i {
484
+ // color: var(--ax-gray-dark-color);
485
+ // margin-inline-start: 0.3em;
486
+ // @include ax-transition-all();
487
+ // &:hover {
488
+ // color: var(--ax-danger-color);
489
+ // }
490
+ // }
467
491
  &:hover {
468
492
  background-color: var(--ax-primary-trans-light-color);
469
493
  color: var(--ax-primary-color);
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-base-size: 8px;
6
- --ax-base-ratio: 5;
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" {
@@ -32,57 +33,72 @@
32
33
  }
33
34
  }
34
35
 
36
+ @each $name, $color in $colors {
37
+ @if type-of($color) == "map" {
38
+ @each $subname, $variant in $color {
39
+ @if $subname== "" {
40
+ .ax-text-#{$name} {
41
+ color: var(--ax-#{$name}-#{$color-suffix});
42
+ }
43
+ .ax-bg-#{$name} {
44
+ background: var(--ax-#{$name}-#{$color-suffix});
45
+ }
46
+ .ax-border-#{$name} {
47
+ border-color: var(--ax-#{$name}-#{$color-suffix});
48
+ }
49
+ } @else {
50
+ .ax-text-#{$name}-#{$subname} {
51
+ color: var(--ax-#{$name}-#{$subname}-#{$color-suffix});
52
+ }
53
+ .ax-bg-#{$name}-#{$subname} {
54
+ background: var(--ax-#{$name}-#{$subname}-#{$color-suffix});
55
+ }
56
+ .ax-border-#{$name}-#{$subname} {
57
+ background: var(--ax-#{$name}-#{$subname}-#{$color-suffix});
58
+ }
59
+ }
60
+ }
61
+ }
62
+ }
63
+
35
64
  // Sizes
36
65
  .ax {
37
66
  &.form-control {
38
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
67
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
39
68
  padding: 0 0.5rem;
40
- font-size: 0.875rem;
69
+ font-size: 1rem;
70
+ font-weight: 500;
71
+ // &.sm,
72
+ // &.md,
73
+ // &.lg {
74
+ // &.ax-button-icon {
75
+ // width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
76
+ // height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
77
+ // }
78
+ // }
41
79
  &.sm {
42
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px);
43
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px);
44
- padding: 0 0.3rem;
45
- font-size: 0.75rem;
46
- &.ax-button-icon {
47
- padding: 0.3rem;
48
- }
80
+ --ax-base-size: calc(var(--ax-size) - 2px);
81
+ font-size: 0.875rem;
49
82
  }
50
83
  &.md {
51
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
52
- line-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
53
- padding: 0 0.5rem;
54
- font-size: 0.875rem;
55
- &.ax-button-icon {
56
- padding: 0.7rem;
57
- }
84
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
85
+ font-size: 1rem;
86
+ font-weight: 500;
58
87
  }
59
88
  &.lg {
60
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px);
61
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px);
62
- padding: 0 0.8rem;
63
- font-size: 1.2rem;
64
- &.ax-button-icon {
65
- padding: 0.9rem;
66
- }
89
+ --ax-base-size: calc(var(--ax-size) + 2px);
90
+ font-size: 1.5rem;
67
91
  }
68
92
  }
69
93
  }
70
-
71
- // @each $name,
72
- // $size in $sizes {
73
- // .ax {
74
- // @if type-of($size)=="map" {
75
- // @each $subname,
76
- // $variant in $size {
77
- // @if $name=="" {
78
- // &.#{$subname} {
79
- // font-size: var(--ax-size-#{$subname}) !important;
80
- // }
81
- // }
82
- // }
83
- // }
84
- // }
85
- // }
94
+ .ax {
95
+ &.sm {
96
+ --ax-base-size: calc(var(--ax-size) - 2px);
97
+ }
98
+ &.lg {
99
+ --ax-base-size: calc(var(--ax-size) + 2px);
100
+ }
101
+ }
86
102
  @each $name, $size in $sizes {
87
103
  @if type-of($size) == "map" {
88
104
  @each $subname, $variant in $size {
@@ -153,8 +169,7 @@
153
169
  }
154
170
 
155
171
  &:hover:not(.disabled),
156
- &:focus:not(.disabled)
157
- {
172
+ &:focus:not(.disabled) {
158
173
  background: var(--ax-#{$name}-light-#{$color-suffix});
159
174
  color: var(--ax-#{$name}-fore-#{$color-suffix});
160
175
  }
package/scss/menu.scss CHANGED
@@ -1,74 +1,89 @@
1
- /* nav */
2
- .ax.nav-menu,
3
- .ax.nav-menu ul,
4
- .ax.nav-menu li,
5
- .ax.nav-menu span {
6
- margin: 0;
7
- padding: 0;
8
- line-height: normal;
9
- list-style: none;
10
- display: block;
11
- position: relative;
12
- }
13
-
14
1
  .ax {
15
2
  &.nav-menu {
16
- font-size: 0.875rem;
3
+ list-style: none;
4
+ margin: 0;
5
+ padding: 0;
6
+ display: flex;
7
+ &.nav-vertical {
8
+ background-color: var(--ax-white-color);
9
+ flex-direction: column;
10
+ ul {
11
+ top: 0;
12
+ inset-inline-start: -9999px;
13
+ }
14
+
15
+ li {
16
+ width: 100%;
17
+ float: none;
18
+ text-align: right;
19
+ }
20
+ }
17
21
  > li {
22
+ text-align: center;
23
+ padding: 0.5rem;
24
+ min-width: 2.375rem;
18
25
  margin-inline-end: 0.5rem;
19
26
  border-radius: var(--ax-size-border-radius);
20
- > .nav-active {
21
- background-color: rgba(0, 0, 0, 0.05);
27
+ .ax-menu-item,
28
+ .menu-item-start-side,
29
+ .menu-item-end-side {
30
+ display: flex;
31
+ align-items: center;
32
+ justify-content: space-between;
22
33
  }
34
+ ul {
35
+ opacity: 0;
36
+ position: absolute;
37
+ top: 100%;
38
+ inset-inline-start: -9999px;
39
+ z-index: 50000;
40
+ -webkit-transition: opacity 0.3s;
41
+ transition: opacity 0.3s;
42
+ min-width: 12em;
43
+ li {
44
+ float: none;
23
45
 
46
+ &:hover {
47
+ > ul {
48
+ top: 0;
49
+ inset-inline-start: 100%;
50
+ }
51
+ }
52
+ }
53
+ }
24
54
  :hover {
25
55
  > ul {
26
56
  inset-inline-start: 100%;
27
57
  }
28
58
  }
29
59
  }
30
- ul {
31
- opacity: 0;
32
- position: absolute;
33
- top: 100%;
34
- inset-inline-start: -9999px;
35
- z-index: 50000;
36
- -webkit-transition: opacity 0.3s;
37
- transition: opacity 0.3s;
38
- min-width: 12em;
39
- box-shadow: 0 1px 7px 0 var(--ax-border-color);
40
- background: #fff;
41
-
42
- li {
43
- float: none;
60
+ li {
61
+ cursor: pointer;
62
+ position: relative;
44
63
 
45
- .drop-icon {
46
- position: absolute;
47
- inset-inline-end: 10px;
48
- inset-inline-start: initial;
64
+ .ax-menu-item {
65
+ height: 100%;
66
+ display: inline-flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ .menu-item-start-side {
70
+ }
71
+ .ax-menu-item-text {
72
+ margin: 0 0.5rem;
73
+ white-space: nowrap;
49
74
  }
50
75
 
51
- &:hover {
52
- > ul {
53
- top: 0;
54
- inset-inline-start: 100%;
55
- }
76
+ .menu-item-end-side {
56
77
  }
57
78
  }
58
- }
59
79
 
60
- li {
61
- white-space: nowrap;
62
- cursor: pointer;
63
- &.disabled {
64
- opacity: 0.6;
65
- }
66
- > ul {
67
- li {
68
- border-top: none;
69
- border-right: none;
70
- border-left: none;
71
- }
80
+ ul {
81
+ list-style: none;
82
+ margin: 0;
83
+ padding: 0;
84
+ background: #fff;
85
+ border: 1px solid var(--ax-border-color);
86
+ border-radius: var(--ax-size-border-radius);
72
87
  }
73
88
  &:hover {
74
89
  > ul {
@@ -100,54 +115,16 @@
100
115
  }
101
116
  }
102
117
  }
103
-
104
- span {
118
+ .ax-sub-menu {
105
119
  display: flex;
106
- padding: 0 10px;
107
- font-weight: normal;
108
- line-height: 40px;
109
- text-decoration: none;
110
- align-items: center;
111
- span {
112
- padding: 0 5px;
113
- }
114
-
115
- .drop-icon {
116
- }
117
- }
118
-
119
- &.nav-center {
120
- > li {
121
- display: inline-flex;
122
- }
123
- }
124
-
125
- &.nav-vertical {
126
- max-width: 220px;
127
- background-color: var(--ax-white-color);
128
- ul {
129
- top: 0;
130
- inset-inline-start: -9999px;
131
- }
132
-
120
+ flex-direction: column;
133
121
  li {
134
- width: 100%;
135
- float: none;
122
+ padding: 0.5rem;
123
+ .ax-menu-item {
124
+ display: flex;
125
+ justify-content: space-between;
126
+ }
136
127
  }
137
128
  }
138
-
139
-
140
129
  }
141
130
  }
142
-
143
- .ax.nav-menu span:hover,
144
- .ax.nav-menu span:focus,
145
- .ax.nav-menu li:hover span {
146
- }
147
-
148
- /* 2 */
149
- .ax.nav-menu li li span,
150
- .ax.nav-menu li:hover li span {
151
- padding: 5px 10px;
152
- line-height: normal;
153
- }
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 .checkmark {
38
- background: var(--ax-light-light-color) !important;
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
- &.disabled .checkmark:after {
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 */
package/scss/tab.scss CHANGED
@@ -18,6 +18,9 @@
18
18
  -moz-border-radius-topright: var(--ax-size-border-radius);
19
19
  border-top-left-radius: var(--ax-size-border-radius);
20
20
  border-top-right-radius: var(--ax-size-border-radius);
21
+ i {
22
+ margin-inline-end: 0.5em;
23
+ }
21
24
  &:hover {
22
25
  background: var(--ax-primary-color);
23
26
  color: var(--ax-primary-fore-color);
@@ -30,4 +33,4 @@
30
33
  }
31
34
  }
32
35
  }
33
- }
36
+ }
package/scss/variables.scss CHANGED
@@ -64,7 +64,6 @@ $colors: (
64
64
  "trans-dark": transparentize($secondary-light, 0.85),
65
65
  "trans-light": transparentize($secondary-dark, 0.85),
66
66
  ),
67
-
68
67
  "success": (
69
68
  "": $success,
70
69
  "fore": $white,