@acorex/styles 4.2.70 → 4.2.71

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