make tabs vertical
This commit is contained in:
parent
7e61ba4617
commit
5a9d449155
|
@ -75,14 +75,10 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12 m8 offset-m2">
|
||||
{{content}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="section">
|
||||
|
||||
|
|
|
@ -53,18 +53,45 @@ main {
|
|||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.tabs .indicator {
|
||||
background-color: teal;
|
||||
}
|
||||
.tabs .tab {
|
||||
.tabs-vertical {
|
||||
.tabs {
|
||||
height: auto;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 100%;
|
||||
|
||||
.active {
|
||||
-moz-transition: border-color .5s ease;
|
||||
-o-transition: border-color .5s ease;
|
||||
-webkit-transition: border-color .5s ease;
|
||||
transition: border-color .5s ease;
|
||||
border-right: 3px solid teal;
|
||||
}
|
||||
|
||||
:hover {
|
||||
border-right: 3px solid #eeeeee;
|
||||
}
|
||||
|
||||
a {
|
||||
color: teal;
|
||||
:hover { color: teal; }
|
||||
}
|
||||
a:hover{
|
||||
color: teal;
|
||||
}
|
||||
a.active {
|
||||
color: teal;
|
||||
}
|
||||
a:hover {
|
||||
color: teal;
|
||||
}
|
||||
a{
|
||||
color: teal;
|
||||
|
||||
.indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
19
widgets.html
19
widgets.html
|
@ -2,12 +2,17 @@
|
|||
layout: page
|
||||
---
|
||||
|
||||
<ul class="tabs">
|
||||
<div class="tabs-vertical">
|
||||
<div class="col s4 m3 l2">
|
||||
<ul class="tabs">
|
||||
{% for widget in site.widgets %}
|
||||
<li class="tab col s2"><a href="#tab{{ widget.title }}">{{ widget.title }}</a></li>
|
||||
<li class="tab"><a href="#tab{{ widget.title }}">{{ widget.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% for widget in site.widgets %}
|
||||
<div id="tab{{ widget.title }}" class="widget col s12">{{ widget.content }}</div>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col s8 m9 l6">
|
||||
{% for widget in site.widgets %}
|
||||
<div id="tab{{ widget.title }}" class="widget col s12">{{ widget.content }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
Loading…
Reference in New Issue