404 lines
13 KiB
SCSS
404 lines
13 KiB
SCSS
// Add new CSS variables to default Bootstrap's .navbar
|
|
|
|
.navbar {
|
|
--#{$prefix}navbar-brand-font-weight: #{$navbar-brand-font-weight};
|
|
}
|
|
|
|
|
|
// Navbar brand
|
|
|
|
.navbar-brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-weight: var(--#{$prefix}navbar-brand-font-weight);
|
|
}
|
|
|
|
|
|
// Navbar nav
|
|
|
|
.navbar-nav {
|
|
--#{$prefix}nav-link-font-size: #{$navbar-nav-link-font-size};
|
|
--#{$prefix}nav-link-underline-border-width: #{$navbar-nav-link-underline-border-width};
|
|
|
|
gap: 0;
|
|
|
|
> .nav-item > .nav-link {
|
|
padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}navbar-nav-link-padding-x);
|
|
|
|
@include underline(var(--#{$prefix}nav-link-underline-border-width), before);
|
|
|
|
&::before {
|
|
top: calc(var(--#{$prefix}nav-link-padding-y) * .75);
|
|
width: var(--#{$prefix}nav-link-underline-border-width);
|
|
height: calc(100% - var(--#{$prefix}nav-link-padding-y) * 1.5);
|
|
transform: scaleY(0);
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
&:hover,
|
|
&.show,
|
|
&:focus-visible,
|
|
&.active {
|
|
&::before {
|
|
transform: scaleY(1);
|
|
transform-origin: top left;
|
|
}
|
|
}
|
|
|
|
@if $enable-caret {
|
|
&.dropdown-toggle::after {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
> .nav-item > .nav-link.active:not(:hover):not(.show):not(:focus-visible) {
|
|
&::before {
|
|
transform: scaleY(0);
|
|
transform-origin: bottom left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
--#{$prefix}dropdown-box-shadow: none;
|
|
position: static;
|
|
|
|
@if $enable-caret {
|
|
.dropup .dropdown-toggle::after,
|
|
.dropend .dropdown-toggle::after,
|
|
.dropstart .dropdown-toggle::after {
|
|
-webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M8.7,13.7c0.4-0.4,1.1-0.4,1.5,0l6,6l6-6c0.4-0.4,1.1-0.4,1.5,0s0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0l-6.7-6.7C8.3,14.6,8.3,14.1,8.7,13.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
|
|
mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M8.7,13.7c0.4-0.4,1.1-0.4,1.5,0l6,6l6-6c0.4-0.4,1.1-0.4,1.5,0s0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0l-6.7-6.7C8.3,14.6,8.3,14.1,8.7,13.7z'/></svg>")) no-repeat 50% 50%;
|
|
}
|
|
.dropstart .dropdown-toggle {
|
|
&::before {
|
|
display: none;
|
|
}
|
|
&::after {
|
|
display: inline-block;
|
|
width: $caret-width;
|
|
height: $caret-width;
|
|
margin-right: -.125rem;
|
|
content: "";
|
|
background-color: currentcolor;
|
|
border: 0 !important;
|
|
-webkit-mask-size: cover; // stylelint-disable-line property-no-vendor-prefix
|
|
mask-size: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropend .dropdown-menu,
|
|
.dropstart .dropdown-menu {
|
|
margin: var(--#{$prefix}dropdown-spacer) 0 !important;
|
|
}
|
|
}
|
|
|
|
.dropdown > .dropdown-menu,
|
|
.dropup > .dropdown-menu {
|
|
&::before,
|
|
&::after {
|
|
height: calc(var(--#{$prefix}dropdown-spacer) * 1.125);
|
|
}
|
|
}
|
|
}
|
|
|
|
[dir="rtl"] .navbar-nav .dropdown-menu {
|
|
.dropup .dropdown-toggle::after,
|
|
.dropend .dropdown-toggle::after,
|
|
.dropstart .dropdown-toggle::after {
|
|
-webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M15.3,13.3c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6-6l-6,6c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5L15.3,13.3z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
|
|
mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M15.3,13.3c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6-6l-6,6c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5L15.3,13.3z'/></svg>")) no-repeat 50% 50%;
|
|
}
|
|
}
|
|
|
|
|
|
// Fix nav inside dark navbar but light offcanvas
|
|
|
|
@if $enable-dark-mode {
|
|
@include color-mode(light) {
|
|
.navbar-dark:not([data-bs-theme="dark"]) .offcanvas .navbar-nav {
|
|
--#{$prefix}nav-link-color: #{$navbar-light-color};
|
|
--#{$prefix}nav-link-hover-color: #{$navbar-light-hover-color};
|
|
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
|
|
--#{$prefix}nav-link-disabled-color: #{$navbar-light-disabled-color};
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Navbar toggler
|
|
|
|
.navbar-toggler {
|
|
position: relative;
|
|
width: $navbar-toggler-bar-width + $navbar-toggler-padding-x * 2;
|
|
height: $navbar-toggler-bar-height * 3 + $navbar-toggler-bar-spacing * 2 + $navbar-toggler-padding-y * 2;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
top: 50%;
|
|
display: block;
|
|
margin-top: $navbar-toggler-bar-height * -.5;
|
|
transition-timing-function: cubic-bezier(.55, .055, .675, .19);
|
|
transition-duration: .075s;
|
|
|
|
&,
|
|
&::before,
|
|
&::after {
|
|
position: absolute;
|
|
width: $navbar-toggler-bar-width;
|
|
height: $navbar-toggler-bar-height;
|
|
background-color: var(--#{$prefix}navbar-color);
|
|
transition-property: transform;
|
|
}
|
|
&::before,
|
|
&::after {
|
|
display: block;
|
|
content: "";
|
|
}
|
|
&::before {
|
|
top: ($navbar-toggler-bar-spacing + $navbar-toggler-bar-height) * -1;
|
|
transition: top .075s .12s ease, opacity .075s ease, width .15s ease-in-out;
|
|
}
|
|
&::after {
|
|
right: 0;
|
|
bottom: ($navbar-toggler-bar-spacing + $navbar-toggler-bar-height) * -1;
|
|
transition: bottom .075s .12s ease, transform .075s cubic-bezier(.55, .055, .675, .19), width .15s ease-in-out;
|
|
}
|
|
}
|
|
|
|
.navbar-toggler:not(.active):not([aria-expanded="true"]):hover .navbar-toggler-icon {
|
|
&::before,
|
|
&::after {
|
|
width: $navbar-toggler-bar-width * .75;
|
|
}
|
|
}
|
|
|
|
.navbar-toggler.active,
|
|
[aria-expanded="true"] {
|
|
.navbar-toggler-icon {
|
|
transition-delay: .12s;
|
|
transition-timing-function: cubic-bezier(.215, .61, .355, 1);
|
|
transform: rotate(45deg);
|
|
&::before,
|
|
&::after {
|
|
width: $navbar-toggler-bar-width;
|
|
}
|
|
&::before {
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: top .075s ease, opacity .075s .12s ease;
|
|
}
|
|
&::after {
|
|
bottom: 0;
|
|
transition: bottom .075s ease, transform .075s .12s cubic-bezier(.215, .61, .355, 1);
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-stuck-hide.collapse {
|
|
display: block;
|
|
}
|
|
|
|
|
|
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
|
// where your navbar collapses.
|
|
|
|
.navbar-expand {
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
|
&#{$infix} {
|
|
@include media-breakpoint-up($next) {
|
|
.navbar-nav {
|
|
> .nav-item > .nav-link {
|
|
&::before {
|
|
top: auto;
|
|
bottom: calc(var(--#{$prefix}nav-link-padding-y) * .875);
|
|
left: var(--#{$prefix}navbar-nav-link-padding-x);
|
|
width: calc(100% - var(--#{$prefix}navbar-nav-link-padding-x) * 2);
|
|
height: var(--#{$prefix}nav-link-underline-border-width);
|
|
transform: scaleX(0);
|
|
transform-origin: bottom right;
|
|
}
|
|
|
|
@if $enable-caret {
|
|
&.dropdown-toggle::before {
|
|
width: calc(100% - $caret-width - $caret-spacing - var(--#{$prefix}navbar-nav-link-padding-x) * 2);
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&.show,
|
|
&:focus-visible,
|
|
&.active {
|
|
@include underline-action(before);
|
|
}
|
|
|
|
@if $enable-caret {
|
|
&.dropdown-toggle::after {
|
|
margin-left: $caret-spacing;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
> .nav-item > .nav-link.active:not(:hover):not(.show):not(:focus-visible) {
|
|
&::before {
|
|
transform: scaleX(0);
|
|
transform-origin: bottom right;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.dropdown-menu {
|
|
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
|
|
|
|
&.show {
|
|
animation: fade-up .25s ease-in-out;
|
|
}
|
|
|
|
@if $enable-caret {
|
|
.dropend .dropdown-toggle::after {
|
|
-webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.7,9.7c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5l6-6l-6-6C12.3,10.6,12.3,10.1,12.7,9.7L12.7,9.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
|
|
mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.7,9.7c0.4-0.4,1.1-0.4,1.5,0l6.7,6.7c0.4,0.4,0.4,1.1,0,1.5l-6.7,6.7c-0.4,0.4-1.1,0.4-1.5,0s-0.4-1.1,0-1.5l6-6l-6-6C12.3,10.6,12.3,10.1,12.7,9.7L12.7,9.7z'/></svg>")) no-repeat 50% 50%;
|
|
}
|
|
.dropstart .dropdown-toggle {
|
|
&::after {
|
|
display: none;
|
|
}
|
|
&::before {
|
|
display: inline-block;
|
|
width: $caret-width;
|
|
height: $caret-width;
|
|
margin-left: -.25rem;
|
|
content: "";
|
|
background-color: currentcolor;
|
|
border: 0 !important;
|
|
-webkit-mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M19.3,9.7c0.4,0.4,0.4,1.1,0,1.5L13.5,17l6,6c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6.7-6.7c-0.4-0.4-0.4-1.1,0-1.5L18,9.7C18.4,9.3,18.9,9.3,19.3,9.7L19.3,9.7z'/></svg>")) no-repeat 50% 50%; // stylelint-disable-line property-no-vendor-prefix
|
|
mask: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M19.3,9.7c0.4,0.4,0.4,1.1,0,1.5L13.5,17l6,6c0.4,0.4,0.4,1.1,0,1.5s-1.1,0.4-1.5,0l-6.7-6.7c-0.4-0.4-0.4-1.1,0-1.5L18,9.7C18.4,9.3,18.9,9.3,19.3,9.7L19.3,9.7z'/></svg>")) no-repeat 50% 50%;
|
|
-webkit-mask-size: cover; // stylelint-disable-line property-no-vendor-prefix
|
|
mask-size: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropend .dropdown-menu,
|
|
.dropstart .dropdown-menu {
|
|
margin: calc(var(--#{$prefix}dropdown-padding-y) * -1 + var(--#{$prefix}dropdown-border-width) * -1) var(--#{$prefix}dropdown-spacer) 0 var(--#{$prefix}dropdown-spacer) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.navbar-dark:not([data-bs-theme="dark"]) .offcanvas .navbar-nav {
|
|
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
|
|
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
|
|
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
|
|
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
|
|
}
|
|
|
|
&:not(.navbar-stuck) .dropdown-menu-static {
|
|
display: block;
|
|
animation: none !important;
|
|
}
|
|
|
|
&.navbar-stuck {
|
|
.navbar-stuck-show {
|
|
display: block !important;
|
|
}
|
|
.navbar-stuck-hide:not(.collapse):not(.collapsing) {
|
|
display: none !important;
|
|
}
|
|
.navbar-stuck-hide.collapse:not(.show) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Sticky navbar
|
|
|
|
.navbar-stuck {
|
|
animation: navbar-show .25s;
|
|
}
|
|
|
|
.navbar-sticky.is-stuck,
|
|
.navbar-sticky.navbar-stuck {
|
|
&.navbar,
|
|
.navbar {
|
|
background-color: var(--#{$prefix}body-bg);
|
|
@include box-shadow($box-shadow);
|
|
}
|
|
|
|
&.rounded-pill:not(.form-control):not(.badge):not(.btn),
|
|
.rounded-pill:not(.form-control):not(.badge):not(.btn) {
|
|
border-radius: var(--#{$prefix}border-radius-lg) !important;
|
|
border: {
|
|
top-left-radius: 0 !important;
|
|
top-right-radius: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes navbar-show {
|
|
from {
|
|
transform: translateY(-100%);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.sticky-product-banner {
|
|
|
|
.sticky-product-banner-inner {
|
|
position: absolute;
|
|
width: 100%;
|
|
transition: transform .3s ease-in-out;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
&:not(.is-stuck) .sticky-product-banner-inner {
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
|
|
// Dark mode
|
|
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark) {
|
|
.navbar:not([data-bs-theme="light"]) {
|
|
--#{$prefix}navbar-color: #{$navbar-dark-color};
|
|
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
|
|
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
|
|
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
|
|
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
|
|
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
|
|
}
|
|
.navbar-sticky.is-stuck,
|
|
.navbar-sticky.navbar-stuck {
|
|
&.navbar:not([data-bs-theme="light"]),
|
|
.navbar:not([data-bs-theme="light"]) {
|
|
background-color: var(--#{$prefix}body-bg);
|
|
@include box-shadow($box-shadow-dark);
|
|
}
|
|
}
|
|
}
|
|
}
|