@acorex/styles 6.0.7 → 6.0.17

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": "6.0.7",
3
+ "version": "6.0.17",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
@@ -5,12 +5,16 @@
5
5
  @apply ax-border-2 ax-border-white -ax-m-1 dark:ax-border-dark-500;
6
6
  }
7
7
  }
8
- .ax-avatar {
9
- @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16;
8
+ ax-avatar {
9
+ @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16 ax-overflow-hidden;
10
10
  ax-badge {
11
11
  @apply ax-absolute -ax-top-1.5;
12
12
  right: -6px;
13
13
  }
14
+ ax-icon,
15
+ ax-text {
16
+ @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center;
17
+ }
14
18
  .ax-avatar-container {
15
19
  @apply ax-w-full ax-h-full ax-rounded-default;
16
20
  .ax-default-avatar {
@@ -26,106 +30,90 @@
26
30
  }
27
31
  }
28
32
  &.ax-primary-default {
29
- .ax-default-avatar {
30
- svg {
31
- @apply ax-fill-primary-500;
32
- }
33
+ .ax-default {
34
+ @apply ax-fill-primary-500;
33
35
  }
34
- .ax-text-avatar {
36
+ ax-text {
35
37
  @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
36
38
  }
37
- .ax-icon-avatar {
39
+ ax-icon {
38
40
  @apply ax-bg-primary-500;
39
41
  }
40
42
  }
41
43
  &.ax-secondary-default {
42
- .ax-default-avatar {
43
- svg {
44
- @apply ax-fill-secondary-500;
45
- }
44
+ .ax-default {
45
+ @apply ax-fill-secondary-500;
46
46
  }
47
- .ax-text-avatar {
47
+ ax-text {
48
48
  @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
49
49
  }
50
- .ax-icon-avatar {
50
+ ax-icon {
51
51
  @apply ax-bg-secondary-500;
52
52
  }
53
53
  }
54
54
  &.ax-success-default {
55
- .ax-default-avatar {
56
- svg {
57
- @apply ax-fill-success-500;
58
- }
55
+ .ax-default {
56
+ @apply ax-fill-success-500;
59
57
  }
60
- .ax-text-avatar {
58
+ .ax-text {
61
59
  @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
62
60
  }
63
- .ax-icon-avatar {
61
+ .ax-icon {
64
62
  @apply ax-bg-success-500;
65
63
  }
66
64
  }
67
65
  &.ax-warning-default {
68
- .ax-default-avatar {
69
- svg {
70
- @apply ax-fill-warning-500;
71
- }
66
+ .ax-default {
67
+ @apply ax-fill-warning-500;
72
68
  }
73
- .ax-text-avatar {
69
+ ax-text {
74
70
  @apply ax-bg-warning-100 ax-text-warning-500 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
75
71
  }
76
- .ax-icon-avatar {
72
+ ax-icon {
77
73
  @apply ax-bg-warning-500;
78
74
  }
79
75
  }
80
76
  &.ax-danger-default {
81
- .ax-default-avatar {
82
- svg {
83
- @apply ax-fill-danger-500;
84
- }
77
+ .ax-default {
78
+ @apply ax-fill-danger-500;
85
79
  }
86
- .ax-text-avatar {
80
+ ax-text {
87
81
  @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
88
82
  }
89
- .ax-icon-avatar {
83
+ ax-icon {
90
84
  @apply ax-bg-danger-500;
91
85
  }
92
86
  }
93
87
  &.ax-info-default {
94
- .ax-default-avatar {
95
- svg {
96
- @apply ax-fill-info-500;
97
- }
88
+ .ax-default {
89
+ @apply ax-fill-info-500;
98
90
  }
99
- .ax-text-avatar {
91
+ ax-text {
100
92
  @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
101
93
  }
102
- .ax-icon-avatar {
94
+ ax-icon {
103
95
  @apply ax-bg-info-500;
104
96
  }
105
97
  }
106
98
  &.ax-light-default {
107
- .ax-default-avatar {
108
- svg {
109
- @apply ax-fill-light-400;
110
- }
99
+ .ax-default {
100
+ @apply ax-fill-light-400;
111
101
  }
112
- .ax-text-avatar {
102
+ ax-text {
113
103
  @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-500 dark:ax-text-light-fore;
114
104
  }
115
- .ax-icon-avatar {
105
+ ax-icon {
116
106
  @apply ax-bg-light-500;
117
107
  }
118
108
  }
119
109
  &.ax-dark-default {
120
- .ax-default-avatar {
121
- svg {
122
- @apply ax-fill-dark-500;
123
- }
110
+ .ax-default {
111
+ @apply ax-fill-dark-500;
124
112
  }
125
- .ax-text-avatar {
113
+ ax-text {
126
114
  @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-500 dark:ax-text-dark-fore;
127
115
  }
128
- .ax-icon-avatar {
116
+ ax-icon {
129
117
  @apply ax-bg-dark-500;
130
118
  }
131
119
  }
@@ -1,8 +1,11 @@
1
1
  @layer components {
2
2
  .ax-badge {
3
- @apply ax-rounded ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm ax-px-2;
4
- min-width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
5
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
3
+ @apply ax-rounded ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm ax-font-normal ax-px-2.5 ax-py-0.5;
4
+ min-width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 18px);
5
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 18px);
6
+ &.ax-lg {
7
+ @apply ax-px-3 ax-py-0.5;
8
+ }
6
9
  .ax-prefix {
7
10
  @apply ax-me-1.5;
8
11
  }
@@ -15,9 +18,10 @@
15
18
  @apply ax-m-0;
16
19
  }
17
20
  }
18
- &.ax-badge-icon{
19
- width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
20
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
21
+ &.ax-badge-icon {
22
+
23
+ width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 18px);
24
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 18px);
21
25
  }
22
26
  &.ax-primary-default {
23
27
  @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent dark:ax-bg-primary-800;
@@ -120,41 +124,32 @@
120
124
  // dark
121
125
  &.ax-dark-default {
122
126
  @apply ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-600;
123
-
124
127
  }
125
128
  &.ax-dark-twotone {
126
129
  @apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
127
-
128
130
  }
129
131
  &.ax-dark-outline {
130
132
  @apply ax-text-dark-500 ax-border-dark-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
131
-
132
133
  }
133
134
  &.ax-dark-blank {
134
135
  @apply ax-text-dark-500 ax-border-transparent dark:ax-text-dark-50;
135
-
136
136
  }
137
137
  &.ax-dark-link {
138
138
  @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-dark-500 ax-border-dark-500 dark:ax-border-dark-50 dark:ax-text-dark-50;
139
-
140
139
  }
141
140
 
142
141
  // light
143
142
  &.ax-light-default {
144
143
  @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-light-800 dark:ax-border-light-800 dark:ax-text-light-100;
145
-
146
144
  }
147
145
  &.ax-light-twotone {
148
146
  @apply ax-bg-light-200 ax-text-light-fore dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
149
-
150
147
  }
151
148
  &.ax-light-outline {
152
149
  @apply ax-text-light-fore ax-border ax-border-light-300 dark:ax-border-light-500 dark:ax-text-light-100;
153
-
154
150
  }
155
151
  &.ax-light-link {
156
152
  @apply ax-text-light-fore ax-border-b ax-rounded-none ax-border-light-300 dark:ax-text-light-100 dark:ax-border-light-500;
157
-
158
153
  }
159
154
  &.ax-light-blank {
160
155
  @apply ax-text-light-fore dark:ax-border-light-600 dark:ax-text-light-100;
@@ -1,11 +1,11 @@
1
1
  @layer components {
2
2
  .ax-button {
3
- @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-default ax-select-none ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
3
+ @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-default ax-select-none ax-font-normal ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
4
4
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
5
5
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
6
6
 
7
7
  & > button {
8
- @apply ax-inline-flex ax-items-center ax-justify-center ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
8
+ @apply ax-inline-flex ax-items-center ax-justify-center ax-font-normal ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
9
9
  &:focus,
10
10
  &:focus-visible {
11
11
  @apply ax-outline-none;
@@ -29,6 +29,10 @@
29
29
  @apply ax-text-xs;
30
30
  }
31
31
 
32
+ &.ax-lg{
33
+ @apply ax-text-base #{!important};
34
+ }
35
+
32
36
  &.ax-button-icon {
33
37
  width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
34
38
  & > button {
@@ -57,7 +57,7 @@
57
57
  .ax-button-item {
58
58
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
59
59
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
60
- @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-2 ax-text-sm ax-text-light-600 ax-cursor-pointer ax-select-none;
60
+ @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-py-2 ax-text-sm ax-text-light-600 ax-cursor-pointer ax-select-none;
61
61
 
62
62
  &.ax-divide {
63
63
  @apply ax-border-t ax-border ax-border-solid;
@@ -195,7 +195,7 @@
195
195
  }
196
196
 
197
197
  &.ax-light-default {
198
- @apply ax-bg-transparent ax-text-light-500 ax-border-transparent dark:ax-text-light-200;
198
+ @apply ax-bg-transparent ax-text-light-700 ax-border-transparent dark:ax-text-light-200;
199
199
 
200
200
  &:hover,
201
201
  &:focus {
@@ -17,9 +17,8 @@
17
17
  @apply ax-px-2;
18
18
  }
19
19
 
20
- .ax-placeholder
21
- {
22
- @apply ax-flex ax-mx-2;
20
+ .ax-placeholder {
21
+ @apply ax-flex ax-mx-2 ax-text-sm;
23
22
  --tw-placeholder-opacity: 1;
24
23
  color: rgb(var(--ax-color-placeholder) / var(--tw-placeholder-opacity));
25
24
  }
@@ -32,7 +31,20 @@
32
31
  font-size: 1.2rem !important;
33
32
  line-height: 1 !important;
34
33
  }
34
+ .ax-input,
35
+ .ax-textare {
36
+ &::-webkit-input-placeholder {
37
+ @apply ax-text-sm;
38
+ }
39
+
40
+ &:-ms-input-placeholder {
41
+ @apply ax-text-sm;
42
+ }
35
43
 
44
+ &::placeholder {
45
+ @apply ax-text-sm;
46
+ }
47
+ }
36
48
  .ax-input {
37
49
  width: 1%;
38
50
  text-align: inherit;
@@ -43,7 +55,7 @@
43
55
  box-shadow: none;
44
56
  }
45
57
  }
46
- .ax-textarea{
58
+ .ax-textarea {
47
59
  width: 1%;
48
60
  text-align: inherit;
49
61
  font: inherit;
@@ -53,15 +65,15 @@
53
65
  box-shadow: none;
54
66
  }
55
67
  }
56
- &>.ax-prefix {
68
+ & > .ax-prefix {
57
69
  *,
58
70
  .ax-button,
59
71
  .ax-title {
60
- @apply ax-rounded-s;
72
+ @apply ax-rounded-s;
61
73
  }
62
74
  }
63
75
 
64
- &>.ax-suffix {
76
+ & > .ax-suffix {
65
77
  *,
66
78
  .ax-button,
67
79
  .ax-title {
@@ -69,8 +81,8 @@
69
81
  }
70
82
  }
71
83
 
72
- &>.ax-prefix,
73
- &>.ax-suffix {
84
+ & > .ax-prefix,
85
+ & > .ax-suffix {
74
86
  * {
75
87
  @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
76
88
  }
@@ -99,11 +111,11 @@
99
111
  @apply ax-text-base;
100
112
  }
101
113
  }
102
- &.ax-light-blank{
103
- &:hover{
114
+ &.ax-light-blank {
115
+ &:hover {
104
116
  @apply ax-bg-transparent #{!important};
105
117
  }
106
- }
118
+ }
107
119
  }
108
120
 
109
121
  &.ax-state-disabled {
@@ -140,5 +152,4 @@
140
152
  }
141
153
  }
142
154
  }
143
-
144
155
  }
@@ -0,0 +1,24 @@
1
+ ax-image {
2
+ @apply ax-block ax-relative ax-transition-all ax-overflow-hidden;
3
+
4
+ &:not(.ax-state-empty, .ax-state-loading) {
5
+ &:hover {
6
+ ax-overlay[data-overlay-mode="hover"] {
7
+ @apply ax-flex ax-animate-fadeIn ax-animate-faster;
8
+ }
9
+ }
10
+ }
11
+ img {
12
+ @apply ax-w-full ax-h-full;
13
+ }
14
+ ax-overlay {
15
+ @apply ax-absolute ax-w-full ax-bg-black/50 ax-h-full ax-top-0 ax-flex ax-items-center ax-justify-center;
16
+ }
17
+ ax-overlay[data-overlay-mode="hover"] {
18
+ @apply ax-hidden;
19
+ }
20
+ ax-loading {
21
+ @apply ax-w-full ax-h-full ax-bg-light-200 dark:ax-bg-white/10 ax-flex ax-items-center ax-justify-center;
22
+ }
23
+
24
+ }
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .ax-list-item {
41
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
41
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px) !important;
42
42
  @apply ax-text-sm ax-flex ax-items-center ax-px-3 ax-text-light-700 dark:ax-text-light-100;
43
43
 
44
44
  &:focus,
@@ -1,5 +1,14 @@
1
1
  ax-menu {
2
2
  ul {
3
+ &.ax-rtl {
4
+ li {
5
+ ax-icon {
6
+ &.ax-ic-chevron {
7
+ @apply ax-block ax-rotate-0;
8
+ }
9
+ }
10
+ }
11
+ }
3
12
  li {
4
13
  @apply ax-cursor-pointer ax-text-light-500 dark:ax-text-light-50 ax-rounded-default;
5
14
  &:not(.ax-state-disabled) {
@@ -22,9 +31,9 @@ ax-menu {
22
31
  }
23
32
  .ax-menu-item-suffix {
24
33
  ax-icon {
25
- @apply ax-block ax--rotate-180;
34
+ @apply ax-block ax-rotate-180;
26
35
  &.ax-menu-active-icon {
27
- @apply ax--rotate-90;
36
+ @apply -ax-rotate-90;
28
37
  }
29
38
  }
30
39
  }
@@ -38,6 +47,16 @@ ax-menu {
38
47
  }
39
48
  }
40
49
  > ul {
50
+ &.ax-rtl {
51
+ .ax-menu-item-suffix {
52
+ ax-icon {
53
+ @apply ax-block ax-rotate-180;
54
+ &.ax-menu-active-icon {
55
+ @apply ax-rotate-90;
56
+ }
57
+ }
58
+ }
59
+ }
41
60
  &.ax-horizontal {
42
61
  @apply ax-flex ax-items-center ax-gap-4;
43
62
  li {
@@ -8,6 +8,12 @@
8
8
  @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
9
9
  @include control-states("editor");
10
10
  }
11
+
12
+ &:focus
13
+ {
14
+ @apply ax-ring-1 ax-ring-primary-500 ax-outline-none;
15
+ }
16
+
11
17
  ax-footer
12
18
  {
13
19
  @apply ax-border-t;
@@ -2,14 +2,14 @@
2
2
  ax-result,.ax-result {
3
3
  @apply ax-flex ax-flex-col;
4
4
  .ax-result-icon {
5
- @apply ax-text-6xl ax-text-center;
5
+ @apply ax-text-5xl ax-text-center;
6
6
  }
7
7
  .ax-result-title,
8
8
  .ax-result-description {
9
9
  @apply ax-mt-2 ax-text-center;
10
10
  }
11
11
  .ax-result-title {
12
- @apply ax-text-lg ax-font-semibold ax-text-light-700 dark:ax-text-light-50;
12
+ @apply ax-text-base ax-font-semibold ax-text-light-700 dark:ax-text-light-50;
13
13
  }
14
14
  .ax-result-description {
15
15
  @apply ax-text-sm ax-text-light-500 dark:ax-text-light-100;