@acorex/styles 5.0.1 → 5.0.4

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 (36) hide show
  1. package/index.scss +2 -2
  2. package/package.json +11 -11
  3. package/src/base/_colors.scss +16 -16
  4. package/src/base/index.scss +7 -7
  5. package/src/components/_alert.scss +147 -147
  6. package/src/components/_badge.scss +39 -39
  7. package/src/components/_button.scss +651 -651
  8. package/src/components/_calendar.scss +96 -94
  9. package/src/components/_carousel.scss +61 -61
  10. package/src/components/_checkbox.scss +24 -24
  11. package/src/components/_datapager.scss +39 -39
  12. package/src/components/_datepicker.scss +5 -7
  13. package/src/components/_dialog.scss +61 -61
  14. package/src/components/_drawer.scss +79 -79
  15. package/src/components/_dropdown.scss +177 -177
  16. package/src/components/_editor-container.scss +69 -57
  17. package/src/components/_form.scss +8 -10
  18. package/src/components/_input.scss +16 -16
  19. package/src/components/_label.scss +4 -4
  20. package/src/components/_list.scss +49 -57
  21. package/src/components/_loading.scss +53 -53
  22. package/src/components/_popup.scss +86 -86
  23. package/src/components/_radio.scss +30 -30
  24. package/src/components/_range-slider.scss +14 -0
  25. package/src/components/_selectbox.scss +15 -15
  26. package/src/components/_selection-list.scss +28 -28
  27. package/src/components/_side-menu.scss +46 -46
  28. package/src/components/_skeleton.scss +25 -0
  29. package/src/components/_switch.scss +200 -178
  30. package/src/components/_table.scss +22 -22
  31. package/src/components/_tabs.scss +117 -117
  32. package/src/components/_toast.scss +93 -93
  33. package/src/components/_tooltip.scss +44 -44
  34. package/src/components/index.scss +29 -27
  35. package/src/variables/_colors.scss +135 -1
  36. package/src/variables/_mixins.scss +18 -18
package/src/components/_side-menu.scss CHANGED
@@ -1,46 +1,46 @@
1
- @layer components {
2
- .ax-side-menu {
3
- @apply ax-list-none ax-p-0 ax-m-0;
4
- .ax-side-menu-item {
5
- @apply ax-flex ax-items-center ax-p-2 ax-cursor-pointer;
6
- &:hover {
7
- @apply ax-bg-light-100;
8
- }
9
- &:focus {
10
- @apply ax-outline-none
11
- ax-ring-2
12
- ax-ring-primary
13
- ax-ring-opacity-100
14
- ax-border-transparent;
15
- }
16
- .ax-side-menu-icon {
17
- @apply ax-pr-2 ax-h-full ax-flex ax-items-center;
18
- }
19
- .ax-side-menu-text {
20
- @apply ax-flex-1;
21
- }
22
- .ax-side-menu-badge {
23
- }
24
- }
25
- &.ax-alternate {
26
- .ax-side-menu-item {
27
- &:nth-child(odd) {
28
- @apply ax-bg-light-100;
29
- }
30
- &:hover {
31
- @apply ax-bg-light-300;
32
- }
33
- }
34
- }
35
- &.ax-divided {
36
- .ax-side-menu-item {
37
- &:not(:last-child) {
38
- @apply ax-border-b ax-border ax-border-solid;
39
- }
40
- &:hover {
41
- @apply ax-bg-light-100;
42
- }
43
- }
44
- }
45
- }
46
- }
1
+ @layer components {
2
+ .ax-side-menu {
3
+ @apply ax-list-none ax-p-0 ax-m-0;
4
+ .ax-side-menu-item {
5
+ @apply ax-flex ax-items-center ax-p-2 ax-cursor-pointer;
6
+ &:hover {
7
+ @apply ax-bg-light-100;
8
+ }
9
+ &:focus {
10
+ @apply ax-outline-none
11
+ ax-ring-2
12
+ ax-ring-primary
13
+ ax-ring-opacity-100
14
+ ax-border-transparent;
15
+ }
16
+ .ax-side-menu-icon {
17
+ @apply ax-pr-2 ax-h-full ax-flex ax-items-center;
18
+ }
19
+ .ax-side-menu-text {
20
+ @apply ax-flex-1;
21
+ }
22
+ .ax-side-menu-badge {
23
+ }
24
+ }
25
+ &.ax-alternate {
26
+ .ax-side-menu-item {
27
+ &:nth-child(odd) {
28
+ @apply ax-bg-light-100;
29
+ }
30
+ &:hover {
31
+ @apply ax-bg-light-300;
32
+ }
33
+ }
34
+ }
35
+ &.ax-divided {
36
+ .ax-side-menu-item {
37
+ &:not(:last-child) {
38
+ @apply ax-border-b ax-border ax-border-solid;
39
+ }
40
+ &:hover {
41
+ @apply ax-bg-light-100;
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
package/src/components/_skeleton.scss ADDED
@@ -0,0 +1,25 @@
1
+ @layer utilities {
2
+ $base-color: #ddd;
3
+ $shine-color: #eeeeee;
4
+ .ax-skeleton {
5
+ @apply ax-relative ax-overflow-hidden;
6
+ background-color: $base-color;
7
+ &.ax-skeleton-animate {
8
+ &::before {
9
+ content: "";
10
+ @apply ax-block ax-absolute ax-top-0 ax-h-full ax-w-52;
11
+ left: -200px;
12
+ background: linear-gradient(to right, transparent 0%, $shine-color 50%, transparent 100%);
13
+ animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
14
+ }
15
+ }
16
+ }
17
+ @keyframes load {
18
+ from {
19
+ left: -200px;
20
+ }
21
+ to {
22
+ left: 100%;
23
+ }
24
+ }
25
+ }
package/src/components/_switch.scss CHANGED
@@ -1,178 +1,200 @@
1
- @layer components {
2
- .ax-switch {
3
- position: relative;
4
- display: block;
5
- width: 46px;
6
- height: 25px;
7
- margin: 5px;
8
-
9
- > input {
10
- opacity: 0;
11
- width: 0;
12
- height: 0;
13
- &:checked {
14
- & + .ax-switch-slider {
15
- background-color: rgb(var(--ax-color-primary));
16
-
17
- &::before {
18
- -webkit-transform: translateX(21px);
19
- -ms-transform: translateX(21px);
20
- transform: translateX(21px);
21
- }
22
- }
23
- }
24
- }
25
-
26
- input:focus ~ .ax-switch-slider {
27
- @apply ax-ring-2
28
- ax-ring-primary
29
- ax-ring-opacity-100
30
- ax-border-transparent;
31
- }
32
-
33
- &.ax-state-error {
34
- .ax-switch-slider {
35
- @apply ax-ring-2
36
- ax-ring-danger
37
- ax-ring-opacity-100
38
- ax-border-transparent;
39
- }
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
46
- ax-border-transparent;
47
-
48
- &:after {
49
- @apply ax-border-transparent;
50
- }
51
-
52
- &:hover {
53
- @apply ax-border-transparent;
54
- }
55
- }
56
- }
57
-
58
- &.ax-state-readonly {
59
- .ax-switch-slider {
60
- opacity: 0.6;
61
- @apply ax-cursor-not-allowed;
62
- }
63
- }
64
-
65
- .ax-switch-slider {
66
- position: absolute;
67
- cursor: pointer;
68
- top: 0;
69
- left: 0;
70
- right: 0;
71
- bottom: 0;
72
- background-color: rgb(var(--ax-color-gray-400));
73
- -webkit-transition: 0.2s;
74
- transition: 0.2s;
75
- border-radius: 25px;
76
-
77
- &::before {
78
- content: "";
79
- position: absolute;
80
- height: 21px;
81
- width: 21px;
82
- left: 2px;
83
- bottom: 2px;
84
- background-color: white;
85
- -webkit-transition: 0.2s;
86
- transition: 0.2s;
87
- border-radius: 50%;
88
- }
89
- }
90
-
91
- &.ax-success {
92
- > input {
93
- &:checked {
94
- & + .ax-switch-slider {
95
- background-color: rgb(var(--ax-color-success));
96
- }
97
- }
98
- }
99
- input:focus ~ .ax-switch-slider {
100
- @apply ax-ring-success;
101
- }
102
- }
103
-
104
- &.ax-secondary {
105
- > input {
106
- &:checked {
107
- & + .ax-switch-slider {
108
- background-color: rgb(var(--ax-color-secondary));
109
- }
110
- }
111
- }
112
- input:focus ~ .ax-switch-slider {
113
- @apply ax-ring-secondary;
114
- }
115
- }
116
-
117
- &.ax-danger {
118
- > input {
119
- &:checked {
120
- & + .ax-switch-slider {
121
- background-color: rgb(var(--ax-color-danger));
122
- }
123
- }
124
- }
125
- input:focus ~ .ax-switch-slider {
126
- @apply ax-ring-danger;
127
- }
128
- }
129
- &.ax-warning {
130
- > input {
131
- &:checked {
132
- & + .ax-switch-slider {
133
- background-color: rgb(var(--ax-color-warning));
134
- }
135
- }
136
- }
137
- input:focus ~ .ax-switch-slider {
138
- @apply ax-ring-warning;
139
- }
140
- }
141
- &.ax-info {
142
- > input {
143
- &:checked {
144
- & + .ax-switch-slider {
145
- background-color: rgb(var(--ax-color-info));
146
- }
147
- }
148
- }
149
- input:focus ~ .ax-switch-slider {
150
- @apply ax-ring-info;
151
- }
152
- }
153
- &.ax-light {
154
- > input {
155
- &:checked {
156
- & + .ax-switch-slider {
157
- background-color: rgb(var(--ax-color-light));
158
- }
159
- }
160
- }
161
- input:focus ~ .ax-switch-slider {
162
- @apply ax-ring-light;
163
- }
164
- }
165
- &.ax-dark {
166
- > input {
167
- &:checked {
168
- & + .ax-switch-slider {
169
- background-color: rgb(var(--ax-color-dark));
170
- }
171
- }
172
- }
173
- input:focus ~ .ax-switch-slider {
174
- @apply ax-ring-dark;
175
- }
176
- }
177
- }
178
- }
1
+ @layer components {
2
+ .ax-switch {
3
+ position: relative;
4
+ display: block;
5
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 7px);
6
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 15px);
7
+ margin: 5px;
8
+ >input {
9
+ opacity: 0;
10
+ width: 0;
11
+ height: 0;
12
+ &:checked {
13
+ &+.ax-switch-slider {
14
+ background-color: rgb(var(--ax-color-primary));
15
+ &::before {
16
+ -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
17
+ -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
18
+ transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
19
+ }
20
+ }
21
+ }
22
+ }
23
+ .ax-switch-slider {
24
+ position: absolute;
25
+ cursor: pointer;
26
+ top: 0;
27
+ left: 0;
28
+ right: 0;
29
+ bottom: 0;
30
+ background-color: rgb(var(--ax-color-gray-400));
31
+ -webkit-transition: 0.2s;
32
+ transition: 0.2s;
33
+ border-radius: 25px;
34
+ &::before {
35
+ content: "";
36
+ position: absolute;
37
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
38
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
39
+ left: 3px;
40
+ bottom: 3px;
41
+ background-color: white;
42
+ -webkit-transition: 0.2s;
43
+ transition: 0.2s;
44
+ border-radius: 50%;
45
+ }
46
+ }
47
+ input:focus~.ax-switch-slider {
48
+ @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
49
+ }
50
+ &.ax-sm {
51
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
52
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
53
+ >input {
54
+ &:checked {
55
+ &+.ax-switch-slider {
56
+ &::before {
57
+ -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
58
+ -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
59
+ transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
60
+ }
61
+ }
62
+ }
63
+ }
64
+ .ax-switch-slider {
65
+ &::before {
66
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
67
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
68
+ }
69
+ }
70
+ }
71
+ &.ax-lg {
72
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 20px);
73
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px);
74
+ >input {
75
+ &:checked {
76
+ &+.ax-switch-slider {
77
+ &::before {
78
+ -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
79
+ -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
80
+ transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
81
+ }
82
+ }
83
+ }
84
+ }
85
+ .ax-switch-slider {
86
+ &::before {
87
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
88
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
89
+ }
90
+ }
91
+ }
92
+ &.ax-state-error {
93
+ .ax-switch-slider {
94
+ @apply ax-ring-2 ax-ring-danger ax-ring-opacity-100 ax-border-transparent;
95
+ }
96
+ }
97
+ &.ax-state-disabled {
98
+ .ax-switch-slider {
99
+ background-color: rgb(var(--ax-color-disabled)) !important;
100
+ @apply ax-cursor-not-allowed ax-border-transparent;
101
+ &:after {
102
+ @apply ax-border-transparent;
103
+ }
104
+ &:hover {
105
+ @apply ax-border-transparent;
106
+ }
107
+ }
108
+ }
109
+ &.ax-state-readonly {
110
+ .ax-switch-slider {
111
+ opacity: 0.6;
112
+ @apply ax-cursor-not-allowed;
113
+ }
114
+ }
115
+ &.ax-success {
116
+ >input {
117
+ &:checked {
118
+ &+.ax-switch-slider {
119
+ background-color: rgb(var(--ax-color-success));
120
+ }
121
+ }
122
+ }
123
+ input:focus~.ax-switch-slider {
124
+ @apply ax-ring-success;
125
+ }
126
+ }
127
+ &.ax-secondary {
128
+ >input {
129
+ &:checked {
130
+ &+.ax-switch-slider {
131
+ background-color: rgb(var(--ax-color-secondary));
132
+ }
133
+ }
134
+ }
135
+ input:focus~.ax-switch-slider {
136
+ @apply ax-ring-secondary;
137
+ }
138
+ }
139
+ &.ax-danger {
140
+ >input {
141
+ &:checked {
142
+ &+.ax-switch-slider {
143
+ background-color: rgb(var(--ax-color-danger));
144
+ }
145
+ }
146
+ }
147
+ input:focus~.ax-switch-slider {
148
+ @apply ax-ring-danger;
149
+ }
150
+ }
151
+ &.ax-warning {
152
+ >input {
153
+ &:checked {
154
+ &+.ax-switch-slider {
155
+ background-color: rgb(var(--ax-color-warning));
156
+ }
157
+ }
158
+ }
159
+ input:focus~.ax-switch-slider {
160
+ @apply ax-ring-warning;
161
+ }
162
+ }
163
+ &.ax-info {
164
+ >input {
165
+ &:checked {
166
+ &+.ax-switch-slider {
167
+ background-color: rgb(var(--ax-color-info));
168
+ }
169
+ }
170
+ }
171
+ input:focus~.ax-switch-slider {
172
+ @apply ax-ring-info;
173
+ }
174
+ }
175
+ &.ax-light {
176
+ >input {
177
+ &:checked {
178
+ &+.ax-switch-slider {
179
+ background-color: rgb(var(--ax-color-light));
180
+ }
181
+ }
182
+ }
183
+ input:focus~.ax-switch-slider {
184
+ @apply ax-ring-light;
185
+ }
186
+ }
187
+ &.ax-dark {
188
+ >input {
189
+ &:checked {
190
+ &+.ax-switch-slider {
191
+ background-color: rgb(var(--ax-color-dark));
192
+ }
193
+ }
194
+ }
195
+ input:focus~.ax-switch-slider {
196
+ @apply ax-ring-dark;
197
+ }
198
+ }
199
+ }
200
+ }
package/src/components/_table.scss CHANGED
@@ -1,22 +1,22 @@
1
- .ax-table {
2
- @apply ax-w-full;
3
- table {
4
- border-collapse: collapse;
5
- @apply ax-w-full;
6
- }
7
-
8
- td,
9
- th {
10
- @apply ax-p-4 ax-border ax-border-solid ax-border;
11
- text-align: inherit;
12
- }
13
-
14
- &.ax-alternative {
15
- tr {
16
- @apply ax-bg-white;
17
- &:nth-child(even) {
18
- @apply ax-bg-gray-50;
19
- }
20
- }
21
- }
22
- }
1
+ .ax-table {
2
+ @apply ax-w-full;
3
+ table {
4
+ border-collapse: collapse;
5
+ @apply ax-w-full;
6
+ }
7
+
8
+ td,
9
+ th {
10
+ @apply ax-p-4 ax-border ax-border-solid ax-border;
11
+ text-align: inherit;
12
+ }
13
+
14
+ &.ax-alternative {
15
+ tr {
16
+ @apply ax-bg-white;
17
+ &:nth-child(even) {
18
+ @apply ax-bg-gray-50;
19
+ }
20
+ }
21
+ }
22
+ }