@acorex/styles 4.2.64 → 4.2.66

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 +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 +2 -1
  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.64",
3
+ "version": "4.2.66",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
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
@@ -30,6 +30,7 @@
30
30
  button{
31
31
  height: 50% !important;
32
32
  position: absolute;
33
+ padding: 0.4rem !important;
33
34
  }
34
35
  &:first-child{
35
36
  button{
@@ -487,4 +488,4 @@
487
488
  flex: 1 1 auto;
488
489
  }
489
490
  }
490
- }
491
+ }
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,