mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix navbar colors
This commit is contained in:
Jeremy Thomas
parent
e49e76ef28
commit
bc1b55ee26
@ -1,7 +1,11 @@
|
||||
<nav class="navbar is-{{ include.color }}">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
{% if include.light %}
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
{% else %}
|
||||
<img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="navbar-burger burger" data-target="navMenuColor{{ include.color }}-example">
|
||||
<span></span>
|
||||
|
||||
@ -5629,20 +5629,30 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.navbar.is-white .navbar-brand > .navbar-item,
|
||||
.navbar.is-white .navbar-brand .navbar-link {
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-white .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-white .navbar-brand .navbar-link.is-active {
|
||||
background-color: #f2f2f2;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.navbar.is-white .navbar-brand .navbar-link::after {
|
||||
border-color: #0a0a0a;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-white .navbar-brand > .navbar-item,
|
||||
.navbar.is-white .navbar-brand .navbar-link,
|
||||
.navbar.is-white .navbar-start > .navbar-item,
|
||||
.navbar.is-white .navbar-start .navbar-link,
|
||||
.navbar.is-white .navbar-end > .navbar-item,
|
||||
.navbar.is-white .navbar-end .navbar-link {
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-white .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-white .navbar-brand .navbar-link.is-active,
|
||||
.navbar.is-white .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-white .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-white .navbar-start > a.navbar-item:hover, .navbar.is-white .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-white .navbar-start .navbar-link:hover,
|
||||
.navbar.is-white .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-white .navbar-end > a.navbar-item:hover,
|
||||
@ -5652,7 +5662,6 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
background-color: #f2f2f2;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.navbar.is-white .navbar-brand .navbar-link::after,
|
||||
.navbar.is-white .navbar-start .navbar-link::after,
|
||||
.navbar.is-white .navbar-end .navbar-link::after {
|
||||
border-color: #0a0a0a;
|
||||
@ -5663,7 +5672,8 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.navbar.is-white .navbar-dropdown a.navbar-item.is-active {
|
||||
color: white;
|
||||
background-color: white;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5672,20 +5682,30 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar.is-black .navbar-brand > .navbar-item,
|
||||
.navbar.is-black .navbar-brand .navbar-link {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-black .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-black .navbar-brand .navbar-link.is-active {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar.is-black .navbar-brand .navbar-link::after {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-black .navbar-brand > .navbar-item,
|
||||
.navbar.is-black .navbar-brand .navbar-link,
|
||||
.navbar.is-black .navbar-start > .navbar-item,
|
||||
.navbar.is-black .navbar-start .navbar-link,
|
||||
.navbar.is-black .navbar-end > .navbar-item,
|
||||
.navbar.is-black .navbar-end .navbar-link {
|
||||
color: white;
|
||||
}
|
||||
.navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-black .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-black .navbar-brand .navbar-link.is-active,
|
||||
.navbar.is-black .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-black .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-black .navbar-start > a.navbar-item:hover, .navbar.is-black .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-black .navbar-start .navbar-link:hover,
|
||||
.navbar.is-black .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-black .navbar-end > a.navbar-item:hover,
|
||||
@ -5695,7 +5715,6 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar.is-black .navbar-brand .navbar-link::after,
|
||||
.navbar.is-black .navbar-start .navbar-link::after,
|
||||
.navbar.is-black .navbar-end .navbar-link::after {
|
||||
border-color: white;
|
||||
@ -5706,7 +5725,8 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: white;
|
||||
}
|
||||
.navbar.is-black .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #0a0a0a;
|
||||
background-color: #0a0a0a;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5715,20 +5735,30 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.navbar.is-light .navbar-brand > .navbar-item,
|
||||
.navbar.is-light .navbar-brand .navbar-link {
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-light .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-light .navbar-brand .navbar-link.is-active {
|
||||
background-color: #e8e8e8;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.navbar.is-light .navbar-brand .navbar-link::after {
|
||||
border-color: #363636;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-light .navbar-brand > .navbar-item,
|
||||
.navbar.is-light .navbar-brand .navbar-link,
|
||||
.navbar.is-light .navbar-start > .navbar-item,
|
||||
.navbar.is-light .navbar-start .navbar-link,
|
||||
.navbar.is-light .navbar-end > .navbar-item,
|
||||
.navbar.is-light .navbar-end .navbar-link {
|
||||
color: #363636;
|
||||
}
|
||||
.navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-light .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-light .navbar-brand .navbar-link.is-active,
|
||||
.navbar.is-light .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-light .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-light .navbar-start > a.navbar-item:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-light .navbar-start .navbar-link:hover,
|
||||
.navbar.is-light .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-light .navbar-end > a.navbar-item:hover,
|
||||
@ -5738,7 +5768,6 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
background-color: #e8e8e8;
|
||||
color: #363636;
|
||||
}
|
||||
.navbar.is-light .navbar-brand .navbar-link::after,
|
||||
.navbar.is-light .navbar-start .navbar-link::after,
|
||||
.navbar.is-light .navbar-end .navbar-link::after {
|
||||
border-color: #363636;
|
||||
@ -5749,7 +5778,8 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #363636;
|
||||
}
|
||||
.navbar.is-light .navbar-dropdown a.navbar-item.is-active {
|
||||
color: whitesmoke;
|
||||
background-color: whitesmoke;
|
||||
color: #363636;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5758,20 +5788,30 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.navbar.is-dark .navbar-brand > .navbar-item,
|
||||
.navbar.is-dark .navbar-brand .navbar-link {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-dark .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-dark .navbar-brand .navbar-link.is-active {
|
||||
background-color: #292929;
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.navbar.is-dark .navbar-brand .navbar-link::after {
|
||||
border-color: whitesmoke;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-dark .navbar-brand > .navbar-item,
|
||||
.navbar.is-dark .navbar-brand .navbar-link,
|
||||
.navbar.is-dark .navbar-start > .navbar-item,
|
||||
.navbar.is-dark .navbar-start .navbar-link,
|
||||
.navbar.is-dark .navbar-end > .navbar-item,
|
||||
.navbar.is-dark .navbar-end .navbar-link {
|
||||
color: whitesmoke;
|
||||
}
|
||||
.navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-dark .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-dark .navbar-brand .navbar-link.is-active,
|
||||
.navbar.is-dark .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-dark .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-dark .navbar-start > a.navbar-item:hover, .navbar.is-dark .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-dark .navbar-start .navbar-link:hover,
|
||||
.navbar.is-dark .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-dark .navbar-end > a.navbar-item:hover,
|
||||
@ -5781,7 +5821,6 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
background-color: #292929;
|
||||
color: whitesmoke;
|
||||
}
|
||||
.navbar.is-dark .navbar-brand .navbar-link::after,
|
||||
.navbar.is-dark .navbar-start .navbar-link::after,
|
||||
.navbar.is-dark .navbar-end .navbar-link::after {
|
||||
border-color: whitesmoke;
|
||||
@ -5792,7 +5831,8 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
.navbar.is-dark .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #363636;
|
||||
background-color: #363636;
|
||||
color: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5801,20 +5841,30 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-primary .navbar-brand > .navbar-item,
|
||||
.navbar.is-primary .navbar-brand .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-primary .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-primary .navbar-brand .navbar-link.is-active {
|
||||
background-color: #00b89c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-primary .navbar-brand .navbar-link::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-primary .navbar-brand > .navbar-item,
|
||||
.navbar.is-primary .navbar-brand .navbar-link,
|
||||
.navbar.is-primary .navbar-start > .navbar-item,
|
||||
.navbar.is-primary .navbar-start .navbar-link,
|
||||
.navbar.is-primary .navbar-end > .navbar-item,
|
||||
.navbar.is-primary .navbar-end .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-primary .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-primary .navbar-brand .navbar-link.is-active,
|
||||
.navbar.is-primary .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-primary .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-primary .navbar-start .navbar-link:hover,
|
||||
.navbar.is-primary .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-primary .navbar-end > a.navbar-item:hover,
|
||||
@ -5824,7 +5874,6 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
background-color: #00b89c;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-primary .navbar-brand .navbar-link::after,
|
||||
.navbar.is-primary .navbar-start .navbar-link::after,
|
||||
.navbar.is-primary .navbar-end .navbar-link::after {
|
||||
border-color: #fff;
|
||||
@ -5835,7 +5884,8 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #00d1b2;
|
||||
background-color: #00d1b2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5844,20 +5894,30 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-info .navbar-brand > .navbar-item,
|
||||
.navbar.is-info .navbar-brand .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-info .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-info .navbar-brand .navbar-link.is-active {
|
||||
background-color: #2366d1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-info .navbar-brand .navbar-link::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-info .navbar-brand > .navbar-item,
|
||||
.navbar.is-info .navbar-brand .navbar-link,
|
||||
.navbar.is-info .navbar-start > .navbar-item,
|
||||
.navbar.is-info .navbar-start .navbar-link,
|
||||
.navbar.is-info .navbar-end > .navbar-item,
|
||||
.navbar.is-info .navbar-end .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-info .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-info .navbar-brand .navbar-link.is-active,
|
||||
.navbar.is-info .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-info .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-info .navbar-start > a.navbar-item:hover, .navbar.is-info .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-info .navbar-start .navbar-link:hover,
|
||||
.navbar.is-info .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-info .navbar-end > a.navbar-item:hover,
|
||||
@ -5867,7 +5927,6 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
background-color: #2366d1;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-info .navbar-brand .navbar-link::after,
|
||||
.navbar.is-info .navbar-start .navbar-link::after,
|
||||
.navbar.is-info .navbar-end .navbar-link::after {
|
||||
border-color: #fff;
|
||||
@ -5878,7 +5937,8 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-info .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #3273dc;
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5887,20 +5947,30 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-success .navbar-brand > .navbar-item,
|
||||
.navbar.is-success .navbar-brand .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-success .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-success .navbar-brand .navbar-link.is-active {
|
||||
background-color: #20bc56;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-success .navbar-brand .navbar-link::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-success .navbar-brand > .navbar-item,
|
||||
.navbar.is-success .navbar-brand .navbar-link,
|
||||
.navbar.is-success .navbar-start > .navbar-item,
|
||||
.navbar.is-success .navbar-start .navbar-link,
|
||||
.navbar.is-success .navbar-end > .navbar-item,
|
||||
.navbar.is-success .navbar-end .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-success .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-success .navbar-brand .navbar-link.is-active,
|
||||
.navbar.is-success .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-success .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-success .navbar-start > a.navbar-item:hover, .navbar.is-success .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-success .navbar-start .navbar-link:hover,
|
||||
.navbar.is-success .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-success .navbar-end > a.navbar-item:hover,
|
||||
@ -5910,7 +5980,6 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
background-color: #20bc56;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-success .navbar-brand .navbar-link::after,
|
||||
.navbar.is-success .navbar-start .navbar-link::after,
|
||||
.navbar.is-success .navbar-end .navbar-link::after {
|
||||
border-color: #fff;
|
||||
@ -5921,7 +5990,8 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-success .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #23d160;
|
||||
background-color: #23d160;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5930,20 +6000,30 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.navbar.is-warning .navbar-brand > .navbar-item,
|
||||
.navbar.is-warning .navbar-brand .navbar-link {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-warning .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-warning .navbar-brand .navbar-link.is-active {
|
||||
background-color: #ffd83d;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.navbar.is-warning .navbar-brand .navbar-link::after {
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-warning .navbar-brand > .navbar-item,
|
||||
.navbar.is-warning .navbar-brand .navbar-link,
|
||||
.navbar.is-warning .navbar-start > .navbar-item,
|
||||
.navbar.is-warning .navbar-start .navbar-link,
|
||||
.navbar.is-warning .navbar-end > .navbar-item,
|
||||
.navbar.is-warning .navbar-end .navbar-link {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-warning .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-warning .navbar-brand .navbar-link.is-active,
|
||||
.navbar.is-warning .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-warning .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-warning .navbar-start > a.navbar-item:hover, .navbar.is-warning .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-warning .navbar-start .navbar-link:hover,
|
||||
.navbar.is-warning .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-warning .navbar-end > a.navbar-item:hover,
|
||||
@ -5953,7 +6033,6 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
background-color: #ffd83d;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.navbar.is-warning .navbar-brand .navbar-link::after,
|
||||
.navbar.is-warning .navbar-start .navbar-link::after,
|
||||
.navbar.is-warning .navbar-end .navbar-link::after {
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
@ -5964,7 +6043,8 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.navbar.is-warning .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #ffdd57;
|
||||
background-color: #ffdd57;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@ -5973,20 +6053,30 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-danger .navbar-brand > .navbar-item,
|
||||
.navbar.is-danger .navbar-brand .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-danger .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-danger .navbar-brand .navbar-link.is-active {
|
||||
background-color: #ff1f4b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-danger .navbar-brand .navbar-link::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-danger .navbar-brand > .navbar-item,
|
||||
.navbar.is-danger .navbar-brand .navbar-link,
|
||||
.navbar.is-danger .navbar-start > .navbar-item,
|
||||
.navbar.is-danger .navbar-start .navbar-link,
|
||||
.navbar.is-danger .navbar-end > .navbar-item,
|
||||
.navbar.is-danger .navbar-end .navbar-link {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active,
|
||||
.navbar.is-danger .navbar-brand .navbar-link:hover,
|
||||
.navbar.is-danger .navbar-brand .navbar-link.is-active,
|
||||
.navbar.is-danger .navbar-start > a.navbar-item:hover,
|
||||
.navbar.is-danger .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-danger .navbar-start > a.navbar-item:hover, .navbar.is-danger .navbar-start > a.navbar-item.is-active,
|
||||
.navbar.is-danger .navbar-start .navbar-link:hover,
|
||||
.navbar.is-danger .navbar-start .navbar-link.is-active,
|
||||
.navbar.is-danger .navbar-end > a.navbar-item:hover,
|
||||
@ -5996,7 +6086,6 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
background-color: #ff1f4b;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-danger .navbar-brand .navbar-link::after,
|
||||
.navbar.is-danger .navbar-start .navbar-link::after,
|
||||
.navbar.is-danger .navbar-end .navbar-link::after {
|
||||
border-color: #fff;
|
||||
@ -6007,7 +6096,8 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-danger .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #ff3860;
|
||||
background-color: #ff3860;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1012,6 +1012,23 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>is-primary</code></li>
|
||||
<li><code>is-info</code></li>
|
||||
<li><code>is-success</code></li>
|
||||
<li><code>is-warning</code></li>
|
||||
<li><code>is-danger</code></li>
|
||||
<li><code>is-black</code></li>
|
||||
<li><code>is-dark</code></li>
|
||||
<li><code>is-light</code></li>
|
||||
<li><code>is-white</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
@ -1027,13 +1044,29 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="warning" %}
|
||||
{% include examples/navbar-color.html color="warning" light=true %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="danger" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="black" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="dark" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="light" light=true %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="white" light=true %}
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -43,8 +43,20 @@ $navbar-divider-background-color: $border !default
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.navbar-brand
|
||||
& > .navbar-item,
|
||||
.navbar-link
|
||||
color: $color-invert
|
||||
& > a.navbar-item,
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
+desktop
|
||||
.navbar-brand,
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
& > .navbar-item,
|
||||
@ -66,7 +78,8 @@ $navbar-divider-background-color: $border !default
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
&.is-active
|
||||
color: $color
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
& > .container
|
||||
align-items: stretch
|
||||
display: flex
|
||||
|
||||
Loading…
Reference in New Issue
Block a user