UX: add fadeout to topic list on large vp
This commit is contained in:
+23
-1
@@ -1,14 +1,36 @@
|
|||||||
|
@use "lib/viewport";
|
||||||
.list-controls {
|
.list-controls {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: var(--header-offset);
|
top: var(--header-offset);
|
||||||
background: var(--d-content-background);
|
background: var(--d-content-background);
|
||||||
z-index: z("base");
|
z-index: z("base");
|
||||||
padding: 1.5rem 0 1rem 0;
|
padding: 1.5rem 0 0 0;
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
|
|
||||||
|
@include viewport.until(sm) {
|
||||||
|
padding-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.navigation-container {
|
.navigation-container {
|
||||||
|
position: relative;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
|
||||||
|
@include viewport.from(sm) {
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: -1rem;
|
||||||
|
height: 1rem;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
var(--d-content-background),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.category-breadcrumb {
|
.category-breadcrumb {
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user