@acorex/styles 4.1.7 → 4.2.0

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 (18) hide show
  1. package/package.json +1 -1
  2. package/scss/buttons.scss +2 -2
  3. package/scss/calendar.scss +9 -16
  4. package/scss/context-menu.scss +4 -11
  5. package/scss/data-grid.scss +6 -3
  6. package/scss/forms.scss +15 -54
  7. package/scss/list.scss +2 -15
  8. package/scss/master.scss +14 -26
  9. package/scss/menu.scss +40 -368
  10. package/scss/selection-list.scss +6 -16
  11. package/scss/style.scss +0 -2
  12. package/scss/tab-strip.scss +2 -1
  13. package/scss/tab.scss +3 -3
  14. package/scss/toast.scss +27 -5
  15. package/scss/tooltip.scss +13 -12
  16. package/scss/treeview.scss +12 -23
  17. package/scss/upload.scss +1 -0
  18. package/scss/variables.scss +89 -55
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "4.1.7",
3
+ "version": "4.2.0",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/buttons.scss CHANGED
@@ -6,8 +6,9 @@
6
6
  display: inline-flex;
7
7
  flex-direction: row;
8
8
  font-family: inherit;
9
- font-size: 1rem;
9
+ font-size: 0.875rem;
10
10
  vertical-align: baseline;
11
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio));
11
12
 
12
13
  .button {
13
14
  margin: 0 !important;
@@ -27,7 +28,6 @@
27
28
  text-shadow: none;
28
29
  font-family: inherit;
29
30
  font-size: inherit;
30
- font-weight: 500;
31
31
  text-align: center;
32
32
  text-decoration: none;
33
33
  overflow: hidden;
package/scss/calendar.scss CHANGED
@@ -2,21 +2,16 @@
2
2
  border: 1px solid var(--ax-border-color);
3
3
  border-radius: var(--ax-size-border-radius);
4
4
  .ax-calendar-header {
5
- display: grid;
6
- grid-template-columns: repeat(12, minmax(0, 1fr));
5
+ display: flex;
6
+ justify-content: space-between;
7
7
  padding-top: 0.5rem;
8
8
  padding-bottom: 0.5rem;
9
9
  padding-left: 0.5rem;
10
10
  padding-right: 0.5rem;
11
11
  border-bottom: 1px solid var(--ax-border-color);
12
- .ax-nav-button {
13
- grid-column: span 8 / span 8;
14
- justify-content: flex-start;
15
- }
12
+ .ax-nav-button,
16
13
  .ax-controll-button {
17
- grid-column: span 2 / span 2;
18
- justify-content: center;
19
- margin-inline-start: 0.25rem;
14
+ padding: 0 0.5rem;
20
15
  }
21
16
  }
22
17
  .ax-calendar-body {
@@ -30,8 +25,8 @@
30
25
  .ax-year-container {
31
26
  display: grid;
32
27
  grid-template-columns: repeat(3, minmax(0, 1fr));
33
- >div {
34
- font-size: 1rem;
28
+ > div {
29
+ font-size: 0.875rem;
35
30
  line-height: 1.25rem;
36
31
  position: relative;
37
32
  display: flex;
@@ -40,8 +35,7 @@
40
35
  cursor: pointer;
41
36
  margin: 0.125rem;
42
37
  border-radius: 0.25rem;
43
- font-weight: 500;
44
- background-color: var(--ax-gray-light-color);
38
+ background-color: var(--ax-light-light-color);
45
39
  &::before {
46
40
  content: "";
47
41
  padding-top: 50%;
@@ -70,7 +64,7 @@
70
64
  }
71
65
  .ax-day-items {
72
66
  .ax-day-item {
73
- font-size: 1rem;
67
+ font-size: 0.875rem;
74
68
  line-height: 1.25rem;
75
69
  position: relative;
76
70
  display: flex;
@@ -79,7 +73,6 @@
79
73
  cursor: pointer;
80
74
  margin: 0.125rem;
81
75
  border-radius: 0.25rem;
82
- font-weight: 500;
83
76
  &::before {
84
77
  content: "";
85
78
  padding-top: 100%;
@@ -125,4 +118,4 @@
125
118
  .ax-calendar-footer {
126
119
  padding: 0.5rem;
127
120
  }
128
- }
121
+ }
package/scss/context-menu.scss CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  .context-menu-item {
16
16
  display: flex;
17
- padding: 1em;
17
+ padding: 1rem;
18
18
  justify-content: space-between;
19
19
  cursor: pointer;
20
20
  user-select: none;
@@ -24,14 +24,10 @@
24
24
  &:hover {
25
25
  background-color: var(--ax-light-light-color);
26
26
  & > .child {
27
- left: 100%;
27
+ inset-inline-start: 100%;
28
28
  visibility: visible;
29
29
  opacity: 1;
30
30
  transform: translateX(0px);
31
- [dir="rtl"] &{
32
- left: initial;
33
- right: 100%;
34
- }
35
31
  }
36
32
  }
37
33
  &.disabled {
@@ -60,16 +56,13 @@
60
56
 
61
57
  .child {
62
58
  position: absolute;
63
- left: 0%;
59
+ inset-inline-start: 0%;
64
60
  top: 0;
65
61
  visibility: hidden;
66
62
  opacity: 0;
67
63
  transition: transform 0.2s;
68
64
  transform: translateX(50px);
69
- [dir="rtl"] &{
70
- left: initial;
71
- right: 0%;
72
- }
65
+
73
66
  }
74
67
  }
75
68
  }
package/scss/data-grid.scss CHANGED
@@ -57,7 +57,7 @@ ag-grid-angular {
57
57
  }
58
58
  .btn {
59
59
  padding: 0 0.75rem;
60
- font-size: 0.85rem;
60
+ font-size: 0.875rem;
61
61
  line-height: 1.2;
62
62
  }
63
63
  }
@@ -76,7 +76,7 @@ ag-grid-angular {
76
76
  text-align: center;
77
77
  display: inline-flex;
78
78
  justify-content: center;
79
- font-size: 12px;
79
+ font-size: 0.875rem;
80
80
  align-items: center;
81
81
  }
82
82
 
@@ -92,7 +92,7 @@ ax-command-cell {
92
92
  width: 100%;
93
93
  .ax-toolbar {
94
94
  background: var(--ax-white-color);
95
- padding: 0.5em;
95
+ padding: 0.5rem;
96
96
  z-index: 2;
97
97
  width: 100%;
98
98
  border: 1px solid var(--ax-border-color);
@@ -104,4 +104,7 @@ ax-command-cell {
104
104
  }
105
105
  }
106
106
  }
107
+ }
108
+ .ag-theme-alpine div.ag-row {
109
+ font-size: 0.875rem !important;
107
110
  }
package/scss/forms.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @import "./mixin.scss";
2
2
  .ax {
3
+ font-size: 0.875rem;
3
4
  &.form-control {
4
5
  &.disabled {
5
6
  background: var(--ax-gray-light-color) !important;
@@ -69,16 +70,13 @@
69
70
  color: var(--ax-danger-color) !important;
70
71
  }
71
72
  &.input {
72
- font-size: 1em;
73
73
  position: relative;
74
- font-weight: 400;
75
- font-style: normal;
76
74
  display: inline-flex;
77
- color: #1d1d1d;
75
+ color: var(--ax-dark-dark-color);
78
76
 
79
77
  &.icon {
80
78
  input {
81
- padding-inline-start: 2.1em;
79
+ padding-inline-start: 2.1rem;
82
80
  padding-inline-end: 0.5em;
83
81
  }
84
82
  .text-left {
@@ -92,7 +90,7 @@
92
90
  position: absolute;
93
91
  text-align: center;
94
92
  top: 0;
95
- left: 0;
93
+ inset-inline-start: 0;
96
94
  margin: 0;
97
95
  height: 100%;
98
96
  width: 2.67142857em;
@@ -100,10 +98,7 @@
100
98
  @include ax-border-radius(var(--ax-size-border-radius));
101
99
  -webkit-transition: opacity 0.3s ease;
102
100
  transition: opacity 0.3s ease;
103
- [dir="rtl"] & {
104
- right: 0 !important;
105
- left: auto !important;
106
- }
101
+
107
102
  }
108
103
  }
109
104
  &.disabled {
@@ -117,12 +112,11 @@
117
112
  margin: 0;
118
113
  max-width: 100%;
119
114
  flex: 1 0 auto;
115
+ font-family: inherit;
116
+ font-size: 0.875rem;
120
117
  outline: 0;
121
118
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
122
- text-align: inherit;
123
- font-size: inherit;
124
- font-family: inherit;
125
- font-weight: 500;
119
+ text-align: start;
126
120
  background: #fff;
127
121
  border: none !important;
128
122
  color: rgba(0, 0, 0, 0.87);
@@ -138,9 +132,7 @@
138
132
  &::placeholder {
139
133
  color: var(--ax-gray-dark-color) !important;
140
134
  }
141
- [dir="rtl"] & {
142
- text-align: right;
143
- }
135
+
144
136
  // &.clear {
145
137
  // margin-inline-end: 3em !important;
146
138
  // }
@@ -207,24 +199,20 @@
207
199
  position: absolute;
208
200
  height: 100%;
209
201
  top: 0;
210
- left: 0;
202
+ inset-inline-start: 0;
211
203
  display: flex;
212
204
  justify-content: center;
213
205
  align-items: center;
214
206
  width: 2.771429em;
215
207
  color: var(--ax-gray-dark-color);
216
208
  background-color: var(--ax-white-color);
217
- [dir="rtl"] & {
218
- right: 0 !important;
219
- left: auto !important;
220
- }
221
209
  }
222
210
  }
223
211
  &.form-group-label {
224
212
  display: block;
225
- font-size: inherit !important;
226
- padding: 0.5em 0;
213
+ font-size: 0.875rem;
227
214
  font-weight: 500;
215
+ padding: 0.5rem 0;
228
216
  }
229
217
  &.form-group {
230
218
  display: inline-flex;
@@ -256,34 +244,7 @@
256
244
 
257
245
 
258
246
  &.required-state {
259
- // position: relative;
260
- // &::before {
261
- // content: "";
262
- // position: absolute;
263
- // top: 0;
264
- // right: 0;
265
- // margin: 0;
266
- // padding: 0;
267
- // text-align: center;
268
- // border-top: 0 solid transparent;
269
- // border-inline-start: 22px solid transparent;
270
- // border-bottom: 22px solid transparent;
271
- // border-inline-end: 0 solid transparent;
272
- // border-inline-start-color: var(--ax-gray-trans-dark-color);
273
- // z-index: 1;
274
- // }
275
- // &::after {
276
- // content: "\f621";
277
- // position: absolute;
278
- // font-family: "Font Awesome 5 Pro";
279
- // font-weight: 900;
280
- // top: 0px;
281
- // right: 3px;
282
- // margin: 0;
283
- // z-index: 1;
284
- // font-size: 6px;
285
- // color: var(--ax-gray-dark-color);
286
- // }
247
+
287
248
  border-inline-start-width: 2px;
288
249
  border-inline-start-style: solid;
289
250
  border-inline-start-color: var(--ax-warning-color) !important;
@@ -380,7 +341,7 @@
380
341
  outline: transparent;
381
342
  padding: 0.5em;
382
343
  font-family: inherit;
383
- font-size: inherit;
344
+ font-size: 0.875rem;
384
345
  height: 100%;
385
346
  &.text-left {
386
347
  text-align: left !important;
@@ -486,7 +447,7 @@
486
447
  white-space: nowrap;
487
448
  vertical-align: middle;
488
449
  text-overflow: ellipsis;
489
- font-size: 0.9em;
450
+ font-size: 0.875rem;
490
451
  max-width: 110px;
491
452
  direction: inherit;
492
453
  text-align: inherit;
package/scss/list.scss CHANGED
@@ -13,7 +13,8 @@
13
13
  }
14
14
  }
15
15
  .list-item {
16
- padding: 0.8em;
16
+ font-size: 0.875rem;
17
+ padding: 0.8rem;
17
18
  cursor: pointer;
18
19
  transition: all 0.3s;
19
20
  position: relative;
@@ -33,20 +34,6 @@
33
34
  background: var(--ax-primary-trans-dark-color) !important;
34
35
  color: var(--ax-primary-color) !important;
35
36
  border-bottom: 1px solid var(--ax-white-color);
36
- // &::after {
37
- // position: absolute;
38
- // font-family: "Font Awesome 5 Pro";
39
- // content: "\f058";
40
- // display: inline-block;
41
- // vertical-align: middle;
42
- // font-weight: 900;
43
- // right: 0.7em;
44
- // font-size: 1.2em;
45
- // [dir="rtl"] &{
46
- // left: 0.7em;
47
- // right: initial !important;
48
- // }
49
- // }
50
37
  }
51
38
  &.focused
52
39
  {
package/scss/master.scss CHANGED
@@ -35,32 +35,30 @@
35
35
  // Sizes
36
36
  .ax {
37
37
  &.form-control {
38
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
39
- padding: 0 1rem;
40
- font-size: 1rem;
41
- font-weight: 500;
38
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio));
39
+ padding: 0 0.5rem;
40
+ font-size: 0.875rem;
42
41
  &.sm {
43
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
44
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
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);
45
44
  padding: 0 0.3rem;
46
- font-size: 0.875rem;
45
+ font-size: 0.75rem;
47
46
  &.ax-button-icon {
48
47
  padding: 0.3rem;
49
48
  }
50
49
  }
51
50
  &.md {
52
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
53
- line-height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
54
- padding: 0 1rem;
55
- font-size: 1rem;
56
- 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;
57
55
  &.ax-button-icon {
58
56
  padding: 0.7rem;
59
57
  }
60
58
  }
61
59
  &.lg {
62
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
63
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
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);
64
62
  padding: 0 0.8rem;
65
63
  font-size: 1.2rem;
66
64
  &.ax-button-icon {
@@ -126,21 +124,11 @@
126
124
  background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
127
125
  }
128
126
  &.#{$name} {
129
- border: 1px solid;
130
- border-color: var(--ax-#{$name}-#{$color-suffix});
131
- @if ($name == "light") {
132
- background: var(--ax-white-#{$color-suffix});
133
- color: var(--ax-dark-#{$color-suffix});
134
- border-color: var(--ax-border-color);
135
- } @else {
136
- background: var(--ax-#{$name}-#{$color-suffix});
137
- color: var(--ax-#{$name}-fore-#{$color-suffix});
138
- }
127
+ background: var(--ax-#{$name}-#{$color-suffix});
128
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
139
129
  &:hover,
140
130
  &:focus {
141
131
  background: var(--ax-#{$name}-dark-#{$color-suffix});
142
- margin-right: calc(0.75rem * var(--tw-space-x-reverse));
143
- margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
144
132
  }
145
133
  &:active {
146
134
  background: var(--ax-#{$name}-light-#{$color-suffix});