Blockchain explorer for Ethereum based network and a tool for inspecting and analyzing EVM based blockchains.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
blockscout/apps/block_scout_web/assets/css/components/_navbar.scss

116 lines
1.8 KiB

.navbar {
position: relative;
z-index: 10;
&-primary {
background-color: $primary;
}
}
.navbar-brand {
margin-left: 10px;
}
.navbar-logo {
height: 36px;
}
@include media-breakpoint-up(md) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
.navbar .nav-item {
font-size: 14px;
}
.navbar-dark .navbar-nav .nav-link {
color: $white;
}
.navbar .form-control {
background: transparent;
width: auto;
font-size: 12px;
border-right: none;
color: $white;
border-color: transparentize($white, 0.30);
padding-right: 0px;
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: transparentize($white, 0.5);
}
&::-moz-placeholder { /* Firefox 19+ */
color: transparentize($white, 0.5);
}
&:-ms-input-placeholder { /* IE 10+ */
color: transparentize($white, 0.5);
}
&:-moz-placeholder { /* Firefox 18- */
color: transparentize($white, 0.5);
}
&:focus {
box-shadow: none;
}
@include media-breakpoint-up(xl) {
width: calc(41ch + #{$input-padding-x});
}
}
.navbar .input-group-text {
background: none;
border-left: none;
border-color: transparentize($white, 0.30);
}
.input-group-append {
margin-left: 0px;
}
.fa-search {
color: $white;
}
.topnav-nav-link {
position: relative;
color: $white;
&:before {
content: "";
position: absolute;
display: block;
bottom: -13px;
left: 50%;
width: 75%;
height: 0.2rem;
background-color: $white;
opacity: 0;
transform: translateX(-50%);
transition: all 0.2s ease;
}
&:hover {
&:before {
opacity: 1;
}
}
}
.dropdown-menu {
padding: 0px;
}
.dropdown-item {
padding: 10px 20px;
&:hover {
background-color: $tertiary;
color: $white;
}
}