Initial Commit
This commit is contained in:
GiacomoHome
@@ -0,0 +1,394 @@
|
||||
//
|
||||
// navbar.scss
|
||||
// Extended from Bootstrap
|
||||
//
|
||||
|
||||
.navbar {
|
||||
transition: $transition-base;
|
||||
transition-property: background-color, color;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
|
||||
// Dark version
|
||||
|
||||
.navbar-dark {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
.navbar-nav .nav-item .nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item.active .nav-link,
|
||||
.navbar-nav .nav-item .nav-link.active {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-toggler {
|
||||
color: $navbar-light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contaner
|
||||
|
||||
.navbar > .container,
|
||||
.navbar > .container-fluid {
|
||||
padding-left: $grid-gutter-width / 2 !important;
|
||||
padding-right: $grid-gutter-width / 2 !important;
|
||||
}
|
||||
|
||||
|
||||
// Brand
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: $navbar-brand-font-weight;
|
||||
}
|
||||
|
||||
.navbar-brand-img {
|
||||
max-height: $navbar-brand-height;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-brand {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
|
||||
// Button
|
||||
|
||||
.navbar-btn {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
width: 100%;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
font-size: $btn-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navigation
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
font-weight: $navbar-nav-link-font-weight;
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Boxed layout
|
||||
|
||||
.navbar-dark.fixed-top > .container {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -$navbar-padding-y;
|
||||
left: 0;
|
||||
border-top: $border-width solid fade-out($white, .8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Collapse
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
.navbar-collapse {
|
||||
position: fixed;
|
||||
top: $spacer;
|
||||
left: $spacer;
|
||||
height: auto;
|
||||
max-height: calc(100% - #{$spacer * 2}) !important;
|
||||
width: calc(100% - #{$spacer * 2});
|
||||
background-color: $dropdown-bg;
|
||||
border-radius: $dropdown-border-radius;
|
||||
box-shadow: $box-shadow-dark-lg;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
// Animation
|
||||
|
||||
.navbar-collapse.show,
|
||||
.navbar-collapse.collapsing {
|
||||
transition: $transition-base;
|
||||
transition-property: opacity, transform, -webkit-transform;
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.navbar-collapse.show {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing {
|
||||
opacity: 0;
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Toggler
|
||||
|
||||
.navbar .navbar-toggler {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-toggler {
|
||||
position: absolute;
|
||||
top: $spacer;
|
||||
right: $spacer;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navigation
|
||||
|
||||
.navbar-collapse .navbar-nav .nav-item {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $navbar-nav-item-spacing;
|
||||
|
||||
+ .nav-item {
|
||||
border-top: $border-width solid $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .nav-link {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown menu
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
box-shadow: none;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
box-shadow: $box-shadow-dark-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropdown-menu {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropdown > .dropdown-menu {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropend > .dropdown-menu {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
padding-left: $spacer / 2;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown item
|
||||
|
||||
.navbar-collapse .navbar-nav .dropdown-item,
|
||||
.navbar-collapse .navbar-nav .dropdown-header {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown toggle
|
||||
|
||||
.navbar-nav .dropdown > .dropdown-toggle {
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropdown > .dropdown-toggle {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
margin-bottom: $navbar-dropdown-toggle-margin-bottom;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .dropend > .dropdown-toggle {
|
||||
display: flex;
|
||||
|
||||
&::after {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse .navbar-nav .dropend > .dropdown-toggle {
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
&::after {
|
||||
content: "\e92e";
|
||||
}
|
||||
|
||||
&[aria-expanded="true"]::after {
|
||||
transform-origin: center center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown image
|
||||
|
||||
.navbar-nav .dropdown-img-start {
|
||||
height: 100%;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $dropdown-padding-y $dropdown-padding-x;
|
||||
background: no-repeat center center / cover;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: fade-out($primary, .2);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
// Content
|
||||
|
||||
* {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu-lg .dropdown-img-start,
|
||||
.navbar-nav .dropdown-menu-xl .dropdown-img-start {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown body
|
||||
|
||||
.navbar-nav .dropdown-body {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: $dropdown-padding-y $dropdown-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu-lg .dropdown-body,
|
||||
.navbar-nav .dropdown-menu-xl .dropdown-body {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown list group
|
||||
|
||||
.navbar-nav .dropdown-menu .list-group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggle dropdown on hover
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: $transition-base;
|
||||
transition-property: opacity, transform, -webkit-transform;
|
||||
}
|
||||
|
||||
.navbar-nav .dropend > .dropdown-menu {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown > .dropdown-menu {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 10px);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu.showing {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu.show {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navbar-nav .dropend > .dropdown-menu.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown > .dropdown-menu.show {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user