@oardi/css-utils 0.28.0 → 0.29.0
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/scss/components/button.scss +1 -1
- package/scss/components/chip.scss +1 -1
- package/scss/components/expansion-panel.scss +1 -1
- package/scss/components/icon-button.scss +1 -1
- package/scss/components/tabs.scss +2 -2
- package/scss/components/toast.scss +1 -1
- package/scss/flex.scss +3 -3
- package/scss/theme.scss +14 -14
- package/scss/utilities.scss +21 -2
- package/scss/variables.scss +12 -0
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
border: 1px solid var(--expansion-panel-border-color, var(--border-color));
|
|
12
12
|
border-radius: var(--border-radius);
|
|
13
13
|
background-color: var(--expansion-panel-header-bg-color, var(--bg-surface));
|
|
14
|
-
transition:
|
|
14
|
+
transition: var(--transition-color);
|
|
15
15
|
|
|
16
16
|
&:focus {
|
|
17
17
|
outline: var(--focus-outline);
|
|
@@ -28,7 +28,7 @@ $sizes: (
|
|
|
28
28
|
background-color: transparent;
|
|
29
29
|
border-color: transparent;
|
|
30
30
|
color: var(--font-color);
|
|
31
|
-
transition:
|
|
31
|
+
transition: var(--transition-color);
|
|
32
32
|
-webkit-tap-highlight-color: transparent;
|
|
33
33
|
touch-action: manipulation; // ios fix
|
|
34
34
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
border-bottom: 3px solid var(--tab-border-color, var(--border-color));
|
|
15
15
|
flex: 1 0 auto;
|
|
16
16
|
|
|
17
|
-
transition:
|
|
17
|
+
transition: var(--transition-color);
|
|
18
18
|
|
|
19
19
|
&.active {
|
|
20
20
|
color: var(--primary);
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
padding: 20px;
|
|
50
50
|
background-color: var(--tab-content-bg-color, var(--bg-surface));
|
|
51
51
|
|
|
52
|
-
transition:
|
|
52
|
+
transition: var(--transition-color);
|
|
53
53
|
|
|
54
54
|
&.active {
|
|
55
55
|
display: block;
|
package/scss/flex.scss
CHANGED
|
@@ -153,14 +153,14 @@ $flex-align-items-alignments: (start, end, center, between, around, evenly);
|
|
|
153
153
|
// gap - move to own file?
|
|
154
154
|
@each $key, $value in map.get(theme.$theme, spacings) {
|
|
155
155
|
.gap-#{$key} {
|
|
156
|
-
gap: $value;
|
|
156
|
+
gap: $value !important;
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
.row-gap-#{$key} {
|
|
160
|
-
row-gap: $value;
|
|
160
|
+
row-gap: $value !important;
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
.column-gap-#{$key} {
|
|
164
|
-
column-gap: $value;
|
|
164
|
+
column-gap: $value !important;
|
|
165
165
|
}
|
|
166
166
|
}
|
package/scss/theme.scss
CHANGED
|
@@ -2,22 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
$default-theme: (
|
|
4
4
|
colors: (
|
|
5
|
-
primary: #6c5ce7,
|
|
6
|
-
secondary: #595959,
|
|
7
|
-
success: #16a085,
|
|
8
|
-
warn: #ffc557,
|
|
9
|
-
error: #f03e3e,
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
'primary': #6c5ce7,
|
|
6
|
+
'secondary': #595959,
|
|
7
|
+
'success': #16a085,
|
|
8
|
+
'warn': #ffc557,
|
|
9
|
+
'error': #f03e3e,
|
|
10
|
+
'white': #ffffff,
|
|
11
|
+
'black': #000000,
|
|
12
12
|
),
|
|
13
13
|
on-colors: (
|
|
14
|
-
primary: #ffffff,
|
|
15
|
-
secondary: #ffffff,
|
|
16
|
-
success: #ffffff,
|
|
17
|
-
warn: #ffffff,
|
|
18
|
-
error: #ffffff,
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
'primary': #ffffff,
|
|
15
|
+
'secondary': #ffffff,
|
|
16
|
+
'success': #ffffff,
|
|
17
|
+
'warn': #ffffff,
|
|
18
|
+
'error': #ffffff,
|
|
19
|
+
'white': #000000,
|
|
20
|
+
'black': #ffffff,
|
|
21
21
|
),
|
|
22
22
|
grays: (
|
|
23
23
|
50: hsl(0, 0%, 5%),
|
package/scss/utilities.scss
CHANGED
|
@@ -34,25 +34,44 @@
|
|
|
34
34
|
color: var(--white) !important;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.text-
|
|
37
|
+
.text-black {
|
|
38
38
|
color: var(--black) !important;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
.bg-opacity-10 {
|
|
42
|
+
--bg-opacity: 0.1;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.bg-opacity-25 {
|
|
46
|
+
--bg-opacity: 0.25;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.bg-opacity-50 {
|
|
50
|
+
--bg-opacity: 0.5;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.bg-opacity-75 {
|
|
54
|
+
--bg-opacity: 0.75;
|
|
55
|
+
}
|
|
56
|
+
|
|
41
57
|
@each $name, $value in map.get(theme.$theme, colors) {
|
|
42
58
|
.text-#{$name} {
|
|
43
59
|
color: var(--#{$name});
|
|
44
60
|
}
|
|
45
61
|
|
|
62
|
+
// deprecated
|
|
46
63
|
.bg-#{$name}-light {
|
|
47
64
|
background-color: var(--#{$name}-light);
|
|
48
65
|
color: var(--on-#{$name});
|
|
49
66
|
}
|
|
50
67
|
|
|
51
68
|
.bg-#{$name} {
|
|
52
|
-
background-color: var(--#{$name});
|
|
69
|
+
// background-color: var(--#{$name});
|
|
53
70
|
color: var(--on-#{$name});
|
|
71
|
+
background-color: rgba(var(--#{$name}-rgb), var(--bg-opacity)) !important;
|
|
54
72
|
}
|
|
55
73
|
|
|
74
|
+
// deprecated
|
|
56
75
|
.bg-#{$name}-dark {
|
|
57
76
|
background-color: var(--#{$name}-dark);
|
|
58
77
|
color: var(--on-#{$name});
|
package/scss/variables.scss
CHANGED
|
@@ -2,10 +2,18 @@
|
|
|
2
2
|
@use 'sass:map';
|
|
3
3
|
@use './theme.scss' as theme;
|
|
4
4
|
|
|
5
|
+
@function to-rgb-string($color) {
|
|
6
|
+
$r: color.channel($color, 'red', $space: rgb);
|
|
7
|
+
$g: color.channel($color, 'green', $space: rgb);
|
|
8
|
+
$b: color.channel($color, 'blue', $space: rgb);
|
|
9
|
+
@return '#{$r}, #{$g}, #{$b}';
|
|
10
|
+
}
|
|
11
|
+
|
|
5
12
|
:root {
|
|
6
13
|
@each $name, $value in map.get(theme.$theme, colors) {
|
|
7
14
|
--#{$name}-light: #{color.adjust($value, $lightness: 15%)};
|
|
8
15
|
--#{$name}: #{$value};
|
|
16
|
+
--#{$name}-rgb: #{to-rgb-string($value)};
|
|
9
17
|
--#{$name}-dark: #{color.adjust($value, $lightness: -15%)};
|
|
10
18
|
--text-#{$name}: #{$value};
|
|
11
19
|
}
|
|
@@ -42,4 +50,8 @@
|
|
|
42
50
|
--focus-offset: -2px;
|
|
43
51
|
|
|
44
52
|
--container: 900px;
|
|
53
|
+
|
|
54
|
+
--transition-color: color 0.4s, background-color 0.4s;
|
|
55
|
+
|
|
56
|
+
--bg-opacity: 1;
|
|
45
57
|
}
|