@acorex/styles 5.7.0 → 6.0.0

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 (51) hide show
  1. package/index.js +191 -0
  2. package/index.scss +0 -1
  3. package/package.json +1 -1
  4. package/src/base/index.scss +3 -1
  5. package/src/components/_action-sheet.scss +2 -3
  6. package/src/components/_alert.scss +319 -39
  7. package/src/components/_avatar.scss +1 -3
  8. package/src/components/_badge.scss +150 -6
  9. package/src/components/_breadcrumbs.scss +14 -11
  10. package/src/components/_button.scss +162 -131
  11. package/src/components/_calendar.scss +5 -5
  12. package/src/components/_checkbox.scss +3 -8
  13. package/src/components/_collapse.scss +5 -12
  14. package/src/components/_color-palette.scss +9 -25
  15. package/src/components/_color-picker.scss +2 -2
  16. package/src/components/_data-table.scss +6 -6
  17. package/src/components/_datapager.scss +3 -3
  18. package/src/components/_decoration.scss +13 -13
  19. package/src/components/_dialog.scss +1 -1
  20. package/src/components/_drawer.scss +7 -7
  21. package/src/components/_dropdown.scss +8 -10
  22. package/src/components/_editor-container.scss +13 -13
  23. package/src/components/_fieldset.scss +2 -2
  24. package/src/components/_form.scss +1 -1
  25. package/src/components/_input.scss +1 -1
  26. package/src/components/_label.scss +1 -1
  27. package/src/components/_list.scss +8 -23
  28. package/src/components/_loading.scss +14 -21
  29. package/src/components/_menu.scss +4 -5
  30. package/src/components/_numberbox.scss +1 -3
  31. package/src/components/_popup.scss +7 -7
  32. package/src/components/_progress.scss +11 -13
  33. package/src/components/_radio.scss +1 -1
  34. package/src/components/_range-slider.scss +162 -31
  35. package/src/components/_result.scss +2 -3
  36. package/src/components/_selectbox.scss +2 -2
  37. package/src/components/_selection-list.scss +1 -1
  38. package/src/components/_switch.scss +0 -1
  39. package/src/components/_table.scss +5 -5
  40. package/src/components/_tabs.scss +3 -3
  41. package/src/components/_textarea.scss +5 -6
  42. package/src/components/_toast.scss +1 -1
  43. package/src/components/_treeview.scss +0 -1
  44. package/src/components/index.scss +0 -2
  45. package/src/icons/demo-files/demo.css +152 -152
  46. package/src/icons/demo-files/demo.js +30 -30
  47. package/src/utility/_mixins.scss +6 -6
  48. package/src/utility/index.scss +3 -3
  49. package/src/components/_picker.scss +0 -179
  50. package/src/components/_side-menu.scss +0 -42
  51. package/src/components/_switch copy.scss +0 -185
package/src/components/_switch copy.scss DELETED
@@ -1,185 +0,0 @@
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
- }