Fix rounded tabs

GlenIku · Dec 4, 2017 · d6dd2cb · d6dd2cb
1 parent 267f2c1
commit d6dd2cb
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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