Fix nav

CHANGELOG.md

@@ -19,6 +19,8 @@
 * Fix `.level-item` height
 * Fix `.menu` spacing
 * Deprecate `.menu-nav`
+* Add invert outlined buttons
+* Fix `.nav`
 
 ## 0.2.2
 

docs/_includes/header.html

@@ -66,7 +66,7 @@
       </span>
     {% else %}
       <span class="nav-item">
-        <a class="button is-light is-outlined"
+        <a class="button is-primary is-inverted is-outlined"
         data-social-network="Twitter"
         data-social-action="tweet"
         data-social-target="http://bulma.io/"

docs/css/bulma-docs.css

@@ -745,7 +745,6 @@ a.box:active {
 .button.is-white.is-outlined {
   background-color: transparent;
   border-color: white;
-  border-width: 1px;
   color: white;
 }
 
@@ -755,6 +754,17 @@ a.box:active {
   color: #0a0a0a;
 }
 
+.button.is-white.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: #0a0a0a;
+  color: #0a0a0a;
+}
+
+.button.is-white.is-inverted.is-outlined:hover, .button.is-white.is-inverted.is-outlined:focus {
+  background-color: #0a0a0a;
+  color: white;
+}
+
 .button.is-black {
   background-color: #0a0a0a;
   border-color: transparent;
@@ -796,7 +806,6 @@ a.box:active {
 .button.is-black.is-outlined {
   background-color: transparent;
   border-color: #0a0a0a;
-  border-width: 1px;
   color: #0a0a0a;
 }
 
@@ -806,6 +815,17 @@ a.box:active {
   color: white;
 }
 
+.button.is-black.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: white;
+  color: white;
+}
+
+.button.is-black.is-inverted.is-outlined:hover, .button.is-black.is-inverted.is-outlined:focus {
+  background-color: white;
+  color: #0a0a0a;
+}
+
 .button.is-light {
   background-color: whitesmoke;
   border-color: transparent;
@@ -847,7 +867,6 @@ a.box:active {
 .button.is-light.is-outlined {
   background-color: transparent;
   border-color: whitesmoke;
-  border-width: 1px;
   color: whitesmoke;
 }
 
@@ -857,6 +876,17 @@ a.box:active {
   color: #363636;
 }
 
+.button.is-light.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: #363636;
+  color: #363636;
+}
+
+.button.is-light.is-inverted.is-outlined:hover, .button.is-light.is-inverted.is-outlined:focus {
+  background-color: #363636;
+  color: whitesmoke;
+}
+
 .button.is-dark {
   background-color: #363636;
   border-color: transparent;
@@ -898,7 +928,6 @@ a.box:active {
 .button.is-dark.is-outlined {
   background-color: transparent;
   border-color: #363636;
-  border-width: 1px;
   color: #363636;
 }
 
@@ -908,6 +937,17 @@ a.box:active {
   color: whitesmoke;
 }
 
+.button.is-dark.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: whitesmoke;
+  color: whitesmoke;
+}
+
+.button.is-dark.is-inverted.is-outlined:hover, .button.is-dark.is-inverted.is-outlined:focus {
+  background-color: whitesmoke;
+  color: #363636;
+}
+
 .button.is-primary {
   background-color: #00d1b2;
   border-color: transparent;
@@ -949,7 +989,6 @@ a.box:active {
 .button.is-primary.is-outlined {
   background-color: transparent;
   border-color: #00d1b2;
-  border-width: 1px;
   color: #00d1b2;
 }
 
@@ -959,6 +998,17 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-primary.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: #fff;
+  color: #fff;
+}
+
+.button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined:focus {
+  background-color: #fff;
+  color: #00d1b2;
+}
+
 .button.is-info {
   background-color: #3273dc;
   border-color: transparent;
@@ -1000,7 +1050,6 @@ a.box:active {
 .button.is-info.is-outlined {
   background-color: transparent;
   border-color: #3273dc;
-  border-width: 1px;
   color: #3273dc;
 }
 
@@ -1010,6 +1059,17 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-info.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: #fff;
+  color: #fff;
+}
+
+.button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined:focus {
+  background-color: #fff;
+  color: #3273dc;
+}
+
 .button.is-success {
   background-color: #23d160;
   border-color: transparent;
@@ -1051,7 +1111,6 @@ a.box:active {
 .button.is-success.is-outlined {
   background-color: transparent;
   border-color: #23d160;
-  border-width: 1px;
   color: #23d160;
 }
 
@@ -1061,6 +1120,17 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-success.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: #fff;
+  color: #fff;
+}
+
+.button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined:focus {
+  background-color: #fff;
+  color: #23d160;
+}
+
 .button.is-warning {
   background-color: #ffdd57;
   border-color: transparent;
@@ -1102,7 +1172,6 @@ a.box:active {
 .button.is-warning.is-outlined {
   background-color: transparent;
   border-color: #ffdd57;
-  border-width: 1px;
   color: #ffdd57;
 }
 
@@ -1112,6 +1181,17 @@ a.box:active {
   color: rgba(0, 0, 0, 0.7);
 }
 
+.button.is-warning.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.7);
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined:focus {
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #ffdd57;
+}
+
 .button.is-danger {
   background-color: #ff3860;
   border-color: transparent;
@@ -1153,7 +1233,6 @@ a.box:active {
 .button.is-danger.is-outlined {
   background-color: transparent;
   border-color: #ff3860;
-  border-width: 1px;
   color: #ff3860;
 }
 
@@ -1163,6 +1242,17 @@ a.box:active {
   color: #fff;
 }
 
+.button.is-danger.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: #fff;
+  color: #fff;
+}
+
+.button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined:focus {
+  background-color: #fff;
+  color: #ff3860;
+}
+
 .button.is-small {
   border-radius: 2px;
   font-size: 0.75rem;
@@ -3770,6 +3860,7 @@ a.box:active {
   display: flex;
   flex-grow: 0;
   flex-shrink: 0;
+  font-size: 1rem;
   justify-content: center;
   padding: 0.5rem 0.75rem;
 }
@@ -3787,12 +3878,12 @@ a.box:active {
   margin-left: 0.75rem;
 }
 
-.nav-item .tag:first-child {
-  margin-right: 0.25rem;
+.nav-item .tag:first-child:not(:last-child) {
+  margin-right: 0.5rem;
 }
 
-.nav-item .tag:last-child {
-  margin-left: 0.25rem;
+.nav-item .tag:last-child:not(:first-child) {
+  margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 768px) {
@@ -3820,21 +3911,23 @@ a.nav-item.is-active {
 a.nav-item.is-tab {
   border-bottom: 1px solid transparent;
   border-top: 1px solid transparent;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-bottom: calc(0.5rem - 1px);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: calc(0.5rem - 1px);
 }
 
 .nav-item a.is-tab:hover,
 a.nav-item.is-tab:hover {
-  border-bottom: 1px solid #00d1b2;
-  border-top: 1px solid transparent;
+  border-bottom-color: #00d1b2;
+  border-top-color: transparent;
 }
 
 .nav-item a.is-tab.is-active,
 a.nav-item.is-tab.is-active {
   border-bottom: 3px solid #00d1b2;
-  border-top: 3px solid transparent;
   color: #00d1b2;
+  padding-bottom: calc(0.5rem - 3px);
 }
 
 @media screen and (max-width: 768px) {
@@ -3862,12 +3955,16 @@ a.nav-item.is-tab.is-active {
   }
 }
 
-.nav-left {
+.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;
@@ -3877,19 +3974,20 @@ a.nav-item.is-tab.is-active {
 .nav-center {
   align-items: stretch;
   display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
 }
 
+.nav-right {
+  justify-content: flex-end;
+}
+
 @media screen and (min-width: 769px) {
   .nav-right {
-    align-items: stretch;
     display: flex;
-    flex-basis: 0;
-    flex-grow: 1;
-    flex-shrink: 0;
-    justify-content: flex-end;
   }
 }
 

docs/documentation/elements/button.html

@@ -103,6 +103,27 @@ doc-subtab: button
   <div class="column">
 {% highlight html %}
 {{button_inverted_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+    <h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
+
+{% capture button_inverted_outlined_example %}
+<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
+<a class="button is-info is-inverted is-outlined">Invert Outlined</a>
+<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
+<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+    <div class="notification is-primary">
+{{button_inverted_outlined_example}}
+    </div>
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_inverted_outlined_example}}
 {% endhighlight %}
   </div>
 </div>

sass/components/nav.sass

@@ -13,6 +13,7 @@ $nav-height: 3rem !default
   display: flex
   flex-grow: 0
   flex-shrink: 0
+  font-size: $size-normal
   justify-content: center
   padding: 0.5rem 0.75rem
   a
@@ -23,10 +24,10 @@ $nav-height: 3rem !default
   .button + .button
     margin-left: 0.75rem
   .tag
-    &:first-child
-      margin-right: 0.25rem
-    &:last-child
-      margin-left: 0.25rem
+    &:first-child:not(:last-child)
+      margin-right: 0.5rem
+    &:last-child:not(:first-child)
+      margin-left: 0.5rem
   // Responsiveness
   +mobile
     justify-content: flex-start
@@ -42,15 +43,17 @@ a.nav-item
   &.is-tab
     border-bottom: 1px solid transparent
     border-top: 1px solid transparent
-    padding-left: 12px
-    padding-right: 12px
+    padding-bottom: calc(0.5rem - 1px)
+    padding-left: 1rem
+    padding-right: 1rem
+    padding-top: calc(0.5rem - 1px)
     &:hover
-      border-bottom: 1px solid $link
-      border-top: 1px solid transparent
+      border-bottom-color: $link
+      border-top-color: transparent
     &.is-active
       border-bottom: 3px solid $link
-      border-top: 3px solid transparent
       color: $link
+      padding-bottom: calc(0.5rem - 3px)
 
 // Containers
 
@@ -72,12 +75,16 @@ a.nav-item
   +tablet-only
     padding-right: 1.5rem
 
-.nav-left
+
+.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
@@ -86,19 +93,17 @@ a.nav-item
 .nav-center
   align-items: stretch
   display: flex
+  flex-grow: 0
+  flex-shrink: 0
   justify-content: center
   margin-left: auto
   margin-right: auto
 
 .nav-right
+  justify-content: flex-end
   // Responsiveness
   +tablet
-    align-items: stretch
     display: flex
-    flex-basis: 0
-    flex-grow: 1
-    flex-shrink: 0
-    justify-content: flex-end
 
 // Main container
 

sass/elements/button.sass

@@ -161,13 +161,20 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
       &.is-outlined
         background-color: transparent
         border-color: $color
-        border-width: 1px
         color: $color
         &:hover,
         &:focus
           background-color: $color
           border-color: $color
           color: $color-invert
+      &.is-inverted.is-outlined
+        background-color: transparent
+        border-color: $color-invert
+        color: $color-invert
+        &:hover,
+        &:focus
+          background-color: $color-invert
+          color: $color
   // Sizes
   &.is-small
     +button-small