@nl-rvo/css-logo 1.3.0 → 1.4.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/index.css +38 -15
  3. package/dist/index.min.css +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/package.json +3 -2
  6. package/src/index.scss +88 -57
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # `@nl-rvo/css-logo`
2
2
 
3
+ ## 1.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - bcc44ec: Removed link behaviour from Header component to Logo component and fixed logo link focus state.
8
+
9
+ ### Patch Changes
10
+
11
+ - 084a230: Ensure package is published with provenance
12
+
3
13
  ## 1.3.0
4
14
 
5
15
  ### Minor Changes
package/dist/index.css CHANGED
@@ -2,7 +2,6 @@
2
2
  * @license CC0-1.0
3
3
  * Copyright (c) 2021 Community for NL Design System
4
4
  */
5
-
6
5
  .rvo-logo {
7
6
  align-items: center;
8
7
  color: var(--rvo-logo-color);
@@ -11,20 +10,46 @@
11
10
  font-family: var(--rvo-logo-font-family);
12
11
  font-weight: var(--rvo-logo-font-weight);
13
12
  gap: 10px;
13
+ inline-size: fit-content;
14
+ position: relative;
15
+ }
16
+ .rvo-logo:has(.rvo-logo__title-link:focus-visible) {
17
+ box-shadow: 0 0 0 0.25rem white;
18
+ outline: 0.375rem double black;
19
+ }
20
+ .rvo-logo__title-link {
21
+ color: inherit;
22
+ display: block;
23
+ font-weight: inherit;
24
+ text-decoration: none;
25
+ }
26
+ .rvo-logo__title-link::before {
27
+ block-size: 100%;
28
+ content: "";
29
+ cursor: pointer;
30
+ display: block;
31
+ inline-size: 100%;
32
+ inset-block-start: 0;
33
+ inset-inline-start: 0;
34
+ position: absolute;
35
+ }
36
+ .rvo-logo__title-link:focus-visible {
37
+ outline: none;
38
+ }
39
+ .rvo-logo__title-link:hover, .rvo-logo__title-link:focus:not(:focus-visible) {
40
+ color: inherit;
41
+ text-decoration: none;
14
42
  }
15
-
16
43
  .rvo-logo__emblem {
17
44
  align-self: flex-start;
18
- height: 80px;
19
- min-width: 40px;
20
- width: 40px;
45
+ block-size: 80px;
46
+ inline-size: 40px;
47
+ min-inline-size: 40px;
21
48
  }
22
-
23
49
  .rvo-logo__wordmark {
24
50
  align-self: flex-start;
25
51
  margin-block-start: 42px;
26
52
  }
27
-
28
53
  .rvo-logo__title {
29
54
  font-size: 12px;
30
55
  line-height: 112.5%;
@@ -32,7 +57,6 @@
32
57
  margin-block-start: 0;
33
58
  white-space: pre-line;
34
59
  }
35
-
36
60
  .rvo-logo__subtitle {
37
61
  font-size: 10px;
38
62
  line-height: 125%;
@@ -40,15 +64,14 @@
40
64
  margin-block-start: 4px;
41
65
  white-space: pre-line;
42
66
  }
43
-
44
67
  @media (min-width: 495px) {
45
68
  .rvo-logo {
46
69
  gap: 11px;
47
70
  }
48
71
  .rvo-logo__emblem {
49
- height: 90px;
50
- min-width: 45px;
51
- width: 45px;
72
+ block-size: 90px;
73
+ inline-size: 45px;
74
+ min-inline-size: 45px;
52
75
  }
53
76
  .rvo-logo__wordmark {
54
77
  margin-block-start: 47px;
@@ -66,9 +89,9 @@
66
89
  gap: 12px;
67
90
  }
68
91
  .rvo-logo__emblem {
69
- height: 100px;
70
- min-width: 50px;
71
- width: 50px;
92
+ block-size: 100px;
93
+ inline-size: 50px;
94
+ min-inline-size: 50px;
72
95
  }
73
96
  .rvo-logo__wordmark {
74
97
  margin-block-start: 52px;
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .rvo-logo{align-items:center;color:var(--rvo-logo-color);display:flex;flex-direction:row;font-family:var(--rvo-logo-font-family);font-weight:var(--rvo-logo-font-weight);gap:10px}.rvo-logo__emblem{align-self:flex-start;height:80px;min-width:40px;width:40px}.rvo-logo__wordmark{align-self:flex-start;margin-block-start:42px}.rvo-logo__title{font-size:12px;line-height:112.5%;margin-block-start:0}.rvo-logo__subtitle,.rvo-logo__title{margin-block-end:0;white-space:pre-line}.rvo-logo__subtitle{font-size:10px;line-height:125%;margin-block-start:4px}@media (min-width:495px){.rvo-logo{gap:11px}.rvo-logo__emblem{height:90px;min-width:45px;width:45px}.rvo-logo__wordmark{margin-block-start:47px}.rvo-logo__title{font-size:13.5px;line-height:114.5%}.rvo-logo__subtitle{font-size:11px}}@media (min-width:650px){.rvo-logo{gap:12px}.rvo-logo__emblem{height:100px;min-width:50px;width:50px}.rvo-logo__wordmark{margin-block-start:52px}.rvo-logo__title{font-size:15px;line-height:114.8%}.rvo-logo__subtitle{font-size:12.25px}}
1
+ .rvo-logo{align-items:center;color:var(--rvo-logo-color);display:flex;flex-direction:row;font-family:var(--rvo-logo-font-family);font-weight:var(--rvo-logo-font-weight);gap:10px;inline-size:fit-content;position:relative}.rvo-logo:has(.rvo-logo__title-link:focus-visible){box-shadow:0 0 0 .25rem #fff;outline:.375rem double #000}.rvo-logo__title-link{color:inherit;display:block;font-weight:inherit;text-decoration:none}.rvo-logo__title-link:before{block-size:100%;content:"";cursor:pointer;display:block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}.rvo-logo__title-link:focus-visible{outline:none}.rvo-logo__title-link:focus:not(:focus-visible),.rvo-logo__title-link:hover{color:inherit;text-decoration:none}.rvo-logo__emblem{align-self:flex-start;block-size:80px;inline-size:40px;min-inline-size:40px}.rvo-logo__wordmark{align-self:flex-start;margin-block-start:42px}.rvo-logo__title{font-size:12px;line-height:112.5%;margin-block-start:0}.rvo-logo__subtitle,.rvo-logo__title{margin-block-end:0;white-space:pre-line}.rvo-logo__subtitle{font-size:10px;line-height:125%;margin-block-start:4px}@media (min-width:495px){.rvo-logo{gap:11px}.rvo-logo__emblem{block-size:90px;inline-size:45px;min-inline-size:45px}.rvo-logo__wordmark{margin-block-start:47px}.rvo-logo__title{font-size:13.5px;line-height:114.5%}.rvo-logo__subtitle{font-size:11px}}@media (min-width:650px){.rvo-logo{gap:12px}.rvo-logo__emblem{block-size:100px;inline-size:50px;min-inline-size:50px}.rvo-logo__wordmark{margin-block-start:52px}.rvo-logo__title{font-size:15px;line-height:114.8%}.rvo-logo__subtitle{font-size:12.25px}}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".rvo-logo{align-items:center;color:var(--rvo-logo-color);display:flex;flex-direction:row;font-family:var(--rvo-logo-font-family);font-weight:var(--rvo-logo-font-weight);gap:10px}.rvo-logo__emblem{align-self:flex-start;height:80px;min-width:40px;width:40px}.rvo-logo__wordmark{align-self:flex-start;margin-block-start:42px}.rvo-logo__title{font-size:12px;line-height:112.5%;margin-block-start:0}.rvo-logo__subtitle,.rvo-logo__title{margin-block-end:0;white-space:pre-line}.rvo-logo__subtitle{font-size:10px;line-height:125%;margin-block-start:4px}@media (min-width:495px){.rvo-logo{gap:11px}.rvo-logo__emblem{height:90px;min-width:45px;width:45px}.rvo-logo__wordmark{margin-block-start:47px}.rvo-logo__title{font-size:13.5px;line-height:114.5%}.rvo-logo__subtitle{font-size:11px}}@media (min-width:650px){.rvo-logo{gap:12px}.rvo-logo__emblem{height:100px;min-width:50px;width:50px}.rvo-logo__wordmark{margin-block-start:52px}.rvo-logo__title{font-size:15px;line-height:114.8%}.rvo-logo__subtitle{font-size:12.25px}}";
1
+ export default ".rvo-logo{align-items:center;color:var(--rvo-logo-color);display:flex;flex-direction:row;font-family:var(--rvo-logo-font-family);font-weight:var(--rvo-logo-font-weight);gap:10px;inline-size:fit-content;position:relative}.rvo-logo:has(.rvo-logo__title-link:focus-visible){box-shadow:0 0 0 .25rem #fff;outline:.375rem double #000}.rvo-logo__title-link{color:inherit;display:block;font-weight:inherit;text-decoration:none}.rvo-logo__title-link:before{block-size:100%;content:\"\";cursor:pointer;display:block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}.rvo-logo__title-link:focus-visible{outline:none}.rvo-logo__title-link:focus:not(:focus-visible),.rvo-logo__title-link:hover{color:inherit;text-decoration:none}.rvo-logo__emblem{align-self:flex-start;block-size:80px;inline-size:40px;min-inline-size:40px}.rvo-logo__wordmark{align-self:flex-start;margin-block-start:42px}.rvo-logo__title{font-size:12px;line-height:112.5%;margin-block-start:0}.rvo-logo__subtitle,.rvo-logo__title{margin-block-end:0;white-space:pre-line}.rvo-logo__subtitle{font-size:10px;line-height:125%;margin-block-start:4px}@media (min-width:495px){.rvo-logo{gap:11px}.rvo-logo__emblem{block-size:90px;inline-size:45px;min-inline-size:45px}.rvo-logo__wordmark{margin-block-start:47px}.rvo-logo__title{font-size:13.5px;line-height:114.5%}.rvo-logo__subtitle{font-size:11px}}@media (min-width:650px){.rvo-logo{gap:12px}.rvo-logo__emblem{block-size:100px;inline-size:50px;min-inline-size:50px}.rvo-logo__wordmark{margin-block-start:52px}.rvo-logo__title{font-size:15px;line-height:114.8%}.rvo-logo__subtitle{font-size:12.25px}}";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.3.0",
2
+ "version": "1.4.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-logo",
@@ -17,7 +17,8 @@
17
17
  ],
18
18
  "main": "dist/index.css",
19
19
  "publishConfig": {
20
- "access": "public"
20
+ "access": "public",
21
+ "provenance": true
21
22
  },
22
23
  "repository": {
23
24
  "type": "git+ssh",
package/src/index.scss CHANGED
@@ -11,82 +11,113 @@
11
11
  font-family: var(--rvo-logo-font-family);
12
12
  font-weight: var(--rvo-logo-font-weight);
13
13
  gap: 10px;
14
- }
14
+ inline-size: fit-content;
15
+ position: relative;
15
16
 
16
- .rvo-logo__emblem {
17
- align-self: flex-start;
18
- height: 80px;
19
- min-width: 40px;
20
- width: 40px;
21
- }
17
+ &:has(.rvo-logo__title-link:focus-visible) {
18
+ box-shadow: 0 0 0 0.25rem white;
19
+ outline: 0.375rem double black;
20
+ }
22
21
 
23
- .rvo-logo__wordmark {
24
- align-self: flex-start;
25
- margin-block-start: 42px;
26
- }
22
+ &__title-link {
23
+ color: inherit;
24
+ display: block;
25
+ font-weight: inherit;
26
+ text-decoration: none;
27
27
 
28
- .rvo-logo__title {
29
- font-size: 12px;
30
- line-height: 112.5%;
31
- margin-block-end: 0;
32
- margin-block-start: 0;
33
- white-space: pre-line;
34
- }
28
+ &::before {
29
+ block-size: 100%;
30
+ content: "";
31
+ cursor: pointer;
32
+ display: block;
33
+ inline-size: 100%;
34
+ inset-block-start: 0;
35
+ inset-inline-start: 0;
36
+ position: absolute;
37
+ }
35
38
 
36
- .rvo-logo__subtitle {
37
- font-size: 10px;
38
- line-height: 125%;
39
- margin-block-end: 0;
40
- margin-block-start: 4px;
41
- white-space: pre-line;
42
- }
39
+ &:focus-visible {
40
+ outline: none;
41
+ }
43
42
 
44
- @media (min-width: 495px) {
45
- .rvo-logo {
46
- gap: 11px;
43
+ &:hover,
44
+ &:focus:not(:focus-visible) {
45
+ color: inherit;
46
+ text-decoration: none;
47
+ }
47
48
  }
48
49
 
49
- .rvo-logo__emblem {
50
- height: 90px;
51
- min-width: 45px;
52
- width: 45px;
50
+ &__emblem {
51
+ align-self: flex-start;
52
+ block-size: 80px;
53
+ inline-size: 40px;
54
+ min-inline-size: 40px;
53
55
  }
54
56
 
55
- .rvo-logo__wordmark {
56
- margin-block-start: 47px;
57
+ &__wordmark {
58
+ align-self: flex-start;
59
+ margin-block-start: 42px;
57
60
  }
58
61
 
59
- .rvo-logo__title {
60
- font-size: 13.5px;
61
- line-height: 114.5%;
62
+ &__title {
63
+ font-size: 12px;
64
+ line-height: 112.5%;
65
+ margin-block-end: 0;
66
+ margin-block-start: 0;
67
+ white-space: pre-line;
62
68
  }
63
69
 
64
- .rvo-logo__subtitle {
65
- font-size: 11px;
70
+ &__subtitle {
71
+ font-size: 10px;
72
+ line-height: 125%;
73
+ margin-block-end: 0;
74
+ margin-block-start: 4px;
75
+ white-space: pre-line;
66
76
  }
67
- }
68
77
 
69
- @media (min-width: 650px) {
70
- .rvo-logo {
71
- gap: 12px;
72
- }
78
+ @media (min-width: 495px) {
79
+ gap: 11px;
73
80
 
74
- .rvo-logo__emblem {
75
- height: 100px;
76
- min-width: 50px;
77
- width: 50px;
78
- }
81
+ &__emblem {
82
+ block-size: 90px;
83
+ inline-size: 45px;
84
+ min-inline-size: 45px;
85
+ }
79
86
 
80
- .rvo-logo__wordmark {
81
- margin-block-start: 52px;
82
- }
87
+ &__wordmark {
88
+ margin-block-start: 47px;
89
+ }
83
90
 
84
- .rvo-logo__title {
85
- font-size: 15px;
86
- line-height: 114.8%;
91
+ &__title {
92
+ font-size: 13.5px;
93
+ line-height: 114.5%;
94
+ }
95
+
96
+ &__subtitle {
97
+ font-size: 11px;
98
+ }
87
99
  }
88
100
 
89
- .rvo-logo__subtitle {
90
- font-size: 12.25px;
101
+ @media (min-width: 650px) {
102
+ gap: 12px;
103
+
104
+ &__emblem {
105
+ block-size: 100px;
106
+ inline-size: 50px;
107
+ min-inline-size: 50px;
108
+ }
109
+
110
+ &__wordmark {
111
+ margin-block-start: 52px;
112
+ }
113
+
114
+ &__title {
115
+ font-size: 15px;
116
+ line-height: 114.8%;
117
+ }
118
+
119
+ &__subtitle {
120
+ font-size: 12.25px;
121
+ }
91
122
  }
92
123
  }