@acorex/styles 7.1.2 → 7.1.5
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/index.scss +14 -14
- package/package.json +18 -18
- package/src/animations/index.scss +86 -86
- package/src/base/_normalize.scss +422 -422
- package/src/base/index.scss +16 -16
- package/src/icons/demo.html +892 -892
- package/src/icons/fonts/acorex-icons.svg +70 -70
- package/src/icons/style.css +210 -210
- package/src/icons/style.scss +335 -335
- package/src/icons/variables.scss +65 -65
- package/src/mixins/_media.scss +27 -27
- package/src/mixins/_util.scss +20 -20
- package/src/mixins/index.scss +1 -1
- package/src/shared/_actionsheet.scss +40 -40
- package/src/shared/_check-box.scss +42 -42
- package/src/shared/_decoration.scss +45 -45
- package/src/shared/_drop-down.scss +155 -155
- package/src/shared/_editor-container.scss +168 -168
- package/src/shared/_general-button.scss +42 -42
- package/src/shared/_inputs.scss +12 -12
- package/src/shared/_list.scss +144 -144
- package/src/shared/_radio.scss +38 -38
- package/src/shared/_skeleton.scss +26 -26
- package/src/shared/_table.scss +111 -111
- package/src/shared/_utils.scss +52 -52
- package/src/shared/index.scss +12 -12
- package/src/themes/default copy.scss +129 -129
- package/src/themes/default.scss +142 -142
- package/src/utility/_mixins.scss +71 -71
- package/src/utility/index.scss +55 -55
- package/src/variables/_colors.scss +2 -2
- package/src/variables/_degrees.scss +1 -1
- package/src/variables/index.scss +1 -1
- package/tailwind.config.js +199 -183
package/src/icons/variables.scss
CHANGED
@@ -1,65 +1,65 @@
|
|
1
|
-
$icomoon-font-family: "acorex-icons" !default;
|
2
|
-
$icomoon-font-path: "fonts" !default;
|
3
|
-
|
4
|
-
$ax-icon-star-fill: "\e900";
|
5
|
-
$ax-icon-star: "\e901";
|
6
|
-
$ax-icon-light-mode: "\e902";
|
7
|
-
$ax-icon-dark-mode: "\e903";
|
8
|
-
$ax-icon-color-picker: "\e904";
|
9
|
-
$ax-icon-color-palette: "\e905";
|
10
|
-
$ax-icon-arrow-left: "\e906";
|
11
|
-
$ax-icon-arrow-down: "\e907";
|
12
|
-
$ax-icon-arrow-up: "\e908";
|
13
|
-
$ax-icon-arrow-right: "\e909";
|
14
|
-
$ax-icon-chevron-left: "\e90a";
|
15
|
-
$ax-icon-chevron-down: "\e90b";
|
16
|
-
$ax-icon-chevron-up: "\e90c";
|
17
|
-
$ax-icon-chevron-right: "\e90d";
|
18
|
-
$ax-icon-first-page: "\e90e";
|
19
|
-
$ax-icon-last-page: "\e90f";
|
20
|
-
$ax-icon-full-screen: "\e910";
|
21
|
-
$ax-icon-full-screen-close: "\e911";
|
22
|
-
$ax-icon-done: "\e912";
|
23
|
-
$ax-icon-calendar: "\e913";
|
24
|
-
$ax-icon-more: "\e914";
|
25
|
-
$ax-icon-menu: "\e915";
|
26
|
-
$ax-icon-report: "\e916";
|
27
|
-
$ax-icon-report-fill: "\e917";
|
28
|
-
$ax-icon-error: "\e918";
|
29
|
-
$ax-icon-error-fill: "\e919";
|
30
|
-
$ax-icon-warning: "\e91a";
|
31
|
-
$ax-icon-warning-fill: "\e91b";
|
32
|
-
$ax-icon-check-circle: "\e91c";
|
33
|
-
$ax-icon-check-circle-fill: "\e91d";
|
34
|
-
$ax-icon-close: "\e91e";
|
35
|
-
$ax-icon-time: "\e91f";
|
36
|
-
$ax-icon-visibility-off: "\e920";
|
37
|
-
$ax-icon-visibility: "\e921";
|
38
|
-
$ax-icon-unfold-more: "\e922";
|
39
|
-
$ax-icon-unfold-less: "\e923";
|
40
|
-
$ax-icon-arrow-long: "\e924";
|
41
|
-
$ax-icon-arrow-short: "\e925";
|
42
|
-
$ax-icon-download: "\e926";
|
43
|
-
$ax-icon-upload: "\e927";
|
44
|
-
$ax-icon-publish: "\e928";
|
45
|
-
$ax-icon-cloud-download: "\e929";
|
46
|
-
$ax-icon-cloud-upload: "\e92a";
|
47
|
-
$ax-icon-undo: "\e92b";
|
48
|
-
$ax-icon-redo: "\e92c";
|
49
|
-
$ax-icon-search: "\e92d";
|
50
|
-
$ax-icon-add: "\e92e";
|
51
|
-
$ax-icon-remove: "\e92f";
|
52
|
-
$ax-icon-paste: "\e930";
|
53
|
-
$ax-icon-cut: "\e931";
|
54
|
-
$ax-icon-copy: "\e932";
|
55
|
-
$ax-icon-refresh: "\e933";
|
56
|
-
$ax-icon-inbox: "\e934";
|
57
|
-
$ax-icon-skip-previous: "\e935";
|
58
|
-
$ax-icon-skip-next: "\e936";
|
59
|
-
$ax-icon-delete: "\e937";
|
60
|
-
$ax-icon-happy: "\e938";
|
61
|
-
$ax-icon-normal: "\e939";
|
62
|
-
$ax-icon-sad: "\e93a";
|
63
|
-
$ax-icon-person: "\e93b";
|
64
|
-
$ax-icon-dashboard: "\e93c";
|
65
|
-
|
1
|
+
$icomoon-font-family: "acorex-icons" !default;
|
2
|
+
$icomoon-font-path: "fonts" !default;
|
3
|
+
|
4
|
+
$ax-icon-star-fill: "\e900";
|
5
|
+
$ax-icon-star: "\e901";
|
6
|
+
$ax-icon-light-mode: "\e902";
|
7
|
+
$ax-icon-dark-mode: "\e903";
|
8
|
+
$ax-icon-color-picker: "\e904";
|
9
|
+
$ax-icon-color-palette: "\e905";
|
10
|
+
$ax-icon-arrow-left: "\e906";
|
11
|
+
$ax-icon-arrow-down: "\e907";
|
12
|
+
$ax-icon-arrow-up: "\e908";
|
13
|
+
$ax-icon-arrow-right: "\e909";
|
14
|
+
$ax-icon-chevron-left: "\e90a";
|
15
|
+
$ax-icon-chevron-down: "\e90b";
|
16
|
+
$ax-icon-chevron-up: "\e90c";
|
17
|
+
$ax-icon-chevron-right: "\e90d";
|
18
|
+
$ax-icon-first-page: "\e90e";
|
19
|
+
$ax-icon-last-page: "\e90f";
|
20
|
+
$ax-icon-full-screen: "\e910";
|
21
|
+
$ax-icon-full-screen-close: "\e911";
|
22
|
+
$ax-icon-done: "\e912";
|
23
|
+
$ax-icon-calendar: "\e913";
|
24
|
+
$ax-icon-more: "\e914";
|
25
|
+
$ax-icon-menu: "\e915";
|
26
|
+
$ax-icon-report: "\e916";
|
27
|
+
$ax-icon-report-fill: "\e917";
|
28
|
+
$ax-icon-error: "\e918";
|
29
|
+
$ax-icon-error-fill: "\e919";
|
30
|
+
$ax-icon-warning: "\e91a";
|
31
|
+
$ax-icon-warning-fill: "\e91b";
|
32
|
+
$ax-icon-check-circle: "\e91c";
|
33
|
+
$ax-icon-check-circle-fill: "\e91d";
|
34
|
+
$ax-icon-close: "\e91e";
|
35
|
+
$ax-icon-time: "\e91f";
|
36
|
+
$ax-icon-visibility-off: "\e920";
|
37
|
+
$ax-icon-visibility: "\e921";
|
38
|
+
$ax-icon-unfold-more: "\e922";
|
39
|
+
$ax-icon-unfold-less: "\e923";
|
40
|
+
$ax-icon-arrow-long: "\e924";
|
41
|
+
$ax-icon-arrow-short: "\e925";
|
42
|
+
$ax-icon-download: "\e926";
|
43
|
+
$ax-icon-upload: "\e927";
|
44
|
+
$ax-icon-publish: "\e928";
|
45
|
+
$ax-icon-cloud-download: "\e929";
|
46
|
+
$ax-icon-cloud-upload: "\e92a";
|
47
|
+
$ax-icon-undo: "\e92b";
|
48
|
+
$ax-icon-redo: "\e92c";
|
49
|
+
$ax-icon-search: "\e92d";
|
50
|
+
$ax-icon-add: "\e92e";
|
51
|
+
$ax-icon-remove: "\e92f";
|
52
|
+
$ax-icon-paste: "\e930";
|
53
|
+
$ax-icon-cut: "\e931";
|
54
|
+
$ax-icon-copy: "\e932";
|
55
|
+
$ax-icon-refresh: "\e933";
|
56
|
+
$ax-icon-inbox: "\e934";
|
57
|
+
$ax-icon-skip-previous: "\e935";
|
58
|
+
$ax-icon-skip-next: "\e936";
|
59
|
+
$ax-icon-delete: "\e937";
|
60
|
+
$ax-icon-happy: "\e938";
|
61
|
+
$ax-icon-normal: "\e939";
|
62
|
+
$ax-icon-sad: "\e93a";
|
63
|
+
$ax-icon-person: "\e93b";
|
64
|
+
$ax-icon-dashboard: "\e93c";
|
65
|
+
|
package/src/mixins/_media.scss
CHANGED
@@ -1,27 +1,27 @@
|
|
1
|
-
@mixin media($media) {
|
2
|
-
@if $media == "phone" {
|
3
|
-
@media (max-width: 599px) {
|
4
|
-
@content;
|
5
|
-
}
|
6
|
-
}
|
7
|
-
@if $media == "tablet" {
|
8
|
-
@media (min-width: 600px) {
|
9
|
-
@content;
|
10
|
-
}
|
11
|
-
}
|
12
|
-
@if $media == "tablet-landscape" {
|
13
|
-
@media (min-width: 900px) {
|
14
|
-
@content;
|
15
|
-
}
|
16
|
-
}
|
17
|
-
@if $media == "desktop" {
|
18
|
-
@media (min-width: 1200px) {
|
19
|
-
@content;
|
20
|
-
}
|
21
|
-
}
|
22
|
-
@if $media == "desktop-large" {
|
23
|
-
@media (min-width: 1800px) {
|
24
|
-
@content;
|
25
|
-
}
|
26
|
-
}
|
27
|
-
}
|
1
|
+
@mixin media($media) {
|
2
|
+
@if $media == "phone" {
|
3
|
+
@media (max-width: 599px) {
|
4
|
+
@content;
|
5
|
+
}
|
6
|
+
}
|
7
|
+
@if $media == "tablet" {
|
8
|
+
@media (min-width: 600px) {
|
9
|
+
@content;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
@if $media == "tablet-landscape" {
|
13
|
+
@media (min-width: 900px) {
|
14
|
+
@content;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
@if $media == "desktop" {
|
18
|
+
@media (min-width: 1200px) {
|
19
|
+
@content;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
@if $media == "desktop-large" {
|
23
|
+
@media (min-width: 1800px) {
|
24
|
+
@content;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
}
|
package/src/mixins/_util.scss
CHANGED
@@ -1,20 +1,20 @@
|
|
1
|
-
@mixin color-variable-genterator($array) {
|
2
|
-
@each $name, $color in $array {
|
3
|
-
@if (type-of($color) == 'map') {
|
4
|
-
@each $subname, $variant in $color {
|
5
|
-
@if ($subname != '') {
|
6
|
-
--ax-color-#{$name}-#{$subname}: #{$variant};
|
7
|
-
} @else {
|
8
|
-
--ax-color-#{$name}: #{$variant};
|
9
|
-
}
|
10
|
-
}
|
11
|
-
} @else {
|
12
|
-
--ax-color-#{$name}: #{$color};
|
13
|
-
}
|
14
|
-
}
|
15
|
-
}
|
16
|
-
@mixin darkMode() {
|
17
|
-
.ax-dark {
|
18
|
-
@content;
|
19
|
-
}
|
20
|
-
}
|
1
|
+
@mixin color-variable-genterator($array) {
|
2
|
+
@each $name, $color in $array {
|
3
|
+
@if (type-of($color) == 'map') {
|
4
|
+
@each $subname, $variant in $color {
|
5
|
+
@if ($subname != '') {
|
6
|
+
--ax-color-#{$name}-#{$subname}: #{$variant};
|
7
|
+
} @else {
|
8
|
+
--ax-color-#{$name}: #{$variant};
|
9
|
+
}
|
10
|
+
}
|
11
|
+
} @else {
|
12
|
+
--ax-color-#{$name}: #{$color};
|
13
|
+
}
|
14
|
+
}
|
15
|
+
}
|
16
|
+
@mixin darkMode() {
|
17
|
+
.ax-dark {
|
18
|
+
@content;
|
19
|
+
}
|
20
|
+
}
|
package/src/mixins/index.scss
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
@import "./media";
|
1
|
+
@import "./media";
|
2
2
|
@import "./util";
|
@@ -1,40 +1,40 @@
|
|
1
|
-
.ax-actionsheet-panel {
|
2
|
-
animation-duration: 100ms;
|
3
|
-
-webkit-animation-duration: 100ms;
|
4
|
-
animation-fill-mode: both;
|
5
|
-
-webkit-animation-fill-mode: both;
|
6
|
-
opacity: 0;
|
7
|
-
animation-name: fadeInUp;
|
8
|
-
-webkit-animation-name: fadeInUp;
|
9
|
-
background-color: rgba(var(--ax-color-surface));
|
10
|
-
-webkit-border-top-left-radius: var(--ax-rounded-border-default);
|
11
|
-
-webkit-border-top-right-radius: var(--ax-rounded-border-default);
|
12
|
-
-moz-border-radius-topleft: var(--ax-rounded-border-default);
|
13
|
-
-moz-border-radius-topright: var(--ax-rounded-border-default);
|
14
|
-
border-top-left-radius: var(--ax-rounded-border-default);
|
15
|
-
border-top-right-radius: var(--ax-rounded-border-default);
|
16
|
-
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.141), 0 6px 30px 5px rgba(0, 0, 0, 0.122);
|
17
|
-
overflow: hidden;
|
18
|
-
|
19
|
-
@keyframes fadeInUp {
|
20
|
-
from {
|
21
|
-
transform: translate3d(0, 40px, 0);
|
22
|
-
}
|
23
|
-
|
24
|
-
to {
|
25
|
-
transform: translate3d(0, 0, 0);
|
26
|
-
opacity: 1;
|
27
|
-
}
|
28
|
-
}
|
29
|
-
|
30
|
-
@-webkit-keyframes fadeInUp {
|
31
|
-
from {
|
32
|
-
transform: translate3d(0, 40px, 0);
|
33
|
-
}
|
34
|
-
|
35
|
-
to {
|
36
|
-
transform: translate3d(0, 0, 0);
|
37
|
-
opacity: 1;
|
38
|
-
}
|
39
|
-
}
|
40
|
-
}
|
1
|
+
.ax-actionsheet-panel {
|
2
|
+
animation-duration: 100ms;
|
3
|
+
-webkit-animation-duration: 100ms;
|
4
|
+
animation-fill-mode: both;
|
5
|
+
-webkit-animation-fill-mode: both;
|
6
|
+
opacity: 0;
|
7
|
+
animation-name: fadeInUp;
|
8
|
+
-webkit-animation-name: fadeInUp;
|
9
|
+
background-color: rgba(var(--ax-color-surface));
|
10
|
+
-webkit-border-top-left-radius: var(--ax-rounded-border-default);
|
11
|
+
-webkit-border-top-right-radius: var(--ax-rounded-border-default);
|
12
|
+
-moz-border-radius-topleft: var(--ax-rounded-border-default);
|
13
|
+
-moz-border-radius-topright: var(--ax-rounded-border-default);
|
14
|
+
border-top-left-radius: var(--ax-rounded-border-default);
|
15
|
+
border-top-right-radius: var(--ax-rounded-border-default);
|
16
|
+
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.141), 0 6px 30px 5px rgba(0, 0, 0, 0.122);
|
17
|
+
overflow: hidden;
|
18
|
+
|
19
|
+
@keyframes fadeInUp {
|
20
|
+
from {
|
21
|
+
transform: translate3d(0, 40px, 0);
|
22
|
+
}
|
23
|
+
|
24
|
+
to {
|
25
|
+
transform: translate3d(0, 0, 0);
|
26
|
+
opacity: 1;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
@-webkit-keyframes fadeInUp {
|
31
|
+
from {
|
32
|
+
transform: translate3d(0, 40px, 0);
|
33
|
+
}
|
34
|
+
|
35
|
+
to {
|
36
|
+
transform: translate3d(0, 0, 0);
|
37
|
+
opacity: 1;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
@@ -1,42 +1,42 @@
|
|
1
|
-
@import '../mixins/index.scss';
|
2
|
-
|
3
|
-
.ax-checkbox {
|
4
|
-
width: 1.125rem;
|
5
|
-
height: 1.125rem;
|
6
|
-
border: 1px solid;
|
7
|
-
border-color: rgba(var(--ax-color-border-default));
|
8
|
-
background-color: rgba(var(--ax-color-input-surface));
|
9
|
-
border-radius: 0.2rem;
|
10
|
-
margin: 0;
|
11
|
-
outline: none;
|
12
|
-
vertical-align: middle;
|
13
|
-
appearance: none;
|
14
|
-
|
15
|
-
&:checked,
|
16
|
-
&:indeterminate {
|
17
|
-
border-color: rgba(var(--ax-color-primary-500)) !important;
|
18
|
-
background-color: rgba(var(--ax-color-primary-500)) !important;
|
19
|
-
background-repeat: no-repeat;
|
20
|
-
background-size: contain;
|
21
|
-
}
|
22
|
-
|
23
|
-
&:checked {
|
24
|
-
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
25
|
-
}
|
26
|
-
|
27
|
-
&:indeterminate {
|
28
|
-
background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==');
|
29
|
-
}
|
30
|
-
|
31
|
-
&:focus-visible {
|
32
|
-
outline-offset: 2px;
|
33
|
-
outline-width: 2px;
|
34
|
-
outline-style: solid;
|
35
|
-
outline-color: rgba(var(--ax-color-primary-500));
|
36
|
-
}
|
37
|
-
|
38
|
-
&:disabled {
|
39
|
-
cursor: not-allowed;
|
40
|
-
opacity: 0.5;
|
41
|
-
}
|
42
|
-
}
|
1
|
+
@import '../mixins/index.scss';
|
2
|
+
|
3
|
+
.ax-checkbox {
|
4
|
+
width: 1.125rem;
|
5
|
+
height: 1.125rem;
|
6
|
+
border: 1px solid;
|
7
|
+
border-color: rgba(var(--ax-color-border-default));
|
8
|
+
background-color: rgba(var(--ax-color-input-surface));
|
9
|
+
border-radius: 0.2rem;
|
10
|
+
margin: 0;
|
11
|
+
outline: none;
|
12
|
+
vertical-align: middle;
|
13
|
+
appearance: none;
|
14
|
+
|
15
|
+
&:checked,
|
16
|
+
&:indeterminate {
|
17
|
+
border-color: rgba(var(--ax-color-primary-500)) !important;
|
18
|
+
background-color: rgba(var(--ax-color-primary-500)) !important;
|
19
|
+
background-repeat: no-repeat;
|
20
|
+
background-size: contain;
|
21
|
+
}
|
22
|
+
|
23
|
+
&:checked {
|
24
|
+
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
25
|
+
}
|
26
|
+
|
27
|
+
&:indeterminate {
|
28
|
+
background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==');
|
29
|
+
}
|
30
|
+
|
31
|
+
&:focus-visible {
|
32
|
+
outline-offset: 2px;
|
33
|
+
outline-width: 2px;
|
34
|
+
outline-style: solid;
|
35
|
+
outline-color: rgba(var(--ax-color-primary-500));
|
36
|
+
}
|
37
|
+
|
38
|
+
&:disabled {
|
39
|
+
cursor: not-allowed;
|
40
|
+
opacity: 0.5;
|
41
|
+
}
|
42
|
+
}
|
@@ -1,45 +1,45 @@
|
|
1
|
-
.ax-decoration-container,
|
2
|
-
ax-header,
|
3
|
-
ax-footer {
|
4
|
-
display: flex;
|
5
|
-
justify-content: space-between;
|
6
|
-
gap: 0.5rem;
|
7
|
-
& > ax-prefix,
|
8
|
-
& > ax-suffix {
|
9
|
-
display: flex;
|
10
|
-
flex: 1 1 auto;
|
11
|
-
flex-direction: row;
|
12
|
-
gap: 0.5rem;
|
13
|
-
align-items: center;
|
14
|
-
}
|
15
|
-
& > ax-prefix {
|
16
|
-
order: -9999;
|
17
|
-
justify-content: flex-start;
|
18
|
-
align-items: center;
|
19
|
-
}
|
20
|
-
& > ax-suffix {
|
21
|
-
order: 9999;
|
22
|
-
justify-content: flex-end;
|
23
|
-
align-items: center;
|
24
|
-
}
|
25
|
-
}
|
26
|
-
|
27
|
-
ax-close-button {
|
28
|
-
width: 1.5rem;
|
29
|
-
height: 1.5rem;
|
30
|
-
display: grid;
|
31
|
-
place-items: center;
|
32
|
-
cursor: pointer;
|
33
|
-
|
34
|
-
ax-icon {
|
35
|
-
color: rgba(var(--ax-color-surface-fore));
|
36
|
-
font-size: 1.25rem;
|
37
|
-
|
38
|
-
&:hover {
|
39
|
-
opacity: 0.5;
|
40
|
-
}
|
41
|
-
}
|
42
|
-
}
|
43
|
-
ax-icon {
|
44
|
-
display: inherit;
|
45
|
-
}
|
1
|
+
.ax-decoration-container,
|
2
|
+
ax-header,
|
3
|
+
ax-footer {
|
4
|
+
display: flex;
|
5
|
+
justify-content: space-between;
|
6
|
+
gap: 0.5rem;
|
7
|
+
& > ax-prefix,
|
8
|
+
& > ax-suffix {
|
9
|
+
display: flex;
|
10
|
+
flex: 1 1 auto;
|
11
|
+
flex-direction: row;
|
12
|
+
gap: 0.5rem;
|
13
|
+
align-items: center;
|
14
|
+
}
|
15
|
+
& > ax-prefix {
|
16
|
+
order: -9999;
|
17
|
+
justify-content: flex-start;
|
18
|
+
align-items: center;
|
19
|
+
}
|
20
|
+
& > ax-suffix {
|
21
|
+
order: 9999;
|
22
|
+
justify-content: flex-end;
|
23
|
+
align-items: center;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
ax-close-button {
|
28
|
+
width: 1.5rem;
|
29
|
+
height: 1.5rem;
|
30
|
+
display: grid;
|
31
|
+
place-items: center;
|
32
|
+
cursor: pointer;
|
33
|
+
|
34
|
+
ax-icon {
|
35
|
+
color: rgba(var(--ax-color-surface-fore));
|
36
|
+
font-size: 1.25rem;
|
37
|
+
|
38
|
+
&:hover {
|
39
|
+
opacity: 0.5;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
ax-icon {
|
44
|
+
display: inherit;
|
45
|
+
}
|