Fix #272

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
 

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

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