Use Flexbox for Tabs
parent
ba1d6a42ac
commit
020bd44658
|
@ -9,10 +9,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.wsk-tabs__tab-bar {
|
.wsk-tabs__tab-bar {
|
||||||
height: 48px;
|
display : flex;
|
||||||
padding: 0 0 0 56px;
|
flex-direction : row;
|
||||||
margin: 0;
|
flex-wrap : wrap;
|
||||||
border-bottom: 1px solid $tab-border-color;
|
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 {
|
.wsk-tabs__tab {
|
||||||
|
|
|
@ -17,9 +17,9 @@
|
||||||
|
|
||||||
<div class="wsk-tabs wsk-js-tabs wsk-js-ripple-effect">
|
<div class="wsk-tabs wsk-js-tabs wsk-js-ripple-effect">
|
||||||
<div class="wsk-tabs__tab-bar">
|
<div class="wsk-tabs__tab-bar">
|
||||||
<a href="#starks-panel" class="wsk-tabs__tab is-active">Starks</a>
|
<a href="#starks-panel" class="wsk-tabs__tab is-active">Tab I</a>
|
||||||
<a href="#lannisters-panel" class="wsk-tabs__tab">Lannisters</a>
|
<a href="#lannisters-panel" class="wsk-tabs__tab">Tab II</a>
|
||||||
<a href="#targaryens-panel" class="wsk-tabs__tab">Targaryens</a>
|
<a href="#targaryens-panel" class="wsk-tabs__tab">Tab III</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="wsk-tabs__panel is-active" id="starks-panel">
|
<div class="wsk-tabs__panel is-active" id="starks-panel">
|
||||||
|
|
Loading…
Reference in New Issue