From d6dd2cb02305c3a6ffdd015e5c94ed334a05c648 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Mon, 4 Dec 2017 13:45:14 +0000
Subject: [PATCH] Fix rounded tabs

---
 docs/css/bulma-docs.css                 | 24 +++++++--------
 docs/documentation/components/tabs.html | 39 +++++++++++++++++++++++++
 sass/components/tabs.sass               | 18 +++++++-----
 3 files changed, 61 insertions(+), 20 deletions(-)

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 6816530b26..059b1097ca 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -7406,22 +7406,10 @@ label.panel-block:hover {
   border-radius: 3px 0 0 3px;
 }
 
-.tabs.is-toggle li:first-child a.is-rounded {
-  border-top-left-radius: 290486px;
-  border-bottom-left-radius: 290486px;
-  padding-left: 1.25em;
-}
-
 .tabs.is-toggle li:last-child a {
   border-radius: 0 3px 3px 0;
 }
 
-.tabs.is-toggle li:last-child a.is-rounded {
-  border-top-right-radius: 290486px;
-  border-bottom-right-radius: 290486px;
-  padding-right: 1.25em;
-}
-
 .tabs.is-toggle li.is-active a {
   background-color: #3273dc;
   border-color: #3273dc;
@@ -7433,6 +7421,18 @@ label.panel-block:hover {
   border-bottom: none;
 }
 
+.tabs.is-toggle.is-toggle-rounded li:first-child a {
+  border-bottom-left-radius: 290486px;
+  border-top-left-radius: 290486px;
+  padding-left: 1.25em;
+}
+
+.tabs.is-toggle.is-toggle-rounded li:last-child a {
+  border-bottom-right-radius: 290486px;
+  border-top-right-radius: 290486px;
+  padding-right: 1.25em;
+}
+
 .tabs.is-small {
   font-size: 0.75rem;
 }
diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
index daa28c6e6b..97dc2d2b60 100644
--- a/docs/documentation/components/tabs.html
+++ b/docs/documentation/components/tabs.html
@@ -164,6 +164,37 @@
 </div>
 {% endcapture %}
 
+{% capture tabs_toggle_rounded_example %}
+<div class="tabs is-toggle is-toggle-rounded">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span>Music</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span>Videos</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span>Documents</span>
+      </a>
+    </li>
+  </ul>
+</div>
+{% endcapture %}
+
 {% capture tabs_fullwidth_example %}
 <div class="tabs is-fullwidth">
   <ul>
@@ -385,6 +416,14 @@ <h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</stron
 
     {% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
 
+    {% include elements/new-tag.html version="0.6.2" %}
+
+    <p class="content">
+      If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
+    </p>
+
+    {% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
+
     <p class="content">
       If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
     </p>
diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass
index b073874a86..ccbf679733 100644
--- a/sass/components/tabs.sass
+++ b/sass/components/tabs.sass
@@ -122,16 +122,8 @@ $tabs-toggle-link-active-color: $link-invert !default
         margin-left: -#{$tabs-toggle-link-border-width}
       &:first-child a
         border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
-        &.is-rounded
-          border-top-left-radius: $radius-rounded
-          border-bottom-left-radius: $radius-rounded
-          padding-left: 1.25em
       &:last-child a
         border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
-        &.is-rounded
-          border-top-right-radius: $radius-rounded
-          border-bottom-right-radius: $radius-rounded
-          padding-right: 1.25em
       &.is-active
         a
           background-color: $tabs-toggle-link-active-background-color
@@ -140,6 +132,16 @@ $tabs-toggle-link-active-color: $link-invert !default
           z-index: 1
     ul
       border-bottom: none
+    &.is-toggle-rounded
+      li
+        &:first-child a
+          border-bottom-left-radius: $radius-rounded
+          border-top-left-radius: $radius-rounded
+          padding-left: 1.25em
+        &:last-child a
+          border-bottom-right-radius: $radius-rounded
+          border-top-right-radius: $radius-rounded
+          padding-right: 1.25em
   // Sizes
   &.is-small
     font-size: $size-small