@coopdigital/styles 0.7.0 → 0.8.1
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/README.md +5 -3
- package/dist/components/AlertBanner.css +1 -32
- package/dist/components/Button.css +1 -121
- package/dist/components/EditorialCard.css +1 -69
- package/dist/components/Pill.css +1 -73
- package/dist/components/SkipNav.css +1 -40
- package/dist/keyframes/spinner.css +1 -8
- package/dist/main.css +1 -489
- package/dist/reset.css +1 -94
- package/dist/typography.css +1 -221
- package/dist/vars-legacy.css +1 -391
- package/dist/vars.css +1 -172
- package/package.json +8 -3
- package/src/reset.scss +0 -2
package/README.md
CHANGED
|
@@ -30,15 +30,17 @@ npm install @coopdigital/styles
|
|
|
30
30
|
|
|
31
31
|
Import the main stylesheet and any corresponding component styles you need:
|
|
32
32
|
```
|
|
33
|
-
import "@coopdigital/styles/
|
|
34
|
-
import "@coopdigital/styles/
|
|
33
|
+
import "@coopdigital/styles/main.css"
|
|
34
|
+
import "@coopdigital/styles/components/Pill.css"
|
|
35
35
|
```
|
|
36
|
+
All CSS files have been processed to include vendor prefixes for supported browsers and have been minified.
|
|
36
37
|
|
|
37
|
-
Alternatively if your project uses SASS you can import the source stylesheets using either the
|
|
38
|
+
Alternatively if your project uses SASS you can import the source stylesheets using either the `@use` or `@import` format:
|
|
38
39
|
```
|
|
39
40
|
@use "@coopdigital/styles/src/main.scss"
|
|
40
41
|
@use "@coopdigital/styles/src/components/Pill.scss"
|
|
41
42
|
```
|
|
43
|
+
Projects that use SASS files directly are responsible for their own processing.
|
|
42
44
|
|
|
43
45
|
This package can be used alongside our [react components package](https://www.npmjs.com/package/@coopdigital/react).
|
|
44
46
|
|
|
@@ -1,32 +1 @@
|
|
|
1
|
-
.coop-alert-banner {
|
|
2
|
-
--bg-color: var(--color-orange-alert-light);
|
|
3
|
-
--text-color: var(--color-text);
|
|
4
|
-
--border-left: solid 0.25rem var(--color-orange-alert);
|
|
5
|
-
padding: var(--spacing-16) 0;
|
|
6
|
-
}
|
|
7
|
-
.coop-alert-banner[data-variant=black] {
|
|
8
|
-
--bg-color: var(--color-black);
|
|
9
|
-
--text-color: var(--color-white);
|
|
10
|
-
--border-left: 0;
|
|
11
|
-
}
|
|
12
|
-
.coop-alert-banner--inner {
|
|
13
|
-
padding: var(--spacing-16);
|
|
14
|
-
border-left: var(--border-left);
|
|
15
|
-
color: var(--text-color);
|
|
16
|
-
background-color: var(--bg-color);
|
|
17
|
-
}
|
|
18
|
-
.coop-alert-banner--inner h2,
|
|
19
|
-
.coop-alert-banner--inner p {
|
|
20
|
-
margin: 0 0 var(--spacing-8) 0;
|
|
21
|
-
}
|
|
22
|
-
.coop-alert-banner--inner a {
|
|
23
|
-
color: var(--text-color);
|
|
24
|
-
}
|
|
25
|
-
.coop-alert-banner--inner a:hover {
|
|
26
|
-
color: inherit;
|
|
27
|
-
text-decoration: none;
|
|
28
|
-
}
|
|
29
|
-
.coop-alert-banner--inner h2 {
|
|
30
|
-
font-size: var(--type-size-22);
|
|
31
|
-
font-weight: 500;
|
|
32
|
-
}
|
|
1
|
+
.coop-alert-banner{--bg-color:var(--color-orange-alert-light);--text-color:var(--color-text);--border-left:solid .25rem var(--color-orange-alert);padding:var(--spacing-16)0}.coop-alert-banner[data-variant=black]{--bg-color:var(--color-black);--text-color:var(--color-white);--border-left:0}.coop-alert-banner--inner{padding:var(--spacing-16);border-left:var(--border-left);color:var(--text-color);background-color:var(--bg-color)}.coop-alert-banner--inner h2,.coop-alert-banner--inner p{margin:0 0 var(--spacing-8)0}.coop-alert-banner--inner a{color:var(--text-color)}.coop-alert-banner--inner a:hover{color:inherit;text-decoration:none}.coop-alert-banner--inner h2{font-size:var(--type-size-22);font-weight:500}
|
|
@@ -1,121 +1 @@
|
|
|
1
|
-
@keyframes spin {
|
|
2
|
-
0% {
|
|
3
|
-
transform: rotate(0deg);
|
|
4
|
-
}
|
|
5
|
-
100% {
|
|
6
|
-
transform: rotate(360deg);
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
.coop-button {
|
|
10
|
-
--bg-color: var(--color-button-blue);
|
|
11
|
-
--text-color: var(--color-white);
|
|
12
|
-
--padding-x: var(--spacing-20);
|
|
13
|
-
--padding-y: var(--spacing-12);
|
|
14
|
-
--type-size: var(--type-size-16);
|
|
15
|
-
cursor: pointer;
|
|
16
|
-
display: inline-flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
justify-content: center;
|
|
19
|
-
margin-bottom: var(--spacing-8);
|
|
20
|
-
padding: var(--padding-y) var(--padding-x);
|
|
21
|
-
border: 0;
|
|
22
|
-
border-radius: var(--ui-border-radius-m);
|
|
23
|
-
font-size: var(--type-size);
|
|
24
|
-
font-weight: 500;
|
|
25
|
-
line-height: var(--type-line-height-default);
|
|
26
|
-
color: var(--text-color);
|
|
27
|
-
text-align: center;
|
|
28
|
-
text-decoration: underline;
|
|
29
|
-
text-decoration-color: transparent;
|
|
30
|
-
text-underline-offset: 3px;
|
|
31
|
-
background: var(--bg-color);
|
|
32
|
-
outline: none;
|
|
33
|
-
transition: 0.15s ease-in-out;
|
|
34
|
-
transition-property: background-color, color, text-decoration-color;
|
|
35
|
-
/* SIZES */
|
|
36
|
-
/* FULL WIDTH */
|
|
37
|
-
/* GROUP RULES */
|
|
38
|
-
/* LOADING */
|
|
39
|
-
/* MEDIA QUERIES */
|
|
40
|
-
/* VARIANTS */
|
|
41
|
-
}
|
|
42
|
-
.coop-button[data-size=sm] {
|
|
43
|
-
--padding-y: var(--spacing-8);
|
|
44
|
-
--padding-x: var(--spacing-24);
|
|
45
|
-
}
|
|
46
|
-
.coop-button[data-size=lg] {
|
|
47
|
-
--type-size: var(--type-size-18);
|
|
48
|
-
}
|
|
49
|
-
.coop-button[data-size=xl] {
|
|
50
|
-
--type-size: var(--type-size-20);
|
|
51
|
-
}
|
|
52
|
-
.coop-button:not([data-loading]):focus, .coop-button:not([data-loading]):hover {
|
|
53
|
-
--bg-color: var(--color-button-blue-hover);
|
|
54
|
-
text-decoration-color: var(--text-color);
|
|
55
|
-
}
|
|
56
|
-
.coop-button:not([data-loading]):focus {
|
|
57
|
-
outline: 2px solid var(--color-focus-ring);
|
|
58
|
-
outline-offset: 3px;
|
|
59
|
-
transition: none;
|
|
60
|
-
}
|
|
61
|
-
.coop-button:not([data-loading]):active {
|
|
62
|
-
--bg-color: var(--color-button-blue-active);
|
|
63
|
-
}
|
|
64
|
-
.coop-button[data-width=full] {
|
|
65
|
-
width: 100%;
|
|
66
|
-
}
|
|
67
|
-
.coop-button[data-loading] {
|
|
68
|
-
cursor: auto;
|
|
69
|
-
position: relative;
|
|
70
|
-
}
|
|
71
|
-
.coop-button[data-loading]::after {
|
|
72
|
-
content: "";
|
|
73
|
-
display: inline-block;
|
|
74
|
-
width: var(--spacing-20);
|
|
75
|
-
height: var(--spacing-20);
|
|
76
|
-
margin-left: var(--spacing-10);
|
|
77
|
-
border: 2px solid;
|
|
78
|
-
border-right-color: transparent !important;
|
|
79
|
-
border-radius: 50%;
|
|
80
|
-
animation: spin 1.25s linear infinite;
|
|
81
|
-
}
|
|
82
|
-
@media (min-width: 48em) {
|
|
83
|
-
.coop-button[data-loading]::after {
|
|
84
|
-
right: var(--spacing-32);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
@media (min-width: 48em) {
|
|
88
|
-
.coop-button {
|
|
89
|
-
--padding-x: var(--spacing-40);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
.coop-button[data-variant=primary] {
|
|
93
|
-
--bg-color: var(--color-button-primary);
|
|
94
|
-
--text-color: var(--color-white);
|
|
95
|
-
}
|
|
96
|
-
.coop-button[data-variant=primary]:not([data-loading]):focus, .coop-button[data-variant=primary]:not([data-loading]):hover {
|
|
97
|
-
--bg-color: var(--color-button-primary-hover);
|
|
98
|
-
}
|
|
99
|
-
.coop-button[data-variant=primary]:not([data-loading]):active {
|
|
100
|
-
--bg-color: var(--color-button-primary-active);
|
|
101
|
-
}
|
|
102
|
-
.coop-button[data-variant=white] {
|
|
103
|
-
--bg-color: var(--color-white);
|
|
104
|
-
--text-color: var(--color-black);
|
|
105
|
-
}
|
|
106
|
-
.coop-button[data-variant=white]:not([data-loading]):focus, .coop-button[data-variant=white]:not([data-loading]):hover {
|
|
107
|
-
--bg-color: var(--color-button-white-hover);
|
|
108
|
-
}
|
|
109
|
-
.coop-button[data-variant=white]:not([data-loading]):active {
|
|
110
|
-
--bg-color: var(--color-button-white-active);
|
|
111
|
-
}
|
|
112
|
-
.coop-button[data-variant=grey] {
|
|
113
|
-
--bg-color: var(--color-button-grey);
|
|
114
|
-
--text-color: var(--color-black);
|
|
115
|
-
}
|
|
116
|
-
.coop-button[data-variant=grey]:not([data-loading]):focus, .coop-button[data-variant=grey]:not([data-loading]):hover {
|
|
117
|
-
--bg-color: var(--color-button-grey-hover);
|
|
118
|
-
}
|
|
119
|
-
.coop-button[data-variant=grey]:not([data-loading]):active {
|
|
120
|
-
--bg-color: var(--color-button-grey-active);
|
|
121
|
-
}
|
|
1
|
+
@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.coop-button{--bg-color:var(--color-button-blue);--text-color:var(--color-white);--padding-x:var(--spacing-20);--padding-y:var(--spacing-12);--type-size:var(--type-size-16);cursor:pointer;margin-bottom:var(--spacing-8);padding:var(--padding-y)var(--padding-x);border-radius:var(--ui-border-radius-m);font-size:var(--type-size);font-weight:500;line-height:var(--type-line-height-default);color:var(--text-color);text-align:center;text-underline-offset:3px;background:var(--bg-color);border:0;outline:none;justify-content:center;align-items:center;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:background-color .15s ease-in-out,color .15s ease-in-out,text-decoration-color .15s ease-in-out;display:inline-flex}.coop-button[data-size=sm]{--padding-y:var(--spacing-8);--padding-x:var(--spacing-24)}.coop-button[data-size=lg]{--type-size:var(--type-size-18)}.coop-button[data-size=xl]{--type-size:var(--type-size-20)}.coop-button:not([data-loading]):focus,.coop-button:not([data-loading]):hover{--bg-color:var(--color-button-blue-hover);-webkit-text-decoration-color:var(--text-color);text-decoration-color:var(--text-color)}.coop-button:not([data-loading]):focus{outline:2px solid var(--color-focus-ring);outline-offset:3px;transition:none}.coop-button:not([data-loading]):active{--bg-color:var(--color-button-blue-active)}.coop-button[data-width=full]{width:100%}.coop-button[data-loading]{cursor:auto;position:relative}.coop-button[data-loading]:after{content:"";width:var(--spacing-20);height:var(--spacing-20);margin-left:var(--spacing-10);border:2px solid;border-radius:50%;animation:1.25s linear infinite spin;display:inline-block;border-right-color:#0000!important}@media (width>=48em){.coop-button[data-loading]:after{right:var(--spacing-32)}.coop-button{--padding-x:var(--spacing-40)}}.coop-button[data-variant=primary]{--bg-color:var(--color-button-primary);--text-color:var(--color-white)}.coop-button[data-variant=primary]:not([data-loading]):focus,.coop-button[data-variant=primary]:not([data-loading]):hover{--bg-color:var(--color-button-primary-hover)}.coop-button[data-variant=primary]:not([data-loading]):active{--bg-color:var(--color-button-primary-active)}.coop-button[data-variant=white]{--bg-color:var(--color-white);--text-color:var(--color-black)}.coop-button[data-variant=white]:not([data-loading]):focus,.coop-button[data-variant=white]:not([data-loading]):hover{--bg-color:var(--color-button-white-hover)}.coop-button[data-variant=white]:not([data-loading]):active{--bg-color:var(--color-button-white-active)}.coop-button[data-variant=grey]{--bg-color:var(--color-button-grey);--text-color:var(--color-black)}.coop-button[data-variant=grey]:not([data-loading]):focus,.coop-button[data-variant=grey]:not([data-loading]):hover{--bg-color:var(--color-button-grey-hover)}.coop-button[data-variant=grey]:not([data-loading]):active{--bg-color:var(--color-button-grey-active)}
|
|
@@ -1,69 +1 @@
|
|
|
1
|
-
.coop-editorial-card {
|
|
2
|
-
--flex-direction: column;
|
|
3
|
-
--image-max-width: 100%;
|
|
4
|
-
--image-border-radius: var(--ui-border-radius-m) var(--ui-border-radius-m) 0 0;
|
|
5
|
-
display: flex;
|
|
6
|
-
position: relative;
|
|
7
|
-
flex-direction: var(--flex-direction);
|
|
8
|
-
border-radius: var(--ui-border-radius-m);
|
|
9
|
-
box-shadow: var(--ui-shadow);
|
|
10
|
-
transition: box-shadow var(--ui-transition-hover);
|
|
11
|
-
}
|
|
12
|
-
@media (min-width: 48em) {
|
|
13
|
-
.coop-editorial-card[data-layout=horizontal] {
|
|
14
|
-
--flex-direction: row;
|
|
15
|
-
--image-max-width: calc(100% / 3);
|
|
16
|
-
--image-border-radius: var(--ui-border-radius-m) 0 0 var(--ui-border-radius-m);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
.coop-editorial-card:hover, .coop-editorial-card:focus {
|
|
20
|
-
box-shadow: var(--ui-shadow-hover);
|
|
21
|
-
}
|
|
22
|
-
.coop-editorial-card h2,
|
|
23
|
-
.coop-editorial-card h3,
|
|
24
|
-
.coop-editorial-card h4,
|
|
25
|
-
.coop-editorial-card h5,
|
|
26
|
-
.coop-editorial-card h6 {
|
|
27
|
-
margin: 0;
|
|
28
|
-
font-size: var(--type-size-20);
|
|
29
|
-
font-weight: var(--type-weight-demibold);
|
|
30
|
-
}
|
|
31
|
-
.coop-editorial-card picture {
|
|
32
|
-
overflow: hidden;
|
|
33
|
-
max-width: var(--image-max-width);
|
|
34
|
-
margin: 0;
|
|
35
|
-
border-radius: var(--image-border-radius);
|
|
36
|
-
}
|
|
37
|
-
.coop-editorial-card img {
|
|
38
|
-
width: 100%;
|
|
39
|
-
height: 100%;
|
|
40
|
-
}
|
|
41
|
-
.coop-editorial-card p {
|
|
42
|
-
margin: 0;
|
|
43
|
-
}
|
|
44
|
-
.coop-editorial-card a {
|
|
45
|
-
color: inherit;
|
|
46
|
-
text-decoration: none;
|
|
47
|
-
outline: 0;
|
|
48
|
-
}
|
|
49
|
-
.coop-editorial-card a::before {
|
|
50
|
-
content: "";
|
|
51
|
-
position: absolute;
|
|
52
|
-
inset: 0 0 0 0;
|
|
53
|
-
border-radius: var(--ui-border-radius-m);
|
|
54
|
-
}
|
|
55
|
-
.coop-editorial-card a:focus-within::before {
|
|
56
|
-
outline: 2px solid var(--color-focus-ring);
|
|
57
|
-
outline-offset: 3px;
|
|
58
|
-
}
|
|
59
|
-
.coop-editorial-card a:hover h3, .coop-editorial-card a:focus h3 {
|
|
60
|
-
text-decoration: underline;
|
|
61
|
-
}
|
|
62
|
-
.coop-editorial-card--content {
|
|
63
|
-
display: flex;
|
|
64
|
-
flex-direction: column;
|
|
65
|
-
gap: var(--spacing-12);
|
|
66
|
-
padding: var(--spacing-20);
|
|
67
|
-
border-radius: var(--ui-border-radius-m);
|
|
68
|
-
background: var(--color-white);
|
|
69
|
-
}
|
|
1
|
+
.coop-editorial-card{--flex-direction:column;--image-max-width:100%;--image-border-radius:var(--ui-border-radius-m)var(--ui-border-radius-m)0 0;flex-direction:var(--flex-direction);border-radius:var(--ui-border-radius-m);box-shadow:var(--ui-shadow);transition:box-shadow var(--ui-transition-hover);display:flex;position:relative}@media (width>=48em){.coop-editorial-card[data-layout=horizontal]{--flex-direction:row;--image-max-width:calc(100%/3);--image-border-radius:var(--ui-border-radius-m)0 0 var(--ui-border-radius-m)}}.coop-editorial-card:hover,.coop-editorial-card:focus{box-shadow:var(--ui-shadow-hover)}.coop-editorial-card h2,.coop-editorial-card h3,.coop-editorial-card h4,.coop-editorial-card h5,.coop-editorial-card h6{font-size:var(--type-size-20);font-weight:var(--type-weight-demibold);margin:0}.coop-editorial-card picture{max-width:var(--image-max-width);border-radius:var(--image-border-radius);margin:0;overflow:hidden}.coop-editorial-card img{width:100%;height:100%}.coop-editorial-card p{margin:0}.coop-editorial-card a{color:inherit;outline:0;text-decoration:none}.coop-editorial-card a:before{content:"";border-radius:var(--ui-border-radius-m);position:absolute;inset:0}.coop-editorial-card a:focus-within:before{outline:2px solid var(--color-focus-ring);outline-offset:3px}.coop-editorial-card a:hover h3,.coop-editorial-card a:focus h3{text-decoration:underline}.coop-editorial-card--content{gap:var(--spacing-12);padding:var(--spacing-20);border-radius:var(--ui-border-radius-m);background:var(--color-white);flex-direction:column;display:flex}
|
package/dist/components/Pill.css
CHANGED
|
@@ -1,73 +1 @@
|
|
|
1
|
-
.coop-pill
|
|
2
|
-
--type-size-badge: var(--type-size-10);
|
|
3
|
-
--type-size-pill: var(--type-size-16);
|
|
4
|
-
display: inline-block;
|
|
5
|
-
padding: var(--spacing-12) var(--spacing-20);
|
|
6
|
-
border-radius: var(--ui-border-radius-xl);
|
|
7
|
-
font-size: var(--type-size-pill);
|
|
8
|
-
line-height: var(--type-line-height-default);
|
|
9
|
-
color: var(--color-text);
|
|
10
|
-
text-decoration: none;
|
|
11
|
-
background-color: var(--color-blue-light-10);
|
|
12
|
-
/* GROUP RULES */
|
|
13
|
-
}
|
|
14
|
-
.coop-pill[data-badge] {
|
|
15
|
-
position: relative;
|
|
16
|
-
}
|
|
17
|
-
.coop-pill[data-badge]::after {
|
|
18
|
-
content: attr(data-badge);
|
|
19
|
-
position: absolute;
|
|
20
|
-
top: 0;
|
|
21
|
-
right: var(--spacing-12);
|
|
22
|
-
transform: translateY(-50%);
|
|
23
|
-
padding: var(--spacing-2) var(--spacing-6);
|
|
24
|
-
border-radius: var(--ui-border-radius-m);
|
|
25
|
-
font-size: var(--type-size-badge);
|
|
26
|
-
font-weight: 600;
|
|
27
|
-
line-height: var(--type-line-height);
|
|
28
|
-
color: var(--color-white);
|
|
29
|
-
text-transform: uppercase;
|
|
30
|
-
}
|
|
31
|
-
.coop-pill[data-size=sm] {
|
|
32
|
-
--type-size-pill: var(--type-size-14);
|
|
33
|
-
}
|
|
34
|
-
.coop-pill[data-size=lg] {
|
|
35
|
-
--type-size-pill: var(--type-size-18);
|
|
36
|
-
--type-size-badge: var(--type-size-12);
|
|
37
|
-
}
|
|
38
|
-
.coop-pill[data-size=xl] {
|
|
39
|
-
--type-size-pill: var(--type-size-20);
|
|
40
|
-
--type-size-badge: var(--type-size-12);
|
|
41
|
-
padding: var(--spacing-14) var(--spacing-24);
|
|
42
|
-
}
|
|
43
|
-
.coop-pill[data-badge-color=green]::after {
|
|
44
|
-
background-color: var(--color-dark-green);
|
|
45
|
-
}
|
|
46
|
-
.coop-pill[data-badge-color=orange]::after {
|
|
47
|
-
background-color: var(--color-dark-orange);
|
|
48
|
-
}
|
|
49
|
-
.coop-pill[data-badge-color=pink]::after {
|
|
50
|
-
background-color: var(--color-dark-pink);
|
|
51
|
-
}
|
|
52
|
-
.coop-pill[data-badge-color=red]::after {
|
|
53
|
-
background-color: var(--color-red-dark-4);
|
|
54
|
-
}
|
|
55
|
-
.coop-pill[data-pill-color=blue] {
|
|
56
|
-
background-color: var(--color-blue-light-10);
|
|
57
|
-
}
|
|
58
|
-
.coop-pill[data-pill-color=pink] {
|
|
59
|
-
background-color: var(--color-alt-light-pink);
|
|
60
|
-
}
|
|
61
|
-
.coop-pill + .coop-pill {
|
|
62
|
-
margin-bottom: var(--spacing-16);
|
|
63
|
-
margin-left: var(--spacing-16);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
a.coop-pill:focus, a.coop-pill:hover {
|
|
67
|
-
color: var(--color-text);
|
|
68
|
-
text-decoration: underline;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.coop-pill-group {
|
|
72
|
-
margin-bottom: var(--spacing-16);
|
|
73
|
-
}
|
|
1
|
+
.coop-pill{--type-size-badge:var(--type-size-10);--type-size-pill:var(--type-size-16);padding:var(--spacing-12)var(--spacing-20);border-radius:var(--ui-border-radius-xl);font-size:var(--type-size-pill);line-height:var(--type-line-height-default);color:var(--color-text);background-color:var(--color-blue-light-10);text-decoration:none;display:inline-block}.coop-pill[data-badge]{position:relative}.coop-pill[data-badge]:after{content:attr(data-badge);top:0;right:var(--spacing-12);padding:var(--spacing-2)var(--spacing-6);border-radius:var(--ui-border-radius-m);font-size:var(--type-size-badge);font-weight:600;line-height:var(--type-line-height);color:var(--color-white);text-transform:uppercase;position:absolute;transform:translateY(-50%)}.coop-pill[data-size=sm]{--type-size-pill:var(--type-size-14)}.coop-pill[data-size=lg]{--type-size-pill:var(--type-size-18);--type-size-badge:var(--type-size-12)}.coop-pill[data-size=xl]{--type-size-pill:var(--type-size-20);--type-size-badge:var(--type-size-12);padding:var(--spacing-14)var(--spacing-24)}.coop-pill[data-badge-color=green]:after{background-color:var(--color-dark-green)}.coop-pill[data-badge-color=orange]:after{background-color:var(--color-dark-orange)}.coop-pill[data-badge-color=pink]:after{background-color:var(--color-dark-pink)}.coop-pill[data-badge-color=red]:after{background-color:var(--color-red-dark-4)}.coop-pill[data-pill-color=blue]{background-color:var(--color-blue-light-10)}.coop-pill[data-pill-color=pink]{background-color:var(--color-alt-light-pink)}.coop-pill+.coop-pill{margin-bottom:var(--spacing-16);margin-left:var(--spacing-16)}a.coop-pill:focus,a.coop-pill:hover{color:var(--color-text);text-decoration:underline}.coop-pill-group{margin-bottom:var(--spacing-16)}
|
|
@@ -1,40 +1 @@
|
|
|
1
|
-
.coop-skip-nav {
|
|
2
|
-
--offscreen-position: -9999px;
|
|
3
|
-
position: absolute;
|
|
4
|
-
z-index: 999;
|
|
5
|
-
top: 0;
|
|
6
|
-
left: 0;
|
|
7
|
-
}
|
|
8
|
-
.coop-skip-nav ul {
|
|
9
|
-
margin: 0;
|
|
10
|
-
list-style: none;
|
|
11
|
-
}
|
|
12
|
-
.coop-skip-nav a {
|
|
13
|
-
position: absolute;
|
|
14
|
-
top: 0;
|
|
15
|
-
left: var(--offscreen-position);
|
|
16
|
-
padding: var(--spacing-16);
|
|
17
|
-
border-bottom-right-radius: var(--ui-border-radius);
|
|
18
|
-
border-bottom-left-radius: var(--ui-border-radius);
|
|
19
|
-
font-size: var(--type-size-18);
|
|
20
|
-
color: var(--color-black);
|
|
21
|
-
white-space: nowrap;
|
|
22
|
-
background: var(--color-yellow-mid-5);
|
|
23
|
-
}
|
|
24
|
-
.coop-skip-nav a:hover {
|
|
25
|
-
color: var(--color-black);
|
|
26
|
-
}
|
|
27
|
-
.coop-skip-nav a:focus, .coop-skip-nav a:active {
|
|
28
|
-
left: var(--spacing-16);
|
|
29
|
-
}
|
|
30
|
-
.coop-skip-nav a[data-visible=true] {
|
|
31
|
-
left: var(--spacing-16);
|
|
32
|
-
}
|
|
33
|
-
.coop-skip-nav a:focus:not(:focus-visible) {
|
|
34
|
-
left: var(--offscreen-position);
|
|
35
|
-
}
|
|
36
|
-
@media (--mq-medium) {
|
|
37
|
-
.coop-skip-nav a {
|
|
38
|
-
font-size: var(--type-size-20);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
1
|
+
.coop-skip-nav{--offscreen-position:-9999px;z-index:999;position:absolute;top:0;left:0}.coop-skip-nav ul{margin:0;list-style:none}.coop-skip-nav a{top:0;left:var(--offscreen-position);padding:var(--spacing-16);border-bottom-right-radius:var(--ui-border-radius);border-bottom-left-radius:var(--ui-border-radius);font-size:var(--type-size-18);color:var(--color-black);white-space:nowrap;background:var(--color-yellow-mid-5);position:absolute}.coop-skip-nav a:hover{color:var(--color-black)}.coop-skip-nav a:focus,.coop-skip-nav a:active,.coop-skip-nav a[data-visible=true]{left:var(--spacing-16)}.coop-skip-nav a:focus:not(:focus-visible){left:var(--offscreen-position)}@media (--mq-medium){.coop-skip-nav a{font-size:var(--type-size-20)}}
|