215 lines
8.3 KiB
SCSS
215 lines
8.3 KiB
SCSS
|
.navigation {
|
||
|
|
background-color: transparent;
|
||
|
|
|
||
|
|
.navbar {
|
||
|
|
border-bottom: 1px solid $border-color;
|
||
|
|
padding: 25px 0;
|
||
|
|
@include tablet {
|
||
|
|
padding: 15px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar-nav {
|
||
|
|
flex-direction: row;
|
||
|
|
@include desktop {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
.nav-item::after,
|
||
|
|
.nav-link:not(:hover) {
|
||
|
|
opacity: .5;
|
||
|
|
}
|
||
|
|
.dropdown:hover {
|
||
|
|
.nav-link {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-item {
|
||
|
|
margin: 0;
|
||
|
|
position: relative;
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
content: "/";
|
||
|
|
right: -2px;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
@include desktop {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
font-family: $primary-font;
|
||
|
|
text-transform: capitalize;
|
||
|
|
line-height: 1;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
&::after {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.dropdown .nav-link {
|
||
|
|
position: relative;
|
||
|
|
padding-right: 38px !important;
|
||
|
|
@include desktop {
|
||
|
|
padding-right: 28px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.dropdown .nav-link::after {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.dropdown .nav-link::before {
|
||
|
|
position: absolute;
|
||
|
|
right: 24px;
|
||
|
|
@include desktop {
|
||
|
|
right: 13px;
|
||
|
|
}
|
||
|
|
top: calc(50% - 6px);
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: .255em;
|
||
|
|
content: "";
|
||
|
|
height: 8px;
|
||
|
|
width: 8px;
|
||
|
|
border: 2px solid;
|
||
|
|
border-left: 0;
|
||
|
|
border-top: 0;
|
||
|
|
border-color: inherit;
|
||
|
|
border-radius: 2px;
|
||
|
|
transform: rotate(45deg);
|
||
|
|
transition: 0s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width:991px) {
|
||
|
|
.dropdown-menu {
|
||
|
|
display: block;
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
width: 220px;
|
||
|
|
transition: 0.2s;
|
||
|
|
left: 50%;
|
||
|
|
border-radius: 0;
|
||
|
|
transform: translate(-50%, 6px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown:hover .dropdown-menu {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
box-shadow: 0 10px 30px rgba(22, 28, 45, .10);
|
||
|
|
transform: translate(-50%, -6px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu {
|
||
|
|
border: 0;
|
||
|
|
padding: 0 25px;
|
||
|
|
&:hover {
|
||
|
|
.dropdown-item:not(:hover) {
|
||
|
|
opacity: .5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-item {
|
||
|
|
font-size: 16px;
|
||
|
|
padding: 5px 0;
|
||
|
|
font-weight: 500;
|
||
|
|
&:first-child {
|
||
|
|
padding-top: 15px;
|
||
|
|
@include desktop {
|
||
|
|
padding-top: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
padding-bottom: 15px;
|
||
|
|
@include desktop {
|
||
|
|
padding-bottom: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-item.active,
|
||
|
|
.dropdown-item:active,
|
||
|
|
.dropdown-item:focus,
|
||
|
|
.dropdown-item:hover {
|
||
|
|
color: initial;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar-light .navbar-toggler {
|
||
|
|
border-color: transparent;
|
||
|
|
padding: 0;
|
||
|
|
font-size: 20px;
|
||
|
|
color: $black;
|
||
|
|
transition: .3s ease;
|
||
|
|
.navbar-toggler-icon {
|
||
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar-light .navbar-nav .nav-link {
|
||
|
|
color: $text-color-dark;
|
||
|
|
font-weight: 500;
|
||
|
|
padding: 15px 20px;
|
||
|
|
&:hover {
|
||
|
|
color: $black;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include desktop {
|
||
|
|
.navbar-nav {
|
||
|
|
background-color: $white;
|
||
|
|
padding: 15px 0;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
.dropdown-menu {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.navbar-light .navbar-nav .nav-link {
|
||
|
|
padding: 10px 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.search {
|
||
|
|
max-width: 250px;
|
||
|
|
@include tablet {
|
||
|
|
width: 100%;
|
||
|
|
max-width: initial;
|
||
|
|
margin-top: 15px;
|
||
|
|
}
|
||
|
|
input {
|
||
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAEt2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMzYiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMzYiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSIzNiIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjM2IgogICBleGlmOkNvbG9yU3BhY2U9IjEiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjAtMDMt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
|
||
|
|
width: 100%;
|
||
|
|
border: none;
|
||
|
|
padding: 11px 40px 11px 15px;
|
||
|
|
border-radius: 0;
|
||
|
|
background-size: 15px;
|
||
|
|
background-position: calc(100% - 15px) center;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
&:focus{
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar-footer{
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.nav-item{
|
||
|
|
margin: 10px 0;
|
||
|
|
.nav-link{
|
||
|
|
color: $white;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|