|
@import "compass"; |
|
$size: 50px; |
|
$thickness: 5px; |
|
$angle: 40deg; |
|
$angleHover: 30deg; |
|
$angleActive: 25deg; |
|
|
|
@mixin arrowTransform( $angle, $x: 0, $y: 0 ) { |
|
i:first-child { |
|
transform: translate( $x, $y ) rotate( $angle ); |
|
} |
|
|
|
i:last-child { |
|
transform: translate( $x, -$y ) rotate( -$angle ); |
|
} |
|
} |
|
|
|
body { |
|
background: #33ab83; |
|
} |
|
|
|
button { |
|
-webkit-appearance: none; |
|
background: transparent; |
|
border: 0; |
|
} |
|
|
|
.paginate { |
|
position: relative; |
|
margin: 10px; |
|
width: $size; |
|
height: $size; |
|
cursor: pointer; |
|
transform: translate3d(0,0,0); // fixes flicker in webkit |
|
|
|
position: absolute; |
|
top: 50%; |
|
margin-top: -20px; |
|
-webkit-filter: drop-shadow( 0 2px 0px rgba(0,0,0,0.2) ); |
|
|
|
i { |
|
position: absolute; |
|
top: 40%; |
|
left: 0; |
|
width: $size; |
|
height: $thickness; |
|
border-radius: $thickness / 2; |
|
background: #fff; |
|
|
|
transition: all 0.15s ease; |
|
} |
|
|
|
&.left { |
|
right: 58%; |
|
|
|
i { |
|
transform-origin: 0% 50% |
|
} |
|
|
|
@include arrowTransform( $angle, 0, -1px ); |
|
|
|
&:hover { |
|
@include arrowTransform( $angleHover, 0, -1px ); |
|
} |
|
|
|
&:active { |
|
@include arrowTransform( $angleActive, 1px, -1px ); |
|
} |
|
|
|
&[data-state=disabled] { |
|
@include arrowTransform( 0deg, -5px, 0 ); |
|
|
|
&:hover { |
|
@include arrowTransform( 0deg, -5px, 0 ); |
|
} |
|
} |
|
} |
|
|
|
&.right { |
|
left: 58%; |
|
|
|
i { |
|
transform-origin: 100% 50% |
|
} |
|
|
|
@include arrowTransform( $angle, 0, 1px ); |
|
|
|
&:hover { |
|
@include arrowTransform( $angleHover, 0, 1px ); |
|
} |
|
|
|
&:active { |
|
@include arrowTransform( $angleActive, 1px, 1px ); |
|
} |
|
|
|
&[data-state=disabled] { |
|
@include arrowTransform( 0deg, 5px, 0 ); |
|
|
|
&:hover { |
|
@include arrowTransform( 0deg, 5px, 0 ); |
|
} |
|
} |
|
} |
|
|
|
&[data-state=disabled] { |
|
opacity: 0.3; |
|
cursor: default; |
|
} |
|
} |
|
|
|
|
|
|
|
.counter { |
|
text-align: center; |
|
position: absolute; |
|
width: 100%; |
|
top: 50%; |
|
margin-top: -15px; |
|
font-size: 30px; |
|
font-family: Helvetica, sans-serif; |
|
text-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.2 ); |
|
color: #fff; |
|
} |