@acorex/styles 4.2.26 → 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 (3) hide show
  1. package/package.json +1 -1
  2. package/scss/forms.scss +72 -32
  3. package/scss/master.scss +26 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "4.2.26",
3
+ "version": "4.2.27",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/forms.scss CHANGED
@@ -1,10 +1,9 @@
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;
7
- .chips-container {
6
+ .chips-container{
8
7
  background-color: var(--ax-gray-light-color-color);
9
8
  }
10
9
  }
@@ -26,19 +25,19 @@
26
25
  position: relative;
27
26
  width: calc(var(--ax-base-size) * var(--ax-base-ratio));
28
27
  height: 100%;
29
- ax-button {
30
- button {
28
+ ax-button{
29
+ button{
31
30
  height: 50% !important;
32
31
  position: absolute;
33
32
  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
  }
@@ -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,6 +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;
103
+ [dir="rtl"] & {
104
+ right: 0 !important;
105
+ left: auto !important;
106
+ }
101
107
  }
102
108
  }
103
109
  &.disabled {
@@ -111,12 +117,12 @@
111
117
  margin: 0;
112
118
  max-width: 100%;
113
119
  flex: 1 0 auto;
114
- font-family: inherit;
115
- font-size: 0.875rem;
116
- padding: 0 0.5rem;
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,39 +207,42 @@
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;
219
231
  flex-direction: column;
220
232
  width: 100%;
221
233
  }
222
-
223
234
  &.form-item {
224
235
  background-color: var(--ax-white-color);
225
236
  position: relative;
226
237
  display: flex;
227
- // flex-wrap: wrap;
238
+ flex-wrap: wrap;
228
239
  align-items: stretch;
229
240
  width: 100%;
230
241
  overflow: hidden;
231
242
  border: 1px solid;
232
243
  border-color: var(--ax-border-color);
233
244
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
234
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
245
+
235
246
  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
236
247
  &:focus-within {
237
248
  border-color: var(--ax-primary-color);
@@ -242,8 +253,37 @@
242
253
  }
243
254
  }
244
255
  }
245
-
256
+
257
+
246
258
  &.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
  border-inline-start-width: 2px;
248
288
  border-inline-start-style: solid;
249
289
  border-inline-start-color: var(--ax-warning-color) !important;
@@ -256,6 +296,7 @@
256
296
  }
257
297
  }
258
298
  }
299
+
259
300
  }
260
301
  &.success-state {
261
302
  border-inline-start-width: 2px;
@@ -298,14 +339,14 @@
298
339
  }
299
340
  .readonly {
300
341
  opacity: 0.8;
301
-
342
+
302
343
  input {
303
344
  cursor: no-drop;
304
345
  }
305
- .button {
346
+ .button{
306
347
  &.disabled {
307
- background: transparent !important;
308
- }
348
+ background: transparent !important;
349
+ }
309
350
  }
310
351
  }
311
352
 
@@ -314,11 +355,11 @@
314
355
  border: none;
315
356
  box-shadow: none;
316
357
  }
358
+
317
359
  }
318
360
  .content {
319
361
  border: none;
320
362
  position: relative;
321
- display: flex;
322
363
  flex: 1 1 auto;
323
364
  width: 1%;
324
365
  min-width: 0;
@@ -339,7 +380,7 @@
339
380
  outline: transparent;
340
381
  padding: 0.5em;
341
382
  font-family: inherit;
342
- font-size: 0.875rem;
383
+ font-size: inherit;
343
384
  height: 100%;
344
385
  &.text-left {
345
386
  text-align: left !important;
@@ -445,8 +486,7 @@
445
486
  white-space: nowrap;
446
487
  vertical-align: middle;
447
488
  text-overflow: ellipsis;
448
- font-size: 0.875rem;
449
- min-width: fit-content;
489
+ font-size: 0.9em;
450
490
  max-width: 110px;
451
491
  direction: inherit;
452
492
  text-align: inherit;
@@ -475,7 +515,7 @@
475
515
  }
476
516
  .chips-blank {
477
517
  border: none;
478
- background-color: transparent;
518
+ background-color:transparent;
479
519
  flex: unset;
480
520
  &:hover {
481
521
  border: none;
package/scss/master.scss CHANGED
@@ -63,25 +63,35 @@
63
63
 
64
64
  // Sizes
65
65
  .ax {
66
- &.sm {
67
- --ax-base-size: calc(var(--ax-size) - 2px);
68
- font-size: 0.75rem;
69
- * {
70
- font-size: 0.75rem;
71
- }
72
- }
73
- &.md {
74
- --ax-base-size: var(--ax-size);
75
- font-size: 0.875rem;
76
- * {
66
+ &.form-control {
67
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
68
+ padding: 0 1rem;
69
+ font-size: 1rem;
70
+ font-weight: 500;
71
+ &.sm {
72
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
73
+ padding: 0 0.3rem;
77
74
  font-size: 0.875rem;
75
+ &.ax-button-icon {
76
+ padding: 0.3rem;
77
+ }
78
78
  }
79
- }
80
- &.lg {
81
- --ax-base-size: calc(var(--ax-size) + 2px);
82
- font-size: 1rem;
83
- * {
79
+ &.md {
80
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
81
+ padding: 0 1rem;
84
82
  font-size: 1rem;
83
+ font-weight: 500;
84
+ &.ax-button-icon {
85
+ padding: 0.7rem;
86
+ }
87
+ }
88
+ &.lg {
89
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
90
+ padding: 0 0.8rem;
91
+ font-size: 1.5rem;
92
+ &.ax-button-icon {
93
+ padding: 0.9rem;
94
+ }
85
95
  }
86
96
  }
87
97
  }