CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Removed Unnecessary spaces from navbar.scss file

Browse Source
pull/2665/head
Yegor San 5 years ago
parent eb7aca66fa
commit 1a456a5c08
2 changed files with 295 additions and 290 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      .vscode/settings.json
  2. 582
      apps/block_scout_web/assets/css/components/_navbar.scss

3
.vscode/settings.json vendored
Unescape View File

@ -0,0 +1,3 @@
{
"editor.formatOnSave": false
}

582
apps/block_scout_web/assets/css/components/_navbar.scss
Unescape View File

@ -14,352 +14,354 @@ $navbar-logo-height: 28px !default;
$navbar-logo-width: auto !default; $navbar-logo-width: auto !default;
.navbar.navbar-primary { .navbar.navbar-primary {
background-color: $header-background-color; background-color: $header-background-color;
position: relative; position: relative;
z-index: 100; z-index: 100;
.nav-item {
font-size: 14px;
}
.navbar-nav { .nav-item {
font-size: 14px;
.nav-link { }
align-items: center;
color: $header-links-color; .navbar-nav {
display: flex;
font-size: 14px; .nav-link {
position: relative; align-items: center;
transition: $transition-cont; color: $header-links-color;
display: flex;
&:before { font-size: 14px;
background-color: $header-icon-border-color-hover; position: relative;
border-radius: 0 0 4px 4px; transition: $transition-cont;
content: "";
display: block; &:before {
height: 0.25rem; background-color: $header-icon-border-color-hover;
left: 50%; border-radius: 0 0 4px 4px;
opacity: 0; content: "";
position: absolute; display: block;
top: -10px; height: 0.25rem;
transform: translateX(-50%); left: 50%;
transition: $transition-cont; opacity: 0;
width: calc( position: absolute;
100% - #{$header-link-horizontal-padding} - #{$header-link-horizontal-padding} top: -10px;
); transform: translateX(-50%);
} transition: $transition-cont;
width: calc(
&.active, 100% - #{$header-link-horizontal-padding} - #{$header-link-horizontal-padding}
&:hover { );
@include media-breakpoint-up(lg) { }
&:before {
opacity: 1; &.active,
} &:hover {
} @include media-breakpoint-up(lg) {
} &:before {
opacity: 1;
&.active, }
&:hover,
&.active-icon {
color: $header-links-color-active;
.nav-link-icon {
path {
fill: $header-icon-color-hover;
}
}
}
.nav-link-icon {
align-items: center;
display: flex;
margin-right: 0.71em;
position: relative;
top: -1px;
path {
fill: $header-icon-color;
transition: $transition-cont;
}
}
} }
}
.nav-item-networks {
margin-left: auto; &.active,
.nav-link:before { &:hover,
display: none; &.active-icon {
} color: $header-links-color-active;
.nav-link-icon {
path {
fill: $header-icon-color-hover;
}
} }
} }
.navbar-toggler { .nav-link-icon {
outline: none; align-items: center;
color: $primary; display: flex;
margin-right: 0.71em;
position: relative;
top: -1px;
.navbar-toggler-icon { path {
background-image: url($header-toggler-icon); fill: $header-icon-color;
} transition: $transition-cont;
.navbar-toggler-icon-1 {
display: none;
} }
}
} }
.search-form {
display: flex;
@include media-breakpoint-up(xl) { .nav-item-networks {
height: 57px; margin-left: auto;
margin-bottom: -8px; .nav-link:before {
margin-top: -8px; display: none;
} }
} }
}
.navbar-toggler {
outline: none;
color: $primary;
.form-inline { .navbar-toggler-icon {
height: 100%; background-image: url($header-toggler-icon);
} }
}
.search-form {
display: flex;
.input-group { @include media-breakpoint-up(xl) {
height: 100%; height: 57px;
position: relative; margin-bottom: -8px;
margin-top: -8px;
} }
}
.form-control { .form-inline {
background: $header-textfield-background-color; height: 100%;
border-color: $header-textfield-background-color; }
color: $header-textfield-text-color;
font-size: 14px;
height: 100%;
padding-left: 38px;
padding-right: 8px;
position: relative;
width: 100%;
z-index: 1;
&[placeholder]{ .input-group {
text-overflow: ellipsis !important; height: 100%;
} position: relative;
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */ }
text-overflow: ellipsis !important;
}
&::-moz-placeholder { /* Firefox 19+ */
text-overflow: ellipsis !important;
}
&:-ms-input-placeholder { /* IE 10+ */
text-overflow: ellipsis !important;
}
&:-moz-placeholder { /* Firefox 18- */
text-overflow: ellipsis !important;
}
&:focus { .form-control {
box-shadow: none; background: $header-textfield-background-color;
} border-color: $header-textfield-background-color;
color: $header-textfield-text-color;
font-size: 14px;
height: 100%;
padding-left: 38px;
padding-right: 8px;
position: relative;
width: 100%;
z-index: 1;
@include media-breakpoint-up(xl) { &[placeholder]{
width: 340px; text-overflow: ellipsis !important;
}
@media (min-width: 1366px) {
width: 500px;
}
@media (min-width: 1440px) {
width: 580px;
}
} }
.input-group-append { &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
height: 38px; text-overflow: ellipsis !important;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
z-index: 5;
* {
fill: $header-textfield-magnifier-color;
}
} }
.input-group-text { &::-moz-placeholder { /* Firefox 19+ */
align-items: center; text-overflow: ellipsis !important;
background: none; }
border-color: transparent; &:-ms-input-placeholder { /* IE 10+ */
display: flex; text-overflow: ellipsis !important;
height: 100%; }
justify-content: center; &:-moz-placeholder { /* Firefox 18- */
padding: 0; text-overflow: ellipsis !important;
width: 100%;
} }
&:focus {
box-shadow: none;
}
@include media-breakpoint-up(xl) {
width: 340px;
}
@media (min-width: 1366px) {
width: 500px;
}
@media (min-width: 1440px) {
width: 580px;
}
}
.input-group-append {
height: 38px;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
z-index: 5;
* {
fill: $header-textfield-magnifier-color;
}
}
.input-group-text {
align-items: center;
background: none;
border-color: transparent;
display: flex;
height: 100%;
justify-content: center;
padding: 0;
width: 100%;
}
} }
.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 {
align-items: center; align-items: center;
order: -1; order: -1;
width: 100%; width: 100%;
form {
flex-grow: 1;
}
form {
flex-grow: 1;
} }
.input-group {
width: 100%;
.awesomplete { }
@include media-breakpoint-down(lg) { .input-group {
width: 100%; width: 100%;
}
} .awesomplete {
} @include media-breakpoint-down(lg) {
.navbar-nav { width: 100%;
white-space: nowrap; }
} }
}
.navbar-nav {
white-space: nowrap;
}
} }
.navbar-brand { .navbar-brand {
margin-left: 0; margin-left: 0;
flex-shrink: 1; flex-shrink: 1;
display: inline-flex; display: inline-flex;
.navbar-logo { .navbar-logo {
max-width: 100%; max-width: 100%;
} }
} }
.navbar-logo { .navbar-logo {
max-height: $navbar-logo-height; max-height: $navbar-logo-height;
width: $navbar-logo-width; width: $navbar-logo-width;
} }
@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: $header-link-horizontal-padding; padding-left: $header-link-horizontal-padding;
padding-right: $header-link-horizontal-padding; padding-right: $header-link-horizontal-padding;
} }
} }
.add-border { .add-border {
border: 1px solid transparentize($white, 0.30); border: 1px solid transparentize($white, 0.30);
} }
.navbar-collapse { .navbar-collapse {
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
flex-shrink: 0; flex-shrink: 0;
@media (min-width: 992px) { @media (min-width: 992px) {
align-items: center; align-items: center;
} }
} }
.navbar-container, .navbar-primary { .navbar-container, .navbar-primary {
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
padding-right: 0; padding-right: 0;
} }
} }
.nav-item-networks { .nav-item-networks {
.topnav-nav-link { .topnav-nav-link {
transition: none !important; transition: none !important;
} }
} }
.nav-link-new { .nav-link-new {
margin-left: auto; margin-left: auto;
border-right: 1px solid #828ba0a1; border-right: 1px solid #828ba0a1;
padding: 0px 11px 0px 5px; padding: 0px 11px 0px 5px;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
display: none; display: none;
} }
} }
.new-button { .new-button {
margin-right: -10px!important; margin-right: -10px!important;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
display: none!important; display: none!important;
} }
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.navbar.navbar-primary .navbar-nav .nav-link .nav-link-icon { .navbar.navbar-primary .navbar-nav .nav-link .nav-link-icon {
display: none; display: none;
} }
.navbar-nav .nav-item .dropdown-toggle::after { .navbar-nav .nav-item .dropdown-toggle::after {
display: none; display: none;
} }
.navbar.navbar-primary .navbar-nav .nav-link { .navbar.navbar-primary .navbar-nav .nav-link {
font-size: 28px; font-size: 28px;
color: #333333; color: #333333;
padding: 0.7rem 1.4rem; padding: 0.7rem 1.4rem;
font-weight: 600; font-weight: 600;
} }
.navbar .dropdown-menu { .navbar .dropdown-menu {
box-shadow: none; box-shadow: none;
} }
.navbar .dropdown-menu .dark-mode-changer { .navbar .dropdown-menu .dark-mode-changer {
display: none; display: none;
} }
.nav-item .dropdown { .nav-item .dropdown {
padding: 0px 15%; padding: 0px 15%;
font-weight: 600; font-weight: 600;
} }
.last-child { .last-child {
display: none!important; display: none!important;
} }
.search-form { .search-form {
width: 100%!important; width: 100%!important;
} }
.awesomplete { .awesomplete {
height: 50px; height: 50px;
} }
.navbar.navbar-primary .input-group-append { .navbar.navbar-primary .input-group-append {
left: 15px !important; left: 15px !important;
} }
.navbar.navbar-primary .form-control { .navbar.navbar-primary .form-control {
padding-right: 30px; padding-right: 30px;
padding-left: 13.5%; padding-left: 13.5%;
} }
.dropdown-item { .dropdown-item {
padding: 10px 1.6rem !important; padding: 10px 1.6rem !important;
color: rgba(51, 51, 51, 0.7)!important; color: rgba(51, 51, 51, 0.7)!important;
} }
.navbar.navbar-primary .navbar-nav .nav-link:hover, .navbar.navbar-primary .navbar-nav .nav-link:hover,
.navbar.navbar-primary .navbar-nav .nav-link.activeLink, .navbar.navbar-primary .navbar-nav .nav-link.activeLink,
.navbar.navbar-primary .navbar-nav .nav-link:focus { .navbar.navbar-primary .navbar-nav .nav-link:focus {
background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0)); background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0));
width: 100%; width: 100%;
border-left: 2px solid #5c33a2; border-left: 2px solid #5c33a2;
} }
.navbar.navbar-primary .navbar-nav .nav-link:hover:before { .navbar.navbar-primary .navbar-nav .nav-link:hover:before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: 50px; height: 50px;
width: 50%; width: 50%;
border-left: 5px solid #726E97; border-left: 5px solid #726E97;
} }
.navbar { .navbar {
padding: 0.5rem 0rem!important; padding: 0.5rem 0rem!important;
} }
.navbar-brand { .navbar-brand {
margin-right: 0px!important; margin-right: 0px!important;
margin-left: 1rem; margin-left: 1rem;
} }
.dropdown-item.active, .dropdown-item.active,
.dropdown-item:hover, .dropdown-item:hover,
.dropdown-item:focus { .dropdown-item:focus {
background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0)); background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0));
width: 100%; width: 100%;
border-left: 2px solid #5c33a2; border-left: 2px solid #5c33a2;
background-color: white!important; background-color: white!important;
} }
.dark-mode-changer svg path { .dark-mode-changer svg path {
fill: #a3a9b5!important; fill: #a3a9b5!important;
} }
.dropdown-toggle::after { .dropdown-toggle::after {
margin-left: 0.51em!important; margin-left: 0.51em!important;
color: #a3a9b5; color: #a3a9b5;
} }
}
#toggleImage2 {
display: none;
outline: none;
}
}
Write Preview
Loading…
Cancel
Save