Change style of bottom navigation

This commit is contained in:
Samy Pessé
2014-04-01 02:36:36 -07:00
parent b30132d8c8
commit ca2d499f63
3 changed files with 19 additions and 64 deletions
File diff suppressed because one or more lines are too long
+15 -57
View File
@@ -7,67 +7,25 @@
height: 80px;
overflow: hidden;
background: #fff;
color: #fff;
.navigation {
text-align: center;
.navigation-link {
display: inline-block;
text-align: center;
width: 100%;
height: 100%;
font-size: 26px;
line-height: 80px;
.navigation-link {
font-size: 26px;
line-height: 80px;
background: @brand-success;
color: inherit;
color: #333;
.opacity(0.4);
text-transform: uppercase;
.transition(opacity 0.5s ease);
width: 35%;
min-width: 30px;
height: 80px;
text-transform: uppercase;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 0px 40px;
position: relative;
i {
position: absolute;
top: 0px;
line-height: 80px;
}
span {
}
&.prev {
text-align: left;
i {
left: 0px;
}
}
&.next {
text-align: right;
i {
right: 0px;
}
}
&:hover {
text-decoration: none;
.opacity(1);
}
@media (max-width: 600px) {
span {
display: none;
}
}
&:hover {
background: darken(@btn-success-bg, 5%);
text-decoration: none;
}
}
}
+3 -6
View File
@@ -33,18 +33,15 @@
</div>
<div class="page-footer">
<div class="navigation">
{% if _input == "README.md" %}
<a href="{{ basePath }}/{{ navigation.next.path }}" class="navigation-link">Start this book</a>
{% else %}
{% if navigation.prev %}
<a href="{{ basePath }}/{{ navigation.prev.path }}" class="navigation-link prev"><i class="fa fa-chevron-left"></i> <span>{{ navigation.prev.title }}</span></a>
{% endif %}
{% if navigation.next %}
<a href="{{ basePath }}/{{ navigation.next.path }}" class="navigation-link next"><span>{{ navigation.next.title }}</span> <i class="fa fa-chevron-right"></i></a>
<a href="{{ basePath }}/{{ navigation.next.path }}" class="navigation-link next">Next: <span>{{ navigation.next.title }}</span></a>
{% else %}
<div class="navigation-link finished">Finished!</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>