@acorex/styles 5.0.4 → 5.0.8

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 (47) hide show
  1. package/index.scss +3 -2
  2. package/package.json +10 -10
  3. package/src/base/_colors.scss +16 -16
  4. package/src/base/index.scss +11 -7
  5. package/src/components/_alert.scss +156 -147
  6. package/src/components/_badge.scss +11 -39
  7. package/src/components/_button.scss +641 -651
  8. package/src/components/_calendar.scss +158 -96
  9. package/src/components/_carousel.scss +36 -61
  10. package/src/components/_checkbox.scss +24 -24
  11. package/src/components/_datapager.scss +39 -39
  12. package/src/components/_datepicker.scss +4 -4
  13. package/src/components/_dialog.scss +61 -61
  14. package/src/components/_drawer.scss +79 -79
  15. package/src/components/_dropdown.scss +140 -177
  16. package/src/components/_editor-container.scss +76 -69
  17. package/src/components/_form.scss +7 -7
  18. package/src/components/_input.scss +17 -16
  19. package/src/components/_label.scss +4 -4
  20. package/src/components/_list.scss +48 -48
  21. package/src/components/_loading.scss +53 -53
  22. package/src/components/_popup.scss +86 -86
  23. package/src/components/_radio.scss +19 -30
  24. package/src/components/_range-slider.scss +13 -13
  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 +24 -24
  29. package/src/components/_switch.scss +199 -199
  30. package/src/components/_table.scss +20 -22
  31. package/src/components/_tabs.scss +209 -117
  32. package/src/components/_toast.scss +83 -93
  33. package/src/components/_tooltip.scss +44 -44
  34. package/src/components/index.scss +28 -28
  35. package/src/icons/Read Me.txt +7 -0
  36. package/src/icons/demo-files/demo.css +152 -0
  37. package/src/icons/demo-files/demo.js +30 -0
  38. package/src/icons/demo.html +416 -0
  39. package/src/icons/fonts/acorex-icon.svg +37 -0
  40. package/src/icons/fonts/acorex-icon.ttf +0 -0
  41. package/src/icons/fonts/acorex-icon.woff +0 -0
  42. package/src/icons/selection.json +1 -0
  43. package/src/icons/style.css +107 -0
  44. package/src/icons/style.scss +164 -0
  45. package/src/icons/variables.scss +31 -0
  46. package/src/variables/_colors.scss +135 -135
  47. 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 CHANGED
@@ -1,25 +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
- }
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
25
  }
package/src/components/_switch.scss CHANGED
@@ -1,200 +1,200 @@
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
- }
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-light-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
200
  }
package/src/components/_table.scss CHANGED
@@ -1,22 +1,20 @@
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
+ td,
8
+ th {
9
+ @apply ax-p-4 ax-border ax-border-solid ax-border;
10
+ text-align: inherit;
11
+ }
12
+ &.ax-alternative {
13
+ tr {
14
+ @apply ax-bg-white;
15
+ &:nth-child(even) {
16
+ @apply ax-bg-light-50;
17
+ }
18
+ }
19
+ }
20
+ }