mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Navbar colors docs
This commit is contained in:
Jeremy Thomas
parent
8091c23fae
commit
83892a21e3
@ -126,3 +126,6 @@
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
text-align: left
|
||||
|
||||
.content li .highlight
|
||||
margin: 0
|
||||
|
||||
@ -2262,10 +2262,19 @@ a.box:active {
|
||||
}
|
||||
|
||||
.content figure {
|
||||
margin: 2em;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content figure:not(:first-child) {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.content figure:not(:last-child) {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.content figure img {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -5403,7 +5412,7 @@ a.dropdown-item.is-active {
|
||||
}
|
||||
|
||||
.nav-toggle span {
|
||||
background-color: #4a4a4a;
|
||||
background-color: currentColor;
|
||||
display: block;
|
||||
height: 1px;
|
||||
left: 50%;
|
||||
@ -5428,11 +5437,7 @@ a.dropdown-item.is-active {
|
||||
}
|
||||
|
||||
.nav-toggle:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.nav-toggle.is-active span {
|
||||
background-color: #00d1b2;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav-toggle.is-active span:nth-child(1) {
|
||||
@ -5624,31 +5629,42 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.navbar.is-white .navbar-item,
|
||||
.navbar.is-white .navbar-link {
|
||||
@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 a.navbar-item:hover, .navbar.is-white a.navbar-item.is-active,
|
||||
.navbar.is-white .navbar-link:hover,
|
||||
.navbar.is-white .navbar-link.is-active {
|
||||
.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 > .navbar-link:hover,
|
||||
.navbar.is-white .navbar-start > .navbar-link.is-active,
|
||||
.navbar.is-white .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-white .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-white .navbar-end > .navbar-link:hover,
|
||||
.navbar.is-white .navbar-end > .navbar-link.is-active {
|
||||
background-color: #f9f9f9;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-white .navbar-link::after {
|
||||
.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;
|
||||
}
|
||||
.navbar.is-white .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar.is-white .navbar-dropdown .navbar-item:not(a) {
|
||||
color: white;
|
||||
}
|
||||
.navbar.is-white .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-white .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #f9f9f9;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.navbar.is-white .navbar-dropdown a.navbar-item.is-active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-black {
|
||||
@ -5656,31 +5672,42 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar.is-black .navbar-item,
|
||||
.navbar.is-black .navbar-link {
|
||||
@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 a.navbar-item:hover, .navbar.is-black a.navbar-item.is-active,
|
||||
.navbar.is-black .navbar-link:hover,
|
||||
.navbar.is-black .navbar-link.is-active {
|
||||
.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 > .navbar-link:hover,
|
||||
.navbar.is-black .navbar-start > .navbar-link.is-active,
|
||||
.navbar.is-black .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-black .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-black .navbar-end > .navbar-link:hover,
|
||||
.navbar.is-black .navbar-end > .navbar-link.is-active {
|
||||
background-color: #040404;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-black .navbar-link::after {
|
||||
.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;
|
||||
}
|
||||
.navbar.is-black .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar.is-black .navbar-dropdown .navbar-item:not(a) {
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.navbar.is-black .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-black .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #040404;
|
||||
color: white;
|
||||
}
|
||||
.navbar.is-black .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #0a0a0a;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-light {
|
||||
@ -5688,31 +5715,42 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.navbar.is-light .navbar-item,
|
||||
.navbar.is-light .navbar-link {
|
||||
@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 a.navbar-item:hover, .navbar.is-light a.navbar-item.is-active,
|
||||
.navbar.is-light .navbar-link:hover,
|
||||
.navbar.is-light .navbar-link.is-active {
|
||||
.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 > .navbar-link:hover,
|
||||
.navbar.is-light .navbar-start > .navbar-link.is-active,
|
||||
.navbar.is-light .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-light .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-light .navbar-end > .navbar-link:hover,
|
||||
.navbar.is-light .navbar-end > .navbar-link.is-active {
|
||||
background-color: #eeeeee;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-light .navbar-link::after {
|
||||
.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;
|
||||
}
|
||||
.navbar.is-light .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar.is-light .navbar-dropdown .navbar-item:not(a) {
|
||||
color: whitesmoke;
|
||||
}
|
||||
.navbar.is-light .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #eeeeee;
|
||||
color: #363636;
|
||||
}
|
||||
.navbar.is-light .navbar-dropdown a.navbar-item.is-active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-dark {
|
||||
@ -5720,31 +5758,42 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.navbar.is-dark .navbar-item,
|
||||
.navbar.is-dark .navbar-link {
|
||||
@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 a.navbar-item:hover, .navbar.is-dark a.navbar-item.is-active,
|
||||
.navbar.is-dark .navbar-link:hover,
|
||||
.navbar.is-dark .navbar-link.is-active {
|
||||
.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 > .navbar-link:hover,
|
||||
.navbar.is-dark .navbar-start > .navbar-link.is-active,
|
||||
.navbar.is-dark .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-dark .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-dark .navbar-end > .navbar-link:hover,
|
||||
.navbar.is-dark .navbar-end > .navbar-link.is-active {
|
||||
background-color: #2f2f2f;
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-dark .navbar-link::after {
|
||||
.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;
|
||||
}
|
||||
.navbar.is-dark .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar.is-dark .navbar-dropdown .navbar-item:not(a) {
|
||||
color: #363636;
|
||||
}
|
||||
.navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #2f2f2f;
|
||||
color: whitesmoke;
|
||||
}
|
||||
.navbar.is-dark .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #363636;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-primary {
|
||||
@ -5752,31 +5801,42 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-primary .navbar-item,
|
||||
.navbar.is-primary .navbar-link {
|
||||
@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 a.navbar-item:hover, .navbar.is-primary a.navbar-item.is-active,
|
||||
.navbar.is-primary .navbar-link:hover,
|
||||
.navbar.is-primary .navbar-link.is-active {
|
||||
.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 > .navbar-link:hover,
|
||||
.navbar.is-primary .navbar-start > .navbar-link.is-active,
|
||||
.navbar.is-primary .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-primary .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-primary .navbar-end > .navbar-link:hover,
|
||||
.navbar.is-primary .navbar-end > .navbar-link.is-active {
|
||||
background-color: #00c4a7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-primary .navbar-link::after {
|
||||
.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;
|
||||
}
|
||||
.navbar.is-primary .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar.is-primary .navbar-dropdown .navbar-item:not(a) {
|
||||
color: #00d1b2;
|
||||
}
|
||||
.navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #00c4a7;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #00d1b2;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-info {
|
||||
@ -5784,31 +5844,42 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-info .navbar-item,
|
||||
.navbar.is-info .navbar-link {
|
||||
@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 a.navbar-item:hover, .navbar.is-info a.navbar-item.is-active,
|
||||
.navbar.is-info .navbar-link:hover,
|
||||
.navbar.is-info .navbar-link.is-active {
|
||||
.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 > .navbar-link:hover,
|
||||
.navbar.is-info .navbar-start > .navbar-link.is-active,
|
||||
.navbar.is-info .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-info .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-info .navbar-end > .navbar-link:hover,
|
||||
.navbar.is-info .navbar-end > .navbar-link.is-active {
|
||||
background-color: #276cda;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-info .navbar-link::after {
|
||||
.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;
|
||||
}
|
||||
.navbar.is-info .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar.is-info .navbar-dropdown .navbar-item:not(a) {
|
||||
color: #3273dc;
|
||||
}
|
||||
.navbar.is-info .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #276cda;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-info .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #3273dc;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-success {
|
||||
@ -5816,31 +5887,42 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-success .navbar-item,
|
||||
.navbar.is-success .navbar-link {
|
||||
@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 a.navbar-item:hover, .navbar.is-success a.navbar-item.is-active,
|
||||
.navbar.is-success .navbar-link:hover,
|
||||
.navbar.is-success .navbar-link.is-active {
|
||||
.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 > .navbar-link:hover,
|
||||
.navbar.is-success .navbar-start > .navbar-link.is-active,
|
||||
.navbar.is-success .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-success .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-success .navbar-end > .navbar-link:hover,
|
||||
.navbar.is-success .navbar-end > .navbar-link.is-active {
|
||||
background-color: #22c65b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-success .navbar-link::after {
|
||||
.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;
|
||||
}
|
||||
.navbar.is-success .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar.is-success .navbar-dropdown .navbar-item:not(a) {
|
||||
color: #23d160;
|
||||
}
|
||||
.navbar.is-success .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #22c65b;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-success .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #23d160;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-warning {
|
||||
@ -5848,31 +5930,42 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.navbar.is-warning .navbar-item,
|
||||
.navbar.is-warning .navbar-link {
|
||||
@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 a.navbar-item:hover, .navbar.is-warning a.navbar-item.is-active,
|
||||
.navbar.is-warning .navbar-link:hover,
|
||||
.navbar.is-warning .navbar-link.is-active {
|
||||
.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 > .navbar-link:hover,
|
||||
.navbar.is-warning .navbar-start > .navbar-link.is-active,
|
||||
.navbar.is-warning .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-warning .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-warning .navbar-end > .navbar-link:hover,
|
||||
.navbar.is-warning .navbar-end > .navbar-link.is-active {
|
||||
background-color: #ffdb4a;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-warning .navbar-link::after {
|
||||
.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);
|
||||
}
|
||||
.navbar.is-warning .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar.is-warning .navbar-dropdown .navbar-item:not(a) {
|
||||
color: #ffdd57;
|
||||
}
|
||||
.navbar.is-warning .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-warning .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #ffdb4a;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.navbar.is-warning .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #ffdd57;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-danger {
|
||||
@ -5880,31 +5973,42 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.is-danger .navbar-item,
|
||||
.navbar.is-danger .navbar-link {
|
||||
@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 a.navbar-item:hover, .navbar.is-danger a.navbar-item.is-active,
|
||||
.navbar.is-danger .navbar-link:hover,
|
||||
.navbar.is-danger .navbar-link.is-active {
|
||||
.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 > .navbar-link:hover,
|
||||
.navbar.is-danger .navbar-start > .navbar-link.is-active,
|
||||
.navbar.is-danger .navbar-end > a.navbar-item:hover,
|
||||
.navbar.is-danger .navbar-end > a.navbar-item.is-active,
|
||||
.navbar.is-danger .navbar-end > .navbar-link:hover,
|
||||
.navbar.is-danger .navbar-end > .navbar-link.is-active {
|
||||
background-color: #ff2b56;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.navbar.is-danger .navbar-link::after {
|
||||
.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;
|
||||
}
|
||||
.navbar.is-danger .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar.is-danger .navbar-dropdown .navbar-item:not(a) {
|
||||
color: #ff3860;
|
||||
}
|
||||
.navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link {
|
||||
background-color: #ff2b56;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar.is-danger .navbar-dropdown a.navbar-item.is-active {
|
||||
color: #ff3860;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar > .container {
|
||||
@ -5943,7 +6047,7 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
}
|
||||
|
||||
.navbar-burger span {
|
||||
background-color: #4a4a4a;
|
||||
background-color: currentColor;
|
||||
display: block;
|
||||
height: 1px;
|
||||
left: 50%;
|
||||
@ -5968,11 +6072,7 @@ a.nav-item:not(.button).is-tab.is-active {
|
||||
}
|
||||
|
||||
.navbar-burger:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.navbar-burger.is-active span {
|
||||
background-color: #00d1b2;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.navbar-burger.is-active span:nth-child(1) {
|
||||
@ -6082,6 +6182,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
|
||||
display: flex;
|
||||
}
|
||||
.navbar-menu {
|
||||
background-color: white;
|
||||
box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
@ -9073,6 +9174,10 @@ label.panel-block:hover {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.content li .highlight {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.button small {
|
||||
color: #4a4a4a;
|
||||
|
||||
@ -100,7 +100,7 @@ variables:
|
||||
{% capture navbar_menu_example %}
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<!-- navbar items, nav burger ... -->
|
||||
<!-- navbar items, navbar burger ... -->
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
<!-- navbar start, navbar end -->
|
||||
@ -495,7 +495,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
// Get all "navbar-burger" elements
|
||||
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
|
||||
// Check if there are any nav burgers
|
||||
// Check if there are any navbar burgers
|
||||
if ($navbarBurgers.length > 0) {
|
||||
|
||||
// Add a click event on each of them
|
||||
@ -517,6 +517,132 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_color_default %}
|
||||
<nav class="navbar">
|
||||
<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">
|
||||
</a>
|
||||
<div class="navbar-burger burger" data-target="navMenuColorDefault-example">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuColorDefault-example" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
<a class="navbar-link" href="/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
Columns
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_color_primary %}
|
||||
<nav class="navbar is-info">
|
||||
<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">
|
||||
</a>
|
||||
<div class="navbar-burger burger" data-target="navMenuColor-example">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuColor-example" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
<a class="navbar-link" href="/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
Columns
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://localhost:4000&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>
|
||||
Tweet
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -528,7 +654,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
include meta.html
|
||||
new=true
|
||||
since="0.4.3"
|
||||
colors=false
|
||||
colors=true
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
@ -592,10 +718,16 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{navbar_example}}
|
||||
{{ navbar_color_default }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{navbar_example}}{% endhighlight %}
|
||||
{% highlight html %}{{ navbar_color_default }}{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_color_primary }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_color_primary }}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Navbar brand" %}
|
||||
|
||||
@ -1005,6 +1137,19 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New!</span>
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_color_primary }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_color_primary }}{% endhighlight %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
|
||||
BIN
docs/images/bulma-logo-white.png
Normal file
BIN
docs/images/bulma-logo-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -43,26 +43,33 @@ $navbar-divider-background-color: $border !default
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
+desktop
|
||||
.navbar-brand,
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
& > .navbar-item,
|
||||
& > .navbar-link
|
||||
color: $color-invert
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
& > a.navbar-item,
|
||||
& > .navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($color, 2.5%)
|
||||
color: $color-invert
|
||||
+desktop
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
.navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar-dropdown .navbar-item:not(a)
|
||||
color: $color
|
||||
// .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
// .navbar-dropdown .navbar-item:not(a)
|
||||
// color: $color
|
||||
.navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar-item.has-dropdown.is-active .navbar-link
|
||||
background-color: darken($color, 2.5%)
|
||||
color: $color-invert
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
&.is-active
|
||||
color: $color
|
||||
& > .container
|
||||
align-items: stretch
|
||||
display: flex
|
||||
@ -159,6 +166,7 @@ a.navbar-item,
|
||||
align-items: center
|
||||
display: flex
|
||||
.navbar-menu
|
||||
background-color: $white
|
||||
box-shadow: 0 8px 16px rgba($black, 0.1)
|
||||
padding: 0.5rem 0
|
||||
&.is-active
|
||||
|
||||
@ -86,8 +86,13 @@ $content-table-foot-cell-color: $text-strong !default
|
||||
dd
|
||||
margin-left: 2em
|
||||
figure
|
||||
margin: 2em
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
text-align: center
|
||||
&:not(:first-child)
|
||||
margin-top: 2em
|
||||
&:not(:last-child)
|
||||
margin-bottom: 2em
|
||||
img
|
||||
display: inline-block
|
||||
figcaption
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
position: relative
|
||||
width: $dimensions
|
||||
span
|
||||
background-color: $text
|
||||
background-color: currentColor
|
||||
display: block
|
||||
height: 1px
|
||||
left: 50%
|
||||
@ -127,11 +127,10 @@
|
||||
&:nth-child(3)
|
||||
margin-top: 4px
|
||||
&:hover
|
||||
background-color: $background
|
||||
background-color: rgba(black, 0.05)
|
||||
// Modifers
|
||||
&.is-active
|
||||
span
|
||||
background-color: $link
|
||||
&:nth-child(1)
|
||||
margin-left: -5px
|
||||
transform: rotate(45deg)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user