@acorex/styles 5.0.4 → 5.0.8

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 (47) hide show
  1. package/index.scss +3 -2
  2. package/package.json +10 -10
  3. package/src/base/_colors.scss +16 -16
  4. package/src/base/index.scss +11 -7
  5. package/src/components/_alert.scss +156 -147
  6. package/src/components/_badge.scss +11 -39
  7. package/src/components/_button.scss +641 -651
  8. package/src/components/_calendar.scss +158 -96
  9. package/src/components/_carousel.scss +36 -61
  10. package/src/components/_checkbox.scss +24 -24
  11. package/src/components/_datapager.scss +39 -39
  12. package/src/components/_datepicker.scss +4 -4
  13. package/src/components/_dialog.scss +61 -61
  14. package/src/components/_drawer.scss +79 -79
  15. package/src/components/_dropdown.scss +140 -177
  16. package/src/components/_editor-container.scss +76 -69
  17. package/src/components/_form.scss +7 -7
  18. package/src/components/_input.scss +17 -16
  19. package/src/components/_label.scss +4 -4
  20. package/src/components/_list.scss +48 -48
  21. package/src/components/_loading.scss +53 -53
  22. package/src/components/_popup.scss +86 -86
  23. package/src/components/_radio.scss +19 -30
  24. package/src/components/_range-slider.scss +13 -13
  25. package/src/components/_selectbox.scss +15 -15
  26. package/src/components/_selection-list.scss +28 -28
  27. package/src/components/_side-menu.scss +46 -46
  28. package/src/components/_skeleton.scss +24 -24
  29. package/src/components/_switch.scss +199 -199
  30. package/src/components/_table.scss +20 -22
  31. package/src/components/_tabs.scss +209 -117
  32. package/src/components/_toast.scss +83 -93
  33. package/src/components/_tooltip.scss +44 -44
  34. package/src/components/index.scss +28 -28
  35. package/src/icons/Read Me.txt +7 -0
  36. package/src/icons/demo-files/demo.css +152 -0
  37. package/src/icons/demo-files/demo.js +30 -0
  38. package/src/icons/demo.html +416 -0
  39. package/src/icons/fonts/acorex-icon.svg +37 -0
  40. package/src/icons/fonts/acorex-icon.ttf +0 -0
  41. package/src/icons/fonts/acorex-icon.woff +0 -0
  42. package/src/icons/selection.json +1 -0
  43. package/src/icons/style.css +107 -0
  44. package/src/icons/style.scss +164 -0
  45. package/src/icons/variables.scss +31 -0
  46. package/src/variables/_colors.scss +135 -135
  47. package/src/variables/_mixins.scss +18 -18
package/index.scss CHANGED
@@ -1,2 +1,3 @@
1
- @import "./src/base/index.scss";
2
- @import "./src/components/index.scss";
1
+ @import "./src/base/index.scss";
2
+ @import "./src/components/index.scss";
3
+ @import "./src/icons/style.scss";
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
- {
2
- "name": "@acorex/styles",
3
- "version": "5.0.4",
4
- "description": "",
5
- "main": "index.js",
6
- "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1"
8
- },
9
- "author": "",
10
- "license": "ISC"
1
+ {
2
+ "name": "@acorex/styles",
3
+ "version": "5.0.8",
4
+ "description": "",
5
+ "main": "index.js",
6
+ "scripts": {
7
+ "test": "echo \"Error: no test specified\" && exit 1"
8
+ },
9
+ "author": "",
10
+ "license": "ISC"
11
11
  }
package/src/base/_colors.scss CHANGED
@@ -1,16 +1,16 @@
1
- @import "../variables/colors";
2
- @mixin colors() {
3
- @each $name, $color in $theme-colors {
4
- @if (type-of($color) == "map") {
5
- @each $subname, $variant in $color {
6
- @if ($subname != "") {
7
- --ax-color-#{$name}-#{$subname}: #{$variant};
8
- } @else {
9
- --ax-color-#{$name}: #{$variant};
10
- }
11
- }
12
- } @else {
13
- --ax-color-#{$name}: #{$color};
14
- }
15
- }
16
- }
1
+ @import "../variables/colors";
2
+ @mixin colors() {
3
+ @each $name, $color in $theme-colors {
4
+ @if (type-of($color) == "map") {
5
+ @each $subname, $variant in $color {
6
+ @if ($subname != "") {
7
+ --ax-color-#{$name}-#{$subname}: #{$variant};
8
+ } @else {
9
+ --ax-color-#{$name}: #{$variant};
10
+ }
11
+ }
12
+ } @else {
13
+ --ax-color-#{$name}: #{$color};
14
+ }
15
+ }
16
+ }
package/src/base/index.scss CHANGED
@@ -1,7 +1,11 @@
1
- @import "./colors";
2
-
3
- :root {
4
- --ax-base-size: 8px;
5
- --ax-base-ratio: 5;
6
- @include colors();
7
- }
1
+ @import "./colors";
2
+ [class*=" ax-ic-"],
3
+ [class^=ax-ic-] {
4
+ vertical-align: middle;
5
+ }
6
+
7
+ :root {
8
+ --ax-base-size: 8px;
9
+ --ax-base-ratio: 5;
10
+ @include colors();
11
+ }
package/src/components/_alert.scss CHANGED
@@ -1,148 +1,157 @@
1
- @import "../variables/mixins";
2
- @layer components {
3
- .ax-alert {
4
- @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-baseline ax-rounded;
5
- .ax-alert-icon {
6
- @apply ax-text-xl ax-align-text-bottom;
7
- @include respond(mobile) {
8
- @apply ax-text-2xl;
9
- }
10
- }
11
- .ax-alert-body {
12
- @apply ax-ml-2 ax-flex-1;
13
- .ax-alert-title {
14
- @apply ax-inline-flex ax-text-sm ax-font-bold ax-mb-2.5;
15
- @include respond(mobile) {
16
- @apply ax-text-base;
17
- }
18
- a {
19
- @apply ax-text-current ax-font-bold;
20
- }
21
- }
22
- .ax-alert-content {
23
- @apply ax-block ax-text-sm;
24
- @include respond(mobile) {
25
- @apply ax-text-base;
26
- }
27
- ul {
28
- @apply ax-my-2 ax-ms-5 ax-list-disc;
29
- }
30
- a {
31
- @apply ax-text-current ax-font-bold ax-underline;
32
- &:hover {
33
- @apply ax-underline;
34
- }
35
- }
36
- }
37
- .ax-alert-footer {
38
- .ax-alert-buttons {
39
- @apply ax-flex ax-mt-2;
40
- .ax-alert-button {
41
- @apply ax-font-bold ax-me-4 ax-cursor-pointer ax-rounded;
42
- }
43
- }
44
- }
45
- }
46
- .ax-alert-suffix {
47
- .ax-alert-buttons {
48
- .ax-alert-button {
49
- @apply ax-font-bold ax-me-0.5 ax-cursor-pointer ax-rounded;
50
- i {
51
- @apply ax-mx-1;
52
- }
53
- }
54
- }
55
- }
56
- &.ax-primary {
57
- @apply ax-bg-primary-50 ax-text-primary;
58
- .ax-alert-content {
59
- @apply ax-block ax-text-sm;
60
- }
61
- .ax-alert-title {
62
- @apply ax-text-primary-700;
63
- }
64
- .ax-alert-button {
65
- &:hover {
66
- @apply ax-text-primary-800;
67
- }
68
- }
69
- }
70
- &.ax-secondary {
71
- @apply ax-bg-secondary-50 ax-text-secondary;
72
- .ax-alert-title {
73
- @apply ax-text-secondary-700;
74
- }
75
- .ax-alert-button {
76
- &:hover {
77
- @apply ax-text-secondary-800;
78
- }
79
- }
80
- }
81
- &.ax-success {
82
- @apply ax-bg-success-50 ax-text-success;
83
- .ax-alert-title {
84
- @apply ax-text-success-700;
85
- }
86
- .ax-alert-button {
87
- &:hover {
88
- @apply ax-text-success-800;
89
- }
90
- }
91
- }
92
- &.ax-warning {
93
- @apply ax-bg-warning-50 ax-text-warning;
94
- .ax-alert-title {
95
- @apply ax-text-warning-700;
96
- }
97
- .ax-alert-button {
98
- &:hover {
99
- @apply ax-text-warning-800;
100
- }
101
- }
102
- }
103
- &.ax-danger {
104
- @apply ax-bg-danger-50 ax-text-danger;
105
- .ax-alert-title {
106
- @apply ax-text-danger-700;
107
- }
108
- .ax-alert-button {
109
- &:hover {
110
- @apply ax-text-danger-800;
111
- }
112
- }
113
- }
114
- &.ax-info {
115
- @apply ax-bg-info-50 ax-text-info;
116
- .ax-alert-title {
117
- @apply ax-text-info-700;
118
- }
119
- .ax-alert-button {
120
- &:hover {
121
- @apply ax-text-info-800;
122
- }
123
- }
124
- }
125
- &.ax-light {
126
- @apply ax-bg-gray-50 ax-text-light-fore;
127
- .ax-alert-title {
128
- @apply ax-text-light-fore;
129
- }
130
- .ax-alert-button {
131
- &:hover {
132
- @apply ax-text-light-800;
133
- }
134
- }
135
- }
136
- &.ax-dark {
137
- @apply ax-bg-dark ax-text-dark-fore;
138
- .ax-alert-title {
139
- @apply ax-text-dark-fore;
140
- }
141
- .ax-alert-button {
142
- &:hover {
143
- @apply ax-bg-dark;
144
- }
145
- }
146
- }
147
- }
1
+ @import "../variables/mixins";
2
+ @layer components {
3
+ .ax-alert {
4
+ @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-baseline ax-rounded;
5
+ transition: visibility 0s, opacity 0.5s ease-in-out;
6
+ &.ax-state-hidden {
7
+ visibility: hidden;
8
+ opacity: 0;
9
+ }
10
+ &.ax-state-visible {
11
+ visibility: visible;
12
+ opacity: 1;
13
+ }
14
+ .ax-alert-icon {
15
+ @apply ax-text-xl ax-align-text-bottom;
16
+ @include respond(mobile) {
17
+ @apply ax-text-2xl;
18
+ }
19
+ }
20
+ .ax-alert-body {
21
+ @apply ax-ml-2 ax-flex-1;
22
+ .ax-alert-title {
23
+ @apply ax-inline-flex ax-text-sm ax-font-bold ax-mb-2.5;
24
+ @include respond(mobile) {
25
+ @apply ax-text-base;
26
+ }
27
+ a {
28
+ @apply ax-text-current ax-font-bold;
29
+ }
30
+ }
31
+ .ax-alert-content {
32
+ @apply ax-block ax-text-sm;
33
+ @include respond(mobile) {
34
+ @apply ax-text-base;
35
+ }
36
+ ul {
37
+ @apply ax-my-2 ax-ms-5 ax-list-disc;
38
+ }
39
+ a {
40
+ @apply ax-text-current ax-font-bold ax-underline;
41
+ &:hover {
42
+ @apply ax-underline;
43
+ }
44
+ }
45
+ }
46
+ .ax-alert-footer {
47
+ .ax-alert-buttons {
48
+ @apply ax-flex ax-mt-2;
49
+ .ax-alert-button {
50
+ @apply ax-font-bold ax-me-4 ax-cursor-pointer ax-rounded;
51
+ }
52
+ }
53
+ }
54
+ }
55
+ .ax-alert-suffix {
56
+ .ax-alert-buttons {
57
+ .ax-alert-button {
58
+ @apply ax-font-bold ax-me-0.5 ax-cursor-pointer ax-rounded;
59
+ i {
60
+ @apply ax-mx-1;
61
+ }
62
+ }
63
+ }
64
+ }
65
+ &.ax-primary {
66
+ @apply ax-bg-primary-50 ax-text-primary;
67
+ .ax-alert-content {
68
+ @apply ax-block ax-text-sm;
69
+ }
70
+ .ax-alert-title {
71
+ @apply ax-text-primary-700;
72
+ }
73
+ .ax-alert-button {
74
+ &:hover {
75
+ @apply ax-text-primary-800;
76
+ }
77
+ }
78
+ }
79
+ &.ax-secondary {
80
+ @apply ax-bg-secondary-50 ax-text-secondary;
81
+ .ax-alert-title {
82
+ @apply ax-text-secondary-700;
83
+ }
84
+ .ax-alert-button {
85
+ &:hover {
86
+ @apply ax-text-secondary-800;
87
+ }
88
+ }
89
+ }
90
+ &.ax-success {
91
+ @apply ax-bg-success-50 ax-text-success;
92
+ .ax-alert-title {
93
+ @apply ax-text-success-700;
94
+ }
95
+ .ax-alert-button {
96
+ &:hover {
97
+ @apply ax-text-success-800;
98
+ }
99
+ }
100
+ }
101
+ &.ax-warning {
102
+ @apply ax-bg-warning-50 ax-text-warning;
103
+ .ax-alert-title {
104
+ @apply ax-text-warning-700;
105
+ }
106
+ .ax-alert-button {
107
+ &:hover {
108
+ @apply ax-text-warning-800;
109
+ }
110
+ }
111
+ }
112
+ &.ax-danger {
113
+ @apply ax-bg-danger-50 ax-text-danger;
114
+ .ax-alert-title {
115
+ @apply ax-text-danger-700;
116
+ }
117
+ .ax-alert-button {
118
+ &:hover {
119
+ @apply ax-text-danger-800;
120
+ }
121
+ }
122
+ }
123
+ &.ax-info {
124
+ @apply ax-bg-info-50 ax-text-info;
125
+ .ax-alert-title {
126
+ @apply ax-text-info-700;
127
+ }
128
+ .ax-alert-button {
129
+ &:hover {
130
+ @apply ax-text-info-800;
131
+ }
132
+ }
133
+ }
134
+ &.ax-light {
135
+ @apply ax-bg-light-50 ax-text-light-fore;
136
+ .ax-alert-title {
137
+ @apply ax-text-light-fore;
138
+ }
139
+ .ax-alert-button {
140
+ &:hover {
141
+ @apply ax-text-light-800;
142
+ }
143
+ }
144
+ }
145
+ &.ax-dark {
146
+ @apply ax-bg-dark ax-text-dark-fore;
147
+ .ax-alert-title {
148
+ @apply ax-text-dark-fore;
149
+ }
150
+ .ax-alert-button {
151
+ &:hover {
152
+ @apply ax-bg-dark;
153
+ }
154
+ }
155
+ }
156
+ }
148
157
  }
package/src/components/_badge.scss CHANGED
@@ -1,39 +1,11 @@
1
- @layer components {
2
- .ax-badge {
3
- @apply ax-flex ax-items-center ax-justify-center ax-max-w-max ax-py-1 ax-px-2 ax-rounded ax-cursor-pointer ax-text-sm ax-whitespace-nowrap;
4
- .ax-ic {
5
- @apply ax-text-sm ax-ms-1;
6
- }
7
- &.ax-badge-rounded-full {
8
- @apply ax-rounded-full;
9
- }
10
- &.ax-primary {
11
- @apply ax-bg-primary-100 ax-text-primary;
12
- }
13
- &.ax-secondary {
14
- @apply ax-bg-secondary-100 ax-text-secondary;
15
- }
16
- &.ax-warning {
17
- @apply ax-bg-warning-100 ax-text-warning;
18
- }
19
- &.ax-danger {
20
- @apply ax-bg-danger-100 ax-text-danger;
21
- }
22
- &.ax-success {
23
- @apply ax-bg-success-100 ax-text-success;
24
- }
25
- &.ax-info {
26
- @apply ax-bg-info-100 ax-text-info;
27
- }
28
- &.ax-light {
29
- @apply ax-bg-light-100 ax-text-light-fore;
30
- }
31
- &.ax-dark {
32
- @apply ax-bg-dark-100 ax-text-dark;
33
- }
34
- &.ax-sm {
35
- }
36
- &.ax-lg {
37
- }
38
- }
39
- }
1
+ @layer components {
2
+ .ax-badge {
3
+ @apply ax-rounded ax-py-1 ax-px-2 ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm;
4
+ ax-prefix {
5
+ @apply ax-me-1.5
6
+ }
7
+ ax-suffix {
8
+ @apply ax-ms-1.5
9
+ }
10
+ }
11
+ }