@acorex/styles 6.0.12 → 6.1.1

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 (23) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +0 -2
  3. package/src/components/_avatar.scss +41 -50
  4. package/src/components/_badge.scss +10 -15
  5. package/src/components/_button.scss +11 -7
  6. package/src/components/_dropdown.scss +3 -3
  7. package/src/components/_editor-container.scss +25 -14
  8. package/src/components/_menu.scss +12 -3
  9. package/src/components/_popup.scss +6 -0
  10. package/src/components/_result.scss +2 -2
  11. package/src/components/_tabs copy.scss +235 -0
  12. package/src/components/_tabs.scss +4 -4
  13. package/src/components/_textarea.scss +3 -8
  14. package/src/components/_uploader.scss +13 -11
  15. package/src/icons/Read Me.txt +7 -7
  16. package/src/icons/demo-files/demo.css +152 -152
  17. package/src/icons/demo-files/demo.js +30 -30
  18. package/src/icons/demo.html +626 -626
  19. package/src/icons/fonts/acorex-icon.svg +51 -51
  20. package/src/icons/style.css +153 -153
  21. package/src/icons/style.scss +240 -240
  22. package/src/icons/variables.scss +46 -46
  23. package/src/utility/index.scss +8 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "6.0.12",
3
+ "version": "6.1.1",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/components/_alert.scss CHANGED
@@ -90,9 +90,7 @@
90
90
  // @include color-look-generator();
91
91
 
92
92
  // primary
93
- &.ax-primary-twotone,
94
93
  &.ax-primary-outline,
95
- &.ax-primary-link,
96
94
  &.ax-primary-blank {
97
95
  .ax-close-button {
98
96
  .ax-icon {
package/src/components/_avatar.scss CHANGED
@@ -5,12 +5,19 @@
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-text{
15
+ @apply ax-text-xl;
16
+ }
17
+ ax-icon,
18
+ ax-text {
19
+ @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center;
20
+ }
14
21
  .ax-avatar-container {
15
22
  @apply ax-w-full ax-h-full ax-rounded-default;
16
23
  .ax-default-avatar {
@@ -26,106 +33,90 @@
26
33
  }
27
34
  }
28
35
  &.ax-primary-default {
29
- .ax-default-avatar {
30
- svg {
31
- @apply ax-fill-primary-500;
32
- }
36
+ .ax-default {
37
+ @apply ax-fill-primary-500;
33
38
  }
34
- .ax-text-avatar {
39
+ ax-text {
35
40
  @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
36
41
  }
37
- .ax-icon-avatar {
42
+ ax-icon {
38
43
  @apply ax-bg-primary-500;
39
44
  }
40
45
  }
41
46
  &.ax-secondary-default {
42
- .ax-default-avatar {
43
- svg {
44
- @apply ax-fill-secondary-500;
45
- }
47
+ .ax-default {
48
+ @apply ax-fill-secondary-500;
46
49
  }
47
- .ax-text-avatar {
50
+ ax-text {
48
51
  @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
49
52
  }
50
- .ax-icon-avatar {
53
+ ax-icon {
51
54
  @apply ax-bg-secondary-500;
52
55
  }
53
56
  }
54
57
  &.ax-success-default {
55
- .ax-default-avatar {
56
- svg {
57
- @apply ax-fill-success-500;
58
- }
58
+ .ax-default {
59
+ @apply ax-fill-success-500;
59
60
  }
60
- .ax-text-avatar {
61
+ ax-text {
61
62
  @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
62
63
  }
63
- .ax-icon-avatar {
64
+ ax-icon {
64
65
  @apply ax-bg-success-500;
65
66
  }
66
67
  }
67
68
  &.ax-warning-default {
68
- .ax-default-avatar {
69
- svg {
70
- @apply ax-fill-warning-500;
71
- }
69
+ .ax-default {
70
+ @apply ax-fill-warning-500;
72
71
  }
73
- .ax-text-avatar {
72
+ ax-text {
74
73
  @apply ax-bg-warning-100 ax-text-warning-500 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
75
74
  }
76
- .ax-icon-avatar {
75
+ ax-icon {
77
76
  @apply ax-bg-warning-500;
78
77
  }
79
78
  }
80
79
  &.ax-danger-default {
81
- .ax-default-avatar {
82
- svg {
83
- @apply ax-fill-danger-500;
84
- }
80
+ .ax-default {
81
+ @apply ax-fill-danger-500;
85
82
  }
86
- .ax-text-avatar {
83
+ ax-text {
87
84
  @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
88
85
  }
89
- .ax-icon-avatar {
86
+ ax-icon {
90
87
  @apply ax-bg-danger-500;
91
88
  }
92
89
  }
93
90
  &.ax-info-default {
94
- .ax-default-avatar {
95
- svg {
96
- @apply ax-fill-info-500;
97
- }
91
+ .ax-default {
92
+ @apply ax-fill-info-500;
98
93
  }
99
- .ax-text-avatar {
94
+ ax-text {
100
95
  @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
101
96
  }
102
- .ax-icon-avatar {
97
+ ax-icon {
103
98
  @apply ax-bg-info-500;
104
99
  }
105
100
  }
106
101
  &.ax-light-default {
107
- .ax-default-avatar {
108
- svg {
109
- @apply ax-fill-light-400;
110
- }
102
+ .ax-default {
103
+ @apply ax-fill-light-400;
111
104
  }
112
- .ax-text-avatar {
105
+ ax-text {
113
106
  @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-500 dark:ax-text-light-fore;
114
107
  }
115
- .ax-icon-avatar {
108
+ ax-icon {
116
109
  @apply ax-bg-light-500;
117
110
  }
118
111
  }
119
112
  &.ax-dark-default {
120
- .ax-default-avatar {
121
- svg {
122
- @apply ax-fill-dark-500;
123
- }
113
+ .ax-default {
114
+ @apply ax-fill-dark-500;
124
115
  }
125
- .ax-text-avatar {
116
+ ax-text {
126
117
  @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-500 dark:ax-text-dark-fore;
127
118
  }
128
- .ax-icon-avatar {
119
+ ax-icon {
129
120
  @apply ax-bg-dark-500;
130
121
  }
131
122
  }
package/src/components/_badge.scss CHANGED
@@ -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;
package/src/components/_button.scss CHANGED
@@ -1,27 +1,27 @@
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;
12
12
  outline: none;
13
13
  }
14
+ .ax-button-text{
15
+ @apply ax-px-2;
16
+ }
14
17
  }
15
18
  &:focus {
16
19
  @apply ax-outline-none;
17
20
  }
18
- .ax-prefix {
19
- @apply ax-flex ax-flex-row ax-pe-2;
21
+ .ax-prefix,.ax-suffix {
22
+ @apply ax-flex ax-flex-row;
20
23
  }
21
24
 
22
- .ax-suffix {
23
- @apply ax-flex ax-flex-row ax-ps-2;
24
- }
25
25
  &[class*="-outline"] {
26
26
  @apply ax-border;
27
27
  }
@@ -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 {
package/src/components/_dropdown.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  .ax-drop-down {
4
4
  @apply ax-contents;
5
5
  .ax-dropdown-content {
6
- @apply ax-flex ax-flex-auto ax-text-sm ax-overflow-y-hidden ax-overscroll-x-auto;
6
+ @apply ax-flex ax-flex-auto ax-text-sm ax-overflow-y-hidden ax-overscroll-x-auto ax-items-center;
7
7
  &.ax-state-disabled {
8
8
  @include control-states("editor-disabled");
9
9
  }
@@ -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 {
package/src/components/_editor-container.scss CHANGED
@@ -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,18 +31,31 @@
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;
39
51
  font: inherit;
40
- @apply ax-flex-1 ax-bg-transparent ax-border-none ax-px-2.5 ax-rounded;
52
+ @apply ax-flex-1 ax-bg-transparent ax-border-none ax-ps-4 ax-pe-3 ax-rounded;
41
53
 
42
54
  &:focus {
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
  }
package/src/components/_menu.scss CHANGED
@@ -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,7 +47,7 @@ ax-menu {
38
47
  }
39
48
  }
40
49
  > ul {
41
- &.ax-rtl{
50
+ &.ax-rtl {
42
51
  .ax-menu-item-suffix {
43
52
  ax-icon {
44
53
  @apply ax-block ax-rotate-180;
package/src/components/_popup.scss CHANGED
@@ -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;
package/src/components/_result.scss CHANGED
@@ -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;