@acorex/styles 4.2.24 → 4.2.27

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 (6) 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/forms.scss +54 -16
  5. package/scss/master.scss +15 -31
  6. package/scss/selection-list.scss +6 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "4.2.24",
3
+ "version": "4.2.27",
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/forms.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @import "./mixin.scss";
2
2
  .ax {
3
- font-size: 0.875rem;
4
3
  &.form-control {
5
4
  &.disabled {
6
5
  background: var(--ax-gray-light-color) !important;
@@ -70,13 +69,16 @@
70
69
  color: var(--ax-danger-color) !important;
71
70
  }
72
71
  &.input {
72
+ font-size: 1em;
73
73
  position: relative;
74
+ font-weight: 400;
75
+ font-style: normal;
74
76
  display: inline-flex;
75
- color: var(--ax-dark-dark-color);
77
+ color: #1d1d1d;
76
78
 
77
79
  &.icon {
78
80
  input {
79
- padding-inline-start: 2.1rem;
81
+ padding-inline-start: 2.1em;
80
82
  padding-inline-end: 0.5em;
81
83
  }
82
84
  .text-left {
@@ -90,7 +92,7 @@
90
92
  position: absolute;
91
93
  text-align: center;
92
94
  top: 0;
93
- inset-inline-start: 0;
95
+ left: 0;
94
96
  margin: 0;
95
97
  height: 100%;
96
98
  width: 2.67142857em;
@@ -98,7 +100,10 @@
98
100
  @include ax-border-radius(var(--ax-size-border-radius));
99
101
  -webkit-transition: opacity 0.3s ease;
100
102
  transition: opacity 0.3s ease;
101
-
103
+ [dir="rtl"] & {
104
+ right: 0 !important;
105
+ left: auto !important;
106
+ }
102
107
  }
103
108
  }
104
109
  &.disabled {
@@ -112,11 +117,12 @@
112
117
  margin: 0;
113
118
  max-width: 100%;
114
119
  flex: 1 0 auto;
115
- font-family: inherit;
116
- font-size: 0.875rem;
117
120
  outline: 0;
118
121
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
119
- text-align: start;
122
+ text-align: inherit;
123
+ font-size: inherit;
124
+ font-family: inherit;
125
+ font-weight: 500;
120
126
  background: #fff;
121
127
  border: none !important;
122
128
  color: rgba(0, 0, 0, 0.87);
@@ -132,7 +138,9 @@
132
138
  &::placeholder {
133
139
  color: var(--ax-gray-dark-color) !important;
134
140
  }
135
-
141
+ [dir="rtl"] & {
142
+ text-align: right;
143
+ }
136
144
  // &.clear {
137
145
  // margin-inline-end: 3em !important;
138
146
  // }
@@ -199,20 +207,24 @@
199
207
  position: absolute;
200
208
  height: 100%;
201
209
  top: 0;
202
- inset-inline-start: 0;
210
+ left: 0;
203
211
  display: flex;
204
212
  justify-content: center;
205
213
  align-items: center;
206
214
  width: 2.771429em;
207
215
  color: var(--ax-gray-dark-color);
208
216
  background-color: var(--ax-white-color);
217
+ [dir="rtl"] & {
218
+ right: 0 !important;
219
+ left: auto !important;
220
+ }
209
221
  }
210
222
  }
211
223
  &.form-group-label {
212
224
  display: block;
213
- font-size: 0.875rem;
225
+ font-size: inherit !important;
226
+ padding: 0.5em 0;
214
227
  font-weight: 500;
215
- padding: 0.5rem 0;
216
228
  }
217
229
  &.form-group {
218
230
  display: inline-flex;
@@ -244,7 +256,34 @@
244
256
 
245
257
 
246
258
  &.required-state {
247
-
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
+ // }
248
287
  border-inline-start-width: 2px;
249
288
  border-inline-start-style: solid;
250
289
  border-inline-start-color: var(--ax-warning-color) !important;
@@ -341,7 +380,7 @@
341
380
  outline: transparent;
342
381
  padding: 0.5em;
343
382
  font-family: inherit;
344
- font-size: 0.875rem;
383
+ font-size: inherit;
345
384
  height: 100%;
346
385
  &.text-left {
347
386
  text-align: left !important;
@@ -447,8 +486,7 @@
447
486
  white-space: nowrap;
448
487
  vertical-align: middle;
449
488
  text-overflow: ellipsis;
450
- font-size: 0.875rem;
451
- min-width: fit-content;
489
+ font-size: 0.9em;
452
490
  max-width: 110px;
453
491
  direction: inherit;
454
492
  text-align: inherit;
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" {
@@ -63,54 +64,37 @@
63
64
  // Sizes
64
65
  .ax {
65
66
  &.form-control {
66
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
67
- padding: 0 0.5rem;
68
- font-size: 0.875rem;
67
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
68
+ padding: 0 1rem;
69
+ font-size: 1rem;
70
+ font-weight: 500;
69
71
  &.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
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
72
73
  padding: 0 0.3rem;
73
- font-size: 0.75rem;
74
+ font-size: 0.875rem;
74
75
  &.ax-button-icon {
75
76
  padding: 0.3rem;
76
77
  }
77
78
  }
78
79
  &.md {
79
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
80
- line-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
81
- padding: 0 0.5rem;
82
- font-size: 0.875rem;
80
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
81
+ padding: 0 1rem;
82
+ font-size: 1rem;
83
+ font-weight: 500;
83
84
  &.ax-button-icon {
84
85
  padding: 0.7rem;
85
86
  }
86
87
  }
87
88
  &.lg {
88
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px);
89
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px);
89
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
90
90
  padding: 0 0.8rem;
91
- font-size: 1.2rem;
91
+ font-size: 1.5rem;
92
92
  &.ax-button-icon {
93
93
  padding: 0.9rem;
94
94
  }
95
95
  }
96
96
  }
97
97
  }
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
98
  @each $name, $size in $sizes {
115
99
  @if type-of($size) == "map" {
116
100
  @each $subname, $variant in $size {
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 */