Fix nav

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88fe4249f844aedda4e426707c1ede445d965d86..2f667f66a215d14c621369e6146af03402bf6153 100644 (file)
--- a/CHANGELOG.md
+++ b/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
 

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index 4330afab64a1d35d6e842ee0dbbdec46f0ac4e72..de6a9c92052c6e5c3b9667a18bc2e5fdbb035838 100644 (file)
--- a/docs/_includes/header.html
+++ b/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/"

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index e03e7850a2ed6eed7f497f078dc5c1a7bfcfbf37..fc0f3d87033411e25081e839c6844078a02dbc9f 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/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;
   }
 }
 

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index 9774fd90521f36ca1bb4a90b00a0ea61a9c4bbec..d3dfb4cd3e2a29d844d30de852b5aba28b81cbbe 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/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>

diff --git a/sass/components/nav.sass b/sass/components/nav.sass
index 184e7f3fb99aff1b6923e5da2e3383e524c397cd..839c0b11c1b45dff205a312a8f163614302ecf4d 100644 (file)
--- a/sass/components/nav.sass
+++ b/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
 

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index f652a96c9e43328640f35a6a08ea077a68e5840c..4dad6333a5c84c204e3cd5711aadc1b73eb1f5cc 100644 (file)
--- a/sass/elements/button.sass
+++ b/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