@coopdigital/styles 0.5.3 → 0.5.5
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 +9 -4
- package/dist/components/SkipNav.css +40 -0
- package/dist/main.css +1 -0
- package/dist/vars.css +1 -0
- package/package.json +2 -2
- package/src/components/SkipNav.scss +47 -0
- package/src/vars/_colours.scss +1 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
# Experience Kit for Styles
|
|
8
8
|
|
|
9
9
|
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
|
10
|
-
[all_contributors_badge]: https://img.shields.io/badge/all_contributors-
|
|
10
|
+
[all_contributors_badge]: https://img.shields.io/badge/all_contributors-16-C08A00.svg ''
|
|
11
11
|
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
12
12
|
|
|
13
13
|
<a href="https://www.npmjs.com/package/@coopdigital/styles"><img src="https://img.shields.io/npm/v/%40coopdigital%2Fstyles?color=E85A00" alt="npm version" /></a>
|
|
@@ -90,7 +90,7 @@ Thanks goes to these wonderful people:
|
|
|
90
90
|
</tr><br />
|
|
91
91
|
<tr>
|
|
92
92
|
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
|
|
93
|
-
<div><img src="https://
|
|
93
|
+
<div><img src="https://gitlab.com/uploads/-/system/user/avatar/23337489/avatar.png" width="200px;" alt=""/></div>
|
|
94
94
|
<small>Kamini Pagare</small>
|
|
95
95
|
<div><a href="#a11y-kamini.pagare" title="Accessibility">️️️️♿️</a> <a href="#code-kamini.pagare" title="Code">💻</a> <a href="#doc-kamini.pagare" title="Documentation">📖</a> <a href="#test-kamini.pagare" title="Tests">⚠️</a></div>
|
|
96
96
|
</a></td>
|
|
@@ -113,19 +113,24 @@ Thanks goes to these wonderful people:
|
|
|
113
113
|
<div><img src="https://secure.gravatar.com/avatar/faf90b70d749cf9460eb603fa1700add94fd7d3a32645b4be6fa12eb45c4ffa3?s=80&d=identicon" width="200px;" alt=""/></div>
|
|
114
114
|
<small>Omid Kashan</small>
|
|
115
115
|
<div><a href="#a11y-omid.kashan" title="Accessibility">️️️️♿️</a> <a href="#code-omid.kashan" title="Code">💻</a> <a href="#doc-omid.kashan" title="Documentation">📖</a> <a href="#test-omid.kashan" title="Tests">⚠️</a></div>
|
|
116
|
+
</a></td>
|
|
117
|
+
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/romain.chen">
|
|
118
|
+
<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
|
|
119
|
+
<small>Romain Chen</small>
|
|
120
|
+
<div><a href="#design-romain.chen" title="Design">🎨</a></div>
|
|
116
121
|
</a></td>
|
|
117
122
|
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/sam.harden">
|
|
118
123
|
<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U03NT7D39L6-2fc82e7f7c6e-150" width="200px;" alt=""/></div>
|
|
119
124
|
<small>Sam Harden</small>
|
|
120
125
|
<div><a href="#a11y-sam.harden" title="Accessibility">️️️️♿️</a> <a href="#code-sam.harden" title="Code">💻</a> <a href="#doc-sam.harden" title="Documentation">📖</a> <a href="#test-sam.harden" title="Tests">⚠️</a></div>
|
|
121
126
|
</a></td>
|
|
127
|
+
</tr><br />
|
|
128
|
+
<tr>
|
|
122
129
|
<td align="center" valign="top" width="14.28%"><a href="">
|
|
123
130
|
<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
|
|
124
131
|
<small>Shweta Jaju</small>
|
|
125
132
|
<div><a href="#userTesting-shweta.jaju" title="User Testing">📓</a></div>
|
|
126
133
|
</a></td>
|
|
127
|
-
</tr><br />
|
|
128
|
-
<tr>
|
|
129
134
|
<td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/theodore.kouzelis">
|
|
130
135
|
<div><img src="https://secure.gravatar.com/avatar/3988f940029d9053174ac68e7f5bfa8fd61f184872d46281f44e2e698711d37d?s=80&d=identicon" width="200px;" alt=""/></div>
|
|
131
136
|
<small>Theo Kouzelis</small>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
.coop-skip-nav {
|
|
2
|
+
--offscreen-position: -9999px;
|
|
3
|
+
position: absolute;
|
|
4
|
+
top: 0;
|
|
5
|
+
left: 0;
|
|
6
|
+
z-index: 999;
|
|
7
|
+
}
|
|
8
|
+
.coop-skip-nav ul {
|
|
9
|
+
list-style: none;
|
|
10
|
+
margin: 0;
|
|
11
|
+
}
|
|
12
|
+
.coop-skip-nav a {
|
|
13
|
+
position: absolute;
|
|
14
|
+
left: var(--offscreen-position);
|
|
15
|
+
top: 0;
|
|
16
|
+
font-size: var(--type-size-18);
|
|
17
|
+
padding: var(--spacing-16);
|
|
18
|
+
color: var(--color-black);
|
|
19
|
+
background: var(--color-yellow-mid-5);
|
|
20
|
+
border-bottom-right-radius: var(--ui-border-radius);
|
|
21
|
+
border-bottom-left-radius: var(--ui-border-radius);
|
|
22
|
+
white-space: nowrap;
|
|
23
|
+
}
|
|
24
|
+
@media (--mq-medium) {
|
|
25
|
+
.coop-skip-nav a {
|
|
26
|
+
font-size: var(--type-size-20);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
.coop-skip-nav a:hover {
|
|
30
|
+
color: var(--color-black);
|
|
31
|
+
}
|
|
32
|
+
.coop-skip-nav a:focus, .coop-skip-nav a:active {
|
|
33
|
+
left: var(--spacing-16);
|
|
34
|
+
}
|
|
35
|
+
.coop-skip-nav a[data-visible=true] {
|
|
36
|
+
left: var(--spacing-16);
|
|
37
|
+
}
|
|
38
|
+
.coop-skip-nav a:focus:not(:focus-visible) {
|
|
39
|
+
left: var(--offscreen-position);
|
|
40
|
+
}
|
package/dist/main.css
CHANGED
package/dist/vars.css
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coopdigital/styles",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.5.
|
|
4
|
+
"version": "0.5.5",
|
|
5
5
|
"private": false,
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -31,5 +31,5 @@
|
|
|
31
31
|
"glob": "^11.0.1",
|
|
32
32
|
"sass-embedded": "^1.85.0"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "f292a4bba122b73db52ff17fa53eb90e7420c651"
|
|
35
35
|
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
.coop-skip-nav {
|
|
2
|
+
--offscreen-position: -9999px;
|
|
3
|
+
|
|
4
|
+
position: absolute;
|
|
5
|
+
top: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
z-index: 999;
|
|
8
|
+
|
|
9
|
+
ul {
|
|
10
|
+
list-style: none;
|
|
11
|
+
margin: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
a {
|
|
15
|
+
position: absolute;
|
|
16
|
+
left: var(--offscreen-position);
|
|
17
|
+
top: 0;
|
|
18
|
+
font-size: var(--type-size-18);
|
|
19
|
+
padding: var(--spacing-16);
|
|
20
|
+
color: var(--color-black);
|
|
21
|
+
background: var(--color-yellow-mid-5);
|
|
22
|
+
border-bottom-right-radius: var(--ui-border-radius);
|
|
23
|
+
border-bottom-left-radius: var(--ui-border-radius);
|
|
24
|
+
white-space: nowrap;
|
|
25
|
+
|
|
26
|
+
@media (--mq-medium) {
|
|
27
|
+
font-size: var(--type-size-20);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:hover {
|
|
31
|
+
color: var(--color-black);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:focus,
|
|
35
|
+
&:active {
|
|
36
|
+
left: var(--spacing-16);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&[data-visible="true"] {
|
|
40
|
+
left: var(--spacing-16);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:focus:not(:focus-visible) {
|
|
44
|
+
left: var(--offscreen-position);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
package/src/vars/_colours.scss
CHANGED
|
@@ -65,10 +65,10 @@
|
|
|
65
65
|
/* Shades in use */
|
|
66
66
|
--color-green-light-6: #b9e277;
|
|
67
67
|
--color-red-dark-4: #ba2327;
|
|
68
|
+
--color-yellow-mid-5: #ffd309; // for skipnav background
|
|
68
69
|
|
|
69
70
|
/* Alternative colours */
|
|
70
71
|
--color-alt-light-blue: #99e0f5;
|
|
71
72
|
--color-alt-light-pink: #ffdbdb;
|
|
72
|
-
|
|
73
73
|
--color-blue-light-10: #eef3fc;
|
|
74
74
|
}
|