@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/_calendar.scss CHANGED
@@ -1,84 +1,130 @@
1
1
  @import "../variables/mixins";
2
+
2
3
  @layer components {
3
- .ax-calendar {
4
+ ax-calendar {
5
+ @apply ax-block ax-border ax-border-solid ax-border-default ax-rounded ax-bg-white ax-select-none;
6
+
7
+ &.ax-state-disabled
8
+ {
9
+ .ax-calendar-slots
10
+ {
11
+ @apply ax-opacity-50 ax-cursor-default;
12
+ }
13
+ }
14
+
4
15
  .ax-calendar-header {
5
- @apply ax-grid ax-grid-cols-12 ax-mb-2 ax-pb-1 ax-border-b ax-border-default ax-border-solid;
16
+ @apply ax-grid ax-grid-cols-12 ax-py-1 ax-px-2 ax-border-b ax-border-default ax-border-solid;
17
+
6
18
  .ax-nav-button {
7
19
  @apply ax-col-span-8 ax-justify-start;
8
20
  }
21
+
9
22
  .ax-prev-button,
10
23
  .ax-next-button {
11
24
  @apply ax-col-span-2 ax-justify-center ax-ms-1;
12
25
  }
13
26
  }
27
+
14
28
  .ax-calendar-body {
15
- .ax-month-items,
16
- .ax-day-items {
17
- @apply ax-grid ax-grid-cols-7;
18
- }
19
- .ax-month-items {
20
- .ax-month-item {
21
- @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-text ax-m-0.5;
22
- }
23
- }
24
- .ax-day-items {
25
- .ax-day-item {
29
+ @apply ax-m-2;
30
+
31
+ .ax-calendar-slots {
32
+ @apply ax-grid;
33
+
34
+ &>div {
26
35
  @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-m-0.5 ax-rounded;
36
+
27
37
  &::before {
28
38
  content: '';
29
39
  padding-top: 100%;
30
40
  float: left;
31
41
  }
42
+
32
43
  &::after {
33
44
  content: '';
34
45
  display: block;
35
46
  clear: both;
36
47
  }
48
+
37
49
  &:hover {
38
- @apply ax-bg-gray-100;
50
+ @apply ax-bg-light-100;
39
51
  }
52
+
53
+ &.ax-state-disabled {
54
+ @apply ax-text-gray-300 ax-cursor-default;
55
+ &:hover {
56
+ @apply ax-bg-transparent ax-text-gray-300;
57
+ }
58
+ // &::after {
59
+ // @apply ax-text-sm ax-cursor-not-allowed ax-text-danger-600;
60
+ // position: absolute;
61
+ // content: "\03a7";
62
+ // margin: auto;
63
+ // }
64
+ }
65
+
40
66
  &.ax-state-holiday {
41
67
  @apply ax-text-danger;
42
68
  &:hover {
43
69
  @apply ax-text-black;
44
70
  }
45
71
  }
72
+
46
73
  &.ax-state-today {
47
- @apply ax-bg-success ax-text-success-fore;
74
+ @apply ax-bg-opacity-50 ax-bg-primary-50 ax-text-primary;
75
+ &:hover {
76
+ @apply ax-text-primary;
77
+ }
78
+ }
79
+
80
+ &.ax-state-other {
81
+ @apply ax-opacity-50;
48
82
  }
83
+
49
84
  &.ax-state-selected {
50
- @apply ax-bg-primary ax-text-primary-fore;
85
+ @apply ax-bg-primary ax-text-primary-fore ax-opacity-100;
86
+
87
+ &:hover {
88
+ @apply ax-text-primary-fore;
89
+ }
51
90
  }
91
+
52
92
  &.ax-state-event {
53
93
  &::after {
54
- @apply ax-absolute ax-bottom-1 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark;
94
+ @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark;
55
95
  content: ''
56
96
  }
97
+
57
98
  &.ax-state-event-primary {
58
99
  &::after {
59
100
  @apply ax-bg-primary;
60
101
  }
61
102
  }
103
+
62
104
  &.ax-state-event-secondary {
63
105
  &::after {
64
106
  @apply ax-bg-secondary;
65
107
  }
66
108
  }
109
+
67
110
  &.ax-state-event-success {
68
111
  &::after {
69
112
  @apply ax-bg-success;
70
113
  }
71
114
  }
115
+
72
116
  &.ax-state-event-warning {
73
117
  &::after {
74
118
  @apply ax-bg-warning;
75
119
  }
76
120
  }
121
+
77
122
  &.ax-state-event-danger {
78
123
  &::after {
79
124
  @apply ax-bg-danger;
80
125
  }
81
126
  }
127
+
82
128
  &.ax-state-event-info {
83
129
  &::after {
84
130
  @apply ax-bg-info;
@@ -86,10 +132,28 @@
86
132
  }
87
133
  }
88
134
  }
135
+
136
+ &.ax-calendar-slots-day {
137
+ @apply ax-grid-cols-7;
138
+ }
139
+
140
+ &.ax-calendar-slots-year,
141
+ &.ax-calendar-slots-month {
142
+ @apply ax-grid-cols-4;
143
+ }
144
+ }
145
+
146
+ .ax-calendar-week {
147
+ @apply ax-grid ax-grid-cols-7 ax-my-2;
148
+
149
+ &>div {
150
+ @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-text ax-m-0.5;
151
+ }
89
152
  }
90
153
  }
154
+
91
155
  .ax-calendar-footer {
92
- @apply ax-my-2;
156
+ @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100;
93
157
  }
94
158
  }
95
159
  }
package/src/components/_carousel.scss CHANGED
@@ -5,57 +5,32 @@
5
5
  width: 100%;
6
6
  display: block;
7
7
  position: relative;
8
-
9
8
  .ax-carousel-arrows {
10
- @apply ax-flex
11
- ax-absolute
12
- ax-justify-between
13
- ax-justify-items-center
14
- ax-cursor-pointer
15
- ax-bg-transparent
16
- ax-text-white
17
- ax-invisible;
9
+ @apply ax-flex ax-absolute ax-justify-between ax-justify-items-center ax-cursor-pointer ax-bg-transparent ax-text-white ax-invisible;
18
10
  top: 0;
19
11
  left: 0;
20
12
  right: 0;
21
13
  bottom: 0;
22
-
23
14
  button {
24
- @apply ax-border-none
25
- ax-cursor-pointer
26
- ax-bg-transparent
27
- ax-text-white
28
- ax-visible;
29
-
15
+ @apply ax-border-none ax-cursor-pointer ax-bg-transparent ax-text-white ax-visible;
30
16
  .ax-ic {
31
17
  font-size: 2.5rem;
32
18
  }
33
19
  }
34
20
  }
35
-
36
21
  .ax-carousel-pager {
37
- @apply ax-flex
38
- ax-py-2
39
- ax-justify-center;
40
-
22
+ @apply ax-flex ax-py-2 ax-justify-center;
41
23
  button {
42
- @apply ax-p-1
43
- ax-mx-1
44
- ax-cursor-pointer
45
- ax-border-none
46
- ax-rounded-full
47
- ax-bg-gray-300;
24
+ @apply ax-p-1 ax-mx-1 ax-cursor-pointer ax-border-none ax-rounded-full ax-bg-light-300;
48
25
  width: calc(var(--ax-base-size) * 1.5);
49
26
  height: calc(var(--ax-base-size) * 1.5);
50
-
51
27
  &:hover {
52
28
  @apply ax-bg-primary-600;
53
29
  }
54
-
55
30
  &.ax-state-active {
56
31
  @apply ax-bg-primary-400;
57
32
  }
58
33
  }
59
34
  }
60
35
  }
61
- }
36
+ }
package/src/components/_checkbox.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @import "../variables/mixins";
2
2
  @layer components {
3
3
  .ax-checkbox-container {
4
- @apply ax-text-sm ax-font-medium ax-text-gray-700;
4
+ @apply ax-text-sm ax-font-medium ax-text-light-700;
5
5
  @include respond(mobile) {
6
6
  @apply ax-text-base;
7
7
  }
package/src/components/_datepicker.scss CHANGED
@@ -1,7 +1,5 @@
1
1
  @layer components {
2
2
  .ax-datepicker-body {
3
- .ax-calendar {
4
- @apply ax-m-auto ax-shadow-none ax-w-full ax-border-none;
5
- }
3
+ @apply ax-m-auto ax-shadow-sm ax-w-full ax-rounded ax-border ax-border-default ax-border-none;
6
4
  }
7
- }
5
+ }
package/src/components/_dialog.scss CHANGED
@@ -20,15 +20,15 @@
20
20
  .ax-dialog-content-side {
21
21
  @apply ax-col-span-9;
22
22
  .ax-dialog-title {
23
- @apply ax-text-lg ax-font-bold ax-text-gray-700;
23
+ @apply ax-text-lg ax-font-bold ax-text-light-700;
24
24
  }
25
25
  .ax-dialog-content {
26
- @apply ax-text-sm ax-my-1.5 ax-text-gray-500;
26
+ @apply ax-text-sm ax-my-1.5 ax-text-light-500;
27
27
  }
28
28
  }
29
29
  .ax-dialog-dismiss-icon {
30
30
  @apply ax-col-span-1;
31
- @apply ax-cursor-pointer ax-text-gray-400 ax--mt-2.5;
31
+ @apply ax-cursor-pointer ax-text-light-400 ax--mt-2.5;
32
32
  }
33
33
  .ax-dialog-footer {
34
34
  @apply ax-col-span-12 ax-flex ax-justify-end;
package/src/components/_dropdown.scss CHANGED
@@ -1,178 +1,141 @@
1
1
  @layer components {
2
- .ax-dropdown {
2
+ ax-drop-down {
3
3
  display: contents;
4
-
5
4
  .ax-dropdown-content {
6
5
  @apply ax-text-sm ax-flex-1 ax-overflow-y-hidden ax-overscroll-x-auto;
7
6
  }
8
7
  }
9
-
8
+ .ax-backdrop-light {
9
+ @apply cdk-overlay-backdrop ax-bg-white ax-bg-opacity-50;
10
+ }
11
+ .ax-backdrop-dark {
12
+ @apply cdk-overlay-backdrop ax-bg-black ax-bg-opacity-50;
13
+ }
10
14
  .ax-overlay-pane {
11
15
  @apply ax-bg-white;
12
16
  &.ax-dropdown-list {
13
17
  @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
14
-
15
18
  ax-button-item {
16
- --ax-base-ratio : 4;
17
19
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
18
20
  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
+ @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-text-sm ax-text-light-600 ax-cursor-pointer;
21
22
  &.ax-divide {
22
23
  @apply ax-border-t ax-border ax-border-solid;
23
24
  }
24
-
25
- &.ax-state-disabled
26
- {
25
+ &.ax-state-disabled {
27
26
  @apply ax-cursor-not-allowed ax-opacity-60;
28
27
  }
29
-
30
28
  ax-prefix {
31
29
  @apply ax-flex ax-flex-row ax-pe-2;
32
30
  }
33
-
34
31
  ax-suffix {
35
32
  @apply ax-flex ax-flex-row ax-ps-2;
36
33
  }
37
-
38
34
  &.ax-primary {
39
35
  @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
40
-
41
36
  &:hover,
42
37
  &:focus {
43
38
  @apply ax-bg-primary-50 ax-text-primary-600;
44
39
  }
45
-
46
40
  &:active {
47
41
  @apply ax-bg-primary-100 ax-text-primary-700;
48
42
  }
49
-
50
43
  &.ax-state-selected {
51
44
  @apply ax-bg-primary-200;
52
45
  }
53
46
  }
54
-
55
47
  &.ax-secondary {
56
48
  @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
57
-
58
49
  &:hover,
59
50
  &:focus {
60
51
  @apply ax-bg-secondary-50 ax-text-secondary-600;
61
52
  }
62
-
63
53
  &:active {
64
54
  @apply ax-bg-secondary-100 ax-text-secondary-700;
65
55
  }
66
-
67
56
  &.ax-state-selected {
68
57
  @apply ax-bg-secondary-200;
69
58
  }
70
59
  }
71
-
72
60
  &.ax-warning {
73
61
  @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
74
-
75
62
  &:hover,
76
63
  &:focus {
77
64
  @apply ax-bg-warning-50 ax-text-warning-600;
78
65
  }
79
-
80
66
  &:active {
81
67
  @apply ax-bg-warning-100 ax-text-warning-700;
82
68
  }
83
-
84
69
  &.ax-state-selected {
85
70
  @apply ax-bg-warning-200;
86
71
  }
87
72
  }
88
-
89
73
  &.ax-danger {
90
74
  @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
91
-
92
75
  &:hover,
93
76
  &:focus {
94
77
  @apply ax-bg-danger-50 ax-text-danger-600;
95
78
  }
96
-
97
79
  &:active {
98
80
  @apply ax-bg-danger-100 ax-text-danger-700;
99
81
  }
100
-
101
82
  &.ax-state-selected {
102
83
  @apply ax-bg-danger-200;
103
84
  }
104
85
  }
105
-
106
86
  &.ax-success {
107
87
  @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
108
-
109
88
  &:hover,
110
89
  &:focus {
111
90
  @apply ax-bg-success-50 ax-text-success-600;
112
91
  }
113
-
114
92
  &:active {
115
93
  @apply ax-bg-success-100 ax-text-success-700;
116
94
  }
117
-
118
95
  &.ax-state-selected {
119
96
  @apply ax-bg-success-200;
120
97
  }
121
98
  }
122
-
123
99
  &.ax-info {
124
100
  @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
125
-
126
101
  &:hover,
127
102
  &:focus {
128
103
  @apply ax-bg-info-50 ax-text-info-600;
129
104
  }
130
-
131
105
  &:active {
132
106
  @apply ax-bg-info-100 ax-text-info-700;
133
107
  }
134
-
135
108
  &.ax-state-selected {
136
109
  @apply ax-bg-info-200;
137
110
  }
138
111
  }
139
-
140
112
  &.ax-dark {
141
113
  @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
142
-
143
114
  &:hover,
144
115
  &:focus {
145
116
  @apply ax-bg-dark-50 ax-text-dark-600;
146
117
  }
147
-
148
118
  &:active {
149
119
  @apply ax-bg-dark-100 ax-text-dark-700;
150
120
  }
151
-
152
121
  &.ax-state-selected {
153
122
  @apply ax-bg-dark-200;
154
123
  }
155
124
  }
156
-
157
125
  &.ax-light {
158
126
  @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
159
-
160
127
  &:hover,
161
128
  &:focus {
162
129
  @apply ax-bg-light-500 ax-text-light-800;
163
130
  }
164
-
165
131
  &:active {
166
132
  @apply ax-bg-light-100 ax-text-light-700;
167
133
  }
168
-
169
134
  &.ax-state-selected {
170
135
  @apply ax-bg-light-600;
171
136
  }
172
137
  }
173
138
  }
174
-
175
-
176
139
  }
177
140
  }
178
141
  }
package/src/components/_editor-container.scss CHANGED
@@ -15,8 +15,8 @@
15
15
  line-height: 1 !important;
16
16
  }
17
17
  .ax-input {
18
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
19
18
  line-height: 4 !important;
19
+ min-width: 1%;
20
20
  @apply ax-text-sm ax-flex-1 ax-bg-transparent ax-border-none ax-px-2;
21
21
  @include respond(mobile) {
22
22
  @apply ax-text-base;
@@ -26,16 +26,15 @@
26
26
  }
27
27
  }
28
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
- }
29
+ height: 100% !important;
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;
39
38
  }
40
39
  }
41
40
  }
@@ -45,6 +44,14 @@
45
44
  @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
46
45
  }
47
46
  }
47
+ &.ax-state-disabled {
48
+ background-color: rgb(var(--ax-color-disabled)) !important;
49
+ color: rgb(var(--ax-color-disabled-fore)) !important;
50
+ @apply ax-cursor-not-allowed;
51
+ &:hover {
52
+ background-color: rgb(var(--ax-color-disabled)) !important;
53
+ }
54
+ }
48
55
  &.ax-state-error {
49
56
  @apply ax-border-danger;
50
57
  .ax-input {
@@ -54,5 +61,17 @@
54
61
  @apply ax-ring-0 ax-ring-transparent;
55
62
  }
56
63
  }
64
+ &.ax-sm {
65
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
66
+ .ax-input {
67
+ @apply ax-text-xs;
68
+ }
69
+ }
70
+ &.ax-lg {
71
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
72
+ .ax-input {
73
+ @apply ax-text-lg;
74
+ }
75
+ }
57
76
  }
58
77
  }
package/src/components/_form.scss CHANGED
@@ -1,10 +1,8 @@
1
1
  @layer components {
2
2
  .ax-form-field {
3
- @apply ax-mb-2;
4
-
5
- .ax-error-msg
6
- {
7
- @apply ax-text-danger ax-text-xs;
3
+ @apply ax-mb-2 ax-relative;
4
+ .ax-error-msg {
5
+ @apply ax-absolute ax--bottom-5 ax-text-danger ax-text-xs;
8
6
  }
9
7
  }
10
- }
8
+ }
package/src/components/_input.scss CHANGED
@@ -5,12 +5,13 @@
5
5
  &:focus {
6
6
  @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
7
7
  }
8
-
9
8
  &.ax-state-disabled {
10
- @apply ax-bg-gray-400 ax-text-gray-900 ax-cursor-not-allowed ax-border-gray-400;
9
+ background-color: rgb(var(--ax-color-disabled)) !important;
10
+ color: rgb(var(--ax-color-disabled-fore)) !important;
11
+ @apply ax-cursor-not-allowed;
11
12
  &:hover {
12
- @apply ax-border-gray-400;
13
+ background-color: rgb(var(--ax-color-disabled)) !important;
13
14
  }
14
15
  }
15
16
  }
16
- }
17
+ }
package/src/components/_label.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
2
  .ax-label {
3
- @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-gray-700;
3
+ @apply ax-block ax-font-medium ax-mb-2 ax-text-sm ax-text-light-700;
4
4
  }
5
5
  }
package/src/components/_list.scss CHANGED
@@ -2,38 +2,32 @@
2
2
  .ax-list {
3
3
  display: block;
4
4
  }
5
-
6
5
  .ax-list-container {
7
6
  .ax-list-items-container {
8
- @apply ax-bg-white ax-rounded ax-shadow ax-overflow-y-auto ax-h-full;
9
-
7
+ @apply ax-bg-white ax-py-1 ax-rounded ax-shadow ax-overflow-y-auto ax-h-full ax-border ax-border-solid ax-border-default;
10
8
  &.ax-vertical {
11
9
  @apply ax-grid ax-grid-cols-1;
12
-
13
10
  &.ax-divide {
14
11
  @apply ax-divide-y ax-divide-x-0 ax-divide-light-600 ax-divide-opacity-30 ax-divide-solid;
15
12
  }
16
13
  }
17
-
18
14
  &.ax-default {
19
15
  @apply ax-cursor-pointer;
20
-
21
16
  .ax-list-item {
22
- @apply ax-p-3 ax-text-sm;
17
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
18
+ @apply ax-text-sm ax-flex ax-items-center ax-px-3;
23
19
  &:focus,
24
20
  &:focus-visible {
25
21
  @apply ax-outline-none;
26
22
  }
27
23
  &:hover {
28
24
  &:not(.ax-state-selected) {
29
- @apply ax-bg-primary-50 ax-text-primary;
25
+ @apply ax-bg-light-100 ax-text-light-fore;
30
26
  }
31
27
  }
32
-
33
28
  &.ax-state-selected {
34
- @apply ax-bg-primary-100 ax-text-primary ax-font-bold;
29
+ @apply ax-bg-primary-100 ax-text-primary ax-font-medium;
35
30
  }
36
-
37
31
  &:focus,
38
32
  &.ax-state-focus {
39
33
  &:not(.ax-state-selected) {
@@ -43,15 +37,13 @@
43
37
  }
44
38
  }
45
39
  }
46
-
47
40
  .ax-list-loading-container {
48
41
  @apply ax-flex ax-justify-center ax-p-2;
49
42
  }
50
43
  }
51
-
52
44
  .cdk-overlay-container {
53
45
  .ax-list-items-container {
54
46
  max-height: 25vh;
55
47
  }
56
48
  }
57
- }
49
+ }
package/src/components/_radio.scss CHANGED
@@ -1,23 +1,12 @@
1
1
  @import "../variables/mixins";
2
2
  @layer components {
3
3
  .ax-radio-container {
4
- @apply ax-text-sm ax-font-medium ax-text-gray-700;
4
+ @apply ax-text-sm ax-font-medium ax-text-light-700;
5
5
  @include respond(mobile) {
6
6
  @apply ax-text-base;
7
7
  }
8
8
  .ax-radio {
9
- @apply ax-w-4
10
- ax-h-4
11
- ax-border-solid
12
- ax-border
13
- ax-border-default
14
- ax-rounded-full
15
- ax-bg-white
16
- ax-text-primary
17
- ax-m-0
18
- ax-outline-none
19
- ax-align-middle
20
- ax-appearance-none;
9
+ @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-default ax-rounded-full ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
21
10
  &:checked {
22
11
  @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
23
12
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
@@ -27,4 +16,4 @@
27
16
  }
28
17
  }
29
18
  }
30
- }
19
+ }