stylesheets/components/_pager.scss in rapido-css-0.1.1 vs stylesheets/components/_pager.scss in rapido-css-0.1.2
- old
+ new
@@ -1,6 +1,6 @@
-/* ====================================================================================================================
+/*
Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
@@ -12,45 +12,45 @@
<li><a href="#">Next</a></li>
</ul>
Styleguide 13
-==================================================================================================================== */
+*/
@if $pager {
- .pager {
- @include clearfix();
- list-style: none;
- margin: rhythm() 0;
- text-align: center;
+ .pager {
+ @include clearfix();
+ list-style: none;
+ margin: rhythm() 0;
+ text-align: center;
- li {
- display: inline;
+ li {
+ display: inline;
- a,
- span {
- @include border-radius($base-border-radius);
- border-style: solid;
- border-width: 1px;
- display: inline-block;
- line-height: 1em;
- padding: $pager-padding;
- @extend %pager--btn !optional;
- }
+ a,
+ span {
+ @include border-radius($base-border-radius);
+ border-style: solid;
+ border-width: 1px;
+ display: inline-block;
+ line-height: 1em;
+ padding: $pager-padding;
+ @extend %pager--btn !optional;
+ }
- a:hover,
- a:focus {
- @extend %pager--btn__hover !optional;
- }
- a:active {
- @extend %pager--btn__active !optional;
- }
- }
+ a:hover,
+ a:focus {
+ @extend %pager--btn__hover !optional;
+ }
+ a:active {
+ @extend %pager--btn__active !optional;
+ }
+ }
-/* --------------------------------------------------------------------------------------------------------------------
+/*
Alignment
Alternatively, you can align each link to the sides:
@@ -60,25 +60,25 @@
<li class="next"><a href="#">Next</a></li>
</ul>
Styleguide 13.1
--------------------------------------------------------------------------------------------------------------------- */
+*/
- [rel="next"],
- .next > a,
- .next > span {
- float: right;
- }
+ [rel="next"],
+ .next > a,
+ .next > span {
+ float: right;
+ }
- [rel="prev"],
- .previous > a,
- .previous > span {
- float: left;
- }
+ [rel="prev"],
+ .previous > a,
+ .previous > span {
+ float: left;
+ }
-/* --------------------------------------------------------------------------------------------------------------------
+/*
Disabled state
Pager links also use the general `.disabled` utility class from the pagination.
@@ -88,19 +88,19 @@
<li class="next"><a href="#">Newer →</a></li>
</ul>
Styleguide 13.2
--------------------------------------------------------------------------------------------------------------------- */
+*/
- .disabled > a,
- .disabled > a:hover,
- .disabled > a:focus,
- .disabled > span {
- cursor: default;
- @extend %pager--btn__disabled !optional;
- }
+ .disabled > a,
+ .disabled > a:hover,
+ .disabled > a:focus,
+ .disabled > span {
+ cursor: default;
+ @extend %pager--btn__disabled !optional;
+ }
- }
+ }
}
\ No newline at end of file