@acorex/styles 5.0.38 → 5.0.42

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/components/_button.scss +1 -1
  3. package/src/components/_calendar.scss +3 -0
  4. package/src/components/_checkbox.scss +16 -3
  5. package/src/components/_dropdown.scss +9 -7
  6. package/src/components/_editor-container.scss +47 -10
  7. package/src/components/_fieldset.scss +8 -0
  8. package/src/components/_form.scss +1 -1
  9. package/src/components/_input.scss +2 -7
  10. package/src/components/_list.scss +3 -5
  11. package/src/components/_loading.scss +5 -0
  12. package/src/components/_numberbox.scss +17 -0
  13. package/src/components/_popup.scss +42 -29
  14. package/src/components/_switch copy.scss +185 -0
  15. package/src/components/_switch.scss +145 -304
  16. package/src/components/_tabs.scss +1 -1
  17. package/src/components/index.scss +2 -0
  18. package/src/utility/_mixins.scss +6 -5
  19. package/src/variables/_colors.scss +12 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.38",
3
+ "version": "5.0.42",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_button.scss CHANGED
@@ -81,7 +81,7 @@
81
81
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
82
82
  }
83
83
  &:active {
84
- @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
84
+ @apply ax-bg-primary-800 ax-ring-2 ax-ring-offset-2 ax-ring-primary-800;
85
85
  }
86
86
  }
87
87
 
package/src/components/_calendar.scss CHANGED
@@ -45,6 +45,9 @@
45
45
  &:hover {
46
46
  @apply ax-bg-light-100 dark:ax-bg-white/[0.07];
47
47
  }
48
+ &:focus {
49
+ @apply ax-ring-2 ax-ring-primary-500 ax-outline-none;
50
+ }
48
51
 
49
52
  &.ax-state-disabled {
50
53
  @apply ax-text-light-300 ax-cursor-not-allowed;
package/src/components/_checkbox.scss CHANGED
@@ -3,6 +3,21 @@
3
3
  .ax-check-box,
4
4
  ax-check-box {
5
5
 
6
+ .ax-state-error {
7
+ @apply ax-text-danger-500;
8
+
9
+ input[type="checkbox"] {
10
+ @apply ax-border-danger-500;
11
+ }
12
+ }
13
+ .ax-state-success {
14
+ @apply ax-text-success-600;
15
+
16
+ input[type="checkbox"] {
17
+ @apply ax-border-success-600;
18
+ }
19
+ }
20
+
6
21
 
7
22
  .ax-wrapper {
8
23
  &.ax-state-disabled {
@@ -42,9 +57,7 @@
42
57
  &.ax-state-disabled {
43
58
  @apply ax-opacity-60;
44
59
  }
45
- &.ax-state-error{
46
- @apply ax-border-danger-500;
47
- }
60
+
48
61
  }
49
62
  }
50
63
  }
package/src/components/_dropdown.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @layer components {
2
-
3
2
  ax-drop-down,
4
3
  .ax-drop-down {
5
4
  display: contents;
@@ -18,7 +17,7 @@
18
17
  }
19
18
 
20
19
  .ax-overlay-pane {
21
- @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;
22
21
  @include control-dark("surface");
23
22
 
24
23
  &.ax-overlay-center {
@@ -45,7 +44,10 @@
45
44
  }
46
45
 
47
46
  i {
48
- @apply ax-text-primary-500 ax-cursor-pointer ax-text-xl;
47
+ @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
48
+ &:hover {
49
+ @apply ax-text-light-500 dark:ax-text-light-100;
50
+ }
49
51
  }
50
52
  }
51
53
 
@@ -193,15 +195,15 @@
193
195
  }
194
196
 
195
197
  &.ax-light-default {
196
- @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;
197
199
 
198
200
  &:hover,
199
201
  &:focus {
200
- @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;
201
203
  }
202
204
 
203
205
  &:active {
204
- @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;
205
207
  }
206
208
 
207
209
  &.ax-state-selected {
@@ -211,4 +213,4 @@
211
213
  }
212
214
  }
213
215
  }
214
- }
216
+ }
package/src/components/_editor-container.scss CHANGED
@@ -1,58 +1,84 @@
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");
7
+
6
8
  @screen md {
7
9
  @apply ax-text-sm;
8
10
  }
11
+
9
12
  &:focus-within {
10
13
  @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
11
14
  }
15
+
12
16
  &.ax-button-icon {
13
17
  @apply ax-px-2;
14
18
  }
19
+
15
20
  &:first-child {
16
21
  }
22
+
17
23
  [class*=" ax-ic-"],
18
24
  [class^="ax-ic-"] {
19
25
  font-size: 1.2rem !important;
20
26
  line-height: 1 !important;
21
27
  }
28
+
22
29
  .ax-input {
23
- min-width: 1%;
24
- @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5;
30
+ width: 1%;
31
+ text-align: inherit;
32
+ font: inherit;
33
+ @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5 ax-rounded;
25
34
 
26
35
  &:focus {
27
36
  box-shadow: none;
28
37
  }
29
38
  }
39
+
30
40
  ax-prefix {
31
41
  *,
32
- ax-button {
42
+ ax-button,
43
+ ax-addon {
33
44
  @apply ax-rounded-s;
34
45
  }
35
46
  }
47
+
36
48
  ax-suffix {
37
49
  *,
38
- ax-button {
50
+ ax-button,
51
+ ax-addon {
39
52
  @apply ax-rounded-e;
40
53
  }
41
54
  }
55
+
42
56
  ax-prefix,
43
57
  ax-suffix {
44
58
  * {
45
59
  @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
46
60
  }
61
+
62
+ ax-icon {
63
+ @apply ax-px-2;
64
+ }
65
+
66
+ ax-addon {
67
+ @apply ax-bg-light-100 ax-text-light-fore ax-px-4;
68
+ }
47
69
  }
70
+
48
71
  ax-button {
49
72
  height: 100% !important;
50
73
  @apply ax-rounded-none;
74
+
51
75
  &:focus {
52
76
  @apply ax-ring-0;
53
77
  }
78
+
54
79
  &.ax-button-icon {
55
80
  min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
81
+
56
82
  .ax-ic {
57
83
  @apply ax-text-base;
58
84
  }
@@ -60,22 +86,33 @@
60
86
  }
61
87
 
62
88
  &.ax-state-disabled {
63
- background-color: rgb(var(--ax-color-disabled)) !important;
64
- color: rgb(var(--ax-color-disabled-fore)) !important;
65
- @apply ax-cursor-not-allowed;
66
- &:hover {
67
- background-color: rgb(var(--ax-color-disabled)) !important;
68
- }
89
+ @include control-dark("editor-disabled");
69
90
  }
91
+
70
92
  &.ax-state-error {
71
93
  @apply ax-border-danger-500;
94
+
72
95
  .ax-input {
73
96
  @apply ax-placeholder-danger-500;
74
97
  }
98
+
75
99
  &:focus-within {
76
100
  @apply ax-ring-0 ax-ring-transparent;
77
101
  }
78
102
  }
103
+
104
+ &.ax-state-success {
105
+ @apply ax-border-success-600;
106
+
107
+ .ax-input {
108
+ @apply ax-placeholder-success-600;
109
+ }
110
+
111
+ &:focus-within {
112
+ @apply ax-ring-0 ax-ring-transparent;
113
+ }
114
+ }
115
+
79
116
  // &.ax-sm {
80
117
  // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
81
118
  // .ax-input {
package/src/components/_fieldset.scss ADDED
@@ -0,0 +1,8 @@
1
+ @layer components{
2
+ fieldset{
3
+ @apply ax-grid ax-col-span-6 ax-grid-cols-6 ax-gap-4 ax-border ax-border-solid ax-border-gray-300 ax-p-3 ax-rounded;
4
+ legend{
5
+ @apply ax-text-sm ax-px-1;
6
+ }
7
+ }
8
+ }
package/src/components/_form.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  ax-form-field {
3
3
  @apply ax-mb-2 ax-relative;
4
4
  .ax-error-msg {
5
- @apply ax-block ax-text-danger-500 ax-text-xs;
5
+ @apply ax-block ax-text-danger-500 ax-text-xs ax-py-2;
6
6
  }
7
7
  }
8
8
  }
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/_list.scss CHANGED
@@ -28,9 +28,7 @@
28
28
  }
29
29
 
30
30
  &:hover {
31
- &:not(.ax-state-selected) {
32
- @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-white/[0.09] dark:ax-text-light-50;
33
- }
31
+ @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-white/[0.09] dark:ax-text-light-50;
34
32
  }
35
33
  &.ax-state-selected {
36
34
  @apply ax-text-primary-500 ax-font-medium dark:ax-text-primary-50;
@@ -39,7 +37,7 @@
39
37
  &:not(.ax-check-box)
40
38
  {
41
39
  &.ax-state-selected {
42
- @apply ax-bg-primary-50;
40
+ @apply ax-bg-primary-50 dark:ax-bg-white/[0.16];
43
41
  }
44
42
  }
45
43
 
@@ -50,7 +48,7 @@
50
48
  &:focus,
51
49
  &.ax-state-focus {
52
50
  &:not(.ax-state-selected) {
53
- @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500;
51
+ @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-white/[0.16] dark:ax-text-white;
54
52
  }
55
53
  }
56
54
  }
package/src/components/_loading.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @layer components {
2
+
2
3
  .ax-loading {
3
4
  }
4
5
 
@@ -38,6 +39,10 @@
38
39
  background: rgba(var(--ax-color-white) 2);
39
40
  }
40
41
 
42
+ ax-loading-spinner{
43
+ @apply ax-flex;
44
+ }
45
+
41
46
  @keyframes pulse2 {
42
47
 
43
48
  0%,
package/src/components/_numberbox.scss ADDED
@@ -0,0 +1,17 @@
1
+ @layer components {
2
+
3
+ ax-number-box,
4
+ .ax-number-box {
5
+ .ax-number-box-arrows {
6
+ @apply ax-grid ax-invisible;
7
+ }
8
+
9
+ &:focus,
10
+ &:focus-within,
11
+ &:hover {
12
+ .ax-number-box-arrows {
13
+ @apply ax-visible;
14
+ }
15
+ }
16
+ }
17
+ }
package/src/components/_popup.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
-
3
- ax-page-footer {
4
- @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;
5
5
 
6
6
  ax-prefix {
7
7
  @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
@@ -12,39 +12,41 @@
12
12
  }
13
13
  }
14
14
 
15
- .ax-popup {
16
- @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;
17
- @include control-dark('surface');
15
+ ax-page-footer {
16
+ @apply ax-border-t;
17
+ }
18
18
 
19
- header {
20
- @apply ax-flex ax-justify-between ax-px-3 ax-py-2;
21
- }
19
+ ax-page-header {
20
+ @apply ax-border-b;
21
+ }
22
22
 
23
- main {
24
- @apply ax-flex-1 ax-overflow-auto;
25
- }
23
+ .ax-popup {
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;
25
+ @include control-dark("surface");
26
26
 
27
- footer {
28
- @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];
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;
29
29
 
30
- ax-prefix {
31
- @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
30
+ span {
31
+ @apply ax-font-medium;
32
32
  }
33
33
 
34
- ax-suffix {
35
- @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
34
+ i {
35
+ @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
36
+ &:hover {
37
+ @apply ax-text-light-500 dark:ax-text-light-100;
38
+ }
36
39
  }
37
40
  }
38
41
 
39
- header,
40
- footer {
41
- >div {
42
- @apply ax-flex ax-items-center;
43
- }
42
+ .ax-popup-main-container {
43
+ @apply ax-overflow-auto ax-flex-1;
44
+ }
45
+ .ax-popup-footer-container{
46
+
44
47
  }
45
-
46
48
  &.ax-popup-full {
47
- @apply ax-w-screen ax-h-full ax-max-h-full;
49
+ @apply ax-w-screen ax-h-screen ax-max-h-screen;
48
50
  }
49
51
 
50
52
  &.ax-fit {
@@ -69,6 +71,9 @@
69
71
  &.ax-popup-sm {
70
72
  width: 100vw;
71
73
  max-height: 100vh;
74
+ .ax-popup-main {
75
+ @apply ax-h-screen;
76
+ }
72
77
  }
73
78
 
74
79
  &.ax-popup-md {
@@ -84,6 +89,9 @@
84
89
  &.ax-popup-sm {
85
90
  width: 100vw;
86
91
  max-height: 100vh;
92
+ .ax-popup-main {
93
+ @apply ax-h-screen;
94
+ }
87
95
  }
88
96
 
89
97
  &.ax-popup-md {
@@ -100,6 +108,9 @@
100
108
  width: 100vw;
101
109
  height: 100vh;
102
110
  max-height: 100vh;
111
+ .ax-popup-main {
112
+ @apply ax-h-screen;
113
+ }
103
114
  }
104
115
 
105
116
  &.ax-popup-md,
@@ -109,14 +120,16 @@
109
120
  }
110
121
 
111
122
  @media all and (min-width: 0px) and (max-width: 424px) {
112
-
113
123
  &.ax-popup-sm,
114
124
  &.ax-popup-md,
115
125
  &.ax-popup-lg {
116
126
  width: 100vw;
117
- height: 100%;
118
- max-height: 100%;
127
+ height: 100vh;
128
+ max-height: 100vh;
129
+ .ax-popup-main {
130
+ @apply ax-h-screen;
131
+ }
119
132
  }
120
133
  }
121
134
  }
122
- }
135
+ }
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/components/index.scss CHANGED
@@ -10,10 +10,12 @@
10
10
  @import "./drawer";
11
11
  @import "./dropdown";
12
12
  @import "./editor-container";
13
+ @import "./fieldset";
13
14
  @import "./form";
14
15
  @import "./input";
15
16
  @import "./label";
16
17
  @import "./list";
18
+ @import "./numberbox";
17
19
  @import "./loading";
18
20
  @import "./popup";
19
21
  @import "./radio";
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
+ }
package/src/variables/_colors.scss CHANGED
@@ -105,17 +105,17 @@ $theme-colors: (
105
105
  "900": "6 6 6",
106
106
  ),
107
107
  "light": (
108
- "": "107 114 128",
109
- "fore": "17 24 39",
110
- "50": "249 250 251",
111
- "100": "243 244 246",
112
- "200": "229 231 235",
113
- "300": "209 213 219",
114
- "400": "156 163 175",
115
- "500": "107 114 128",
116
- "600": "75 85 99",
117
- "700": "55 65 81",
118
- "800": "31 41 55",
119
- "900": "17 24 39",
108
+ "": "100 116 139",
109
+ "fore": "15 23 42",
110
+ "50": "248 250 252",
111
+ "100": "241 245 249",
112
+ "200": "226 232 240",
113
+ "300": "203 213 225",
114
+ "400": "148 163 184",
115
+ "500": "100 116 139",
116
+ "600": "71 85 105",
117
+ "700": "51 65 85",
118
+ "800": "30 41 59",
119
+ "900": "15 23 42",
120
120
  )
121
121
  );