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

Fix #506

Browse Source
This commit is contained in:
Jeremy Thomas 2017-04-02 16:28:18 +01:00
parent a9ad48b5ac
commit 8ab3a9f972
3 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -13,6 +13,7 @@
* Fix #565 `dl` styles * Fix #565 `dl` styles
* Fix #389 `pre` `margin-bottom` * Fix #389 `pre` `margin-bottom`
* Fix #484 icon alignment * Fix #484 icon alignment
* Fix #506 bold nav menu
## 0.4.0 ## 0.4.0

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

@ -6204,6 +6204,13 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%); background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%);
} }
@media screen and (max-width: 768px) {
.hero.is-white.is-bold .nav-menu {
background-image: -webkit-linear-gradient(309deg, #e6e6e6 0%, white 71%, white 100%);
background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%);
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-white .nav-toggle span { .hero.is-white .nav-toggle span {
background-color: #0a0a0a; background-color: #0a0a0a;
@ -6295,6 +6302,13 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%);
} }
@media screen and (max-width: 768px) {
.hero.is-black.is-bold .nav-menu {
background-image: -webkit-linear-gradient(309deg, black 0%, #0a0a0a 71%, #181616 100%);
background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%);
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-black .nav-toggle span { .hero.is-black .nav-toggle span {
background-color: white; background-color: white;
@ -6386,6 +6400,13 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, #dfd8d8 0%, whitesmoke 71%, white 100%); background-image: linear-gradient(141deg, #dfd8d8 0%, whitesmoke 71%, white 100%);
} }
@media screen and (max-width: 768px) {
.hero.is-light.is-bold .nav-menu {
background-image: -webkit-linear-gradient(309deg, #dfd8d8 0%, whitesmoke 71%, white 100%);
background-image: linear-gradient(141deg, #dfd8d8 0%, whitesmoke 71%, white 100%);
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-light .nav-toggle span { .hero.is-light .nav-toggle span {
background-color: #363636; background-color: #363636;
@ -6477,6 +6498,13 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, #1f1919 0%, #363636 71%, #463f3f 100%); background-image: linear-gradient(141deg, #1f1919 0%, #363636 71%, #463f3f 100%);
} }
@media screen and (max-width: 768px) {
.hero.is-dark.is-bold .nav-menu {
background-image: -webkit-linear-gradient(309deg, #1f1919 0%, #363636 71%, #463f3f 100%);
background-image: linear-gradient(141deg, #1f1919 0%, #363636 71%, #463f3f 100%);
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-dark .nav-toggle span { .hero.is-dark .nav-toggle span {
background-color: whitesmoke; background-color: whitesmoke;
@ -6568,6 +6596,13 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%); background-image: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
} }
@media screen and (max-width: 768px) {
.hero.is-primary.is-bold .nav-menu {
background-image: -webkit-linear-gradient(309deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
background-image: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-primary .nav-toggle span { .hero.is-primary .nav-toggle span {
background-color: #fff; background-color: #fff;
@ -6659,6 +6694,13 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%); background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
} }
@media screen and (max-width: 768px) {
.hero.is-info.is-bold .nav-menu {
background-image: -webkit-linear-gradient(309deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-info .nav-toggle span { .hero.is-info .nav-toggle span {
background-color: #fff; background-color: #fff;
@ -6750,6 +6792,13 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%); background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
} }
@media screen and (max-width: 768px) {
.hero.is-success.is-bold .nav-menu {
background-image: -webkit-linear-gradient(309deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-success .nav-toggle span { .hero.is-success .nav-toggle span {
background-color: #fff; background-color: #fff;
@ -6841,6 +6890,13 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%); background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
} }
@media screen and (max-width: 768px) {
.hero.is-warning.is-bold .nav-menu {
background-image: -webkit-linear-gradient(309deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-warning .nav-toggle span { .hero.is-warning .nav-toggle span {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
@ -6932,6 +6988,13 @@ label.panel-block:hover {
background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%); background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
} }
@media screen and (max-width: 768px) {
.hero.is-danger.is-bold .nav-menu {
background-image: -webkit-linear-gradient(309deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.hero.is-danger .nav-toggle span { .hero.is-danger .nav-toggle span {
background-color: #fff; background-color: #fff;

3
sass/layout/hero.sass
View File

@ -115,6 +115,9 @@
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+mobile
.nav-menu
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
// Responsiveness // Responsiveness
+mobile +mobile
.nav-toggle .nav-toggle