Manuel Cillero
c848b97450
Divide `basic.css` en parciales SCSS bajo `assets/scss/basic/`, integra `normalize.css` en `basic.min.css` y compila `intro.scss` por separado a `intro.min.css`.
118 lines
3.1 KiB
SCSS
118 lines
3.1 KiB
SCSS
@use "breakpoints" as bp;
|
|
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.navbar-toggle {
|
|
display: none;
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 1.25rem;
|
|
line-height: 1;
|
|
color: inherit;
|
|
background-color: transparent;
|
|
border: 1px solid var(--val-color--border);
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
}
|
|
.navbar-toggle::before {
|
|
content: "\2630";
|
|
}
|
|
|
|
// Pushes the toggle (`BrandLeft`) or the brand (`BrandRight`) to the far end of the bar.
|
|
.brand ~ .navbar-toggle,
|
|
.navbar-toggle ~ .brand {
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.navbar-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex: 1 1 auto;
|
|
}
|
|
// A bar without a toggle button never stacks its `.nav` items in a column, so they wrap onto
|
|
// another line when they don't fit instead of overflowing the bar.
|
|
.navbar-content .nav {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.navbar-text {
|
|
color: var(--val-color--text--muted);
|
|
}
|
|
|
|
// Navbar position, from the `navbar::Position` classes. `.navbar` has no background of its own, so
|
|
// a bar taken out of the flow (fixed) or pinned while scrolling (sticky) gets one, or the content
|
|
// passing underneath would show through.
|
|
.navbar.fixed-top,
|
|
.navbar.fixed-bottom,
|
|
.navbar.sticky-top,
|
|
.navbar.sticky-bottom {
|
|
background-color: var(--val-color--bg);
|
|
}
|
|
.navbar.fixed-top,
|
|
.navbar.fixed-bottom {
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1030;
|
|
}
|
|
.navbar.fixed-top {
|
|
top: 0;
|
|
}
|
|
.navbar.fixed-bottom {
|
|
bottom: 0;
|
|
}
|
|
.navbar.sticky-top,
|
|
.navbar.sticky-bottom {
|
|
position: sticky;
|
|
z-index: 1020;
|
|
}
|
|
.navbar.sticky-top {
|
|
top: 0;
|
|
}
|
|
.navbar.sticky-bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
// A navbar with a toggle button collapses below the breakpoint set by its `navbar-expand-{name}`
|
|
// class, added by the `Navbar` component. `navbar-expand` alone (a breakpoint with no minimum
|
|
// width) never collapses and needs no rules, since the base rules above are the expanded layout.
|
|
//
|
|
// While collapsed, the `.nav` items are stacked in a column, so a dropdown menu inside it is laid
|
|
// out in the flow (`position: static`) to push down the following items instead of covering them.
|
|
// A navbar without a toggle button has nothing to collapse: its `.nav` items stay in a row.
|
|
@each $name, $width in bp.$breakpoints {
|
|
@media (width < $width) {
|
|
.navbar-expand-#{$name} {
|
|
flex-wrap: wrap;
|
|
}
|
|
.navbar-expand-#{$name}:has(.navbar-toggle) {
|
|
.navbar-toggle {
|
|
display: inline-block;
|
|
}
|
|
.navbar-content {
|
|
order: 1;
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
}
|
|
.navbar-content.show {
|
|
display: flex;
|
|
}
|
|
.nav {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
}
|
|
.nav .dropdown-menu {
|
|
position: static;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|