@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.
@@ -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
+
@@ -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
+ }
@@ -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
+ }
@@ -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
+ }