diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e214773..ee9a2502 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ # Fix #568 max-width container # Fix #589 notification delete +# Fix #272 nav-right without nav-menu ## 0.4.0 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 1a85322d..57b1278b 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -240,7 +240,7 @@ table th { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .is-block-tablet { display: block !important; } @@ -290,7 +290,7 @@ table th { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .is-flex-tablet { display: -webkit-box !important; display: -ms-flexbox !important; @@ -348,7 +348,7 @@ table th { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .is-inline-tablet { display: inline !important; } @@ -394,7 +394,7 @@ table th { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .is-inline-block-tablet { display: inline-block !important; } @@ -444,7 +444,7 @@ table th { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .is-inline-flex-tablet { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; @@ -530,6 +530,78 @@ table th { text-align: right; } +.has-text-white { + color: white; +} + +a.has-text-white:hover, a.has-text-white:focus { + color: #e6e6e6; +} + +.has-text-black { + color: #0a0a0a; +} + +a.has-text-black:hover, a.has-text-black:focus { + color: black; +} + +.has-text-light { + color: whitesmoke; +} + +a.has-text-light:hover, a.has-text-light:focus { + color: #dbdbdb; +} + +.has-text-dark { + color: #363636; +} + +a.has-text-dark:hover, a.has-text-dark:focus { + color: #1c1c1c; +} + +.has-text-primary { + color: #00d1b2; +} + +a.has-text-primary:hover, a.has-text-primary:focus { + color: #009e86; +} + +.has-text-info { + color: #3273dc; +} + +a.has-text-info:hover, a.has-text-info:focus { + color: #205bbc; +} + +.has-text-success { + color: #23d160; +} + +a.has-text-success:hover, a.has-text-success:focus { + color: #1ca64c; +} + +.has-text-warning { + color: #ffdd57; +} + +a.has-text-warning:hover, a.has-text-warning:focus { + color: #ffd324; +} + +.has-text-danger { + color: #ff3860; +} + +a.has-text-danger:hover, a.has-text-danger:focus { + color: #ff0537; +} + .is-hidden { display: none !important; } @@ -540,7 +612,7 @@ table th { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .is-hidden-tablet { display: none !important; } @@ -2047,7 +2119,7 @@ input[type="submit"].button { justify-content: flex-end; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .field.is-horizontal { display: -webkit-box; display: -ms-flexbox; @@ -2065,7 +2137,7 @@ input[type="submit"].button { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .field-label { -ms-flex-preferred-size: 0; flex-basis: 0; @@ -2094,7 +2166,7 @@ input[type="submit"].button { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .field-body { display: -webkit-box; display: -ms-flexbox; @@ -2329,7 +2401,7 @@ input[type="submit"].button { background: transparent; } -.notification .delete { +.notification > .delete { position: absolute; right: 0.5em; top: 0.5em; @@ -3086,7 +3158,7 @@ input[type="submit"].button { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .level-left { display: -webkit-box; display: -ms-flexbox; @@ -3103,7 +3175,7 @@ input[type="submit"].button { justify-content: flex-end; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .level-right { display: -webkit-box; display: -ms-flexbox; @@ -3160,7 +3232,7 @@ input[type="submit"].button { flex-grow: 1; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .level { display: -webkit-box; display: -ms-flexbox; @@ -3516,7 +3588,7 @@ input[type="submit"].button { width: 100%; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .modal-content, .modal-card { margin: 0 auto; @@ -3756,7 +3828,7 @@ input[type="submit"].button { transform-origin: left bottom; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .nav-toggle { display: none; } @@ -3859,36 +3931,14 @@ a.nav-item.is-tab.is-active { } } -@media screen and (max-width: 768px) { - .nav-menu { - background-color: white; - box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1); - left: 0; - display: none; - right: 0; - top: 100%; - position: absolute; - } - .nav-menu .nav-item { - border-top: 1px solid rgba(219, 219, 219, 0.5); - padding: 0.75rem; - } - .nav-menu.is-active { - display: block; - } -} - -@media screen and (min-width: 769px) and (max-width: 999px) { - .nav-menu { - padding-right: 1.5rem; - } -} - .nav-left, .nav-right { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; @@ -3899,9 +3949,6 @@ a.nav-item.is-tab.is-active { } .nav-left { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; @@ -3910,6 +3957,12 @@ a.nav-item.is-tab.is-active { white-space: nowrap; } +.nav-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} + .nav-center { -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -3929,17 +3982,28 @@ a.nav-item.is-tab.is-active { margin-right: auto; } -.nav-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; +@media screen and (max-width: 768px) { + .nav-menu.nav-right { + background-color: white; + box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1); + left: 0; + display: none; + right: 0; + top: 100%; + position: absolute; + } + .nav-menu.nav-right .nav-item { + border-top: 1px solid rgba(219, 219, 219, 0.5); + padding: 0.75rem; + } + .nav-menu.nav-right.is-active { + display: block; + } } -@media screen and (min-width: 769px) { - .nav-right { - display: -webkit-box; - display: -ms-flexbox; - display: flex; +@media screen and (min-width: 769px) and (max-width: 999px) { + .nav-menu { + padding-right: 1.5rem; } } @@ -4161,7 +4225,7 @@ a.nav-item.is-tab.is-active { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .pagination-list { -webkit-box-flex: 1; -ms-flex-positive: 1; @@ -4326,6 +4390,11 @@ a.nav-item.is-tab.is-active { width: 100%; } +.panel-block.is-wrapped { + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + .panel-block.is-active { border-left-color: #00d1b2; color: #363636; @@ -4928,7 +4997,7 @@ label.panel-block:hover { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .column.is-narrow, .column.is-narrow-tablet { -webkit-box-flex: 0; -ms-flex: none; @@ -5468,7 +5537,7 @@ label.panel-block:hover { padding: 0; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .columns.is-grid { -ms-flex-wrap: wrap; flex-wrap: wrap; @@ -5500,7 +5569,7 @@ label.panel-block:hover { align-items: center; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .columns:not(.is-desktop) { display: -webkit-box; display: -ms-flexbox; @@ -5566,7 +5635,7 @@ label.panel-block:hover { margin-bottom: 1.5rem !important; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .tile:not(.is-child) { display: -webkit-box; display: -ms-flexbox; @@ -5690,7 +5759,7 @@ label.panel-block:hover { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .hero-buttons { display: -webkit-box; display: -ms-flexbox; @@ -6574,14 +6643,14 @@ label.panel-block:hover { } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .hero.is-medium .hero-body { padding-bottom: 9rem; padding-top: 9rem; } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .hero.is-large .hero-body { padding-bottom: 18rem; padding-top: 18rem; @@ -6853,7 +6922,7 @@ label.panel-block:hover { color: #2aa198; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .button small { color: #4a4a4a; left: 0; @@ -6870,7 +6939,7 @@ body.page-grid .column > .notification { text-align: center; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .header-item .button + .button { margin-left: 0.75rem; } @@ -6892,7 +6961,7 @@ svg { box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { #carbon { margin-left: auto; margin-right: auto; @@ -7442,7 +7511,7 @@ html.route-index #carbon { vertical-align: top; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .example.is-fullwidth, .structure.is-fullwidth { border-left: none; @@ -7565,13 +7634,13 @@ html.route-index #carbon { right: 50px; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .highlight pre { white-space: pre-wrap; } } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .section:not(.is-fullwidth) > .example:not(.is-fullwidth) { margin-left: 1.5rem; margin-right: 1.5rem; @@ -7664,7 +7733,7 @@ html.route-index #carbon { font-weight: 700; } -@media screen and (min-width: 769px) { +@media screen and (min-width: 769px), print { .bsa .columns { min-height: 120px; } diff --git a/sass/components/nav.sass b/sass/components/nav.sass index 527d4955..aaf8bb07 100644 --- a/sass/components/nav.sass +++ b/sass/components/nav.sass @@ -62,39 +62,23 @@ a.nav-item // Containers -.nav-menu - // Responsiveness - +mobile - background-color: $white - box-shadow: 0 4px 7px rgba($black, 0.1) - left: 0 - display: none - right: 0 - top: 100% - position: absolute - .nav-item - border-top: 1px solid rgba($border, 0.5) - padding: 0.75rem - &.is-active - display: block - +tablet-only - padding-right: 1.5rem - - .nav-left, .nav-right align-items: stretch + display: flex flex-basis: 0 flex-grow: 1 flex-shrink: 0 .nav-left - display: flex justify-content: flex-start overflow: hidden overflow-x: auto white-space: nowrap +.nav-right + justify-content: flex-end + .nav-center align-items: stretch display: flex @@ -104,11 +88,24 @@ a.nav-item margin-left: auto margin-right: auto -.nav-right - justify-content: flex-end +.nav-menu // Responsiveness - +tablet - display: flex + +mobile + &.nav-right + background-color: $white + box-shadow: 0 4px 7px rgba($black, 0.1) + left: 0 + display: none + right: 0 + top: 100% + position: absolute + .nav-item + border-top: 1px solid rgba($border, 0.5) + padding: 0.75rem + &.is-active + display: block + +tablet-only + padding-right: 1.5rem // Main container