google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use Flexbox for Tabs

master
Mike Mitterer 2015-04-08 09:34:37 +02:00
parent ba1d6a42ac
commit 020bd44658
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/tabs/_tabs.scss
View File

@ -9,10 +9,17 @@
}
.wsk-tabs__tab-bar {
height: 48px;
padding: 0 0 0 56px;
margin: 0;
border-bottom: 1px solid $tab-border-color;
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : center; // ⇾
align-content : space-between; // ||
align-items : flex-start; // ↓
height : 48px;
padding : 0 0 0 0;
margin : 0;
border-bottom : 1px solid $tab-border-color;
}
.wsk-tabs__tab {

6
src/tabs/demo.html
View File

@ -17,9 +17,9 @@
<div class="wsk-tabs wsk-js-tabs wsk-js-ripple-effect">
<div class="wsk-tabs__tab-bar">
<a href="#starks-panel" class="wsk-tabs__tab is-active">Starks</a>
<a href="#lannisters-panel" class="wsk-tabs__tab">Lannisters</a>
<a href="#targaryens-panel" class="wsk-tabs__tab">Targaryens</a>
<a href="#starks-panel" class="wsk-tabs__tab is-active">Tab I</a>
<a href="#lannisters-panel" class="wsk-tabs__tab">Tab II</a>
<a href="#targaryens-panel" class="wsk-tabs__tab">Tab III</a>
</div>
<div class="wsk-tabs__panel is-active" id="starks-panel">