@acorex/styles 5.0.40 → 5.0.41

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/_dropdown.scss +4 -4
  3. package/src/components/_editor-container.scss +14 -20
  4. package/src/components/_input.scss +2 -7
  5. package/src/components/_popup.scss +31 -27
  6. package/src/components/_switch copy.scss +185 -0
  7. package/src/components/_switch.scss +145 -304
  8. package/src/components/_tabs.scss +1 -1
  9. package/src/images/fill-loading.svg +10 -0
  10. package/src/images/loading.svg +8 -0
  11. package/src/utility/_mixins.scss +6 -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.41",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_dropdown.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  .ax-overlay-pane {
20
- @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
20
+ @apply ax-bg-white ax-border ax-rounded ax-border-light-200;
21
21
  @include control-dark("surface");
22
22
 
23
23
  &.ax-overlay-center {
@@ -195,15 +195,15 @@
195
195
  }
196
196
 
197
197
  &.ax-light-default {
198
- @apply ax-bg-transparent ax-text-light-500 ax-border-transparent;
198
+ @apply ax-bg-transparent ax-text-light-500 ax-border-transparent dark:ax-text-light-200;
199
199
 
200
200
  &:hover,
201
201
  &:focus {
202
- @apply ax-bg-light-50 ax-text-light-600 dark:ax-bg-light-500 dark:ax-text-light-100;
202
+ @apply ax-bg-light-100 ax-text-light-600 dark:ax-bg-light-500 dark:ax-text-light-100;
203
203
  }
204
204
 
205
205
  &:active {
206
- @apply ax-bg-light-100 ax-text-light-700 dark:ax-bg-light-600 dark:ax-text-light-100;
206
+ @apply ax-bg-light-200 ax-text-light-700 dark:ax-bg-light-600 dark:ax-text-light-100;
207
207
  }
208
208
 
209
209
  &.ax-state-selected {
package/src/components/_editor-container.scss CHANGED
@@ -1,6 +1,7 @@
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
6
  @include control-dark("editor");
6
7
 
@@ -16,7 +17,8 @@
16
17
  @apply ax-px-2;
17
18
  }
18
19
 
19
- &:first-child {}
20
+ &:first-child {
21
+ }
20
22
 
21
23
  [class*=" ax-ic-"],
22
24
  [class^="ax-ic-"] {
@@ -26,30 +28,29 @@
26
28
 
27
29
  .ax-input {
28
30
  width: 1%;
29
- @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5;
31
+ text-align: inherit;
32
+ font: inherit;
33
+ @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5 ax-rounded;
30
34
 
31
35
  &:focus {
32
36
  box-shadow: none;
33
37
  }
34
38
  }
35
39
 
36
-
37
40
  ax-prefix {
38
-
39
41
  *,
40
- ax-button,ax-addon {
42
+ ax-button,
43
+ ax-addon {
41
44
  @apply ax-rounded-s;
42
45
  }
43
-
44
46
  }
45
47
 
46
48
  ax-suffix {
47
-
48
49
  *,
49
- ax-button, ax-addon {
50
+ ax-button,
51
+ ax-addon {
50
52
  @apply ax-rounded-e;
51
53
  }
52
-
53
54
  }
54
55
 
55
56
  ax-prefix,
@@ -59,13 +60,12 @@
59
60
  }
60
61
 
61
62
  ax-icon {
62
- @apply ax-px-2
63
+ @apply ax-px-2;
63
64
  }
64
65
 
65
- ax-addon{
66
+ ax-addon {
66
67
  @apply ax-bg-light-100 ax-text-light-fore ax-px-4;
67
68
  }
68
-
69
69
  }
70
70
 
71
71
  ax-button {
@@ -86,13 +86,7 @@
86
86
  }
87
87
 
88
88
  &.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
- }
89
+ @include control-dark("editor-disabled");
96
90
  }
97
91
 
98
92
  &.ax-state-error {
@@ -132,4 +126,4 @@
132
126
  // }
133
127
  // }
134
128
  }
135
- }
129
+ }
package/src/components/_input.scss CHANGED
@@ -3,15 +3,10 @@
3
3
  @apply ax-outline-none ax-p-0;
4
4
  font-size:inherit;
5
5
  &:focus {
6
- @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
6
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent ax-rounded-md;
7
7
  }
8
8
  &.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
- }
9
+ @include control-dark("editor-disabled");
15
10
  }
16
11
  }
17
12
  }
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
25
  @include control-dark("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,29 +39,12 @@
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
49
  @apply ax-w-screen ax-h-full ax-max-h-full;
58
50
  }
@@ -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/_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-dark("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
+ }
package/src/components/_switch.scss CHANGED
@@ -1,346 +1,187 @@
1
1
  @layer components {
2
+ ax-switch,
2
3
  .ax-switch {
3
- width: calc((var(--ax-base-size) * var(--ax-base-ratio) - 5px));
4
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
5
- @apply ax-relative ax-inline-block;
6
- input {
7
- @apply ax-w-0 ax-h-0 ax-opacity-0;
8
- }
9
-
10
- .ax-switch-slider {
11
- @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;
12
- @include control-dark("editor");
13
- -webkit-transition: 0.4s;
14
- transition: 0.4s;
15
- &::before {
16
- @apply ax-absolute ax-bg-white ax-rounded-full;
17
- content: "";
18
- width: 35%;
19
- padding-bottom: 35%;
20
- left: 7%;
21
- top: 50%;
22
- transform: translate(0, -50%);
23
- -webkit-transition: 0.4s;
24
- transition: 0.4s;
4
+ button {
5
+ @apply ax-relative ax-inline-block ax-align-middle ax-border-none ax-cursor-pointer ax-rounded-full ax-bg-light-300 ax-text-light-fore ax-transition-all;
6
+ min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
7
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
8
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
9
+ &.ax-switch-checked {
10
+ @apply ax-bg-primary-500;
11
+ .ax-switch-handle {
12
+ @apply ax-right-0.5;
13
+ left: initial;
14
+ }
15
+ .ax-switch-inner {
16
+ @apply ax-text-primary-fore;
17
+ margin-inline-end: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
18
+ margin-inline-start: var(--ax-base-size);
19
+ }
25
20
  }
26
- }
27
-
28
- input:checked + .ax-switch-slider {
29
- @apply ax-bg-primary-500;
30
- }
31
-
32
- input:focus + .ax-switch-slider {
33
- @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
34
- }
35
-
36
- input:checked + .ax-switch-slider:before {
37
- -webkit-transform: translate(140%, -50%);
38
- -ms-transform: translate(140%, -50%);
39
- transform: translate(140%, -50%);
40
- }
41
-
42
- &.ax-state-disabled {
43
- .ax-switch-slider {
44
- background-color: rgb(var(--ax-color-disabled)) !important;
45
- @apply ax-cursor-not-allowed ax-border-transparent;
46
- &:after {
47
- @apply ax-border-transparent;
21
+ .ax-switch-handle {
22
+ width: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
23
+ height: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
24
+ @apply ax-bg-white ax-absolute ax-rounded-full ax-transition-all ax-left-0.5 ax-top-0.5;
25
+ ax-loading {
26
+ transform: translateY(-50%);
27
+ @apply ax-w-full ax-absolute ax-left-0 ax-right-0 ax-top-2/4 ax--translate-y-1/2;
28
+ svg {
29
+ @apply ax-fill-primary-500 ax-stroke-primary-500;
30
+ }
48
31
  }
49
- &:hover {
50
- @apply ax-border-transparent;
32
+ &:before {
33
+ @apply ax-absolute ax-bg-white ax-transition-all ax-rounded-full;
34
+ content: "";
51
35
  }
52
36
  }
53
- }
54
- &.ax-state-readonly {
55
- .ax-switch-slider {
56
- opacity: 0.6;
57
- @apply ax-cursor-not-allowed;
37
+ .ax-switch-inner {
38
+ @apply ax-block;
39
+ margin-inline-start: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
40
+ margin-inline-end: var(--ax-base-size);
41
+ transition: margin 0.2s;
58
42
  }
59
43
  }
60
-
61
- &.ax-success {
62
- > input {
63
- &:checked {
64
- & + .ax-switch-slider {
65
- background-color: rgb(var(--ax-color-success));
44
+ &.ax-primary {
45
+ button {
46
+ &.ax-switch-checked {
47
+ @apply ax-bg-primary-500;
48
+ .ax-switch-inner {
49
+ @apply ax-text-primary-fore;
50
+ }
51
+ }
52
+ .ax-switch-handle {
53
+ ax-loading {
54
+ svg {
55
+ @apply ax-fill-primary-500 ax-stroke-primary-500;
56
+ }
66
57
  }
67
58
  }
68
- }
69
- input:focus ~ .ax-switch-slider {
70
- @apply ax-ring-success-500;
71
59
  }
72
60
  }
73
61
  &.ax-secondary {
74
- > input {
75
- &:checked {
76
- & + .ax-switch-slider {
77
- background-color: rgb(var(--ax-color-secondary));
62
+ button {
63
+ &.ax-switch-checked {
64
+ @apply ax-bg-secondary-500;
65
+ .ax-switch-inner {
66
+ @apply ax-text-secondary-fore;
67
+ }
68
+ }
69
+ .ax-switch-handle {
70
+ ax-loading {
71
+ svg {
72
+ @apply ax-fill-secondary-500 ax-stroke-secondary-500;
73
+ }
78
74
  }
79
75
  }
80
- }
81
- input:focus ~ .ax-switch-slider {
82
- @apply ax-ring-secondary-500;
83
76
  }
84
77
  }
85
- &.ax-danger {
86
- > input {
87
- &:checked {
88
- & + .ax-switch-slider {
89
- background-color: rgb(var(--ax-color-danger));
78
+ &.ax-success {
79
+ button {
80
+ &.ax-switch-checked {
81
+ @apply ax-bg-success-500;
82
+ .ax-switch-inner {
83
+ @apply ax-text-success-fore;
84
+ }
85
+ }
86
+ .ax-switch-handle {
87
+ ax-loading {
88
+ svg {
89
+ @apply ax-fill-success-500 ax-stroke-success-500;
90
+ }
90
91
  }
91
92
  }
92
- }
93
- input:focus ~ .ax-switch-slider {
94
- @apply ax-ring-danger-500;
95
93
  }
96
94
  }
97
95
  &.ax-warning {
98
- > input {
99
- &:checked {
100
- & + .ax-switch-slider {
101
- background-color: rgb(var(--ax-color-warning));
96
+ button {
97
+ &.ax-switch-checked {
98
+ @apply ax-bg-warning-500;
99
+ .ax-switch-inner {
100
+ @apply ax-text-warning-fore;
101
+ }
102
+ }
103
+ .ax-switch-handle {
104
+ ax-loading {
105
+ svg {
106
+ @apply ax-fill-warning-500 ax-stroke-warning-500;
107
+ }
102
108
  }
103
109
  }
104
- }
105
- input:focus ~ .ax-switch-slider {
106
- @apply ax-ring-warning-500;
107
110
  }
108
111
  }
109
- &.ax-info {
110
- > input {
111
- &:checked {
112
- & + .ax-switch-slider {
113
- background-color: rgb(var(--ax-color-info));
112
+ &.ax-danger {
113
+ button {
114
+ &.ax-switch-checked {
115
+ @apply ax-bg-danger-500;
116
+ .ax-switch-inner {
117
+ @apply ax-text-danger-fore;
118
+ }
119
+ }
120
+ .ax-switch-handle {
121
+ ax-loading {
122
+ svg {
123
+ @apply ax-fill-danger-500 ax-stroke-danger-500;
124
+ }
114
125
  }
115
126
  }
116
- }
117
- input:focus ~ .ax-switch-slider {
118
- @apply ax-ring-info-500;
119
127
  }
120
128
  }
121
- &.ax-light {
122
- > input {
123
- &:checked {
124
- & + .ax-switch-slider {
125
- background-color: rgb(var(--ax-color-light));
129
+ &.ax-info {
130
+ button {
131
+ &.ax-switch-checked {
132
+ @apply ax-bg-info-500;
133
+ .ax-switch-inner {
134
+ @apply ax-text-info-fore;
135
+ }
136
+ }
137
+ .ax-switch-handle {
138
+ ax-loading {
139
+ svg {
140
+ @apply ax-fill-info-500 ax-stroke-info-500;
141
+ }
126
142
  }
127
143
  }
128
- }
129
- input:focus ~ .ax-switch-slider {
130
- @apply ax-ring-light-500;
131
144
  }
132
145
  }
133
146
  &.ax-dark {
134
- > input {
135
- &:checked {
136
- & + .ax-switch-slider {
137
- background-color: rgb(var(--ax-color-dark));
147
+ button {
148
+ &.ax-switch-checked {
149
+ @apply ax-bg-dark-500;
150
+ .ax-switch-inner {
151
+ @apply ax-text-dark-fore;
152
+ }
153
+ }
154
+ .ax-switch-handle {
155
+ ax-loading {
156
+ svg {
157
+ @apply ax-fill-dark-500 ax-stroke-dark-500;
158
+ }
138
159
  }
139
160
  }
140
161
  }
141
- input:focus ~ .ax-switch-slider {
142
- @apply ax-ring-dark-500;
162
+ }
163
+ &.ax-light {
164
+ button {
165
+ &.ax-switch-checked {
166
+ @apply ax-bg-light-500;
167
+ .ax-switch-inner {
168
+ @apply ax-text-light-fore;
169
+ }
170
+ }
171
+ .ax-switch-handle {
172
+ ax-loading {
173
+ svg {
174
+ @apply ax-fill-light-500 ax-stroke-light-500;
175
+ }
176
+ }
177
+ }
143
178
  }
144
179
  }
180
+ .ax-state-disabled {
181
+ @apply ax-opacity-60 ax-cursor-not-allowed #{!important};
182
+ }
183
+ .ax-state-readonly {
184
+ @apply ax-opacity-75 #{!important};
185
+ }
145
186
  }
146
-
147
- // .ax-switch {
148
- // position: relative;
149
- // display: block;
150
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 7px);
151
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 15px);
152
- // margin: 5px;
153
- // >input {
154
- // opacity: 0;
155
- // width: 0;
156
- // height: 0;
157
- // &:checked {
158
- // &+.ax-switch-slider {
159
- // background-color: rgb(var(--ax-color-primary));
160
-
161
- // &::before {
162
- // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
163
- // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
164
- // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
165
- // }
166
- // }
167
- // }
168
- // }
169
- // .ax-switch-slider {
170
- // position: absolute;
171
- // cursor: pointer;
172
- // top: 0;
173
- // left: 0;
174
- // right: 0;
175
- // bottom: 0;
176
- // -webkit-transition: 0.2s;
177
- // transition: 0.2s;
178
- // border-radius: 25px;
179
- // @apply ax-bg-light-400 dark:ax-border-transparent dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
180
- // &::before {
181
- // content: "";
182
- // position: absolute;
183
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
184
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
185
- // left: 3px;
186
- // bottom: 3px;
187
- // background-color: white;
188
- // -webkit-transition: 0.2s;
189
- // transition: 0.2s;
190
- // border-radius: 50%;
191
- // }
192
- // }
193
- // input:focus~.ax-switch-slider {
194
- // @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
195
- // }
196
- // &.ax-sm {
197
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
198
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
199
- // >input {
200
- // &:checked {
201
- // &+.ax-switch-slider {
202
- // &::before {
203
- // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
204
- // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
205
- // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
206
- // }
207
- // }
208
- // }
209
- // }
210
- // .ax-switch-slider {
211
- // &::before {
212
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
213
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
214
- // }
215
- // }
216
- // }
217
- // &.ax-lg {
218
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 20px);
219
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px);
220
- // >input {
221
- // &:checked {
222
- // &+.ax-switch-slider {
223
- // &::before {
224
- // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
225
- // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
226
- // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
227
- // }
228
- // }
229
- // }
230
- // }
231
- // .ax-switch-slider {
232
- // &::before {
233
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
234
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
235
- // }
236
- // }
237
- // }
238
- // &.ax-state-error {
239
- // .ax-switch-slider {
240
- // @apply ax-ring-2 ax-ring-danger-500 ax-ring-opacity-100 ax-border-transparent;
241
- // }
242
- // }
243
- // &.ax-state-disabled {
244
- // .ax-switch-slider {
245
- // background-color: rgb(var(--ax-color-disabled)) !important;
246
- // @apply ax-cursor-not-allowed ax-border-transparent;
247
- // &:after {
248
- // @apply ax-border-transparent;
249
- // }
250
- // &:hover {
251
- // @apply ax-border-transparent;
252
- // }
253
- // }
254
- // }
255
- // &.ax-state-readonly {
256
- // .ax-switch-slider {
257
- // opacity: 0.6;
258
- // @apply ax-cursor-not-allowed;
259
- // }
260
- // }
261
- // &.ax-success {
262
- // >input {
263
- // &:checked {
264
- // &+.ax-switch-slider {
265
- // background-color: rgb(var(--ax-color-success));
266
- // }
267
- // }
268
- // }
269
- // input:focus~.ax-switch-slider {
270
- // @apply ax-ring-success-500;
271
- // }
272
- // }
273
- // &.ax-secondary {
274
- // >input {
275
- // &:checked {
276
- // &+.ax-switch-slider {
277
- // background-color: rgb(var(--ax-color-secondary));
278
- // }
279
- // }
280
- // }
281
- // input:focus~.ax-switch-slider {
282
- // @apply ax-ring-secondary-500;
283
- // }
284
- // }
285
- // &.ax-danger {
286
- // >input {
287
- // &:checked {
288
- // &+.ax-switch-slider {
289
- // background-color: rgb(var(--ax-color-danger));
290
- // }
291
- // }
292
- // }
293
- // input:focus~.ax-switch-slider {
294
- // @apply ax-ring-danger-500;
295
- // }
296
- // }
297
- // &.ax-warning {
298
- // >input {
299
- // &:checked {
300
- // &+.ax-switch-slider {
301
- // background-color: rgb(var(--ax-color-warning));
302
- // }
303
- // }
304
- // }
305
- // input:focus~.ax-switch-slider {
306
- // @apply ax-ring-warning-500;
307
- // }
308
- // }
309
- // &.ax-info {
310
- // >input {
311
- // &:checked {
312
- // &+.ax-switch-slider {
313
- // background-color: rgb(var(--ax-color-info));
314
- // }
315
- // }
316
- // }
317
- // input:focus~.ax-switch-slider {
318
- // @apply ax-ring-info-500;
319
- // }
320
- // }
321
- // &.ax-light {
322
- // >input {
323
- // &:checked {
324
- // &+.ax-switch-slider {
325
- // background-color: rgb(var(--ax-color-light));
326
- // }
327
- // }
328
- // }
329
- // input:focus~.ax-switch-slider {
330
- // @apply ax-ring-light-500;
331
- // }
332
- // }
333
- // &.ax-dark {
334
- // >input {
335
- // &:checked {
336
- // &+.ax-switch-slider {
337
- // background-color: rgb(var(--ax-color-dark));
338
- // }
339
- // }
340
- // }
341
- // input:focus~.ax-switch-slider {
342
- // @apply ax-ring-dark-500;
343
- // }
344
- // }
345
- // }
346
187
  }
package/src/components/_tabs.scss CHANGED
@@ -119,7 +119,7 @@
119
119
  }
120
120
 
121
121
  &.ax-state-active {
122
- @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
122
+ @apply ax-bg-light-200 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
123
123
  }
124
124
  }
125
125
  }
package/src/images/fill-loading.svg ADDED
@@ -0,0 +1,10 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 324">
2
+ <g id="Layer_2" data-name="Layer 2">
3
+ <g id="Layer_1-2" data-name="Layer 1">
4
+ <path
5
+ d="M162,0A162,162,0,1,0,324,162,162,162,0,0,0,162,0Zm0,52.64A109.36,109.36,0,0,0,52.64,162H22.21A139.79,139.79,0,0,1,162,22.21Z"
6
+ fill="#fff" />
7
+
8
+ </g>
9
+ </g>
10
+ </svg>
package/src/images/loading.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg version="1.1" width="24" height="24" class="ax-stroke-current" stroke="inherit" fill="inherit" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
2
+ x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve">
3
+ <path fill="current"
4
+ d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
5
+ <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25"
6
+ dur="0.6s" repeatCount="indefinite" />
7
+ </path>
8
+ </svg>
package/src/utility/_mixins.scss CHANGED
@@ -40,14 +40,15 @@
40
40
  @mixin control-dark($type) {
41
41
 
42
42
  @if($type == "editor"){
43
- @apply dark:ax-border-white/[0.16] dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
43
+ @apply dark:ax-border-white/[0.06] dark:ax-bg-white/[0.06] dark:ax-backdrop-blur-3xl;
44
+ }
45
+
46
+ @if($type == "editor-disabled"){
47
+ @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/[0.06] dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed;
44
48
  }
45
49
  @if($type == "surface"){
46
50
  @apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
47
-
48
51
  }
49
52
 
50
- }
51
53
 
52
- // @include control-dark('editor');
53
- // @include control-dark('surface');
54
+ }