@acorex/styles 5.0.35 → 5.0.36

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/_calendar.scss +8 -0
  3. package/src/components/_dropdown.scss +38 -9
  4. package/src/components/_list.scss +17 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.35",
3
+ "version": "5.0.36",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_calendar.scss CHANGED
@@ -152,4 +152,12 @@
152
152
  @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100 dark:ax-bg-transparent dark:ax-border-transparent;
153
153
  }
154
154
  }
155
+
156
+ .ax-overlay-pane
157
+ {
158
+ ax-calendar
159
+ {
160
+ @apply ax-border-none
161
+ }
162
+ }
155
163
  }
package/src/components/_dropdown.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @layer components {
2
+
2
3
  ax-drop-down,
3
4
  .ax-drop-down {
4
5
  display: contents;
@@ -20,6 +21,34 @@
20
21
  @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
21
22
  @include control-dark("surface");
22
23
 
24
+ &.ax-overlay-center {
25
+ @apply ax-h-fit;
26
+ max-height: 90vh;
27
+ width: 80vw;
28
+ }
29
+
30
+ &.ax-overlay-actionsheet {
31
+ @apply ax-w-full;
32
+ height: 50vh;
33
+ max-height: 70vh;
34
+ }
35
+
36
+ &.ax-overlay-full {
37
+ @apply ax-w-screen ax-h-screen;
38
+ }
39
+
40
+ .ax-overlay-pane-header {
41
+ @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
42
+
43
+ span {
44
+ @apply ax-font-medium;
45
+ }
46
+
47
+ i {
48
+ @apply ax-text-primary-500 ax-cursor-pointer ax-text-xl;
49
+ }
50
+ }
51
+
23
52
  &.ax-dropdown-list {
24
53
  @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
25
54
 
@@ -91,7 +120,7 @@
91
120
  }
92
121
 
93
122
  &.ax-state-selected {
94
- @apply ax-bg-warning-200 dark:ax-bg-warning-600 dark:ax-text-warning-100;
123
+ @apply ax-bg-warning-200 dark:ax-bg-warning-600 dark:ax-text-warning-100;
95
124
  }
96
125
  }
97
126
 
@@ -108,7 +137,7 @@
108
137
  }
109
138
 
110
139
  &.ax-state-selected {
111
- @apply ax-bg-danger-200 dark:ax-bg-danger-600 dark:ax-text-danger-100;
140
+ @apply ax-bg-danger-200 dark:ax-bg-danger-600 dark:ax-text-danger-100;
112
141
  }
113
142
  }
114
143
 
@@ -125,7 +154,7 @@
125
154
  }
126
155
 
127
156
  &.ax-state-selected {
128
- @apply ax-bg-success-200 dark:ax-bg-success-600 dark:ax-text-success-100;
157
+ @apply ax-bg-success-200 dark:ax-bg-success-600 dark:ax-text-success-100;
129
158
  }
130
159
  }
131
160
 
@@ -142,16 +171,16 @@
142
171
  }
143
172
 
144
173
  &.ax-state-selected {
145
- @apply ax-bg-info-200 dark:ax-bg-info-600 dark:ax-text-info-100;
174
+ @apply ax-bg-info-200 dark:ax-bg-info-600 dark:ax-text-info-100;
146
175
  }
147
176
  }
148
177
 
149
178
  &.ax-dark-default {
150
- @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-100;
179
+ @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-100;
151
180
 
152
181
  &:hover,
153
182
  &:focus {
154
- @apply ax-bg-dark-50 ax-text-dark-600 dark:ax-bg-dark-400 dark:ax-text-dark-50;
183
+ @apply ax-bg-dark-50 ax-text-dark-600 dark:ax-bg-dark-400 dark:ax-text-dark-50;
155
184
  }
156
185
 
157
186
  &:active {
@@ -159,7 +188,7 @@
159
188
  }
160
189
 
161
190
  &.ax-state-selected {
162
- @apply ax-bg-dark-200 dark:ax-bg-dark-400 dark:ax-text-dark-100;
191
+ @apply ax-bg-dark-200 dark:ax-bg-dark-400 dark:ax-text-dark-100;
163
192
  }
164
193
  }
165
194
 
@@ -176,10 +205,10 @@
176
205
  }
177
206
 
178
207
  &.ax-state-selected {
179
- @apply ax-bg-light-200 dark:ax-bg-light-600 dark:ax-text-light-100;
208
+ @apply ax-bg-light-200 dark:ax-bg-light-600 dark:ax-text-light-100;
180
209
  }
181
210
  }
182
211
  }
183
212
  }
184
213
  }
185
- }
214
+ }
package/src/components/_list.scss CHANGED
@@ -2,32 +2,41 @@
2
2
  .ax-list {
3
3
  display: block;
4
4
  }
5
+
5
6
  .ax-list-container {
6
7
  .ax-list-items-container {
7
8
  @apply ax-py-1 ax-rounded ax-overflow-y-auto ax-h-full dark:ax-border-transparent;
9
+
8
10
  &.ax-vertical {
9
11
  @apply ax-grid ax-grid-cols-1;
12
+
10
13
  &.ax-divide {
11
14
  @apply ax-divide-y ax-divide-x-0 ax-divide-light-600 ax-divide-opacity-30 ax-divide-solid;
12
15
  }
13
16
  }
17
+
14
18
  &.ax-default {
15
19
  @apply ax-cursor-pointer;
20
+
16
21
  .ax-list-item {
17
22
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
18
23
  @apply ax-text-sm ax-flex ax-items-center ax-px-3;
24
+
19
25
  &:focus,
20
26
  &:focus-visible {
21
27
  @apply ax-outline-none;
22
28
  }
29
+
23
30
  &:hover {
24
31
  &:not(.ax-state-selected) {
25
32
  @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-white/[0.09] dark:ax-text-light-50;
26
33
  }
27
34
  }
35
+
28
36
  &.ax-state-selected {
29
- @apply ax-bg-primary-100 ax-text-primary-500 ax-font-medium dark:ax-bg-primary-500 dark:ax-text-primary-50;
37
+ @apply ax-text-primary-500 ax-font-medium dark:ax-text-primary-50;
30
38
  }
39
+
31
40
  &:focus,
32
41
  &.ax-state-focus {
33
42
  &:not(.ax-state-selected) {
@@ -37,13 +46,20 @@
37
46
  }
38
47
  }
39
48
  }
49
+
40
50
  .ax-list-loading-container {
41
51
  @apply ax-flex ax-justify-center ax-p-2;
42
52
  }
43
53
  }
54
+
44
55
  .cdk-overlay-container {
45
56
  .ax-list-items-container {
46
57
  max-height: 25vh;
58
+
59
+ &.ax-full {
60
+ max-height: 75vh;
61
+ height: fit-content;
62
+ }
47
63
  }
48
64
  }
49
65
  }