@acorex/styles 4.2.22 → 4.2.25

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 (7) 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 +19 -21
  5. package/scss/master.scss +18 -44
  6. package/scss/menu.scss +0 -7
  7. 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.22",
3
+ "version": "4.2.25",
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
@@ -4,7 +4,7 @@
4
4
  &.form-control {
5
5
  &.disabled {
6
6
  background: var(--ax-gray-light-color) !important;
7
- .chips-container{
7
+ .chips-container {
8
8
  background-color: var(--ax-gray-light-color-color);
9
9
  }
10
10
  }
@@ -26,19 +26,19 @@
26
26
  position: relative;
27
27
  width: calc(var(--ax-base-size) * var(--ax-base-ratio));
28
28
  height: 100%;
29
- ax-button{
30
- button{
29
+ ax-button {
30
+ button {
31
31
  height: 50% !important;
32
32
  position: absolute;
33
33
  padding: 0.4rem !important;
34
34
  }
35
- &:first-child{
36
- button{
35
+ &:first-child {
36
+ button {
37
37
  top: 0;
38
38
  }
39
39
  }
40
- &:last-child{
41
- button{
40
+ &:last-child {
41
+ button {
42
42
  bottom: 0;
43
43
  }
44
44
  }
@@ -98,7 +98,6 @@
98
98
  @include ax-border-radius(var(--ax-size-border-radius));
99
99
  -webkit-transition: opacity 0.3s ease;
100
100
  transition: opacity 0.3s ease;
101
-
102
101
  }
103
102
  }
104
103
  &.disabled {
@@ -114,6 +113,7 @@
114
113
  flex: 1 0 auto;
115
114
  font-family: inherit;
116
115
  font-size: 0.875rem;
116
+ padding: 0 0.5rem;
117
117
  outline: 0;
118
118
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
119
119
  text-align: start;
@@ -132,7 +132,7 @@
132
132
  &::placeholder {
133
133
  color: var(--ax-gray-dark-color) !important;
134
134
  }
135
-
135
+
136
136
  // &.clear {
137
137
  // margin-inline-end: 3em !important;
138
138
  // }
@@ -219,18 +219,19 @@
219
219
  flex-direction: column;
220
220
  width: 100%;
221
221
  }
222
+
222
223
  &.form-item {
223
224
  background-color: var(--ax-white-color);
224
225
  position: relative;
225
226
  display: flex;
226
- flex-wrap: wrap;
227
+ // flex-wrap: wrap;
227
228
  align-items: stretch;
228
229
  width: 100%;
229
230
  overflow: hidden;
230
231
  border: 1px solid;
231
232
  border-color: var(--ax-border-color);
232
233
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
233
-
234
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio));
234
235
  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
235
236
  &:focus-within {
236
237
  border-color: var(--ax-primary-color);
@@ -241,10 +242,8 @@
241
242
  }
242
243
  }
243
244
  }
244
-
245
-
245
+
246
246
  &.required-state {
247
-
248
247
  border-inline-start-width: 2px;
249
248
  border-inline-start-style: solid;
250
249
  border-inline-start-color: var(--ax-warning-color) !important;
@@ -257,7 +256,6 @@
257
256
  }
258
257
  }
259
258
  }
260
-
261
259
  }
262
260
  &.success-state {
263
261
  border-inline-start-width: 2px;
@@ -300,14 +298,14 @@
300
298
  }
301
299
  .readonly {
302
300
  opacity: 0.8;
303
-
301
+
304
302
  input {
305
303
  cursor: no-drop;
306
304
  }
307
- .button{
305
+ .button {
308
306
  &.disabled {
309
- background: transparent !important;
310
- }
307
+ background: transparent !important;
308
+ }
311
309
  }
312
310
  }
313
311
 
@@ -316,11 +314,11 @@
316
314
  border: none;
317
315
  box-shadow: none;
318
316
  }
319
-
320
317
  }
321
318
  .content {
322
319
  border: none;
323
320
  position: relative;
321
+ display: flex;
324
322
  flex: 1 1 auto;
325
323
  width: 1%;
326
324
  min-width: 0;
@@ -477,7 +475,7 @@
477
475
  }
478
476
  .chips-blank {
479
477
  border: none;
480
- background-color:transparent;
478
+ background-color: transparent;
481
479
  flex: unset;
482
480
  &:hover {
483
481
  border: none;
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" {
@@ -62,55 +63,28 @@
62
63
 
63
64
  // Sizes
64
65
  .ax {
65
- &.form-control {
66
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
67
- padding: 0 0.5rem;
68
- font-size: 0.875rem;
69
- &.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
- padding: 0 0.3rem;
66
+ &.sm {
67
+ --ax-base-size: calc(var(--ax-size) - 2px);
68
+ font-size: 0.75rem;
69
+ * {
73
70
  font-size: 0.75rem;
74
- &.ax-button-icon {
75
- padding: 0.3rem;
76
- }
77
71
  }
78
- &.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;
72
+ }
73
+ &.md {
74
+ --ax-base-size: var(--ax-size);
75
+ font-size: 0.875rem;
76
+ * {
82
77
  font-size: 0.875rem;
83
- &.ax-button-icon {
84
- padding: 0.7rem;
85
- }
86
78
  }
87
- &.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);
90
- padding: 0 0.8rem;
91
- font-size: 1.2rem;
92
- &.ax-button-icon {
93
- padding: 0.9rem;
94
- }
79
+ }
80
+ &.lg {
81
+ --ax-base-size: calc(var(--ax-size) + 2px);
82
+ font-size: 1rem;
83
+ * {
84
+ font-size: 1rem;
95
85
  }
96
86
  }
97
87
  }
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
88
  @each $name, $size in $sizes {
115
89
  @if type-of($size) == "map" {
116
90
  @each $subname, $variant in $size {
package/scss/menu.scss CHANGED
@@ -1,16 +1,9 @@
1
- .ax-toolbar-menu-container {
2
- .ax.nav-menu {
3
- box-shadow: none;
4
- }
5
- }
6
1
  .ax {
7
2
  &.nav-menu {
8
3
  list-style: none;
9
4
  margin: 0;
10
5
  padding: 0;
11
6
  display: flex;
12
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
13
- 0 3px 14px 2px rgba(0, 0, 0, 0.12);
14
7
  &.nav-vertical {
15
8
  background-color: var(--ax-white-color);
16
9
  flex-direction: column;
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 */