@oscarpalmer/oui 0.11.0 → 0.12.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/dist/css/badge.css +5 -4
- package/dist/css/button.css +6 -4
- package/dist/css/color.css +25 -25
- package/dist/css/content.css +193 -0
- package/dist/css/form.css +128 -66
- package/dist/css/message.css +23 -16
- package/dist/css/reset.css +3 -1
- package/dist/css/table.css +26 -9
- package/package.json +4 -4
- package/src/css/badge.scss +7 -7
- package/src/css/button.scss +5 -3
- package/src/css/color.scss +25 -25
- package/src/css/content.scss +156 -0
- package/src/css/form.scss +124 -56
- package/src/css/message.scss +29 -21
- package/src/css/mixins.scss +25 -6
- package/src/css/reset.scss +3 -2
- package/src/css/table.scss +32 -7
package/src/css/mixins.scss
CHANGED
|
@@ -2,14 +2,17 @@
|
|
|
2
2
|
--oui-background-percentage: 25%;
|
|
3
3
|
--oui-foreground-percentage: 0%;
|
|
4
4
|
--oui-outline-percentage: 100%;
|
|
5
|
-
--oui-shadow-
|
|
5
|
+
--oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
|
|
6
|
+
--oui-shadow-percentage: 82.5%;
|
|
6
7
|
|
|
7
8
|
--oui-shadow-value: color-mix(
|
|
8
|
-
in
|
|
9
|
+
in oklab,
|
|
9
10
|
var(--oui-outline-value, var(--oui-gray-6)),
|
|
10
11
|
transparent var(--oui-shadow-percentage)
|
|
11
12
|
);
|
|
12
13
|
|
|
14
|
+
@include shadow(var(--oui-shadow-value), var(--oui-shadow-inset));
|
|
15
|
+
|
|
13
16
|
padding: 0.5em 0.75em;
|
|
14
17
|
display: inline-flex;
|
|
15
18
|
flex-flow: row wrap;
|
|
@@ -28,10 +31,6 @@
|
|
|
28
31
|
transparent var(--oui-outline-percentage)
|
|
29
32
|
);
|
|
30
33
|
border: none;
|
|
31
|
-
box-shadow:
|
|
32
|
-
0 0 0 1px var(--oui-shadow-value),
|
|
33
|
-
0 1px 2px 0 var(--oui-shadow-value),
|
|
34
|
-
0 2px 4px 0 var(--oui-shadow-value);
|
|
35
34
|
color: color-mix(
|
|
36
35
|
in oklab,
|
|
37
36
|
var(--oui-foreground-value, var(--oui-gray-8)),
|
|
@@ -41,6 +40,26 @@
|
|
|
41
40
|
transition: 0.125s ease-in-out;
|
|
42
41
|
}
|
|
43
42
|
|
|
43
|
+
@mixin card($backgroundColor: var(--oui-absolute), $boxShadowColor: color-mix(
|
|
44
|
+
in oklab,
|
|
45
|
+
var(--oui-gray-6),
|
|
46
|
+
transparent 92.5%
|
|
47
|
+
)) {
|
|
48
|
+
@include shadow($boxShadowColor);
|
|
49
|
+
|
|
50
|
+
padding: 1em 1.25em;
|
|
51
|
+
background-color: $backgroundColor;
|
|
52
|
+
border-radius: 0.5em;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@mixin shadow($color: rgba(0, 0, 0, 0.05), $inset: transparent) {
|
|
56
|
+
box-shadow:
|
|
57
|
+
inset 0 1px 0 0 $inset,
|
|
58
|
+
0 0 0 1px $color,
|
|
59
|
+
0 1px 2px -.5px $color,
|
|
60
|
+
0 2px 4px -1px $color,
|
|
61
|
+
}
|
|
62
|
+
|
|
44
63
|
@mixin visuallyHidden() {
|
|
45
64
|
width: 1px !important;
|
|
46
65
|
height: 1px !important;
|
package/src/css/reset.scss
CHANGED
|
@@ -178,8 +178,9 @@
|
|
|
178
178
|
:where(select, input[list]) {
|
|
179
179
|
appearance: none; // Change the inconsistent appearance in all browsers [SE]
|
|
180
180
|
padding-right: 1em; // ditto
|
|
181
|
-
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E")
|
|
182
|
-
|
|
181
|
+
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
|
|
182
|
+
background-position: right center / 1em; // ditto
|
|
183
|
+
background-repeat: no-repeat; // ditto
|
|
183
184
|
border-radius: 0; // ditto
|
|
184
185
|
}
|
|
185
186
|
|
package/src/css/table.scss
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
.oui-table {
|
|
4
4
|
:where(&) {
|
|
5
5
|
width: 100%;
|
|
6
|
+
background-color: var(--oui-absolute);
|
|
6
7
|
}
|
|
7
8
|
|
|
8
9
|
:where(&-wrapper) {
|
|
@@ -29,41 +30,65 @@
|
|
|
29
30
|
}
|
|
30
31
|
|
|
31
32
|
:where(& tbody tr:nth-of-type(2n)) {
|
|
32
|
-
background-color: color-mix(in oklab, var(--oui-blue-0), transparent
|
|
33
|
+
background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
:where(& th, & tfoot td) {
|
|
36
37
|
background-color: var(--oui-gray-1);
|
|
37
38
|
border: solid var(--oui-gray-3);
|
|
38
39
|
border-width: 0 1px 0 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
:where(& thead th, & tfoot td) {
|
|
39
43
|
position: sticky;
|
|
40
44
|
left: 0;
|
|
41
45
|
z-index: 1;
|
|
42
46
|
|
|
43
47
|
&::after {
|
|
44
48
|
content: '';
|
|
45
|
-
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 4px;
|
|
51
|
+
background-image: linear-gradient(
|
|
52
|
+
to var(--oui-shadow-direction),
|
|
53
|
+
rgba(0, 0, 0, 0.1),
|
|
54
|
+
transparent
|
|
55
|
+
);
|
|
46
56
|
position: absolute;
|
|
47
57
|
}
|
|
48
58
|
}
|
|
49
59
|
|
|
50
60
|
:where(& th, & td) {
|
|
51
|
-
padding: .5em;
|
|
61
|
+
padding: .5em .625rem;
|
|
52
62
|
}
|
|
53
63
|
|
|
54
|
-
:where(& th) {
|
|
55
|
-
|
|
64
|
+
:where(& thead th) {
|
|
65
|
+
font-size: .75rem;
|
|
66
|
+
font-weight: bold;
|
|
67
|
+
letter-spacing: .1em;
|
|
68
|
+
text-align: left;
|
|
69
|
+
text-transform: uppercase;
|
|
70
|
+
top: 0;
|
|
56
71
|
|
|
57
72
|
&::after {
|
|
58
|
-
|
|
73
|
+
--oui-shadow-direction: bottom;
|
|
74
|
+
|
|
75
|
+
border-top: 1px solid var(--oui-gray-3);
|
|
76
|
+
inset: 100% 0 0 0;
|
|
59
77
|
}
|
|
60
78
|
}
|
|
61
79
|
|
|
80
|
+
:where(&:has(caption) thead th) {
|
|
81
|
+
top: 2rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
62
84
|
:where(& tfoot td) {
|
|
63
85
|
bottom: 0;
|
|
64
86
|
|
|
65
87
|
&::after {
|
|
66
|
-
|
|
88
|
+
--oui-shadow-direction: top;
|
|
89
|
+
|
|
90
|
+
border-bottom: 1px solid var(--oui-gray-3);
|
|
91
|
+
inset: -4px 0 0 0;
|
|
67
92
|
}
|
|
68
93
|
}
|
|
69
94
|
|