@trebired/frontend 20.13.0 → 21.0.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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 21.0.0
|
|
4
|
+
|
|
5
|
+
Breaking for configuration: `shell.header.px` and `shell.header.brand.button.padding` are gone.
|
|
6
|
+
|
|
7
|
+
- The brand sits the same distance from the edge of the screen on every site: 1.5rem on a phone, 1rem once there is room for the full bar. The distance was a per-site setting and the brand button added its own padding on top, so the same logo started at 16px on one site and 38px on another. The header's structure is tbf's to decide, like its height and the size of its menu button.
|
|
8
|
+
- A site that set either of those values is no longer honoured; remove them. Nothing else about the brand changes.
|
|
9
|
+
|
|
3
10
|
## 20.13.0
|
|
4
11
|
|
|
5
12
|
- The brand button keeps its own colour instead of the one every button gets. Both rules carried the same weight and the general one is written later, so it won, and the brand took the colour flowing down from the header: on a light page the little arrow beside the logo came out almost white and read as having disappeared. Its colour now outranks the general rule, as its background already did.
|
|
@@ -29,7 +29,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
|
|
|
29
29
|
max-width: token("max-width", 72rem);
|
|
30
30
|
box-sizing: border-box;
|
|
31
31
|
margin-inline: auto;
|
|
32
|
-
padding-inline:
|
|
32
|
+
padding-inline: 1.5rem;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
#{ns.element-class("site-header", "bar")} {
|
|
@@ -255,6 +255,11 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
|
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
@media (min-width: 768px) {
|
|
258
|
+
#{ns.element-class("site-header", "bar")},
|
|
259
|
+
#{ns.element-class("site-header", "menu-content")} {
|
|
260
|
+
padding-inline: 1rem;
|
|
261
|
+
}
|
|
262
|
+
|
|
258
263
|
#{ns.element-class("site-header", "nav")},
|
|
259
264
|
#{ns.element-class("site-header", "actions")} {
|
|
260
265
|
display: flex;
|
|
@@ -317,7 +322,8 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
|
|
|
317
322
|
min-width: 0;
|
|
318
323
|
border: 0;
|
|
319
324
|
border-radius: var(#{ns.css-var("shell-header-brand-button-radius")}, var(#{ns.css-var("radius-sm")}, 0));
|
|
320
|
-
padding:
|
|
325
|
+
padding-block: 4px;
|
|
326
|
+
padding-inline: 0;
|
|
321
327
|
background: transparent;
|
|
322
328
|
cursor: pointer;
|
|
323
329
|
transition: color 0.22s ease;
|