@ -1,17 +1,31 @@ |
|||||||
// These styles extend the default Bootstrap styles |
// These styles extend the default Bootstrap styles |
||||||
|
|
||||||
.dropdown-menu { |
.dropdown-menu { |
||||||
width: 100%; |
box-shadow: $box-shadow; |
||||||
box-shadow: $box-shadow; |
padding: 0; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.dropdown-item { |
||||||
|
font-size: 12px; |
||||||
|
padding: 10px 20px; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background-color: $tertiary; |
||||||
|
color: $white; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.dropdown-search-icon { |
.dropdown-search-icon { |
||||||
top: 0.5rem; |
color: $gray-300; |
||||||
left: 0.625rem; |
left: 0.625rem; |
||||||
pointer-events: none; |
pointer-events: none; |
||||||
color: $gray-300; |
top: 0.5rem; |
||||||
} |
} |
||||||
|
|
||||||
.dropdown-search-field { |
.dropdown-search-field { |
||||||
padding-left: 2rem; |
padding-left: 2rem; |
||||||
} |
} |
||||||
|
|
||||||
|
.dropdown-toggle::after { |
||||||
|
margin-left: 0.71em; |
||||||
|
} |
@ -1,162 +1,166 @@ |
|||||||
.navbar { |
.navbar { |
||||||
position: relative; |
position: relative; |
||||||
z-index: 100; |
z-index: 100; |
||||||
|
|
||||||
&-primary { |
&-primary { |
||||||
background-color: $primary; |
background-color: $primary; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.navbar-collapse.collapsing, |
.navbar-collapse.collapsing, |
||||||
.navbar-collapse.collapse.show { |
.navbar-collapse.collapse.show { |
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
|
|
||||||
.search-form { |
.search-form { |
||||||
order: -1; |
align-items: center; |
||||||
width: 100%; |
order: -1; |
||||||
align-items: center; |
width: 100%; |
||||||
|
|
||||||
form { |
form { |
||||||
flex-grow: 1; |
flex-grow: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.input-group { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.navbar-nav { |
||||||
|
white-space: nowrap; |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
.input-group { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.navbar-nav { |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
.navbar-brand { |
.navbar-brand { |
||||||
margin-left: 0; |
margin-left: 0; |
||||||
} |
} |
||||||
|
|
||||||
.navbar-logo { |
.navbar-logo { |
||||||
height: 1.5em; |
height: 1.5em; |
||||||
} |
} |
||||||
|
|
||||||
@include media-breakpoint-up(md) { |
@include media-breakpoint-up(md) { |
||||||
.navbar-expand-lg .navbar-nav .nav-link { |
.navbar-expand-lg .navbar-nav .nav-link { |
||||||
padding-left: 0.75rem; |
padding-left: 0.71rem; |
||||||
padding-right: 0.75rem; |
padding-right: 0.71rem; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.navbar .nav-item { |
.navbar { |
||||||
font-size: 14px; |
.nav-item { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.navbar-dark .navbar-nav .nav-link { |
.navbar-dark { |
||||||
color: $white; |
.navbar-nav { |
||||||
|
.nav-link { |
||||||
|
color: $white; |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.navbar-nav .nav-link { |
.navbar-nav { |
||||||
display: flex; |
.nav-link { |
||||||
align-items: center; |
align-items: center; |
||||||
|
display: flex; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.nav-link-icon { |
.nav-link-icon { |
||||||
display: flex; |
align-items: center; |
||||||
align-items: center; |
display: flex; |
||||||
position: relative; |
margin-right: 0.71em; |
||||||
top: -1px; |
position: relative; |
||||||
margin-right: 0.5em; |
top: -1px; |
||||||
|
|
||||||
path { |
path { |
||||||
fill: $secondary; |
fill: $secondary; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.navbar .search-form { |
.navbar { |
||||||
display: flex; |
.search-form { |
||||||
|
display: flex; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.navbar .form-control { |
.navbar { |
||||||
background: transparent; |
.form-control { |
||||||
width: auto; |
background: transparent; |
||||||
font-size: 12px; |
border-color: transparentize($white, 0.30); |
||||||
border-right: none; |
border-right: none; |
||||||
color: $white; |
color: $white; |
||||||
border-color: transparentize($white, 0.30); |
font-size: 12px; |
||||||
padding-right: 0px; |
padding-right: 0; |
||||||
|
width: auto; |
||||||
|
|
||||||
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */ |
&::-webkit-input-placeholder { |
||||||
color: transparentize($white, 0.5); |
/* Chrome/Opera/Safari */ |
||||||
} |
color: transparentize($white, 0.5); |
||||||
&::-moz-placeholder { /* Firefox 19+ */ |
} |
||||||
color: transparentize($white, 0.5); |
&::-moz-placeholder { |
||||||
} |
/* Firefox 19+ */ |
||||||
&:-ms-input-placeholder { /* IE 10+ */ |
color: transparentize($white, 0.5); |
||||||
color: transparentize($white, 0.5); |
} |
||||||
} |
&:-ms-input-placeholder { |
||||||
&:-moz-placeholder { /* Firefox 18- */ |
/* IE 10+ */ |
||||||
color: transparentize($white, 0.5); |
color: transparentize($white, 0.5); |
||||||
} |
} |
||||||
|
&:-moz-placeholder { |
||||||
&:focus { |
/* Firefox 18- */ |
||||||
box-shadow: none; |
color: transparentize($white, 0.5); |
||||||
} |
} |
||||||
|
&:focus { |
||||||
@include media-breakpoint-up(xl) { |
box-shadow: none; |
||||||
width: calc(41ch + #{$input-padding-x}); |
} |
||||||
} |
@include media-breakpoint-up(xl) { |
||||||
|
width: calc(41ch + #{$input-padding-x}); |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.navbar .input-group-text { |
.navbar { |
||||||
background: none; |
.input-group-text { |
||||||
border-left: none; |
background: none; |
||||||
border-color: transparentize($white, 0.30); |
border-color: transparentize($white, 0.30); |
||||||
|
border-left: none; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.input-group-append { |
.input-group-append { |
||||||
margin-left: 0px; |
margin-left: 0; |
||||||
|
|
||||||
path { |
path { |
||||||
fill: $secondary; |
fill: $secondary; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.topnav-nav-link { |
.topnav-nav-link { |
||||||
position: relative; |
color: $white; |
||||||
color: $white; |
position: relative; |
||||||
|
|
||||||
&:before { |
&:before { |
||||||
content: ""; |
background-color: $secondary; |
||||||
position: absolute; |
border-radius: 0 0 4px 4px; |
||||||
display: block; |
top: -10px; |
||||||
bottom: -10px; |
content: ""; |
||||||
left: 50%; |
display: block; |
||||||
width: 75%; |
height: 0.25rem; |
||||||
height: 0.2rem; |
left: 50%; |
||||||
background-color: $secondary; |
opacity: 0; |
||||||
border-radius: 4px 4px 0 0; |
position: absolute; |
||||||
opacity: 0; |
transform: translateX(-50%); |
||||||
transform: translateX(-50%); |
transition: all 0.2s ease; |
||||||
transition: all 0.2s ease; |
width: 75%; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
@include media-breakpoint-up(lg) { |
@include media-breakpoint-up(lg) { |
||||||
.topnav-nav-link:hover:before { |
.topnav-nav-link { |
||||||
opacity: 1; |
&:hover { |
||||||
} |
&:before { |
||||||
} |
opacity: 1; |
||||||
|
} |
||||||
.dropdown-menu { |
} |
||||||
padding: 0px; |
} |
||||||
} |
} |
||||||
|
|
||||||
.dropdown-item { |
|
||||||
padding: 10px 20px; |
|
||||||
font-size: 12px; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
background-color: $tertiary; |
|
||||||
color: $white; |
|
||||||
} |
|
||||||
} |
|
@ -1,3 +1,29 @@ |
|||||||
$primary: #5b389f; |
$primary : #fff; |
||||||
$secondary: #7dd79f; |
$secondary : #15bba6; |
||||||
$tertiary: #997fdc; |
$tertiary : #15bba6; |
||||||
|
|
||||||
|
// Navbar elements |
||||||
|
.navbar.navbar-primary { |
||||||
|
&.navbar-dark { |
||||||
|
.navbar-nav { |
||||||
|
.nav-link { |
||||||
|
color: #a3a9b5; |
||||||
|
&:hover { |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
} |
||||||
|
.nav-link-icon { |
||||||
|
circle { |
||||||
|
fill: $secondary; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.topnav-nav-link { |
||||||
|
&:before { |
||||||
|
background-color: $secondary; |
||||||
|
} |
||||||
|
} |
@ -1,3 +1,5 @@ |
|||||||
// @import "neutral_v÷ariables"; |
// @import "neutral_v÷ariables"; |
||||||
@import "posdao_variables"; |
@import "posdao_variables"; |
||||||
|
// @import "sokol_variables"; |
||||||
|
// @import "dai_variables"; |
||||||
@import "theme/base_variables"; |
@import "theme/base_variables"; |
||||||
|
Before Width: | Height: | Size: 410 B After Width: | Height: | Size: 274 B |
Before Width: | Height: | Size: 593 B After Width: | Height: | Size: 442 B |
After Width: | Height: | Size: 389 B |
Before Width: | Height: | Size: 945 B After Width: | Height: | Size: 350 B |
After Width: | Height: | Size: 118 B |
Before Width: | Height: | Size: 671 B After Width: | Height: | Size: 698 B |