library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Navbar colors docs

Browse Source
This commit is contained in:
Jeremy Thomas 2017-09-09 23:56:54 +02:00
parent 8091c23fae
commit 83892a21e3
7 changed files with 455 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_sass/highlight.sass
View File

@ -126,3 +126,6 @@
margin-left: 0
margin-right: 0
text-align: left
.content li .highlight
margin: 0

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

@ -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 {
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 {
background-color: #f9f9f9;
color: #0a0a0a;
}
@media screen and (min-width: 1024px) {
.navbar.is-white .navbar-link::after {
border-color: #0a0a0a;
.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-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar.is-white .navbar-dropdown .navbar-item:not(a) {
color: white;
.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;
}
.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-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 {
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 {
background-color: #040404;
color: white;
}
@media screen and (min-width: 1024px) {
.navbar.is-black .navbar-link::after {
border-color: white;
.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-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar.is-black .navbar-dropdown .navbar-item:not(a) {
color: #0a0a0a;
.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;
}
.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-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 {
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 {
background-color: #eeeeee;
color: #363636;
}
@media screen and (min-width: 1024px) {
.navbar.is-light .navbar-link::after {
border-color: #363636;
.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-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar.is-light .navbar-dropdown .navbar-item:not(a) {
color: whitesmoke;
.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;
}
.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-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 {
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 {
background-color: #2f2f2f;
color: whitesmoke;
}
@media screen and (min-width: 1024px) {
.navbar.is-dark .navbar-link::after {
border-color: whitesmoke;
.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-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar.is-dark .navbar-dropdown .navbar-item:not(a) {
color: #363636;
.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;
}
.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-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 {
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 {
background-color: #00c4a7;
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-primary .navbar-link::after {
border-color: #fff;
.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-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar.is-primary .navbar-dropdown .navbar-item:not(a) {
color: #00d1b2;
.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;
}
.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-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 {
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 {
background-color: #276cda;
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-info .navbar-link::after {
border-color: #fff;
.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-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar.is-info .navbar-dropdown .navbar-item:not(a) {
color: #3273dc;
.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;
}
.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-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 {
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 {
background-color: #22c65b;
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-success .navbar-link::after {
border-color: #fff;
.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-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar.is-success .navbar-dropdown .navbar-item:not(a) {
color: #23d160;
.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;
}
.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-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 {
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 {
background-color: #ffdb4a;
color: rgba(0, 0, 0, 0.7);
}
@media screen and (min-width: 1024px) {
.navbar.is-warning .navbar-link::after {
border-color: rgba(0, 0, 0, 0.7);
.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-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar.is-warning .navbar-dropdown .navbar-item:not(a) {
color: #ffdd57;
.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);
}
.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-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 {
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 {
background-color: #ff2b56;
color: #fff;
}
@media screen and (min-width: 1024px) {
.navbar.is-danger .navbar-link::after {
border-color: #fff;
.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-dropdown a.navbar-item:not(.is-active):not(:hover),
.navbar.is-danger .navbar-dropdown .navbar-item:not(a) {
color: #ff3860;
.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;
}
.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-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;

155
docs/documentation/components/navbar.html
View File

@ -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&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

38
sass/components/navbar.sass
View File

@ -43,26 +43,33 @@ $navbar-divider-background-color: $border !default
&.is-#{$name}
background-color: $color
color: $color-invert
.navbar-item,
.navbar-link
color: $color-invert
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-brand,
.navbar-start,
.navbar-end
& > .navbar-item,
& > .navbar-link
color: $color-invert
& > a.navbar-item,
& > .navbar-link
&:hover,
&.is-active
background-color: darken($color, 2.5%)
color: $color-invert
.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-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

7
sass/elements/content.sass
View File

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

5
sass/utilities/mixins.sass
View File

@ -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)