1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-09-24 18:18:49 +02:00
blog/_src/assets/styl/navigation.styl

144 lines
2.4 KiB
Stylus
Raw Normal View History

2014-07-12 21:22:47 +02:00
//
// kremalicious3
// --------------
// Navigation
//
.menu-btn,
.search-btn
@extend .textcenter
2014-07-13 00:42:57 +02:00
text-shadow: 0 1px 0 rgba(#fff, .5)
2014-07-12 21:22:47 +02:00
line-height: 1em
vertical-align: middle
display: inline-block
margin: 0
position: absolute
right: 0
top: 0
&:hover:before
2014-07-13 00:42:57 +02:00
color: $link-color
2014-07-12 21:22:47 +02:00
&:active:before
transition: none
color: #fff
// Main Navigation
/////////////////////////////////////
.nav-main
.menu-btn
margin-right: -.5em
padding: .5em .7em
// icon
&:before
font-size: 26px
li
display: inline-block
.nav-popover
@extend .clearfix
padding: ($line-height-computed*1.5) 0
width: 100%
background: $body-bg
.nav-link
@extend .h6, .alignleft, .textcenter
2014-07-13 00:42:57 +02:00
text-shadow: 0 1px 0 rgba(#fff, .5)
2014-07-12 21:22:47 +02:00
padding: .5em 1em
margin-bottom: 0
width: 50%
color: $text-color-dimmed
text-transform: uppercase
@media $breakpoint2
width: 33.3%
// the icons
&:before
@extend .textcenter, .transition
display: block
2014-07-13 00:42:57 +02:00
margin-bottom: 5px
2014-07-12 21:22:47 +02:00
width: 100%
font-size: 32px
height: 32px
color: rgba($text-color-dimmed, .7)
&:hover,
&:hover:before
color: $link-color
border-bottom-color: $link-color
&:hover
background: rgba(255,255,255,.5)
&:active
background: $link-color
top: 0
2014-07-13 00:42:57 +02:00
color: #fff
2014-07-12 21:22:47 +02:00
&:active:before
color: #fff
transition: none
// Paginator
/////////////////////////////////////
.paginator
@extend .clearfix
p
position: relative
a
display: block
i
position: absolute
left: 0
top: 0
.next
@extend .alignright
text-align: right;
a
margin-right: 1.5em
i
margin-left: .5em
left: auto
right: 0
.previous
@extend .alignleft
a
margin-left: 1.5em
i
margin-right: .5em
// Infinite Loader
/////////////////////////////////////
.infiniteLoader
.next
width: 100%
float: none
margin-left: 0
a
@extend .btn, .btn-block, .aligncenter
color: $link-color
padding-top: ($line-height-computed/1.5)
padding-bottom: ($line-height-computed/1.5)
.previous,
.pagenumber,
i
@extend .hide