@acorex/styles 7.4.4 → 7.4.7
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/mixins/_appearance.scss +97 -0
- package/src/mixins/index.scss +3 -2
- package/src/shared/_drop-down.scss +3 -5
- package/src/shared/_editor-container.scss +32 -36
- package/src/shared/_general-button.scss +1 -1
- package/src/themes/default.scss +2 -0
- package/src/utility/_mixins.scss +0 -80
package/package.json
CHANGED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
@mixin solid-appearance() {
|
|
2
|
+
background-color: rgba(var(--ax-color-input-surface));
|
|
3
|
+
border: 1px solid;
|
|
4
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
5
|
+
border-radius: var(--ax-rounded-border-default);
|
|
6
|
+
&:focus-within {
|
|
7
|
+
border-color: rgba(var(--ax-color-primary-500));
|
|
8
|
+
box-shadow: 0 0 0 1px rgba(var(--ax-color-primary-500));
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&.ax-state-error {
|
|
12
|
+
border-color: rgba(var(--ax-color-danger-500));
|
|
13
|
+
&:focus-within {
|
|
14
|
+
box-shadow: 0 0 0 1px rgba(var(--ax-color-danger-500));
|
|
15
|
+
}
|
|
16
|
+
.ax-input {
|
|
17
|
+
&::placeholder {
|
|
18
|
+
color: rgba(var(--ax-color-danger-500));
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&.ax-state-success {
|
|
24
|
+
outline-color: rgba(var(--ax-color-success-500));
|
|
25
|
+
border-color: rgba(var(--ax-color-success-500));
|
|
26
|
+
&:focus-within {
|
|
27
|
+
box-shadow: 0 0 0 1px rgba(var(--ax-color-success-500));
|
|
28
|
+
}
|
|
29
|
+
.ax-input {
|
|
30
|
+
&::placeholder {
|
|
31
|
+
color: rgba(var(--ax-color-success-500));
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
@mixin flat-appearance() {
|
|
37
|
+
border-bottom: 1px solid;
|
|
38
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
39
|
+
&:focus-within {
|
|
40
|
+
border-color: rgba(var(--ax-color-primary-500));
|
|
41
|
+
}
|
|
42
|
+
&.ax-state-error {
|
|
43
|
+
border-color: rgba(var(--ax-color-danger-500));
|
|
44
|
+
|
|
45
|
+
.ax-input {
|
|
46
|
+
&::placeholder {
|
|
47
|
+
color: rgba(var(--ax-color-danger-500));
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&.ax-state-success {
|
|
53
|
+
outline-color: rgba(var(--ax-color-success-500));
|
|
54
|
+
border-color: rgba(var(--ax-color-success-500));
|
|
55
|
+
|
|
56
|
+
.ax-input {
|
|
57
|
+
&::placeholder {
|
|
58
|
+
color: rgba(var(--ax-color-success-500));
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@mixin outline-appearance() {
|
|
65
|
+
background-color: transparent !important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@mixin fill-appearance() {
|
|
69
|
+
background-color: rgba(var(--ax-color-input-surface-fill));
|
|
70
|
+
border-radius: var(--ax-rounded-border-default);
|
|
71
|
+
&:focus-within {
|
|
72
|
+
box-shadow: 0 0 0 2px rgba(var(--ax-color-primary-500));
|
|
73
|
+
}
|
|
74
|
+
&.ax-state-error {
|
|
75
|
+
background-color: rgba(var(--ax-color-danger-50));
|
|
76
|
+
&:focus-within {
|
|
77
|
+
box-shadow: 0 0 0 2px rgba(var(--ax-color-danger-500));
|
|
78
|
+
}
|
|
79
|
+
.ax-input {
|
|
80
|
+
&::placeholder {
|
|
81
|
+
color: rgba(var(--ax-color-danger-500));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&.ax-state-success {
|
|
87
|
+
background-color: rgba(var(--ax-color-success-50));
|
|
88
|
+
&:focus-within {
|
|
89
|
+
box-shadow: 0 0 0 2px rgba(var(--ax-color-success-500));
|
|
90
|
+
}
|
|
91
|
+
.ax-input {
|
|
92
|
+
&::placeholder {
|
|
93
|
+
color: rgba(var(--ax-color-success-500));
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
package/src/mixins/index.scss
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
@import
|
|
2
|
-
@import
|
|
1
|
+
@import './appearance';
|
|
2
|
+
@import './media';
|
|
3
|
+
@import './util';
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
&:hover,
|
|
11
11
|
&:focus {
|
|
12
|
-
background-color: rgba(var(--ax-color-default));
|
|
12
|
+
background-color: rgba(var(--ax-color-default), 0.5);
|
|
13
13
|
color: rgba(var(--ax-color-#{$color}-600));
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
&:hover,
|
|
33
33
|
&:focus,
|
|
34
34
|
&:active {
|
|
35
|
-
background-color: rgba(var(--ax-color-default));
|
|
35
|
+
background-color: rgba(var(--ax-color-default), 0.5);
|
|
36
36
|
color: rgba(var(--ax-color-default-fore));
|
|
37
37
|
}
|
|
38
38
|
|
|
@@ -121,9 +121,7 @@
|
|
|
121
121
|
display: inline-flex;
|
|
122
122
|
align-items: center;
|
|
123
123
|
justify-content: flex-start;
|
|
124
|
-
padding: 0.5rem;
|
|
125
|
-
padding-inline-start: 1.5rem;
|
|
126
|
-
padding-inline-end: 2rem;
|
|
124
|
+
padding: 0.5rem 1rem;
|
|
127
125
|
font-size: 0.875rem;
|
|
128
126
|
color: rgba(var(--ax-color-text-default));
|
|
129
127
|
user-select: none;
|
|
@@ -1,16 +1,40 @@
|
|
|
1
1
|
@import '../mixins/index.scss';
|
|
2
2
|
|
|
3
|
+
@include darkMode() {
|
|
4
|
+
.ax-editor-container {
|
|
5
|
+
&.ax-appearance-fill {
|
|
6
|
+
&.ax-state-error {
|
|
7
|
+
background-color: rgba(var(--ax-color-danger-500), 0.25);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&.ax-state-success {
|
|
11
|
+
background-color: rgba(var(--ax-color-success-500), 0.25);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
3
16
|
.ax-editor-container {
|
|
4
17
|
width: 100%;
|
|
5
18
|
height: var(--ax-size-default);
|
|
6
19
|
display: flex;
|
|
7
|
-
background-color: rgba(var(--ax-color-input-surface));
|
|
8
20
|
color: rgba(var(--ax-color-input-surface-fore));
|
|
9
|
-
border: 1px solid;
|
|
10
|
-
border-color: rgba(var(--ax-color-border-default));
|
|
11
|
-
border-radius: var(--ax-rounded-border-default);
|
|
12
21
|
font-size: 0.875rem;
|
|
13
22
|
overflow: hidden;
|
|
23
|
+
|
|
24
|
+
&.ax-appearance-solid,
|
|
25
|
+
&.ax-appearance-outline {
|
|
26
|
+
@include solid-appearance();
|
|
27
|
+
}
|
|
28
|
+
&.ax-appearance-flat {
|
|
29
|
+
@include flat-appearance();
|
|
30
|
+
}
|
|
31
|
+
&.ax-appearance-outline {
|
|
32
|
+
@include outline-appearance();
|
|
33
|
+
}
|
|
34
|
+
&.ax-appearance-fill {
|
|
35
|
+
@include fill-appearance();
|
|
36
|
+
}
|
|
37
|
+
|
|
14
38
|
.ax-editor-input {
|
|
15
39
|
height: 100%;
|
|
16
40
|
flex: 1;
|
|
@@ -27,10 +51,7 @@
|
|
|
27
51
|
font-size: inherit;
|
|
28
52
|
}
|
|
29
53
|
}
|
|
30
|
-
|
|
31
|
-
border-color: rgba(var(--ax-color-primary-500));
|
|
32
|
-
box-shadow: 0px 0 0px 1px rgba(var(--ax-color-primary-500));
|
|
33
|
-
}
|
|
54
|
+
|
|
34
55
|
&.ax-xs {
|
|
35
56
|
.ax-input {
|
|
36
57
|
font-size: 0.75rem;
|
|
@@ -96,7 +117,7 @@
|
|
|
96
117
|
}
|
|
97
118
|
|
|
98
119
|
.ax-text-area {
|
|
99
|
-
padding: 0.625rem /*
|
|
120
|
+
padding: 0.625rem /* 10 */;
|
|
100
121
|
}
|
|
101
122
|
& > ax-prefix {
|
|
102
123
|
*,
|
|
@@ -123,7 +144,7 @@
|
|
|
123
144
|
display: flex;
|
|
124
145
|
justify-content: center;
|
|
125
146
|
align-items: center;
|
|
126
|
-
border-radius:
|
|
147
|
+
border-radius: 0;
|
|
127
148
|
}
|
|
128
149
|
|
|
129
150
|
ax-icon {
|
|
@@ -149,7 +170,7 @@
|
|
|
149
170
|
|
|
150
171
|
.ax-button {
|
|
151
172
|
height: 100% !important;
|
|
152
|
-
border-radius:
|
|
173
|
+
border-radius: 0;
|
|
153
174
|
|
|
154
175
|
&.ax-button-icon {
|
|
155
176
|
width: var(--ax-size-default);
|
|
@@ -160,31 +181,6 @@
|
|
|
160
181
|
&.ax-state-disabled {
|
|
161
182
|
opacity: 0.5;
|
|
162
183
|
}
|
|
163
|
-
|
|
164
|
-
&.ax-state-error {
|
|
165
|
-
border-color: rgba(var(--ax-color-danger-500));
|
|
166
|
-
&:focus-within {
|
|
167
|
-
box-shadow: 0px 0 0px 1px rgba(var(--ax-color-danger-500));
|
|
168
|
-
}
|
|
169
|
-
.ax-input {
|
|
170
|
-
&::placeholder {
|
|
171
|
-
color: rgba(var(--ax-color-danger-500));
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
&.ax-state-success {
|
|
177
|
-
outline-color: rgba(var(--ax-color-success-500));
|
|
178
|
-
border-color: rgba(var(--ax-color-success-500));
|
|
179
|
-
&:focus-within {
|
|
180
|
-
box-shadow: 0px 0 0px 1px rgba(var(--ax-color-success-500));
|
|
181
|
-
}
|
|
182
|
-
.ax-input {
|
|
183
|
-
&::placeholder {
|
|
184
|
-
color: rgba(var(--ax-color-success-500));
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
184
|
}
|
|
189
185
|
span.ripple {
|
|
190
186
|
position: absolute;
|
package/src/themes/default.scss
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
--ax-color-on-surface-fore: 22, 22, 22;
|
|
16
16
|
|
|
17
17
|
--ax-color-input-surface: 255, 255, 255;
|
|
18
|
+
--ax-color-input-surface-fill: 247, 247, 247;
|
|
18
19
|
--ax-color-input-surface-fore: 22, 22, 22;
|
|
19
20
|
|
|
20
21
|
--ax-color-default: 229, 231, 235;
|
|
@@ -109,6 +110,7 @@
|
|
|
109
110
|
--ax-color-text-default: 255, 255, 255;
|
|
110
111
|
|
|
111
112
|
--ax-color-surface: 31, 41, 55;
|
|
113
|
+
--ax-color-input-surface-fill: 31, 41, 55;
|
|
112
114
|
--ax-color-surface-fore: 255, 255, 255;
|
|
113
115
|
|
|
114
116
|
--ax-color-on-surface: 55, 65, 81;
|
package/src/utility/_mixins.scss
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
@mixin screen($breakpoint) {
|
|
2
|
-
// $breakpoint is simply a variable that can have several values
|
|
3
|
-
|
|
4
|
-
@if $breakpoint == extraSmall {
|
|
5
|
-
// Media query for 320px and less
|
|
6
|
-
@media (max-width: 320px) {
|
|
7
|
-
@content;
|
|
8
|
-
}
|
|
9
|
-
@media (min-width: 321px) and (max-width: 480px) {
|
|
10
|
-
@content;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@if $breakpoint == tablet {
|
|
15
|
-
// here `laptop` is the value of $breakpoint
|
|
16
|
-
// when call laptop, we mean the following piece of code
|
|
17
|
-
|
|
18
|
-
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
|
|
19
|
-
@content;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@if $breakpoint == mobile {
|
|
24
|
-
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
|
25
|
-
@content;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@if $breakpoint == laptop {
|
|
30
|
-
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
|
|
31
|
-
@content;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@mixin responsive($media) {
|
|
37
|
-
@if $media == 'phone' {
|
|
38
|
-
@media (max-width: 599px) {
|
|
39
|
-
@content;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
@if $media == 'tablet' {
|
|
43
|
-
@media (min-width: 600px) {
|
|
44
|
-
@content;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
@if $media == 'tablet-landscape' {
|
|
48
|
-
@media (min-width: 900px) {
|
|
49
|
-
@content;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
@if $media == 'desktop' {
|
|
53
|
-
@media (min-width: 1200px) {
|
|
54
|
-
@content;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
@if $media == 'desktop-large' {
|
|
58
|
-
@media (min-width: 1800px) {
|
|
59
|
-
@content;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
@mixin color-look-generator() {
|
|
65
|
-
$colors: ('primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark');
|
|
66
|
-
$looks: ('default', 'outline', 'twotone', 'blank');
|
|
67
|
-
@each $c in $colors {
|
|
68
|
-
@each $l in $looks {
|
|
69
|
-
&.ax-#{$c}-#{$l} {
|
|
70
|
-
@include color-look($c, $l);
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
@mixin rtl {
|
|
77
|
-
.ax-rtl {
|
|
78
|
-
@content;
|
|
79
|
-
}
|
|
80
|
-
}
|