@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/_drawer.scss CHANGED
@@ -1,79 +1,79 @@
1
- @layer components {
2
- .ax-drawer-container {
3
- @apply ax-flex
4
- ax-relative
5
- ax-w-full
6
- ax-h-full
7
- ax-overflow-hidden;
8
-
9
- .ax-drawer-backdrop {
10
- @apply ax-absolute ax-w-full ax-h-full;
11
- z-index: 9998;
12
- top: 0;
13
- right: 0;
14
- top: 0;
15
- bottom: 0;
16
- background-color: rgba($color: #000000, $alpha: 0.3);
17
- }
18
-
19
- .ax-drawer {
20
- @apply ax-h-full;
21
-
22
- &.ax-animated {
23
- transition: all 500ms;
24
- }
25
-
26
- &.ax-drawer-overlay {
27
- @apply ax-absolute;
28
- z-index: 9999;
29
- }
30
-
31
- &.ax-drawer-start {
32
- &.ax-hide {
33
- position: absolute;
34
- left: -9999px;
35
- }
36
-
37
- &.ax-collapsed {
38
- margin-inline-start: calc(-1 * var(--attr-width));
39
- }
40
-
41
- &.ax-expanded {
42
- margin-inline-start: 0;
43
- }
44
- }
45
-
46
- &.ax-drawer-end {
47
- &.ax-hide {
48
- position: absolute;
49
- right: -9999px;
50
- }
51
-
52
- &.ax-drawer-overlay {
53
- &.ax-collapsed {
54
- right: calc(-1 * var(--attr-width));
55
- }
56
-
57
- &.ax-expanded {
58
- right: calc(-1 * var(--attr-diff));
59
- }
60
- }
61
-
62
- &.ax-drawer-push {
63
- &.ax-collapsed {
64
- margin-inline-end: calc(-1 * var(--attr-width));
65
- }
66
-
67
- &.ax-expanded {
68
- margin-inline-end: 0;
69
- }
70
- }
71
- }
72
- }
73
-
74
- .ax-drawer-content {
75
- @apply ax-flex-1;
76
- width: var(--attr-content-width);
77
- }
78
- }
79
- }
1
+ @layer components {
2
+ .ax-drawer-container {
3
+ @apply ax-flex
4
+ ax-relative
5
+ ax-w-full
6
+ ax-h-full
7
+ ax-overflow-hidden;
8
+
9
+ .ax-drawer-backdrop {
10
+ @apply ax-absolute ax-w-full ax-h-full;
11
+ z-index: 9998;
12
+ top: 0;
13
+ right: 0;
14
+ top: 0;
15
+ bottom: 0;
16
+ background-color: rgba($color: #000000, $alpha: 0.3);
17
+ }
18
+
19
+ .ax-drawer {
20
+ @apply ax-h-full;
21
+
22
+ &.ax-animated {
23
+ transition: all 500ms;
24
+ }
25
+
26
+ &.ax-drawer-overlay {
27
+ @apply ax-absolute;
28
+ z-index: 9999;
29
+ }
30
+
31
+ &.ax-drawer-start {
32
+ &.ax-hide {
33
+ position: absolute;
34
+ left: -9999px;
35
+ }
36
+
37
+ &.ax-collapsed {
38
+ margin-inline-start: calc(-1 * var(--attr-width));
39
+ }
40
+
41
+ &.ax-expanded {
42
+ margin-inline-start: 0;
43
+ }
44
+ }
45
+
46
+ &.ax-drawer-end {
47
+ &.ax-hide {
48
+ position: absolute;
49
+ right: -9999px;
50
+ }
51
+
52
+ &.ax-drawer-overlay {
53
+ &.ax-collapsed {
54
+ right: calc(-1 * var(--attr-width));
55
+ }
56
+
57
+ &.ax-expanded {
58
+ right: calc(-1 * var(--attr-diff));
59
+ }
60
+ }
61
+
62
+ &.ax-drawer-push {
63
+ &.ax-collapsed {
64
+ margin-inline-end: calc(-1 * var(--attr-width));
65
+ }
66
+
67
+ &.ax-expanded {
68
+ margin-inline-end: 0;
69
+ }
70
+ }
71
+ }
72
+ }
73
+
74
+ .ax-drawer-content {
75
+ @apply ax-flex-1;
76
+ width: var(--attr-content-width);
77
+ }
78
+ }
79
+ }
package/src/components/_dropdown.scss CHANGED
@@ -1,178 +1,178 @@
1
- @layer components {
2
- .ax-dropdown {
3
- display: contents;
4
-
5
- .ax-dropdown-content {
6
- @apply ax-text-sm ax-flex-1 ax-overflow-y-hidden ax-overscroll-x-auto;
7
- }
8
- }
9
-
10
- .ax-overlay-pane {
11
- @apply ax-bg-white;
12
- &.ax-dropdown-list {
13
- @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
14
-
15
- ax-button-item {
16
- --ax-base-ratio : 4;
17
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
18
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
19
- @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-text-sm ax-text-gray-600 ax-cursor-pointer;
20
-
21
- &.ax-divide {
22
- @apply ax-border-t ax-border ax-border-solid;
23
- }
24
-
25
- &.ax-state-disabled
26
- {
27
- @apply ax-cursor-not-allowed ax-opacity-60;
28
- }
29
-
30
- ax-prefix {
31
- @apply ax-flex ax-flex-row ax-pe-2;
32
- }
33
-
34
- ax-suffix {
35
- @apply ax-flex ax-flex-row ax-ps-2;
36
- }
37
-
38
- &.ax-primary {
39
- @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
40
-
41
- &:hover,
42
- &:focus {
43
- @apply ax-bg-primary-50 ax-text-primary-600;
44
- }
45
-
46
- &:active {
47
- @apply ax-bg-primary-100 ax-text-primary-700;
48
- }
49
-
50
- &.ax-state-selected {
51
- @apply ax-bg-primary-200;
52
- }
53
- }
54
-
55
- &.ax-secondary {
56
- @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
57
-
58
- &:hover,
59
- &:focus {
60
- @apply ax-bg-secondary-50 ax-text-secondary-600;
61
- }
62
-
63
- &:active {
64
- @apply ax-bg-secondary-100 ax-text-secondary-700;
65
- }
66
-
67
- &.ax-state-selected {
68
- @apply ax-bg-secondary-200;
69
- }
70
- }
71
-
72
- &.ax-warning {
73
- @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
74
-
75
- &:hover,
76
- &:focus {
77
- @apply ax-bg-warning-50 ax-text-warning-600;
78
- }
79
-
80
- &:active {
81
- @apply ax-bg-warning-100 ax-text-warning-700;
82
- }
83
-
84
- &.ax-state-selected {
85
- @apply ax-bg-warning-200;
86
- }
87
- }
88
-
89
- &.ax-danger {
90
- @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
91
-
92
- &:hover,
93
- &:focus {
94
- @apply ax-bg-danger-50 ax-text-danger-600;
95
- }
96
-
97
- &:active {
98
- @apply ax-bg-danger-100 ax-text-danger-700;
99
- }
100
-
101
- &.ax-state-selected {
102
- @apply ax-bg-danger-200;
103
- }
104
- }
105
-
106
- &.ax-success {
107
- @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
108
-
109
- &:hover,
110
- &:focus {
111
- @apply ax-bg-success-50 ax-text-success-600;
112
- }
113
-
114
- &:active {
115
- @apply ax-bg-success-100 ax-text-success-700;
116
- }
117
-
118
- &.ax-state-selected {
119
- @apply ax-bg-success-200;
120
- }
121
- }
122
-
123
- &.ax-info {
124
- @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
125
-
126
- &:hover,
127
- &:focus {
128
- @apply ax-bg-info-50 ax-text-info-600;
129
- }
130
-
131
- &:active {
132
- @apply ax-bg-info-100 ax-text-info-700;
133
- }
134
-
135
- &.ax-state-selected {
136
- @apply ax-bg-info-200;
137
- }
138
- }
139
-
140
- &.ax-dark {
141
- @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
142
-
143
- &:hover,
144
- &:focus {
145
- @apply ax-bg-dark-50 ax-text-dark-600;
146
- }
147
-
148
- &:active {
149
- @apply ax-bg-dark-100 ax-text-dark-700;
150
- }
151
-
152
- &.ax-state-selected {
153
- @apply ax-bg-dark-200;
154
- }
155
- }
156
-
157
- &.ax-light {
158
- @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
159
-
160
- &:hover,
161
- &:focus {
162
- @apply ax-bg-light-500 ax-text-light-800;
163
- }
164
-
165
- &:active {
166
- @apply ax-bg-light-100 ax-text-light-700;
167
- }
168
-
169
- &.ax-state-selected {
170
- @apply ax-bg-light-600;
171
- }
172
- }
173
- }
174
-
175
-
176
- }
177
- }
1
+ @layer components {
2
+ .ax-dropdown {
3
+ display: contents;
4
+
5
+ .ax-dropdown-content {
6
+ @apply ax-text-sm ax-flex-1 ax-overflow-y-hidden ax-overscroll-x-auto;
7
+ }
8
+ }
9
+
10
+ .ax-overlay-pane {
11
+ @apply ax-bg-white;
12
+ &.ax-dropdown-list {
13
+ @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
14
+
15
+ ax-button-item {
16
+ --ax-base-ratio : 4;
17
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
18
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
19
+ @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-text-sm ax-text-gray-600 ax-cursor-pointer;
20
+
21
+ &.ax-divide {
22
+ @apply ax-border-t ax-border ax-border-solid;
23
+ }
24
+
25
+ &.ax-state-disabled
26
+ {
27
+ @apply ax-cursor-not-allowed ax-opacity-60;
28
+ }
29
+
30
+ ax-prefix {
31
+ @apply ax-flex ax-flex-row ax-pe-2;
32
+ }
33
+
34
+ ax-suffix {
35
+ @apply ax-flex ax-flex-row ax-ps-2;
36
+ }
37
+
38
+ &.ax-primary {
39
+ @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
40
+
41
+ &:hover,
42
+ &:focus {
43
+ @apply ax-bg-primary-50 ax-text-primary-600;
44
+ }
45
+
46
+ &:active {
47
+ @apply ax-bg-primary-100 ax-text-primary-700;
48
+ }
49
+
50
+ &.ax-state-selected {
51
+ @apply ax-bg-primary-200;
52
+ }
53
+ }
54
+
55
+ &.ax-secondary {
56
+ @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
57
+
58
+ &:hover,
59
+ &:focus {
60
+ @apply ax-bg-secondary-50 ax-text-secondary-600;
61
+ }
62
+
63
+ &:active {
64
+ @apply ax-bg-secondary-100 ax-text-secondary-700;
65
+ }
66
+
67
+ &.ax-state-selected {
68
+ @apply ax-bg-secondary-200;
69
+ }
70
+ }
71
+
72
+ &.ax-warning {
73
+ @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
74
+
75
+ &:hover,
76
+ &:focus {
77
+ @apply ax-bg-warning-50 ax-text-warning-600;
78
+ }
79
+
80
+ &:active {
81
+ @apply ax-bg-warning-100 ax-text-warning-700;
82
+ }
83
+
84
+ &.ax-state-selected {
85
+ @apply ax-bg-warning-200;
86
+ }
87
+ }
88
+
89
+ &.ax-danger {
90
+ @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
91
+
92
+ &:hover,
93
+ &:focus {
94
+ @apply ax-bg-danger-50 ax-text-danger-600;
95
+ }
96
+
97
+ &:active {
98
+ @apply ax-bg-danger-100 ax-text-danger-700;
99
+ }
100
+
101
+ &.ax-state-selected {
102
+ @apply ax-bg-danger-200;
103
+ }
104
+ }
105
+
106
+ &.ax-success {
107
+ @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
108
+
109
+ &:hover,
110
+ &:focus {
111
+ @apply ax-bg-success-50 ax-text-success-600;
112
+ }
113
+
114
+ &:active {
115
+ @apply ax-bg-success-100 ax-text-success-700;
116
+ }
117
+
118
+ &.ax-state-selected {
119
+ @apply ax-bg-success-200;
120
+ }
121
+ }
122
+
123
+ &.ax-info {
124
+ @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
125
+
126
+ &:hover,
127
+ &:focus {
128
+ @apply ax-bg-info-50 ax-text-info-600;
129
+ }
130
+
131
+ &:active {
132
+ @apply ax-bg-info-100 ax-text-info-700;
133
+ }
134
+
135
+ &.ax-state-selected {
136
+ @apply ax-bg-info-200;
137
+ }
138
+ }
139
+
140
+ &.ax-dark {
141
+ @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
142
+
143
+ &:hover,
144
+ &:focus {
145
+ @apply ax-bg-dark-50 ax-text-dark-600;
146
+ }
147
+
148
+ &:active {
149
+ @apply ax-bg-dark-100 ax-text-dark-700;
150
+ }
151
+
152
+ &.ax-state-selected {
153
+ @apply ax-bg-dark-200;
154
+ }
155
+ }
156
+
157
+ &.ax-light {
158
+ @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
159
+
160
+ &:hover,
161
+ &:focus {
162
+ @apply ax-bg-light-500 ax-text-light-800;
163
+ }
164
+
165
+ &:active {
166
+ @apply ax-bg-light-100 ax-text-light-700;
167
+ }
168
+
169
+ &.ax-state-selected {
170
+ @apply ax-bg-light-600;
171
+ }
172
+ }
173
+ }
174
+
175
+
176
+ }
177
+ }
178
178
  }
package/src/components/_editor-container.scss CHANGED
@@ -1,58 +1,70 @@
1
- @import "../variables/mixins";
2
- @layer components {
3
- .ax-editor-container {
4
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
5
- @apply ax-flex ax-rounded ax-bg-white ax-overflow-hidden ax-shadow-sm ax-border ax-border-solid ax-border-default;
6
- &:focus-within {
7
- @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
8
- }
9
- &.ax-button-icon {
10
- @apply ax-px-2;
11
- }
12
- [class*=" ax-ic-"],
13
- [class^=ax-ic-] {
14
- font-size: 1.2rem !important;
15
- line-height: 1 !important;
16
- }
17
- .ax-input {
18
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
19
- line-height: 4 !important;
20
- @apply ax-text-sm ax-flex-1 ax-bg-transparent ax-border-none ax-px-2;
21
- @include respond(mobile) {
22
- @apply ax-text-base;
23
- }
24
- &:focus {
25
- box-shadow: none;
26
- }
27
- }
28
- ax-button {
29
- button {
30
- @apply ax-rounded-none;
31
- &:focus {
32
- @apply ax-ring-0;
33
- }
34
- &.ax-button-icon {
35
- min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
36
- .ax-ic {
37
- @apply ax-text-base;
38
- }
39
- }
40
- }
41
- }
42
- .ax-suffix,
43
- .ax-prefix {
44
- * {
45
- @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
46
- }
47
- }
48
- &.ax-state-error {
49
- @apply ax-border-danger;
50
- .ax-input {
51
- @apply ax-placeholder-danger;
52
- }
53
- &:focus-within {
54
- @apply ax-ring-0 ax-ring-transparent;
55
- }
56
- }
57
- }
1
+ @import "../variables/mixins";
2
+ @layer components {
3
+ .ax-editor-container {
4
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio));
5
+ @apply ax-flex ax-rounded ax-bg-white ax-overflow-hidden ax-shadow-sm ax-border ax-border-solid ax-border-default;
6
+ &:focus-within {
7
+ @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
8
+ }
9
+ &.ax-button-icon {
10
+ @apply ax-px-2;
11
+ }
12
+ [class*=" ax-ic-"],
13
+ [class^=ax-ic-] {
14
+ font-size: 1.2rem !important;
15
+ line-height: 1 !important;
16
+ }
17
+ .ax-input {
18
+ line-height: 4 !important;
19
+ min-width: 1%;
20
+ @apply ax-text-sm ax-flex-1 ax-bg-transparent ax-border-none ax-px-2;
21
+ @include respond(mobile) {
22
+ @apply ax-text-base;
23
+ }
24
+ &:focus {
25
+ box-shadow: none;
26
+ }
27
+ }
28
+ ax-button {
29
+ button {
30
+ @apply ax-rounded-none;
31
+ &:focus {
32
+ @apply ax-ring-0;
33
+ }
34
+ &.ax-button-icon {
35
+ min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
36
+ .ax-ic {
37
+ @apply ax-text-base;
38
+ }
39
+ }
40
+ }
41
+ }
42
+ .ax-suffix,
43
+ .ax-prefix {
44
+ * {
45
+ @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
46
+ }
47
+ }
48
+ &.ax-state-error {
49
+ @apply ax-border-danger;
50
+ .ax-input {
51
+ @apply ax-placeholder-danger;
52
+ }
53
+ &:focus-within {
54
+ @apply ax-ring-0 ax-ring-transparent;
55
+ }
56
+ }
57
+ &.ax-sm {
58
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
59
+ .ax-input {
60
+ @apply ax-text-xs;
61
+ }
62
+ }
63
+ &.ax-lg {
64
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
65
+ .ax-input {
66
+ @apply ax-text-lg;
67
+ }
68
+ }
69
+ }
58
70
  }
package/src/components/_form.scss CHANGED
@@ -1,10 +1,8 @@
1
- @layer components {
2
- .ax-form-field {
3
- @apply ax-mb-2;
4
-
5
- .ax-error-msg
6
- {
7
- @apply ax-text-danger ax-text-xs;
8
- }
9
- }
10
- }
1
+ @layer components {
2
+ .ax-form-field {
3
+ @apply ax-mb-2 ax-relative;
4
+ .ax-error-msg {
5
+ @apply ax-absolute ax--bottom-5 ax-text-danger ax-text-xs;
6
+ }
7
+ }
8
+ }