@acorex/styles 5.0.1 → 5.0.7

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 (37) hide show
  1. package/index.scss +1 -0
  2. package/package.json +10 -10
  3. package/src/base/index.scss +5 -1
  4. package/src/components/_alert.scss +10 -1
  5. package/src/components/_badge.scss +6 -34
  6. package/src/components/_button.scss +569 -579
  7. package/src/components/_calendar.scss +82 -18
  8. package/src/components/_carousel.scss +5 -30
  9. package/src/components/_checkbox.scss +1 -1
  10. package/src/components/_datepicker.scss +2 -4
  11. package/src/components/_dialog.scss +3 -3
  12. package/src/components/_dropdown.scss +9 -46
  13. package/src/components/_editor-container.scss +30 -11
  14. package/src/components/_form.scss +4 -6
  15. package/src/components/_input.scss +5 -4
  16. package/src/components/_label.scss +1 -1
  17. package/src/components/_list.scss +6 -14
  18. package/src/components/_radio.scss +3 -14
  19. package/src/components/_range-slider.scss +14 -0
  20. package/src/components/_skeleton.scss +25 -0
  21. package/src/components/_switch.scss +99 -77
  22. package/src/components/_table.scss +2 -4
  23. package/src/components/_tabs.scss +157 -65
  24. package/src/components/_toast.scss +4 -14
  25. package/src/components/index.scss +3 -1
  26. package/src/icons/Read Me.txt +7 -0
  27. package/src/icons/demo-files/demo.css +152 -0
  28. package/src/icons/demo-files/demo.js +30 -0
  29. package/src/icons/demo.html +416 -0
  30. package/src/icons/fonts/acorex-icon.svg +37 -0
  31. package/src/icons/fonts/acorex-icon.ttf +0 -0
  32. package/src/icons/fonts/acorex-icon.woff +0 -0
  33. package/src/icons/selection.json +1 -0
  34. package/src/icons/style.css +107 -0
  35. package/src/icons/style.scss +164 -0
  36. package/src/icons/variables.scss +31 -0
  37. package/src/variables/_colors.scss +135 -1
package/src/components/_range-slider.scss ADDED
@@ -0,0 +1,14 @@
1
+ @layer components {
2
+ .ax-range-slider {
3
+ @apply ax-w-full;
4
+ .ax-range-slider-input {
5
+ @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-100 ax-rounded-full ax-outline-none ax-transition-all;
6
+ &::-webkit-slider-thumb {
7
+ @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-default ax-rounded-full ax-cursor-pointer;
8
+ }
9
+ &::-moz-range-thumb {
10
+ @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-default ax-rounded-full ax-cursor-pointer;
11
+ }
12
+ }
13
+ }
14
+ }
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
@@ -2,177 +2,199 @@
2
2
  .ax-switch {
3
3
  position: relative;
4
4
  display: block;
5
- width: 46px;
6
- height: 25px;
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
7
  margin: 5px;
8
-
9
- > input {
8
+ >input {
10
9
  opacity: 0;
11
10
  width: 0;
12
11
  height: 0;
13
12
  &:checked {
14
- & + .ax-switch-slider {
13
+ &+.ax-switch-slider {
15
14
  background-color: rgb(var(--ax-color-primary));
16
-
17
15
  &::before {
18
- -webkit-transform: translateX(21px);
19
- -ms-transform: translateX(21px);
20
- transform: translateX(21px);
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));
21
19
  }
22
20
  }
23
21
  }
24
22
  }
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;
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
+ }
31
91
  }
32
-
33
92
  &.ax-state-error {
34
93
  .ax-switch-slider {
35
- @apply ax-ring-2
36
- ax-ring-danger
37
- ax-ring-opacity-100
38
- ax-border-transparent;
94
+ @apply ax-ring-2 ax-ring-danger ax-ring-opacity-100 ax-border-transparent;
39
95
  }
40
96
  }
41
-
42
97
  &.ax-state-disabled {
43
98
  .ax-switch-slider {
44
99
  background-color: rgb(var(--ax-color-disabled)) !important;
45
- @apply ax-cursor-not-allowed
46
- ax-border-transparent;
47
-
100
+ @apply ax-cursor-not-allowed ax-border-transparent;
48
101
  &:after {
49
102
  @apply ax-border-transparent;
50
103
  }
51
-
52
104
  &:hover {
53
105
  @apply ax-border-transparent;
54
106
  }
55
107
  }
56
108
  }
57
-
58
109
  &.ax-state-readonly {
59
110
  .ax-switch-slider {
60
111
  opacity: 0.6;
61
112
  @apply ax-cursor-not-allowed;
62
113
  }
63
114
  }
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
115
  &.ax-success {
92
- > input {
116
+ >input {
93
117
  &:checked {
94
- & + .ax-switch-slider {
118
+ &+.ax-switch-slider {
95
119
  background-color: rgb(var(--ax-color-success));
96
120
  }
97
121
  }
98
122
  }
99
- input:focus ~ .ax-switch-slider {
123
+ input:focus~.ax-switch-slider {
100
124
  @apply ax-ring-success;
101
125
  }
102
126
  }
103
-
104
127
  &.ax-secondary {
105
- > input {
128
+ >input {
106
129
  &:checked {
107
- & + .ax-switch-slider {
130
+ &+.ax-switch-slider {
108
131
  background-color: rgb(var(--ax-color-secondary));
109
132
  }
110
133
  }
111
134
  }
112
- input:focus ~ .ax-switch-slider {
135
+ input:focus~.ax-switch-slider {
113
136
  @apply ax-ring-secondary;
114
137
  }
115
138
  }
116
-
117
139
  &.ax-danger {
118
- > input {
140
+ >input {
119
141
  &:checked {
120
- & + .ax-switch-slider {
142
+ &+.ax-switch-slider {
121
143
  background-color: rgb(var(--ax-color-danger));
122
144
  }
123
145
  }
124
146
  }
125
- input:focus ~ .ax-switch-slider {
147
+ input:focus~.ax-switch-slider {
126
148
  @apply ax-ring-danger;
127
149
  }
128
150
  }
129
151
  &.ax-warning {
130
- > input {
152
+ >input {
131
153
  &:checked {
132
- & + .ax-switch-slider {
154
+ &+.ax-switch-slider {
133
155
  background-color: rgb(var(--ax-color-warning));
134
156
  }
135
157
  }
136
158
  }
137
- input:focus ~ .ax-switch-slider {
159
+ input:focus~.ax-switch-slider {
138
160
  @apply ax-ring-warning;
139
161
  }
140
162
  }
141
163
  &.ax-info {
142
- > input {
164
+ >input {
143
165
  &:checked {
144
- & + .ax-switch-slider {
166
+ &+.ax-switch-slider {
145
167
  background-color: rgb(var(--ax-color-info));
146
168
  }
147
169
  }
148
170
  }
149
- input:focus ~ .ax-switch-slider {
171
+ input:focus~.ax-switch-slider {
150
172
  @apply ax-ring-info;
151
173
  }
152
174
  }
153
175
  &.ax-light {
154
- > input {
176
+ >input {
155
177
  &:checked {
156
- & + .ax-switch-slider {
178
+ &+.ax-switch-slider {
157
179
  background-color: rgb(var(--ax-color-light));
158
180
  }
159
181
  }
160
182
  }
161
- input:focus ~ .ax-switch-slider {
183
+ input:focus~.ax-switch-slider {
162
184
  @apply ax-ring-light;
163
185
  }
164
186
  }
165
187
  &.ax-dark {
166
- > input {
188
+ >input {
167
189
  &:checked {
168
- & + .ax-switch-slider {
190
+ &+.ax-switch-slider {
169
191
  background-color: rgb(var(--ax-color-dark));
170
192
  }
171
193
  }
172
194
  }
173
- input:focus ~ .ax-switch-slider {
195
+ input:focus~.ax-switch-slider {
174
196
  @apply ax-ring-dark;
175
197
  }
176
198
  }
177
199
  }
178
- }
200
+ }
package/src/components/_table.scss CHANGED
@@ -4,19 +4,17 @@
4
4
  border-collapse: collapse;
5
5
  @apply ax-w-full;
6
6
  }
7
-
8
7
  td,
9
8
  th {
10
9
  @apply ax-p-4 ax-border ax-border-solid ax-border;
11
10
  text-align: inherit;
12
11
  }
13
-
14
12
  &.ax-alternative {
15
13
  tr {
16
14
  @apply ax-bg-white;
17
15
  &:nth-child(even) {
18
- @apply ax-bg-gray-50;
16
+ @apply ax-bg-light-50;
19
17
  }
20
18
  }
21
19
  }
22
- }
20
+ }
package/src/components/_tabs.scss CHANGED
@@ -1,64 +1,138 @@
1
1
  @layer components {
2
- .ax-tabs {
3
- @apply ax-flex ax-p-0 ax-overflow-hidden;
4
- &.ax-tabs-full {
5
- .ax-tab-item-container,
6
- .ax-tab-item {
7
- @apply ax-flex-1;
2
+ ax-tabs {
3
+ @apply ax-p-0 ax-overflow-y-hidden ax-overflow-x-auto ax-w-max ax-block;
4
+
5
+ .ax-items-wrapper {
6
+ @apply ax-flex;
7
+ ax-tab-item {
8
+ @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-font-medium ax-flex ax-items-center ax-justify-center;
9
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio));
10
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
11
+
12
+ &.ax-state-disabled {
13
+ background-color: rgb(var(--ax-color-disabled)) !important;
14
+ color: rgb(var(--ax-color-disabled-fore)) !important;
15
+ cursor: not-allowed !important;
16
+ }
17
+
18
+ &.ax-state-active {
19
+ @apply ax-text-black;
20
+ }
8
21
  }
9
22
  }
10
23
 
11
- &.ax-tabs-min-width {
12
- .ax-tab-item {
13
- min-width: 250px;
24
+ &.ax-tabs-fit {
25
+ .ax-items-wrapper
26
+ ax-tab-item {
27
+ @apply ax-flex-1;
14
28
  }
15
29
  }
16
30
 
17
- & > .ax-tab-controll {
31
+ &>.ax-tab-controll {
18
32
  @apply ax-flex ax-items-center ax-justify-center ax-px-1 ax-cursor-pointer;
19
- box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
20
- 0 1px 10px 0 rgba(0, 0, 0, 0.12);
33
+ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
21
34
  }
22
35
 
23
- .ax-tab-item-container {
24
- @apply ax-flex ax-overflow-x-auto;
25
- .ax-tab-item {
26
- @apply ax-text-center
27
- ax-px-5
28
- ax-cursor-pointer
29
- ax-whitespace-nowrap
30
- ax-font-medium
31
- ax-flex
32
- ax-items-center
33
- ax-justify-center;
34
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) * 1.2);
35
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
36
- &.ax-state-disabled {
37
- background-color: rgb(var(--ax-color-disabled)) !important;
38
- color: rgb(var(--ax-color-disabled-fore)) !important;
39
- cursor: not-allowed !important;
36
+ &.ax-tabs-vertical {
37
+ .ax-items-wrapper {
38
+ @apply ax-flex-col
39
+ }
40
+
41
+ &.ax-tabs-default {
42
+ @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
43
+
44
+ ax-tab-item {
45
+ @apply ax-bg-white ax-border-r ax-border-s-2 ax-border-solid ax-border-transparent;
46
+
47
+ &:hover,
48
+ &.ax-state-active {
49
+ @apply ax-font-medium;
50
+ border-inline-start-color: rgb(var(--ax-color-primary)) !important;
51
+ }
40
52
  }
41
- &.ax-state-active {
42
- @apply ax-text-black;
53
+ }
54
+
55
+ &.ax-tabs-start-line {
56
+ ax-tab-item {
57
+ @apply ax-border-s-2 ax-border-solid ax-border-default;
58
+
59
+ &.ax-state-active {
60
+ @apply ax-border-primary ax-text-primary;
61
+
62
+ &:hover {
63
+ @apply ax-border-primary;
64
+ }
65
+ }
66
+
67
+ &:hover {
68
+ @apply ax-border-primary-300 ax-text-primary;
69
+ }
43
70
  }
44
- .ax-ic {
45
- @apply ax-text-2xl;
71
+ }
72
+
73
+ &.ax-tabs-end-line {
74
+ ax-tab-item {
75
+ @apply ax-border-e-2 ax-border-solid ax-border-default;
76
+
77
+ &.ax-state-active {
78
+ @apply ax-border-primary ax-text-primary;
79
+
80
+ &:hover {
81
+ @apply ax-border-primary;
82
+ }
83
+ }
84
+
85
+ &:hover {
86
+ @apply ax-border-primary-300 ax-text-primary;
87
+ }
88
+ }
89
+ }
90
+
91
+ &.ax-tabs-pills {
92
+ ax-tab-item {
93
+ @apply ax-text-light-fore ax-mr-1 ax-rounded;
94
+
95
+ &:hover {
96
+ @apply ax-bg-light-300 ax-text-light-fore;
97
+ }
98
+
99
+ &.ax-state-active {
100
+ @apply ax-bg-light-300 ax-text-light-fore;
101
+ }
102
+ }
103
+ }
104
+
105
+ &.ax-tabs-pills-color {
106
+ ax-tab-item {
107
+ @apply ax-text-light-fore ax-mr-1 ax-rounded;
108
+
109
+ &:hover {
110
+ @apply ax-bg-primary-100 ax-text-primary;
111
+ }
112
+
113
+ &.ax-state-active {
114
+ @apply ax-bg-primary-100 ax-text-primary;
115
+ }
46
116
  }
47
117
  }
48
118
  }
49
119
 
50
- &.ax-tabs-default {
51
- .ax-tab-item-container {
120
+ &.ax-tabs-horizontal {
121
+ &.ax-tabs-default {
52
122
  @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
53
- .ax-tab-item {
54
- @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border;
123
+
124
+ ax-tab-item {
125
+ @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid;
55
126
  border-bottom-color: transparent !important;
127
+
56
128
  &:first-child {
57
129
  @apply ax-rounded-l;
58
130
  }
131
+
59
132
  &:last-child {
60
133
  @apply ax-rounded-r ax-border-r-0;
61
134
  }
135
+
62
136
  &:hover,
63
137
  &.ax-state-active {
64
138
  @apply ax-font-medium;
@@ -66,52 +140,70 @@
66
140
  }
67
141
  }
68
142
  }
69
- }
70
143
 
71
- &.ax-tabs-underline {
72
- .ax-tab-item {
73
- @apply ax-border-b-2 ax-border-solid ax-border-default;
144
+ &.ax-tabs-start-line {
145
+ ax-tab-item {
146
+ @apply ax-border-t-2 ax-border-solid ax-border-default;
74
147
 
75
- &.ax-state-active {
76
- @apply ax-border-primary ax-text-primary;
148
+ &.ax-state-active {
149
+ @apply ax-border-primary ax-text-primary;
150
+
151
+ &:hover {
152
+ @apply ax-border-primary;
153
+ }
154
+ }
77
155
 
78
156
  &:hover {
79
- @apply ax-border-primary;
157
+ @apply ax-border-primary-300 ax-text-primary;
80
158
  }
81
159
  }
160
+ }
161
+
162
+ &.ax-tabs-end-line {
163
+ ax-tab-item {
164
+ @apply ax-border-b-2 ax-border-solid ax-border-default;
165
+
166
+ &.ax-state-active {
167
+ @apply ax-border-primary ax-text-primary;
82
168
 
83
- &:hover {
84
- @apply ax-border-primary-300 ax-text-primary;
169
+ &:hover {
170
+ @apply ax-border-primary;
171
+ }
172
+ }
173
+
174
+ &:hover {
175
+ @apply ax-border-primary-300 ax-text-primary;
176
+ }
85
177
  }
86
178
  }
87
- }
88
179
 
89
- &.ax-tabs-pills {
90
- .ax-tab-item {
91
- @apply ax-text-light-fore ax-mr-1 ax-rounded;
180
+ &.ax-tabs-pills {
181
+ ax-tab-item {
182
+ @apply ax-text-light-fore ax-mr-1 ax-rounded;
92
183
 
93
- &:hover {
94
- @apply ax-bg-light-300 ax-text-light-fore;
95
- }
184
+ &:hover {
185
+ @apply ax-bg-light-300 ax-text-light-fore;
186
+ }
96
187
 
97
- &.ax-state-active {
98
- @apply ax-bg-light-300 ax-text-light-fore;
188
+ &.ax-state-active {
189
+ @apply ax-bg-light-300 ax-text-light-fore;
190
+ }
99
191
  }
100
192
  }
101
- }
102
193
 
103
- &.ax-tabs-pills-color {
104
- .ax-tab-item {
105
- @apply ax-text-light-fore ax-mr-1 ax-rounded;
194
+ &.ax-tabs-pills-color {
195
+ ax-tab-item {
196
+ @apply ax-text-light-fore ax-mr-1 ax-rounded;
106
197
 
107
- &:hover {
108
- @apply ax-bg-primary-100 ax-text-primary;
109
- }
198
+ &:hover {
199
+ @apply ax-bg-primary-100 ax-text-primary;
200
+ }
110
201
 
111
- &.ax-state-active {
112
- @apply ax-bg-primary-100 ax-text-primary;
202
+ &.ax-state-active {
203
+ @apply ax-bg-primary-100 ax-text-primary;
204
+ }
113
205
  }
114
206
  }
115
207
  }
116
208
  }
117
- }
209
+ }