@oardi/css-utils 0.20.0 → 0.21.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 +3 -3
- package/scss/components/icon-button.scss +2 -3
- package/scss/components/list.scss +3 -3
- package/scss/flex-responsive.scss +0 -4
- package/scss/index.scss +1 -0
- package/scss/reboot.scss +106 -0
- package/scss/typography.scss +1 -1
- package/scss/variables.scss +6 -9
package/package.json
CHANGED
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
&:focus {
|
|
75
|
-
outline:
|
|
75
|
+
outline: 2px solid var(--#{$name}-light);
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
&:focus {
|
|
92
92
|
color: var(--on-#{$name});
|
|
93
|
-
outline:
|
|
93
|
+
outline: 2px solid var(--#{$name}-light);
|
|
94
94
|
background-color: var(--#{$name});
|
|
95
95
|
}
|
|
96
96
|
}
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
color: var(--#{$name});
|
|
100
100
|
|
|
101
101
|
&:focus {
|
|
102
|
-
outline:
|
|
102
|
+
outline: 2px solid var(--#{$name}-light);
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
}
|
|
@@ -85,7 +85,7 @@ $sizes: (
|
|
|
85
85
|
&:hover,
|
|
86
86
|
&:active,
|
|
87
87
|
&:focus {
|
|
88
|
-
outline:
|
|
88
|
+
outline: 2px solid var(--#{$name}-light);
|
|
89
89
|
color: var(--on-#{$name});
|
|
90
90
|
}
|
|
91
91
|
|
|
@@ -105,12 +105,11 @@ $sizes: (
|
|
|
105
105
|
color: var(--on-#{$name});
|
|
106
106
|
fill: var(--on-#{$name});
|
|
107
107
|
background-color: var(--#{$name});
|
|
108
|
-
box-shadow: 0 0 0 0.2rem transparent;
|
|
109
108
|
|
|
110
109
|
&:hover,
|
|
111
110
|
&:active,
|
|
112
111
|
&:focus {
|
|
113
|
-
|
|
112
|
+
outline: 2px solid var(--#{$name}-light);
|
|
114
113
|
background-color: var(--#{$name}-dark);
|
|
115
114
|
}
|
|
116
115
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--list-bg-color: var(--white);
|
|
3
2
|
--list-border-color: transparent;
|
|
4
|
-
// --list-item-hover-bg-color: var(--highlight);
|
|
5
3
|
--list-border-width: 1px;
|
|
6
4
|
--list-padding: 0rem;
|
|
7
5
|
--list-item-padding: 1rem;
|
|
6
|
+
--list-item-bg-color: var(--white);
|
|
7
|
+
// --list-item-hover-bg-color: var(--highlight);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.list {
|
|
11
|
-
background-color: var(--list-bg-color);
|
|
12
11
|
border: var(--list-border-width) solid var(--list-border-color);
|
|
13
12
|
padding: var(--list-padding);
|
|
14
13
|
list-style-type: none;
|
|
15
14
|
|
|
16
15
|
.list-item {
|
|
16
|
+
background-color: var(--list-item-bg-color);
|
|
17
17
|
color: var(--font-color);
|
|
18
18
|
min-height: 1px;
|
|
19
19
|
padding: var(--list-item-padding);
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use './theme.scss';
|
|
3
3
|
|
|
4
|
-
// TODO
|
|
5
|
-
// add responsive classes for
|
|
6
|
-
// d-flex, d-inline-flex
|
|
7
|
-
|
|
8
4
|
@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
|
|
9
5
|
@media (min-width: #{$bp-value}) {
|
|
10
6
|
@each $key, $value in map.get(theme.$theme, spacings) {
|
package/scss/index.scss
CHANGED
package/scss/reboot.scss
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
*,
|
|
2
|
+
::after,
|
|
3
|
+
::before {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
html {
|
|
8
|
+
font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
9
|
+
line-height: 1.15;
|
|
10
|
+
-webkit-text-size-adjust: 100%;
|
|
11
|
+
tab-size: 4;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
margin: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
b,
|
|
19
|
+
strong {
|
|
20
|
+
font-weight: bolder;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
code,
|
|
24
|
+
kbd,
|
|
25
|
+
pre,
|
|
26
|
+
samp {
|
|
27
|
+
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
|
28
|
+
font-size: 1em;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
small {
|
|
32
|
+
font-size: 80%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
sub,
|
|
36
|
+
sup {
|
|
37
|
+
font-size: 75%;
|
|
38
|
+
line-height: 0;
|
|
39
|
+
position: relative;
|
|
40
|
+
vertical-align: baseline;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
sub {
|
|
44
|
+
bottom: -0.25em;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
sup {
|
|
48
|
+
top: -0.5em;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
table {
|
|
52
|
+
border-color: currentcolor;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
button,
|
|
56
|
+
input,
|
|
57
|
+
optgroup,
|
|
58
|
+
select,
|
|
59
|
+
textarea {
|
|
60
|
+
font-family: inherit;
|
|
61
|
+
font-size: 100%;
|
|
62
|
+
line-height: 1.15;
|
|
63
|
+
margin: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
[type='button'],
|
|
67
|
+
[type='reset'],
|
|
68
|
+
[type='submit'],
|
|
69
|
+
button {
|
|
70
|
+
-webkit-appearance: button;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
legend {
|
|
74
|
+
padding: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
progress {
|
|
78
|
+
vertical-align: baseline;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
::-webkit-inner-spin-button,
|
|
82
|
+
::-webkit-outer-spin-button {
|
|
83
|
+
height: auto;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
[type='search'] {
|
|
87
|
+
-webkit-appearance: textfield;
|
|
88
|
+
outline-offset: -2px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
::-webkit-search-decoration {
|
|
92
|
+
-webkit-appearance: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
::-webkit-file-upload-button {
|
|
96
|
+
-webkit-appearance: button;
|
|
97
|
+
font: inherit;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
summary {
|
|
101
|
+
display: list-item;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
ul {
|
|
105
|
+
padding-left: 1rem;
|
|
106
|
+
}
|
package/scss/typography.scss
CHANGED
package/scss/variables.scss
CHANGED
|
@@ -3,12 +3,6 @@
|
|
|
3
3
|
@use './theme.scss';
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--white: #ffffff;
|
|
7
|
-
--black: #000000;
|
|
8
|
-
|
|
9
|
-
--font-color: #000000;
|
|
10
|
-
--body-bg-color: #f9f9f9;
|
|
11
|
-
|
|
12
6
|
@each $name, $value in map.get(theme.$theme, colors) {
|
|
13
7
|
--#{$name}-light: #{color.adjust($value, $lightness: 15%)};
|
|
14
8
|
--#{$name}: #{$value};
|
|
@@ -24,6 +18,12 @@
|
|
|
24
18
|
--gray-#{$name}: #{$value};
|
|
25
19
|
}
|
|
26
20
|
|
|
21
|
+
--white: #ffffff;
|
|
22
|
+
--black: #000000;
|
|
23
|
+
|
|
24
|
+
--font-color: var(--gray-10);
|
|
25
|
+
--body-bg-color: #f9f9f9;
|
|
26
|
+
|
|
27
27
|
--highlight: rgba(189, 189, 189, 0.1);
|
|
28
28
|
--border-radius: 6px;
|
|
29
29
|
|
|
@@ -31,9 +31,6 @@
|
|
|
31
31
|
--shadow-dark: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
|
|
32
32
|
--shadow-light: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.005);
|
|
33
33
|
|
|
34
|
-
--box-shadow: 0 0 0 0.2rem var(--primary-light);
|
|
35
|
-
--box-shadow-error: 0 0 0 0.2rem var(--error-light);
|
|
36
|
-
|
|
37
34
|
--focus-outline: 2px solid var(--primary-light);
|
|
38
35
|
--focus-outline-error: 2px solid var(--error-light);
|
|
39
36
|
--focus-offset: -2px;
|