@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,42 +1,42 @@
1
- .ax-general-button {
2
- display: inline-flex;
3
- align-items: center;
4
- justify-content: center;
5
- border-radius: var(--ax-rounded-border-default);
6
- padding: 0 1rem;
7
- height: var(--ax-size-default);
8
- font-size: 0.875rem;
9
- cursor: pointer;
10
- transition: background-color 0.3s;
11
- color: rgba(var(--ax-color-surface-fore), 0.6);
12
-
13
- &:is(&:hover):not(&:disabled, .ax-state-disabled) {
14
- background: rgba(var(--ax-color-on-surface));
15
- color: rgba(var(--ax-color-surface-fore), 0.87);
16
- }
17
-
18
- &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
19
- background-color: rgba(var(--ax-color-on-surface));
20
- outline-color: transparent;
21
- }
22
-
23
- &:is(&:active):not(&:disabled, .ax-state-disabled) {
24
- background-color: transparent;
25
- }
26
-
27
- &.ax-button-icon {
28
- padding: 0 0.5rem;
29
- font-size: 1.5rem;
30
- width: var(--ax-size-default);
31
- height: var(--ax-size-default);
32
- ax-icon {
33
- font-size: 1.5rem;
34
- }
35
- }
36
-
37
- &:disabled,
38
- &.ax-state-disabled {
39
- opacity: 0.5;
40
- cursor: not-allowed;
41
- }
42
- }
1
+ .ax-general-button {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ border-radius: var(--ax-rounded-border-default);
6
+ padding: 0 1rem;
7
+ height: var(--ax-size-default);
8
+ font-size: 0.875rem;
9
+ cursor: pointer;
10
+ transition: background-color 0.3s;
11
+ color: rgba(var(--ax-color-surface-fore), 0.6);
12
+
13
+ &:is(&:hover):not(&:disabled, .ax-state-disabled) {
14
+ background: rgba(var(--ax-color-on-surface));
15
+ color: rgba(var(--ax-color-surface-fore), 0.87);
16
+ }
17
+
18
+ &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
19
+ background-color: rgba(var(--ax-color-on-surface));
20
+ outline-color: transparent;
21
+ }
22
+
23
+ &:is(&:active):not(&:disabled, .ax-state-disabled) {
24
+ background-color: transparent;
25
+ }
26
+
27
+ &.ax-button-icon {
28
+ padding: 0 0.5rem;
29
+ font-size: 1.5rem;
30
+ width: var(--ax-size-default);
31
+ height: var(--ax-size-default);
32
+ ax-icon {
33
+ font-size: 1.5rem;
34
+ }
35
+ }
36
+
37
+ &:disabled,
38
+ &.ax-state-disabled {
39
+ opacity: 0.5;
40
+ cursor: not-allowed;
41
+ }
42
+ }
@@ -1,12 +1,12 @@
1
- .ax-input {
2
- outline: none;
3
- padding: 0;
4
- font-size: inherit;
5
- &:focus {
6
- outline-color: transparent;
7
- }
8
- &.ax-state-disabled {
9
- cursor: not-allowed;
10
- opacity: 0.5;
11
- }
12
- }
1
+ .ax-input {
2
+ outline: none;
3
+ padding: 0;
4
+ font-size: inherit;
5
+ &:focus {
6
+ outline-color: transparent;
7
+ }
8
+ &.ax-state-disabled {
9
+ cursor: not-allowed;
10
+ opacity: 0.5;
11
+ }
12
+ }
@@ -1,144 +1,144 @@
1
- @import '../mixins/index.scss';
2
- @include darkMode() {
3
- .ax-list-item {
4
- &.ax-state-selected {
5
- background-color: rgba(var(--ax-color-primary-800)) !important;
6
- color: rgba(var(--ax-color-primary-fore)) !important;
7
- .ax-selected-icon {
8
- color: rgba(var(--ax-color-primary-fore));
9
- }
10
- }
11
- }
12
- }
13
- .ax-list {
14
- display: flex;
15
- flex-direction: column;
16
- overflow: hidden;
17
- font-size: 0.875rem;
18
- background-color: rgba(var(--ax-color-surface));
19
- height: 100%;
20
- @include media('desktop') {
21
- max-height: 320px;
22
- }
23
-
24
- .ax-header,
25
- .ax-footer {
26
- display: flex;
27
- justify-content: space-between;
28
- align-items: center;
29
- background-color: rgba(var(--ax-color-surface));
30
- border-color: rgba(var(--ax-color-border-default));
31
- }
32
-
33
- .ax-footer {
34
- border-top: 1px solid;
35
- }
36
-
37
- .ax-content {
38
- flex: 1 1 0%;
39
- overflow-y: auto;
40
- overflow-x: hidden;
41
-
42
- &.ax-list-items-container {
43
- padding-top: 0.5rem;
44
- padding-bottom: 0.5rem;
45
- overflow-y: auto;
46
- height: 100%;
47
-
48
- &.ax-vertical {
49
- display: grid;
50
- grid-template-columns: repeat(1, minmax(0, 1fr));
51
-
52
- &.ax-divide {
53
- border-top: 1px solid;
54
- border-bottom: 1px solid;
55
- }
56
- }
57
-
58
- &.ax-default {
59
- cursor: pointer;
60
-
61
- .ax-list-item-group {
62
- & > span {
63
- font-weight: 500;
64
- display: flex;
65
- align-items: center;
66
- padding: 0.75rem;
67
- }
68
-
69
- & > ul {
70
- padding-left: 0.75rem;
71
- padding-right: 0.75rem;
72
- }
73
- .ax-list-item {
74
- border-radius: var(--ax-rounded-border-default);
75
- margin-bottom: 0.2rem;
76
- }
77
- }
78
-
79
- .ax-list-item {
80
- padding-inline-start: 0.75rem;
81
- padding-inline-end: 1rem;
82
- position: relative;
83
- height: var(--ax-size-default);
84
- display: flex;
85
- justify-content: space-between;
86
- align-items: center;
87
- user-select: none;
88
- &:focus,
89
- &:focus-visible {
90
- outline: 2px solid transparent;
91
- outline-offset: 2px;
92
- }
93
- &.ax-state-checkbox {
94
- .ax-checkbox-label {
95
- margin-inline-start: 0.5rem;
96
- }
97
- }
98
- &.ax-state-selected {
99
- background-color: rgba(var(--ax-color-on-surface)) !important;
100
- color: rgba(var(--ax-color-on-surface-fore)) !important;
101
- .ax-selected-icon {
102
- color: rgba(var(--ax-color-primary-500));
103
- font-size: 1.5rem;
104
- }
105
- }
106
-
107
- // &:not(.ax-check-box) {
108
- // &.ax-state-selected {
109
- // }
110
- // }
111
-
112
- &.ax-state-disabled {
113
- cursor: not-allowed;
114
- opacity: 0.5;
115
- }
116
-
117
- &:focus-visible,
118
- &:hover {
119
- background-color: rgba(var(--ax-color-on-surface));
120
- }
121
- &.ax-state-focus {
122
- background-color: rgba(var(--ax-color-on-surface));
123
- }
124
- }
125
- }
126
-
127
- .ax-list-loading-container {
128
- display: flex;
129
- justify-content: center;
130
- padding: 0.5rem;
131
- }
132
- }
133
- }
134
-
135
- .ax-search-box-container {
136
- padding: 0.5rem;
137
-
138
- &.ax-state-hidden {
139
- display: none;
140
- }
141
- }
142
- .ax-footer {
143
- }
144
- }
1
+ @import '../mixins/index.scss';
2
+ @include darkMode() {
3
+ .ax-list-item {
4
+ &.ax-state-selected {
5
+ background-color: rgba(var(--ax-color-primary-800)) !important;
6
+ color: rgba(var(--ax-color-primary-fore)) !important;
7
+ .ax-selected-icon {
8
+ color: rgba(var(--ax-color-primary-fore));
9
+ }
10
+ }
11
+ }
12
+ }
13
+ .ax-list {
14
+ display: flex;
15
+ flex-direction: column;
16
+ overflow: hidden;
17
+ font-size: 0.875rem;
18
+ background-color: rgba(var(--ax-color-surface));
19
+ height: 100%;
20
+ @include media('desktop') {
21
+ max-height: 320px;
22
+ }
23
+
24
+ .ax-header,
25
+ .ax-footer {
26
+ display: flex;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+ background-color: rgba(var(--ax-color-surface));
30
+ border-color: rgba(var(--ax-color-border-default));
31
+ }
32
+
33
+ .ax-footer {
34
+ border-top: 1px solid;
35
+ }
36
+
37
+ .ax-content {
38
+ flex: 1 1 0%;
39
+ overflow-y: auto;
40
+ overflow-x: hidden;
41
+
42
+ &.ax-list-items-container {
43
+ padding-top: 0.5rem;
44
+ padding-bottom: 0.5rem;
45
+ overflow-y: auto;
46
+ height: 100%;
47
+
48
+ &.ax-vertical {
49
+ display: grid;
50
+ grid-template-columns: repeat(1, minmax(0, 1fr));
51
+
52
+ &.ax-divide {
53
+ border-top: 1px solid;
54
+ border-bottom: 1px solid;
55
+ }
56
+ }
57
+
58
+ &.ax-default {
59
+ cursor: pointer;
60
+
61
+ .ax-list-item-group {
62
+ & > span {
63
+ font-weight: 500;
64
+ display: flex;
65
+ align-items: center;
66
+ padding: 0.75rem;
67
+ }
68
+
69
+ & > ul {
70
+ padding-left: 0.75rem;
71
+ padding-right: 0.75rem;
72
+ }
73
+ .ax-list-item {
74
+ border-radius: var(--ax-rounded-border-default);
75
+ margin-bottom: 0.2rem;
76
+ }
77
+ }
78
+
79
+ .ax-list-item {
80
+ padding-inline-start: 0.75rem;
81
+ padding-inline-end: 1rem;
82
+ position: relative;
83
+ height: var(--ax-size-default);
84
+ display: flex;
85
+ justify-content: space-between;
86
+ align-items: center;
87
+ user-select: none;
88
+ &:focus,
89
+ &:focus-visible {
90
+ outline: 2px solid transparent;
91
+ outline-offset: 2px;
92
+ }
93
+ &.ax-state-checkbox {
94
+ .ax-checkbox-label {
95
+ margin-inline-start: 0.5rem;
96
+ }
97
+ }
98
+ &.ax-state-selected {
99
+ background-color: rgba(var(--ax-color-on-surface)) !important;
100
+ color: rgba(var(--ax-color-on-surface-fore)) !important;
101
+ .ax-selected-icon {
102
+ color: rgba(var(--ax-color-primary-500));
103
+ font-size: 1.5rem;
104
+ }
105
+ }
106
+
107
+ // &:not(.ax-check-box) {
108
+ // &.ax-state-selected {
109
+ // }
110
+ // }
111
+
112
+ &.ax-state-disabled {
113
+ cursor: not-allowed;
114
+ opacity: 0.5;
115
+ }
116
+
117
+ &:focus-visible,
118
+ &:hover {
119
+ background-color: rgba(var(--ax-color-on-surface));
120
+ }
121
+ &.ax-state-focus {
122
+ background-color: rgba(var(--ax-color-on-surface));
123
+ }
124
+ }
125
+ }
126
+
127
+ .ax-list-loading-container {
128
+ display: flex;
129
+ justify-content: center;
130
+ padding: 0.5rem;
131
+ }
132
+ }
133
+ }
134
+
135
+ .ax-search-box-container {
136
+ padding: 0.5rem;
137
+
138
+ &.ax-state-hidden {
139
+ display: none;
140
+ }
141
+ }
142
+ .ax-footer {
143
+ }
144
+ }
@@ -1,38 +1,38 @@
1
- @import '../mixins/index.scss';
2
- // @include darkMode() {
3
- // .ax-radio {
4
- // background-color: rgba(var(--ax-color-on-surface));
5
- // }
6
- // }
7
- .ax-radio {
8
- width: 1.125rem;
9
- height: 1.125rem;
10
- border: 1px solid;
11
- border-color: rgba(var(--ax-color-border-default));
12
- border-radius: 99rem;
13
- background-color: rgba(var(--ax-color-input-surface));
14
- outline: 2px solid transparent;
15
- outline-offset: 2px;
16
- vertical-align: middle;
17
- appearance: none;
18
-
19
- &:checked {
20
- border-color: rgba(var(--ax-color-primary-500));
21
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
22
- background-color: rgba(var(--ax-color-primary-500));
23
- background-repeat: no-repeat;
24
- background-size: contain;
25
- }
26
-
27
- &:focus-visible {
28
- outline-offset: 2px;
29
- outline-width: 2px;
30
- outline-style: solid;
31
- outline-color: rgba(var(--ax-color-primary-500));
32
- }
33
-
34
- &:disabled {
35
- opacity: 0.5;
36
- cursor: not-allowed;
37
- }
38
- }
1
+ @import '../mixins/index.scss';
2
+ // @include darkMode() {
3
+ // .ax-radio {
4
+ // background-color: rgba(var(--ax-color-on-surface));
5
+ // }
6
+ // }
7
+ .ax-radio {
8
+ width: 1.125rem;
9
+ height: 1.125rem;
10
+ border: 1px solid;
11
+ border-color: rgba(var(--ax-color-border-default));
12
+ border-radius: 99rem;
13
+ background-color: rgba(var(--ax-color-input-surface));
14
+ outline: 2px solid transparent;
15
+ outline-offset: 2px;
16
+ vertical-align: middle;
17
+ appearance: none;
18
+
19
+ &:checked {
20
+ border-color: rgba(var(--ax-color-primary-500));
21
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
22
+ background-color: rgba(var(--ax-color-primary-500));
23
+ background-repeat: no-repeat;
24
+ background-size: contain;
25
+ }
26
+
27
+ &:focus-visible {
28
+ outline-offset: 2px;
29
+ outline-width: 2px;
30
+ outline-style: solid;
31
+ outline-color: rgba(var(--ax-color-primary-500));
32
+ }
33
+
34
+ &:disabled {
35
+ opacity: 0.5;
36
+ cursor: not-allowed;
37
+ }
38
+ }
@@ -1,26 +1,26 @@
1
- .ax-skeleton {
2
- position: relative;
3
- overflow: hidden;
4
- background-color: rgba(var(--ax-color-on-surface));
5
- &.ax-skeleton-animate {
6
- &::before {
7
- content: '';
8
- display: block;
9
- position: absolute;
10
- top: 0;
11
- height: 100%;
12
- width: 14rem;
13
- left: -200px;
14
- background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-on-surface-fore), 0.15) 50%, transparent 100%);
15
- animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
16
- }
17
- }
18
- }
19
- @keyframes load {
20
- from {
21
- left: -200px;
22
- }
23
- to {
24
- left: 100%;
25
- }
26
- }
1
+ .ax-skeleton {
2
+ position: relative;
3
+ overflow: hidden;
4
+ background-color: rgba(var(--ax-color-on-surface));
5
+ &.ax-skeleton-animate {
6
+ &::before {
7
+ content: '';
8
+ display: block;
9
+ position: absolute;
10
+ top: 0;
11
+ height: 100%;
12
+ width: 14rem;
13
+ left: -200px;
14
+ background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-on-surface-fore), 0.15) 50%, transparent 100%);
15
+ animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
16
+ }
17
+ }
18
+ }
19
+ @keyframes load {
20
+ from {
21
+ left: -200px;
22
+ }
23
+ to {
24
+ left: 100%;
25
+ }
26
+ }