Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues 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
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;
}
.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;
}

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

@@ -164,6 +164,37 @@ doc-subtab: tabs
</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 @@ doc-subtab: tabs
{% 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>