(fix) navbar link color - navbar active network icon color

pull/1844/head
Gabriel Rodriguez Alsina 6 years ago
parent e94bd82494
commit 919b29b453
  1. 12
      apps/block_scout_web/assets/css/components/_navbar.scss
  2. 2
      apps/block_scout_web/lib/block_scout_web/templates/icons/_active_icon.html.eex
  3. 1
      apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@ -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;
} }
} }

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"> <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6">
<circle cx="3" cy="3" r="3" fill="#A3A9B5" /> <circle cx="3" cy="3" r="3" fill="#80d6a1" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 118 B

After

Width:  |  Height:  |  Size: 118 B

@ -78,7 +78,6 @@
</li> </li>
<li class="nav-item dropdown nav-item-networks"> <li class="nav-item dropdown nav-item-networks">
<a class="nav-link topnav-nav-link dropdown-toggle active-icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="nav-link topnav-nav-link dropdown-toggle active-icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- ICON FOR MAINNET -->
<span class="nav-link-icon"> <span class="nav-link-icon">
<%= render BlockScoutWeb.IconsView, "_active_icon.html" %> <%= render BlockScoutWeb.IconsView, "_active_icon.html" %>
</span> </span>

Loading…
Cancel
Save