Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix navbar colors

Browse Source
This commit is contained in:
Jeremy Thomas
2017-09-10 17:16:12 +01:00
parent e49e76ef28
commit bc1b55ee26
4 changed files with 225 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
docs/css/bulma-docs.css
View File

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