@acorex/styles 5.0.53 → 5.0.56

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.53",
3
+ "version": "5.0.56",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -0,0 +1,25 @@
1
+ @layer components {
2
+ ax-action-sheet,
3
+ .ax-action-sheet {
4
+ .ax-action-sheet-container {
5
+ @apply ax-fixed ax-bottom-0 ax-left-1/2 -ax-translate-x-1/2 ax-z-[9999] ax-w-1/3 ax-rounded-t-2xl ax-overflow-hidden;
6
+
7
+ @include screen(mobile) {
8
+ @apply ax-w-full;
9
+ }
10
+ .ax-action-sheet-caption {
11
+ @apply ax-text-sm ax-p-4;
12
+ }
13
+ .ax-action-sheet-items {
14
+ @apply ax-flex ax-flex-col ax-pb-3 ax-overflow-x-hidden ax-overflow-y-auto;
15
+ ax-button {
16
+ @apply ax-rounded-none ax-w-full ax-text-start ax-justify-start;
17
+ }
18
+ }
19
+ }
20
+ }
21
+
22
+ .ax-action-sheet-backdrop {
23
+ @apply ax-bg-black/75 ax-left-0 ax-right-0 ax-top-0 ax-bottom-0 ax-fixed ax-z-[9998];
24
+ }
25
+ }
@@ -2,19 +2,24 @@
2
2
  ax-avatar-group,
3
3
  .ax-avatar-group {
4
4
  @apply ax-flex;
5
- ax-avatar{
5
+ ax-avatar {
6
6
  @apply ax-border-2 ax-border-white -ax-m-1 dark:ax-border-dark-500;
7
7
  }
8
8
  }
9
9
  ax-avatar,
10
10
  .ax-avatar {
11
11
  @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16;
12
- ax-badge{
13
- @apply ax-absolute -ax-top-1.5 ;
12
+ ax-badge {
13
+ @apply ax-absolute -ax-top-1.5;
14
14
  right: -6px;
15
15
  }
16
16
  .ax-avatar-container {
17
17
  @apply ax-w-full ax-h-full ax-rounded-md;
18
+ .ax-default-avatar {
19
+ svg {
20
+ @apply ax-w-full;
21
+ }
22
+ }
18
23
  .ax-default-avatar,
19
24
  .ax-text-avatar,
20
25
  .ax-icon-avatar,
@@ -1,34 +1,26 @@
1
1
  @layer components {
2
2
  .ax-drawer-container {
3
- @apply ax-flex
4
- ax-relative
5
- ax-w-full
6
- ax-h-full
7
- ax-overflow-hidden;
3
+ @apply ax-flex ax-relative ax-w-full ax-h-full ax-overflow-hidden;
8
4
 
9
5
  .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);
6
+ @apply ax-absolute ax-w-full ax-h-full ax-z-[990] ax-transition-all ax-top-0 ax-bottom-0 ax-bg-black/50;
7
+
17
8
  }
18
9
 
19
10
  .ax-drawer {
20
- @apply ax-h-full;
11
+
21
12
 
22
- &.ax-animated {
23
- transition: all 500ms;
24
- }
13
+ // &.ax-animated {
14
+ // transition: all 500ms;
15
+ // }
25
16
 
26
17
  &.ax-drawer-overlay {
27
- @apply ax-absolute;
18
+ @apply ax-absolute ax-z-[999];
28
19
  z-index: 9999;
29
20
  }
30
21
 
31
22
  &.ax-drawer-start {
23
+ @apply ax-h-full;
32
24
  &.ax-hide {
33
25
  position: absolute;
34
26
  left: -9999px;
@@ -44,6 +36,7 @@
44
36
  }
45
37
 
46
38
  &.ax-drawer-end {
39
+ @apply ax-h-full;
47
40
  &.ax-hide {
48
41
  position: absolute;
49
42
  right: -9999px;
@@ -69,6 +62,60 @@
69
62
  }
70
63
  }
71
64
  }
65
+ &.ax-drawer-top {
66
+ @apply ax-w-full;
67
+ &.ax-hide {
68
+ position: absolute;
69
+ top: -9999px;
70
+ }
71
+
72
+ &.ax-drawer-overlay {
73
+ &.ax-collapsed {
74
+ top: calc(-2 * var(--attr-height));
75
+ }
76
+
77
+ &.ax-expanded {
78
+ top: calc(-2 * var(--attr-diff));
79
+ }
80
+ }
81
+
82
+ &.ax-drawer-push {
83
+ &.ax-collapsed {
84
+ margin-block-start: calc(-2 * var(--attr-height));
85
+ }
86
+
87
+ &.ax-expanded {
88
+ margin-block-start: 0;
89
+ }
90
+ }
91
+ }
92
+ &.ax-drawer-bottom {
93
+ @apply ax-w-full;
94
+ &.ax-hide {
95
+ position: absolute;
96
+ bottom: -9999px;
97
+ }
98
+
99
+ &.ax-drawer-overlay {
100
+ &.ax-collapsed {
101
+ bottom: calc(-2 * var(--attr-height));
102
+ }
103
+
104
+ &.ax-expanded {
105
+ bottom: calc(-2 * var(--attr-diff));
106
+ }
107
+ }
108
+
109
+ &.ax-drawer-push {
110
+ &.ax-collapsed {
111
+ margin-block-start: calc(-2 * var(--attr-height));
112
+ }
113
+
114
+ &.ax-expanded {
115
+ margin-block-start: 0;
116
+ }
117
+ }
118
+ }
72
119
  }
73
120
 
74
121
  .ax-drawer-content {
@@ -126,7 +126,7 @@
126
126
 
127
127
  &.ax-look-pills-color {
128
128
  ax-tab-item {
129
- @apply ax-text-light-fore ax-me-1 ax-rounded dark:ax-text-primary-200;
129
+ @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
130
130
 
131
131
  &:hover {
132
132
  @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
@@ -1,3 +1,4 @@
1
+ @import "./action-sheet";
1
2
  @import "./alert";
2
3
  @import "./avatar";
3
4
  @import "./badge";