source/stylesheets/refills/_pagination.scss in refills-0.1.0 vs source/stylesheets/refills/_pagination.scss in refills-0.2.0
- old
+ new
@@ -1,49 +1,35 @@
-.pagination {
- ///////////////////////////////////////////////////////////////////////////////////
+.pagination {
$base-border-color: gainsboro !default;
$base-border-radius: 3px !default;
$base-spacing: 1.5em !default;
- $base-accent-color: #477DCA !default;
- $base-link-color: $base-accent-color !default;
+ $action-color: #477DCA !default;
$dark-gray: #333 !default;
- $large-screen: em(860) !default;
+ $large-screen: 53.75em !default;
$base-font-color: $dark-gray !default;
-
- ul {
- margin: 0;
- padding: 0;
- }
-
- li {
- list-style: none;
- }
-
- a {
- text-decoration: none;
- }
- //////////////////////////////////////////////////////////////////////////////////
-
$pagination-border-color: $base-border-color;
$pagination-border: 1px solid $pagination-border-color;
$pagination-background: lighten($pagination-border-color, 10);
$pagination-hover-background: lighten($pagination-background, 5);
$pagination-color: $base-font-color;
text-align: center;
ul {
display: inline;
+ margin: 0;
+ padding: 0;
text-align: center;
li {
display: inline;
+ list-style: none;
}
ul li {
display: none;
-
+
&:nth-child(1),
&:nth-child(2),
&:nth-child(3) {
display: inline;
}
@@ -52,21 +38,22 @@
display: inline;
}
}
li a {
- @include transition (all 0.2s ease-in-out);
background: $pagination-background;
border-radius: $base-border-radius;
border: $pagination-border;
color: $pagination-color;
outline: none;
padding: ($base-spacing / 4) ($gutter / 2);
+ text-decoration: none;
+ transition: all 0.2s ease-in-out;
&:hover,
&:focus {
background: $pagination-hover-background;
- color: $base-link-color;
+ color: $action-color;
}
&:active {
background: $pagination-background;
}