@acorex/styles 4.2.27 → 4.2.30

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 (2) hide show
  1. package/package.json +1 -1
  2. package/scss/forms.scss +17 -55
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "4.2.27",
3
+ "version": "4.2.30",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
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,8 @@
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;
451
+ min-width: fit-content;
490
452
  max-width: 110px;
491
453
  direction: inherit;
492
454
  text-align: inherit;
@@ -526,4 +488,4 @@
526
488
  flex: 1 1 auto;
527
489
  }
528
490
  }
529
- }
491
+ }