|
|
@ -1,9 +1,10 @@ |
|
|
|
// Default variables |
|
|
|
// Default variables |
|
|
|
$header-background-color: #fff !default; |
|
|
|
$header-background-color: #fff !default; |
|
|
|
$header-links-color: #a3a9b5 !default; |
|
|
|
$header-links-color: #a3a9b5 !default; |
|
|
|
$header-links-color-active: $primary !default; |
|
|
|
$header-links-color-active: #333 !default; |
|
|
|
$header-icon-color: $header-links-color !default; |
|
|
|
$header-icon-color: $header-links-color !default; |
|
|
|
$header-icon-color-hover: $primary !default; |
|
|
|
$header-icon-color-hover: #333 !default; |
|
|
|
|
|
|
|
$header-icon-border-color-hover: $primary !default; |
|
|
|
$header-toggler-icon: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($primary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E" !default; |
|
|
|
$header-toggler-icon: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($primary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E" !default; |
|
|
|
$header-textfield-text-color: $header-links-color !default; |
|
|
|
$header-textfield-text-color: $header-links-color !default; |
|
|
|
$header-textfield-background-color: #f5f6fa !default; |
|
|
|
$header-textfield-background-color: #f5f6fa !default; |
|
|
@ -22,6 +23,7 @@ $navbar-logo-width: auto !default; |
|
|
|
} |
|
|
|
} |
|
|
|
.navbar-nav { |
|
|
|
.navbar-nav { |
|
|
|
flex-grow: 1; |
|
|
|
flex-grow: 1; |
|
|
|
|
|
|
|
|
|
|
|
.nav-link { |
|
|
|
.nav-link { |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
color: $header-links-color; |
|
|
|
color: $header-links-color; |
|
|
@ -30,15 +32,15 @@ $navbar-logo-width: auto !default; |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
|
|
&:before { |
|
|
|
&:before { |
|
|
|
background-color: $primary; |
|
|
|
background-color: $header-icon-border-color-hover; |
|
|
|
border-radius: 0 0 4px 4px; |
|
|
|
border-radius: 0 0 4px 4px; |
|
|
|
top: -10px; |
|
|
|
|
|
|
|
content: ""; |
|
|
|
content: ""; |
|
|
|
display: block; |
|
|
|
display: block; |
|
|
|
height: 0.25rem; |
|
|
|
height: 0.25rem; |
|
|
|
left: 50%; |
|
|
|
left: 50%; |
|
|
|
opacity: 0; |
|
|
|
opacity: 0; |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
|
|
|
|
top: -10px; |
|
|
|
transform: translateX(-50%); |
|
|
|
transform: translateX(-50%); |
|
|
|
transition: all 0.2s ease; |
|
|
|
transition: all 0.2s ease; |
|
|
|
width: calc( |
|
|
|
width: calc( |
|
|
@ -60,7 +62,7 @@ $navbar-logo-width: auto !default; |
|
|
|
&.active-icon { |
|
|
|
&.active-icon { |
|
|
|
color: $header-links-color-active; |
|
|
|
color: $header-links-color-active; |
|
|
|
.nav-link-icon { |
|
|
|
.nav-link-icon { |
|
|
|
* { |
|
|
|
path { |
|
|
|
fill: $header-icon-color-hover; |
|
|
|
fill: $header-icon-color-hover; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|