@acorex/styles 5.4.0 → 5.7.0
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 +1 -1
- package/src/base/index.scss +0 -1
- package/src/components/_alert.scss +34 -28
- package/src/components/_button.scss +510 -394
- package/src/components/_calendar.scss +36 -18
- package/src/components/_collapse.scss +5 -4
- package/src/components/_color-palette.scss +90 -9
- package/src/components/_color-picker.scss +15 -5
- package/src/components/_data-table.scss +41 -0
- package/src/components/_datapager.scss +35 -26
- package/src/components/_decoration.scss +16 -11
- package/src/components/_dialog.scss +2 -2
- package/src/components/_drawer.scss +13 -5
- package/src/components/_dropdown.scss +10 -2
- package/src/components/_editor-container.scss +10 -5
- package/src/components/_fieldset.scss +1 -1
- package/src/components/_list.scss +4 -0
- package/src/components/_popup.scss +9 -1
- package/src/components/_range-slider.scss +59 -2
- package/src/components/_table.scss +40 -7
- package/src/components/_tabs.scss +12 -8
- package/src/components/index.scss +2 -1
- package/src/icons/demo-files/demo.css +152 -152
- package/src/icons/demo-files/demo.js +30 -30
- package/src/icons/demo.html +57 -1
- package/src/icons/fonts/acorex-icon.eot +0 -0
- package/src/icons/fonts/acorex-icon.svg +4 -0
- package/src/icons/fonts/acorex-icon.ttf +0 -0
- package/src/icons/fonts/acorex-icon.woff +0 -0
- package/src/icons/selection.json +1 -1
- package/src/icons/style.css +17 -5
- package/src/icons/style.scss +25 -5
- package/src/icons/variables.scss +4 -0
- package/src/utility/_mixins.scss +32 -25
- package/src/utility/index.scss +7 -0
- package/src/variables/_colors.scss +15 -14
package/package.json
CHANGED
package/src/base/index.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
ax-alert {
|
|
3
|
-
@apply ax-relative ax-w-full ax-flex ax-flex-col ax-bg-light-100 ax-text-light-fore ax-rounded ax-overflow-hidden;
|
|
3
|
+
@apply ax-relative ax-w-full ax-flex ax-flex-col ax-bg-light-100 ax-text-light-fore ax-rounded ax-overflow-hidden ax-text-sm;
|
|
4
4
|
transition: visibility 0s, opacity 0.5s ease-in-out;
|
|
5
5
|
|
|
6
6
|
&.ax-state-hidden {
|
|
@@ -13,19 +13,23 @@
|
|
|
13
13
|
opacity: 1;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
@apply ax-px-3.5 ax-py-3 ax-bg-transparent ax-border-none ax-justify-start
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
ax-header {
|
|
17
|
+
@apply ax-flex ax-px-3.5 ax-items-center ax-py-3 ax-bg-transparent ax-border-none ax-justify-start;
|
|
18
|
+
|
|
19
|
+
ax-icon {
|
|
20
|
+
@apply ax-text-2xl;
|
|
20
21
|
}
|
|
21
22
|
}
|
|
23
|
+
|
|
22
24
|
.ax-alert-body {
|
|
23
|
-
@apply ax-flex-1 ax-p-3.5
|
|
25
|
+
@apply ax-flex-1 ax-p-3.5;
|
|
26
|
+
|
|
24
27
|
ax-icon {
|
|
25
28
|
@apply ax-me-3 ax-text-2xl;
|
|
26
29
|
}
|
|
27
|
-
|
|
28
|
-
|
|
30
|
+
|
|
31
|
+
ax-content {
|
|
32
|
+
@apply ax-flex ax-items-center ax-break-words;
|
|
29
33
|
|
|
30
34
|
ul {
|
|
31
35
|
@apply ax-my-2 ax-ms-5 ax-list-disc;
|
|
@@ -41,65 +45,67 @@
|
|
|
41
45
|
}
|
|
42
46
|
|
|
43
47
|
ax-suffix {
|
|
48
|
+
--ax-base-size: 6px;
|
|
44
49
|
@apply ax-block;
|
|
50
|
+
|
|
45
51
|
ax-button {
|
|
46
|
-
@apply ax-ms-2 #{!important};
|
|
52
|
+
@apply ax-ring-offset-0 ax-ms-2 #{!important};
|
|
47
53
|
}
|
|
48
54
|
}
|
|
49
55
|
|
|
50
56
|
ax-footer {
|
|
51
|
-
@apply ax-bg-transparent ax-
|
|
52
|
-
|
|
57
|
+
@apply ax-bg-transparent ax-p-0 ax-mt-3;
|
|
58
|
+
|
|
53
59
|
ax-suffix {
|
|
54
|
-
ax-button{
|
|
60
|
+
ax-button {
|
|
61
|
+
--ax-base-size: 6px;
|
|
62
|
+
|
|
55
63
|
@apply ax-ms-0 ax-me-2 #{!important};
|
|
56
64
|
}
|
|
65
|
+
|
|
57
66
|
@apply ax-mt-3;
|
|
58
67
|
}
|
|
59
68
|
}
|
|
60
69
|
}
|
|
61
|
-
&.ax-light-default {
|
|
62
70
|
|
|
71
|
+
&.ax-light-default {
|
|
63
72
|
ax-header {
|
|
64
|
-
@apply ax-bg-light-200
|
|
73
|
+
@apply ax-bg-light-200;
|
|
65
74
|
}
|
|
75
|
+
|
|
66
76
|
.ax-alert-body {
|
|
67
|
-
@
|
|
77
|
+
@apply ax-bg-light-200;
|
|
68
78
|
}
|
|
79
|
+
|
|
69
80
|
.ax-alert-progress {
|
|
70
81
|
@apply ax-absolute ax-bg-light-400;
|
|
71
82
|
}
|
|
72
83
|
}
|
|
73
|
-
|
|
74
|
-
ax-button {
|
|
75
|
-
@apply ax-bg-white/30 #{!important};
|
|
76
|
-
&:hover,
|
|
77
|
-
&:active,
|
|
78
|
-
&:focus {
|
|
79
|
-
@apply ax-bg-white/20 #{!important};
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
84
|
+
|
|
83
85
|
&[class*="dark"] {
|
|
84
86
|
.ax-alert-progress {
|
|
85
|
-
@apply ax-bg-white/50;
|
|
87
|
+
@apply ax-bg-white/50 #{!important};
|
|
86
88
|
}
|
|
87
89
|
}
|
|
90
|
+
|
|
88
91
|
.ax-alert-progress {
|
|
89
|
-
@apply ax-absolute ax-
|
|
92
|
+
@apply ax-absolute ax-start-0 ax-bottom-0 ax-h-1.5 ax-w-0;
|
|
90
93
|
animation-duration: 4s;
|
|
91
94
|
animation-timing-function: linear;
|
|
92
95
|
animation-name: progressBar;
|
|
93
96
|
}
|
|
97
|
+
|
|
94
98
|
@keyframes progressBar {
|
|
95
99
|
0% {
|
|
96
100
|
width: 100%;
|
|
97
101
|
}
|
|
102
|
+
|
|
98
103
|
100% {
|
|
99
104
|
width: 0%;
|
|
100
105
|
}
|
|
101
106
|
}
|
|
102
|
-
|
|
107
|
+
|
|
108
|
+
// @include button-on-colorful-bg();
|
|
103
109
|
|
|
104
110
|
@include color-look-generator();
|
|
105
111
|
}
|