@acorex/styles 5.0.40 → 5.0.43

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 (21) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +1 -1
  3. package/src/components/_checkbox.scss +1 -1
  4. package/src/components/_dialog.scss +1 -1
  5. package/src/components/_dropdown.scss +14 -4
  6. package/src/components/_editor-container.scss +37 -33
  7. package/src/components/_input.scss +7 -10
  8. package/src/components/_list.scss +6 -8
  9. package/src/components/_menu.scss +43 -0
  10. package/src/components/_popup.scss +33 -29
  11. package/src/components/_radio.scss +1 -1
  12. package/src/components/_skeleton.scss +1 -2
  13. package/src/components/_switch copy.scss +185 -0
  14. package/src/components/_switch.scss +145 -304
  15. package/src/components/_table.scss +50 -17
  16. package/src/components/_tabs.scss +4 -4
  17. package/src/components/_textarea.scss +41 -0
  18. package/src/components/_toast.scss +1 -1
  19. package/src/components/_treeview.scss +23 -0
  20. package/src/components/index.scss +4 -1
  21. package/src/utility/_mixins.scss +7 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.40",
3
+ "version": "5.0.43",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_alert.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  opacity: 1;
12
12
  }
13
13
  .ax-alert-icon {
14
- @apply ax-text-xl ax-self-baseline;
14
+ @apply ax-text-xl ax-self-baseline ax-me-2;
15
15
 
16
16
  }
17
17
  .ax-alert-body {
package/src/components/_checkbox.scss CHANGED
@@ -31,7 +31,7 @@
31
31
 
32
32
  input[type="checkbox"] {
33
33
  @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
34
- @include control-dark("editor");
34
+ @include control-states("editor");
35
35
 
36
36
  &:checked,
37
37
  &:indeterminate {
package/src/components/_dialog.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  .ax-dialog {
3
3
  @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-light-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
4
- @include control-dark('surface');
4
+ @include control-states('surface');
5
5
  @screen sm {
6
6
  width: 98vw;
7
7
  }
package/src/components/_dropdown.scss CHANGED
@@ -5,6 +5,9 @@
5
5
 
6
6
  .ax-dropdown-content {
7
7
  @apply ax-flex ax-flex-auto ax-text-sm ax-overflow-y-hidden ax-overscroll-x-auto;
8
+ &.ax-state-disabled {
9
+ @include control-states("editor-disabled");
10
+ }
8
11
  }
9
12
  }
10
13
 
@@ -18,7 +21,14 @@
18
21
 
19
22
  .ax-overlay-pane {
20
23
  @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
21
- @include control-dark("surface");
24
+ @include control-states("surface");
25
+
26
+
27
+ // &:focus,
28
+ // &:focus-within
29
+ // {
30
+ // @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-50 ax-border-transparent;
31
+ // }
22
32
 
23
33
  &.ax-overlay-center {
24
34
  @apply ax-h-fit;
@@ -195,15 +205,15 @@
195
205
  }
196
206
 
197
207
  &.ax-light-default {
198
- @apply ax-bg-transparent ax-text-light-500 ax-border-transparent;
208
+ @apply ax-bg-transparent ax-text-light-500 ax-border-transparent dark:ax-text-light-200;
199
209
 
200
210
  &:hover,
201
211
  &:focus {
202
- @apply ax-bg-light-50 ax-text-light-600 dark:ax-bg-light-500 dark:ax-text-light-100;
212
+ @apply ax-bg-light-100 ax-text-light-600 dark:ax-bg-light-500 dark:ax-text-light-100;
203
213
  }
204
214
 
205
215
  &:active {
206
- @apply ax-bg-light-100 ax-text-light-700 dark:ax-bg-light-600 dark:ax-text-light-100;
216
+ @apply ax-bg-light-200 ax-text-light-700 dark:ax-bg-light-600 dark:ax-text-light-100;
207
217
  }
208
218
 
209
219
  &.ax-state-selected {
package/src/components/_editor-container.scss CHANGED
@@ -1,8 +1,9 @@
1
1
  @layer components {
2
2
  .ax-editor-container {
3
3
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
4
+ line-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
4
5
  @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
5
- @include control-dark("editor");
6
+ @include control-states("editor");
6
7
 
7
8
  @screen md {
8
9
  @apply ax-text-sm;
@@ -16,7 +17,15 @@
16
17
  @apply ax-px-2;
17
18
  }
18
19
 
19
- &:first-child {}
20
+ .ax-placeholder
21
+ {
22
+ @apply ax-flex ax-mx-2;
23
+ --tw-placeholder-opacity: 1;
24
+ color: rgb(var(--ax-color-placeholder) / var(--tw-placeholder-opacity));
25
+ }
26
+
27
+ &:first-child {
28
+ }
20
29
 
21
30
  [class*=" ax-ic-"],
22
31
  [class^="ax-ic-"] {
@@ -26,30 +35,38 @@
26
35
 
27
36
  .ax-input {
28
37
  width: 1%;
29
- @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5;
38
+ text-align: inherit;
39
+ font: inherit;
40
+ @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5 ax-rounded;
30
41
 
31
42
  &:focus {
32
43
  box-shadow: none;
33
44
  }
34
45
  }
46
+ .ax-textarea{
47
+ width: 1%;
48
+ text-align: inherit;
49
+ font: inherit;
50
+ @apply ax-w-full ax-flex-1 ax-bg-transparent ax-border-none ax-p-2.5 ax-rounded;
35
51
 
36
-
52
+ &:focus {
53
+ box-shadow: none;
54
+ }
55
+ }
37
56
  ax-prefix {
38
-
39
57
  *,
40
- ax-button,ax-addon {
58
+ ax-button,
59
+ ax-addon {
41
60
  @apply ax-rounded-s;
42
61
  }
43
-
44
62
  }
45
63
 
46
64
  ax-suffix {
47
-
48
65
  *,
49
- ax-button, ax-addon {
66
+ ax-button,
67
+ ax-addon {
50
68
  @apply ax-rounded-e;
51
69
  }
52
-
53
70
  }
54
71
 
55
72
  ax-prefix,
@@ -59,13 +76,12 @@
59
76
  }
60
77
 
61
78
  ax-icon {
62
- @apply ax-px-2
79
+ @apply ax-px-2;
63
80
  }
64
81
 
65
- ax-addon{
82
+ ax-addon {
66
83
  @apply ax-bg-light-100 ax-text-light-fore ax-px-4;
67
84
  }
68
-
69
85
  }
70
86
 
71
87
  ax-button {
@@ -86,13 +102,7 @@
86
102
  }
87
103
 
88
104
  &.ax-state-disabled {
89
- background-color: rgb(var(--ax-color-disabled)) !important;
90
- color: rgb(var(--ax-color-disabled-fore)) !important;
91
- @apply ax-cursor-not-allowed;
92
-
93
- &:hover {
94
- background-color: rgb(var(--ax-color-disabled)) !important;
95
- }
105
+ @include control-states("editor-disabled");
96
106
  }
97
107
 
98
108
  &.ax-state-error {
@@ -119,17 +129,11 @@
119
129
  }
120
130
  }
121
131
 
122
- // &.ax-sm {
123
- // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
124
- // .ax-input {
125
- // @apply ax-text-xs;
126
- // }
127
- // }
128
- // &.ax-lg {
129
- // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
130
- // .ax-input {
131
- // @apply ax-text-lg;
132
- // }
133
- // }
132
+ ax-button {
133
+ &.ax-state-disabled {
134
+ @apply ax-bg-light-100 ax-text-light-fore ax-opacity-100 #{!important};
135
+ }
136
+ }
134
137
  }
135
- }
138
+
139
+ }
package/src/components/_input.scss CHANGED
@@ -1,17 +1,14 @@
1
1
  @layer components {
2
- .ax-input {
2
+ .ax-input,
3
+ .ax-textarea {
3
4
  @apply ax-outline-none ax-p-0;
4
- font-size:inherit;
5
+ font-size: inherit;
5
6
  &:focus {
6
- @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
7
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent ax-rounded-md;
7
8
  }
8
9
  &.ax-state-disabled {
9
- background-color: rgb(var(--ax-color-disabled)) !important;
10
- color: rgb(var(--ax-color-disabled-fore)) !important;
11
- @apply ax-cursor-not-allowed;
12
- &:hover {
13
- background-color: rgb(var(--ax-color-disabled)) !important;
14
- }
10
+ @include control-states("editor-disabled");
15
11
  }
16
12
  }
17
- }
13
+
14
+ }
package/src/components/_list.scss CHANGED
@@ -20,24 +20,21 @@
20
20
 
21
21
  .ax-list-item {
22
22
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
23
- @apply ax-text-sm ax-flex ax-items-center ax-px-3;
23
+ @apply ax-text-sm ax-flex ax-items-center ax-px-3 ax-text-light-700;
24
24
 
25
25
  &:focus,
26
26
  &:focus-visible {
27
27
  @apply ax-outline-none;
28
28
  }
29
-
30
- &:hover {
31
- @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-white/[0.09] dark:ax-text-light-50;
32
- }
29
+
33
30
  &.ax-state-selected {
34
- @apply ax-text-primary-500 ax-font-medium dark:ax-text-primary-50;
31
+ @apply ax-bg-light-200 ax-text-light-900 ax-font-medium dark:ax-text-primary-50;
35
32
  }
36
33
 
37
34
  &:not(.ax-check-box)
38
35
  {
39
36
  &.ax-state-selected {
40
- @apply ax-bg-primary-50 dark:ax-bg-white/[0.16];
37
+ @apply ax-bg-light-200 ax-text-light-900 dark:ax-bg-white/[0.16];
41
38
  }
42
39
  }
43
40
 
@@ -46,9 +43,10 @@
46
43
  }
47
44
 
48
45
  &:focus,
46
+ &:hover,
49
47
  &.ax-state-focus {
50
48
  &:not(.ax-state-selected) {
51
- @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-white/[0.16] dark:ax-text-white;
49
+ @apply ax-outline-none ax-bg-light-100 dark:ax-bg-white/[0.16] dark:ax-text-white;
52
50
  }
53
51
  }
54
52
  }
package/src/components/_menu.scss ADDED
@@ -0,0 +1,43 @@
1
+ @layer components {
2
+
3
+ ax-menu,
4
+ .ax-menu {
5
+ >ul {
6
+ @apply ax-border ax-border-solid ax-border-light-200 ax-flex ax-flex-col ax-text-sm;
7
+
8
+ li {
9
+ @apply ax-cursor-pointer ax-p-1;
10
+
11
+ a {
12
+ @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-p-2 ax-animate-fadeIn ax-animate-faster;
13
+
14
+ &.active {
15
+ @apply ax-bg-primary-100 ax-text-primary-500;
16
+ }
17
+
18
+ .active-icon {
19
+ @apply ax--rotate-90
20
+ }
21
+
22
+ &:hover {
23
+ @apply ax-text-primary-500
24
+ }
25
+
26
+ ax-icon {
27
+ @apply ax--rotate-180
28
+ }
29
+ }
30
+
31
+ ul {
32
+ @apply ax-ps-3;
33
+
34
+ }
35
+ }
36
+ }
37
+
38
+ }
39
+
40
+
41
+
42
+
43
+ }
package/src/components/_popup.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @layer components {
2
- ax-page-footer {
3
- @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-light-700;
2
+ ax-page-footer,
3
+ ax-page-header {
4
+ @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
4
5
 
5
6
  ax-prefix {
6
7
  @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
@@ -11,12 +12,20 @@
11
12
  }
12
13
  }
13
14
 
15
+ ax-page-footer {
16
+ @apply ax-border-t;
17
+ }
18
+
19
+ ax-page-header {
20
+ @apply ax-border-b;
21
+ }
22
+
14
23
  .ax-popup {
15
24
  @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit;
16
- @include control-dark("surface");
25
+ @include control-states("surface");
17
26
 
18
- header {
19
- @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
27
+ .ax-popup-header {
28
+ @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center ax-cursor-move;
20
29
 
21
30
  span {
22
31
  @apply ax-font-medium;
@@ -30,31 +39,14 @@
30
39
  }
31
40
  }
32
41
 
33
- main {
34
- @apply ax-flex-1 ax-overflow-auto;
42
+ .ax-popup-main-container {
43
+ @apply ax-overflow-auto ax-flex-1;
35
44
  }
36
-
37
- footer {
38
- @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-white/[0.2];
39
-
40
- ax-prefix {
41
- @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
42
- }
43
-
44
- ax-suffix {
45
- @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
46
- }
45
+ .ax-popup-footer-container{
46
+
47
47
  }
48
-
49
- header,
50
- footer {
51
- > div {
52
- @apply ax-flex ax-items-center;
53
- }
54
- }
55
-
56
48
  &.ax-popup-full {
57
- @apply ax-w-screen ax-h-full ax-max-h-full;
49
+ @apply ax-w-screen ax-h-screen ax-max-h-screen;
58
50
  }
59
51
 
60
52
  &.ax-fit {
@@ -79,6 +71,9 @@
79
71
  &.ax-popup-sm {
80
72
  width: 100vw;
81
73
  max-height: 100vh;
74
+ .ax-popup-main {
75
+ @apply ax-h-screen;
76
+ }
82
77
  }
83
78
 
84
79
  &.ax-popup-md {
@@ -94,6 +89,9 @@
94
89
  &.ax-popup-sm {
95
90
  width: 100vw;
96
91
  max-height: 100vh;
92
+ .ax-popup-main {
93
+ @apply ax-h-screen;
94
+ }
97
95
  }
98
96
 
99
97
  &.ax-popup-md {
@@ -110,6 +108,9 @@
110
108
  width: 100vw;
111
109
  height: 100vh;
112
110
  max-height: 100vh;
111
+ .ax-popup-main {
112
+ @apply ax-h-screen;
113
+ }
113
114
  }
114
115
 
115
116
  &.ax-popup-md,
@@ -123,8 +124,11 @@
123
124
  &.ax-popup-md,
124
125
  &.ax-popup-lg {
125
126
  width: 100vw;
126
- height: 100%;
127
- max-height: 100%;
127
+ height: 100vh;
128
+ max-height: 100vh;
129
+ .ax-popup-main {
130
+ @apply ax-h-screen;
131
+ }
128
132
  }
129
133
  }
130
134
  }
package/src/components/_radio.scss CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  .ax-radio {
6
6
  @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
7
- @include control-dark('editor');
7
+ @include control-states('editor');
8
8
 
9
9
  &:checked {
10
10
  @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-current ax-bg-contain;
package/src/components/_skeleton.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @layer utilities {
2
- $shine-color: #eeeeee;
3
2
  .ax-skeleton {
4
3
  @apply ax-relative ax-overflow-hidden ax-bg-light-200 dark:ax-bg-light-700;
5
4
  &.ax-skeleton-animate {
@@ -7,7 +6,7 @@
7
6
  content: "";
8
7
  @apply ax-block ax-absolute ax-top-0 ax-h-full ax-w-52;
9
8
  left: -200px;
10
- background: linear-gradient(to right, transparent 0%, $shine-color 50%, transparent 100%);
9
+ background: linear-gradient(to right, transparent 0%, rgb(var(--ax-color-light-300)) 50%, transparent 100%);
11
10
  animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
12
11
  }
13
12
  }
package/src/components/_switch copy.scss ADDED
@@ -0,0 +1,185 @@
1
+ @layer components {
2
+ .ax-switch {
3
+ label {
4
+ width: calc((var(--ax-base-size) * var(--ax-base-ratio) - 5px));
5
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
6
+ @apply ax-relative ax-inline-block;
7
+ input {
8
+ @apply ax-w-0 ax-h-0 ax-opacity-0;
9
+ }
10
+
11
+ .ax-switch-slider {
12
+ @apply ax-absolute ax-cursor-pointer ax-left-0 ax-right-0 ax-bottom-0 ax-top-0 ax-bg-light-300 ax-rounded-full;
13
+ @include control-states("editor");
14
+ -webkit-transition: 0.4s;
15
+ transition: 0.4s;
16
+ &::before {
17
+ @apply ax-absolute ax-bg-white ax-rounded-full;
18
+ content: "";
19
+ width: 35%;
20
+ padding-bottom: 35%;
21
+ left: 7%;
22
+ top: 50%;
23
+ transform: translate(0, -50%);
24
+ -webkit-transition: 0.4s;
25
+ transition: 0.4s;
26
+ }
27
+ }
28
+
29
+ input:checked + .ax-switch-slider {
30
+ @apply ax-bg-primary-500;
31
+ }
32
+
33
+ input:focus + .ax-switch-slider {
34
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
35
+ }
36
+
37
+ input:checked + .ax-switch-slider:before {
38
+ -webkit-transform: translate(140%, -50%);
39
+ -ms-transform: translate(140%, -50%);
40
+ transform: translate(140%, -50%);
41
+ }
42
+
43
+ }
44
+ &.ax-success {
45
+ ax-loading {
46
+ @apply ax-stroke-success-500;
47
+ }
48
+ > input {
49
+ &:checked {
50
+ & + .ax-switch-slider {
51
+ background-color: rgb(var(--ax-color-success));
52
+ }
53
+ }
54
+ }
55
+ input:focus ~ .ax-switch-slider {
56
+ @apply ax-ring-success-500;
57
+ }
58
+ }
59
+ &.ax-secondary {
60
+ ax-loading {
61
+ @apply ax-stroke-secondary-500;
62
+ }
63
+ > input {
64
+ &:checked {
65
+ & + .ax-switch-slider {
66
+ background-color: rgb(var(--ax-color-secondary));
67
+ }
68
+ }
69
+ }
70
+ input:focus ~ .ax-switch-slider {
71
+ @apply ax-ring-secondary-500;
72
+ }
73
+ }
74
+ &.ax-danger {
75
+ ax-loading {
76
+ @apply ax-stroke-danger-500;
77
+ }
78
+ > input {
79
+ &:checked {
80
+ & + .ax-switch-slider {
81
+ background-color: rgb(var(--ax-color-danger));
82
+ }
83
+ }
84
+ }
85
+ input:focus ~ .ax-switch-slider {
86
+ @apply ax-ring-danger-500;
87
+ }
88
+ }
89
+ &.ax-warning {
90
+ ax-loading {
91
+ @apply ax-stroke-warning-500;
92
+ }
93
+ > input {
94
+ &:checked {
95
+ & + .ax-switch-slider {
96
+ background-color: rgb(var(--ax-color-warning));
97
+ }
98
+ }
99
+ }
100
+ input:focus ~ .ax-switch-slider {
101
+ @apply ax-ring-warning-500;
102
+ }
103
+ }
104
+ &.ax-info {
105
+ ax-loading {
106
+ @apply ax-stroke-info-500;
107
+ }
108
+ > input {
109
+ &:checked {
110
+ & + .ax-switch-slider {
111
+ background-color: rgb(var(--ax-color-info));
112
+ }
113
+ }
114
+ }
115
+ input:focus ~ .ax-switch-slider {
116
+ @apply ax-ring-info-500;
117
+ }
118
+ }
119
+ &.ax-light {
120
+ ax-loading {
121
+ @apply ax-stroke-light-500;
122
+ }
123
+ > input {
124
+ &:checked {
125
+ & + .ax-switch-slider {
126
+ background-color: rgb(var(--ax-color-light));
127
+ }
128
+ }
129
+ }
130
+ input:focus ~ .ax-switch-slider {
131
+ @apply ax-ring-light-500;
132
+ }
133
+ }
134
+ &.ax-dark {
135
+ ax-loading {
136
+ @apply ax-stroke-dark-500;
137
+ }
138
+ > input {
139
+ &:checked {
140
+ & + .ax-switch-slider {
141
+ background-color: rgb(var(--ax-color-dark));
142
+ }
143
+ }
144
+ }
145
+ input:focus ~ .ax-switch-slider {
146
+ @apply ax-ring-dark-500;
147
+ }
148
+ }
149
+ &.ax-state-loading {
150
+ label {
151
+ .ax-switch-slider {
152
+ &::before {
153
+ background-image: url("../images/fill-loading.svg");
154
+ background-color: transparent;
155
+ background-size: cover;
156
+ @apply ax-absolute;
157
+ content: "";
158
+ width: 35%;
159
+ padding-bottom: 35%;
160
+ transform: translate(0, -50%);
161
+
162
+ left: 7%;
163
+ top: 18%;
164
+ animation: rotation 0.6s infinite linear;
165
+
166
+ }
167
+ @keyframes rotation {
168
+ from {
169
+ transform: rotate(0deg);
170
+ }
171
+ to {
172
+ transform: rotate(359deg);
173
+ }
174
+ }
175
+ }
176
+ }
177
+ }
178
+ &.ax-state-disabled {
179
+ @apply ax-opacity-60;
180
+ }
181
+ &.ax-state-readonly {
182
+ @apply ax-opacity-60;
183
+ }
184
+ }
185
+ }