@acorex/styles 3.0.57 → 3.0.58

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/calendar.scss +1 -1
  3. package/scss/forms.scss +4 -4
  4. package/scss/list.scss +1 -1
  5. package/scss/master.scss +15 -21
  6. package/scss/variables.scss +4 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "3.0.57",
3
+ "version": "3.0.58",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/calendar.scss CHANGED
@@ -41,7 +41,7 @@
41
41
  margin: 0.125rem;
42
42
  border-radius: 0.25rem;
43
43
  font-weight: 500;
44
- background-color: rgb(241, 241, 241);
44
+ background-color: var(--ax-gray-light-color);
45
45
  &::before {
46
46
  content: "";
47
47
  padding-top: 50%;
package/scss/forms.scss CHANGED
@@ -2,9 +2,9 @@
2
2
  .ax {
3
3
  &.form-control {
4
4
  &.disabled {
5
- background: var(--ax-gray-color) !important;
5
+ background: var(--ax-gray-light-color) !important;
6
6
  .chips-container{
7
- background-color: var(--ax-gray-color);
7
+ background-color: var(--ax-gray-light-color-color);
8
8
  }
9
9
  }
10
10
  }
@@ -108,7 +108,7 @@
108
108
  }
109
109
  &.disabled {
110
110
  & > input {
111
- background: var(--ax-gray-color) !important;
111
+ background: var(--ax-gray-light-color-color) !important;
112
112
  cursor: not-allowed !important;
113
113
  }
114
114
  }
@@ -333,7 +333,7 @@
333
333
  }
334
334
  @include ax-border-radius(var(--ax-size-border-radius));
335
335
  &.disabled {
336
- background: var(--ax-gray-color) !important;
336
+ background: var(--ax-gray-light-color) !important;
337
337
  cursor: not-allowed !important;
338
338
  }
339
339
  .readonly {
package/scss/list.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .ax {
2
2
  &.list-container {
3
- max-height: 300px;
3
+ height: 300px;
4
4
  overflow: auto;
5
5
  background: #fff;
6
6
  border: 1px solid #d1d5db;
package/scss/master.scss CHANGED
@@ -128,8 +128,7 @@
128
128
  @if ($name == "light") {
129
129
  background: var(--ax-white-#{$color-suffix});
130
130
  color: var(--ax-dark-#{$color-suffix});
131
- border-color: var(--ax-border-color);
132
-
131
+ border-color: var(--ax-border-color);
133
132
  } @else {
134
133
  background: var(--ax-#{$name}-#{$color-suffix});
135
134
  color: var(--ax-#{$name}-fore-#{$color-suffix});
@@ -143,20 +142,14 @@
143
142
  &:active {
144
143
  background: var(--ax-#{$name}-light-#{$color-suffix});
145
144
  }
146
- &.selected{
145
+ &.selected {
147
146
  background: var(--ax-#{$name}-dark-#{$color-suffix});
148
147
  }
149
148
  &.disabled {
150
- // background: var(--ax-gray-color) !important;
151
- // color: var(--ax-gray-fore-color) !important;
152
- opacity: 0.6;
153
- // border-color: var(--ax-gray-color) !important;
154
149
  cursor: not-allowed;
155
- // &:hover,
156
- // &:active {
157
- // background: var(--ax-gray-color) !important;
158
- // color: var(--ax-gray-fore-color) !important;
159
- // }
150
+ background: var(--ax-gray-light-color) !important;
151
+ color: var(--ax-gray-fore-color);
152
+ border-color: var(--ax-gray-light-color);
160
153
  }
161
154
  &.twotone {
162
155
  background: var(--ax-#{$name}-trans-light-#{$color-suffix});
@@ -168,8 +161,9 @@
168
161
  color: var(--ax-#{$name}-#{$color-suffix});
169
162
  }
170
163
 
171
- &:hover,
172
- &:focus {
164
+ &:hover:not(.disabled),
165
+ &:focus:not(.disabled)
166
+ {
173
167
  background: var(--ax-#{$name}-light-#{$color-suffix});
174
168
  color: var(--ax-#{$name}-fore-#{$color-suffix});
175
169
  }
@@ -177,7 +171,7 @@
177
171
  background: var(--ax-#{$name}-dark-#{$color-suffix});
178
172
  color: var(--ax-#{$name}-fore-#{$color-suffix});
179
173
  }
180
- &.selected{
174
+ &.selected {
181
175
  background: var(--ax-#{$name}-dark-#{$color-suffix});
182
176
  color: var(--ax-#{$name}-fore-#{$color-suffix});
183
177
  }
@@ -192,8 +186,8 @@
192
186
  color: var(--ax-#{$name}-#{$color-suffix});
193
187
  }
194
188
 
195
- &:hover,
196
- &:focus {
189
+ &:hover:not(.disabled),
190
+ &:focus:not(.disabled) {
197
191
  background: var(--ax-#{$name}-#{$color-suffix});
198
192
  color: var(--ax-#{$name}-fore-#{$color-suffix});
199
193
  }
@@ -202,7 +196,7 @@
202
196
  color: var(--ax-#{$name}-fore-#{$color-suffix});
203
197
  border-color: var(--ax-#{$name}-light-#{$color-suffix});
204
198
  }
205
- &.selected{
199
+ &.selected {
206
200
  background: var(--ax-#{$name}-dark-#{$color-suffix});
207
201
  color: var(--ax-#{$name}-fore-#{$color-suffix});
208
202
  border-color: var(--ax-#{$name}-dark-#{$color-suffix});
@@ -210,7 +204,7 @@
210
204
  }
211
205
  &.blank {
212
206
  background: transparent;
213
- border-color: transparent;
207
+ border-color: transparent;
214
208
 
215
209
  @if ($name == "light") {
216
210
  color: var(--ax-#{$name}-fore-#{$color-suffix});
@@ -237,8 +231,8 @@
237
231
  color: var(--ax-#{$name}-#{$color-suffix});
238
232
  }
239
233
  }
240
- &.selected{
241
- @if ($name == "light") {
234
+ &.selected {
235
+ @if ($name == "light") {
242
236
  background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
243
237
  color: var(--ax-#{$name}-fore-#{$color-suffix});
244
238
  } @else {
package/scss/variables.scss CHANGED
@@ -4,7 +4,7 @@ $white: #fff;
4
4
  $black: #000;
5
5
  $primary: #3b82f6;
6
6
  $secondary: #ec4899;
7
- $gray: #d4d4d4;
7
+ $gray: #cbd5e1;
8
8
  $success: #10b981;
9
9
  $info: #8b5cf6;
10
10
  $warning: #f59e0b;
@@ -65,15 +65,15 @@ $colors: (
65
65
  ),
66
66
  "gray": (
67
67
  "": $gray,
68
- "fore": $black,
68
+ "fore": darken($gray, 50%),
69
69
  "light": lighten($gray, 10%),
70
70
  "dark": darken($gray, 10%),
71
71
  "trans-dark": transparentize($gray, 0.85),
72
72
  "trans-light": transparentize($gray, 0.85),
73
73
  ),
74
74
  "light": (
75
- "": darken($gray, 0%),
76
- "fore": #6b6d70,
75
+ "": $gray,
76
+ "fore": darken($gray, 50%),
77
77
  "light": lighten($gray, 10%),
78
78
  "dark": darken($gray, 10%),
79
79
  "trans-dark": transparentize($gray, 0.85),