make tabs vertical
This commit is contained in:
parent
7e61ba4617
commit
5a9d449155
|
@ -75,12 +75,8 @@
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col s12 m8 offset-m2">
|
{{content}}
|
||||||
{{content}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
|
@ -53,18 +53,45 @@ main {
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs .indicator {
|
.tabs-vertical {
|
||||||
background-color: teal;
|
.tabs {
|
||||||
}
|
height: auto;
|
||||||
.tabs .tab {
|
-ms-flex-direction: column;
|
||||||
a.active {
|
-webkit-flex-direction: column;
|
||||||
color: teal;
|
flex-direction: column;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
a:hover {
|
|
||||||
color: teal;
|
.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{
|
|
||||||
color: teal;
|
.indicator {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
23
widgets.html
23
widgets.html
|
@ -2,12 +2,17 @@
|
||||||
layout: page
|
layout: page
|
||||||
---
|
---
|
||||||
|
|
||||||
<ul class="tabs">
|
<div class="tabs-vertical">
|
||||||
{% for widget in site.widgets %}
|
<div class="col s4 m3 l2">
|
||||||
<li class="tab col s2"><a href="#tab{{ widget.title }}">{{ widget.title }}</a></li>
|
<ul class="tabs">
|
||||||
{% endfor %}
|
{% for widget in site.widgets %}
|
||||||
</ul>
|
<li class="tab"><a href="#tab{{ widget.title }}">{{ widget.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
{% for widget in site.widgets %}
|
</ul>
|
||||||
<div id="tab{{ widget.title }}" class="widget col s12">{{ widget.content }}</div>
|
</div>
|
||||||
{% endfor %}
|
<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