@acorex/styles 7.17.11 → 7.17.13
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/{src/icons → icons}/style.scss +1 -1
- package/index.css +2265 -1450
- package/index.min.css +1 -1
- package/index.scss +0 -1
- package/package.json +1 -1
- package/src/mixins/_look.scss +45 -15
- package/src/shared/_actionsheet.scss +18 -1
- package/src/shared/_check-box.scss +28 -7
- package/src/shared/_color-look.scss +267 -109
- package/src/shared/_drop-down.scss +45 -9
- package/src/shared/_editor-container.scss +114 -30
- package/src/shared/_general-button.scss +51 -13
- package/src/shared/_inputs.scss +9 -3
- package/src/shared/_list.scss +112 -32
- package/src/shared/_radio.scss +41 -5
- package/src/shared/_table.scss +79 -20
- package/src/shared/_utils.scss +52 -9
- package/src/shared/index.scss +0 -1
- package/src/utility/index.scss +1 -1
- package/{src/themes → themes}/default.css +1 -1
- package/src/shared/_decoration.scss +0 -45
- package/{src/icons → icons}/Read Me.txt +0 -0
- package/{src/icons → icons}/demo-files/demo.css +0 -0
- package/{src/icons → icons}/demo-files/demo.js +0 -0
- package/{src/icons → icons}/demo.html +0 -0
- package/{src/icons → icons}/fonts/acorex-icons.eot +0 -0
- package/{src/icons → icons}/fonts/acorex-icons.svg +0 -0
- package/{src/icons → icons}/fonts/acorex-icons.ttf +0 -0
- package/{src/icons → icons}/fonts/acorex-icons.woff +0 -0
- package/{src/icons → icons}/selection.json +0 -0
- package/{src/icons → icons}/style.css +0 -0
- package/{src/icons → icons}/variables.scss +0 -0
- package/{src/themes → themes}/default.scss +14 -14
package/index.scss
CHANGED
package/package.json
CHANGED
package/src/mixins/_look.scss
CHANGED
|
@@ -1,53 +1,83 @@
|
|
|
1
1
|
@mixin solid-look() {
|
|
2
|
-
@apply ax-rounded-default ax-border ax-border-default ax-bg-input-surface;
|
|
2
|
+
// @apply ax-rounded-default ax-border ax-border-default ax-bg-input-surface;
|
|
3
|
+
border-radius: var(--ax-rounded-border-default);
|
|
4
|
+
border-width: 1px;
|
|
5
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
6
|
+
background-color: rgba(var(--ax-color-input-surface));
|
|
7
|
+
|
|
3
8
|
&:focus-within {
|
|
4
|
-
@apply ax-border-primary ax-ring-1 ax-ring-primary-500;
|
|
9
|
+
// @apply ax-border-primary ax-ring-1 ax-ring-primary-500;
|
|
10
|
+
box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
|
|
11
|
+
border-color: rgba(var(--ax-color-primary-500));
|
|
5
12
|
}
|
|
6
13
|
|
|
7
14
|
&.ax-state-error {
|
|
8
|
-
@apply ax-border-danger-500;
|
|
15
|
+
// @apply ax-border-danger-500;
|
|
16
|
+
border-color: rgba(var(--ax-color-danger-500));
|
|
9
17
|
&:focus-within {
|
|
10
|
-
@apply ax-ring-1 ax-ring-danger-500;
|
|
18
|
+
// @apply ax-ring-1 ax-ring-danger-500;
|
|
19
|
+
box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-500));
|
|
20
|
+
border-color: rgba(var(--ax-color-danger-500));
|
|
11
21
|
}
|
|
12
22
|
.ax-input {
|
|
13
23
|
&::placeholder {
|
|
14
|
-
@apply ax-text-danger;
|
|
24
|
+
// @apply ax-text-danger;
|
|
25
|
+
color: rgba(var(--ax-color-primary-500));
|
|
15
26
|
}
|
|
16
27
|
}
|
|
17
28
|
}
|
|
18
29
|
}
|
|
19
30
|
@mixin flat-look() {
|
|
20
|
-
@apply ax-rounded-none ax-border-b ax-border-default;
|
|
31
|
+
// @apply ax-rounded-none ax-border-b ax-border-default;
|
|
32
|
+
border-radius: 0px;
|
|
33
|
+
border-bottom-width: 1px;
|
|
34
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
35
|
+
|
|
21
36
|
&:focus-within {
|
|
22
|
-
@apply ax-border-primary-500;
|
|
37
|
+
// @apply ax-border-primary-500;
|
|
38
|
+
border-color: rgba(var(--ax-color-primary-500));
|
|
23
39
|
}
|
|
24
40
|
&.ax-state-error {
|
|
25
|
-
@apply ax-border-danger-500;
|
|
41
|
+
// @apply ax-border-danger-500;
|
|
42
|
+
border-color: rgba(var(--ax-color-danger-500));
|
|
43
|
+
|
|
26
44
|
.ax-input {
|
|
27
45
|
&::placeholder {
|
|
28
|
-
@apply ax-text-danger-500;
|
|
46
|
+
// @apply ax-text-danger-500;
|
|
47
|
+
color: rgba(var(--ax-color-danger-500));
|
|
29
48
|
}
|
|
30
49
|
}
|
|
31
50
|
}
|
|
32
51
|
}
|
|
33
52
|
|
|
34
53
|
@mixin outline-look() {
|
|
35
|
-
@apply ax-bg-transparent #{!important};
|
|
54
|
+
// @apply ax-bg-transparent #{!important};
|
|
55
|
+
background-color: transparent !important;
|
|
36
56
|
}
|
|
37
57
|
|
|
38
58
|
@mixin fill-look() {
|
|
39
|
-
@apply ax-rounded-default ax-bg-on-surface;
|
|
59
|
+
// @apply ax-rounded-default ax-bg-on-surface;
|
|
60
|
+
border-radius: var(--ax-rounded-border-default);
|
|
61
|
+
background-color: rgba(var(--ax-color-on-surface));
|
|
62
|
+
|
|
40
63
|
&:focus-within {
|
|
41
|
-
@apply ax-ring-2 ax-ring-primary-500;
|
|
64
|
+
// @apply ax-ring-2 ax-ring-primary-500;
|
|
65
|
+
|
|
66
|
+
box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-500));
|
|
42
67
|
}
|
|
43
68
|
&.ax-state-error {
|
|
44
|
-
@apply ax-bg-danger-200 ax-text-danger-fore-tint;
|
|
69
|
+
// @apply ax-bg-danger-200 ax-text-danger-fore-tint;
|
|
70
|
+
background-color: rgba(var(--ax-color-danger-50));
|
|
71
|
+
color: rgba(var(--ax-color-danger-fore-tint));
|
|
72
|
+
|
|
45
73
|
&:focus-within {
|
|
46
|
-
@apply ax-ring-2 ax-ring-primary-500;
|
|
74
|
+
// @apply ax-ring-2 ax-ring-primary-500;
|
|
75
|
+
box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-500));
|
|
47
76
|
}
|
|
48
77
|
.ax-input {
|
|
49
78
|
&::placeholder {
|
|
50
|
-
@apply ax-text-danger-500;
|
|
79
|
+
// @apply ax-text-danger-500;
|
|
80
|
+
color: rgba(var(--ax-color-danger-500));
|
|
51
81
|
}
|
|
52
82
|
}
|
|
53
83
|
}
|
|
@@ -1,3 +1,20 @@
|
|
|
1
1
|
.ax-actionsheet-panel {
|
|
2
|
-
@apply ax-animate-fadeInUp ax-overflow-hidden ax-rounded-t-default ax-bg-surface ax-shadow-lg ax-animate-2xfaster;
|
|
2
|
+
// @apply ax-animate-fadeInUp ax-overflow-hidden ax-rounded-t-default ax-bg-surface ax-shadow-lg ax-animate-2xfaster;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
border-top-left-radius: var(--ax-rounded-border-default);
|
|
5
|
+
border-top-right-radius: var(--ax-rounded-border-default);
|
|
6
|
+
background-color: rgba(var(--ax-color-surface));
|
|
7
|
+
--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
8
|
+
--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);
|
|
9
|
+
box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
|
|
10
|
+
|
|
11
|
+
animation: 1s both ax-fadeInUp;
|
|
12
|
+
animation-duration: 250ms;
|
|
13
|
+
|
|
14
|
+
@keyframes ax-fadeInUp {
|
|
15
|
+
from {
|
|
16
|
+
transform: translate3d(0, 100%, 0);
|
|
17
|
+
opacity: 0;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
3
20
|
}
|
|
@@ -1,13 +1,29 @@
|
|
|
1
1
|
@import '../mixins/index.scss';
|
|
2
2
|
|
|
3
3
|
.ax-checkbox {
|
|
4
|
-
@apply ax-m-0 ax-h-4 ax-w-4 ax-cursor-pointer ax-appearance-none ax-rounded ax-border ax-border-default ax-bg-input-surface ax-align-middle ax-outline-none;
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
// @apply ax-m-0 ax-h-4 ax-w-4 ax-cursor-pointer ax-appearance-none ax-rounded ax-border ax-border-default ax-bg-input-surface ax-align-middle ax-outline-none;
|
|
5
|
+
margin: 0px;
|
|
6
|
+
height: 1rem /* 16px */;
|
|
7
|
+
width: 1rem /* 16px */;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
appearance: none;
|
|
10
|
+
border-radius: 0.25rem /* 4px */;
|
|
11
|
+
border-width: 1px;
|
|
12
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
13
|
+
background-color: rgba(var(--ax-color-input-surface));
|
|
14
|
+
vertical-align: middle;
|
|
15
|
+
outline: 2px solid transparent;
|
|
16
|
+
outline-offset: 2px;
|
|
17
|
+
|
|
7
18
|
&:checked,
|
|
8
19
|
&:indeterminate {
|
|
9
|
-
@apply ax-border-primary-500 ax-bg-primary-500 #{!important};
|
|
10
|
-
|
|
20
|
+
// @apply ax-border-primary-500 ax-bg-primary-500 #{!important};
|
|
21
|
+
border-color: rgba(var(--ax-color-primary-500)) !important;
|
|
22
|
+
background-color: rgba(var(--ax-color-primary-500)) !important;
|
|
23
|
+
background-size: contain;
|
|
24
|
+
background-repeat: no-repeat;
|
|
25
|
+
|
|
26
|
+
// @apply ax-bg-contain ax-bg-no-repeat;
|
|
11
27
|
}
|
|
12
28
|
|
|
13
29
|
&:checked {
|
|
@@ -20,11 +36,16 @@
|
|
|
20
36
|
|
|
21
37
|
&:focus-visible,
|
|
22
38
|
&:focus {
|
|
23
|
-
@apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
|
|
39
|
+
// @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
|
|
40
|
+
box-shadow:
|
|
41
|
+
0px 0px 0px 2px rgba(var(--ax-color-surface)),
|
|
42
|
+
0px 0px 0px 4px rgba(var(--ax-color-primary-500));
|
|
24
43
|
}
|
|
25
44
|
|
|
26
45
|
&:disabled {
|
|
27
|
-
@apply ax-cursor-not-allowed ax-opacity-50;
|
|
46
|
+
// @apply ax-cursor-not-allowed ax-opacity-50;
|
|
47
|
+
cursor: not-allowed;
|
|
48
|
+
opacity: 0.5;
|
|
28
49
|
}
|
|
29
50
|
}
|
|
30
51
|
|