library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix rounded tabs

Browse Source
This commit is contained in:
Jeremy Thomas 2017-12-04 13:45:14 +00:00
parent 267f2c137f
commit d6dd2cb023
3 changed files with 61 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/css/bulma-docs.css
View File

@ -7406,22 +7406,10 @@ label.panel-block:hover {
border-radius: 3px 0 0 3px; 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 { .tabs.is-toggle li:last-child a {
border-radius: 0 3px 3px 0; 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 { .tabs.is-toggle li.is-active a {
background-color: #3273dc; background-color: #3273dc;
border-color: #3273dc; border-color: #3273dc;
@ -7433,6 +7421,18 @@ label.panel-block:hover {
border-bottom: none; 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 { .tabs.is-small {
font-size: 0.75rem; font-size: 0.75rem;
} }

39
docs/documentation/components/tabs.html
View File

@ -164,6 +164,37 @@ doc-subtab: tabs
</div> </div>
{% endcapture %} {% 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 %} {% capture tabs_fullwidth_example %}
<div class="tabs is-fullwidth"> <div class="tabs is-fullwidth">
<ul> <ul>
@ -385,6 +416,14 @@ doc-subtab: tabs
{% include snippet.html content=tabs_toggle_example horizontal=true more=true %} {% 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"> <p class="content">
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>. If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
</p> </p>

18
sass/components/tabs.sass
View File

@ -122,16 +122,8 @@ $tabs-toggle-link-active-color: $link-invert !default
margin-left: -#{$tabs-toggle-link-border-width} margin-left: -#{$tabs-toggle-link-border-width}
&:first-child a &:first-child a
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius 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 &:last-child a
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 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 &.is-active
a a
background-color: $tabs-toggle-link-active-background-color background-color: $tabs-toggle-link-active-background-color
@ -140,6 +132,16 @@ $tabs-toggle-link-active-color: $link-invert !default
z-index: 1 z-index: 1
ul ul
border-bottom: none 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 // Sizes
&.is-small &.is-small
font-size: $size-small font-size: $size-small