Sass Script to make WP PageNavi Responsive.
// Colors
$brand-primary: #036;
$accent-color: rgba(193,213,229, 1.0);
$light-white: #FAFAFA;
$white-smoke: #F5F5F5;
$text-color: rgb(66, 100, 127);
$link-color: rgb(93, 123, 147);
$link-hover-color: darken( $link-color, 15%);
$light-border-color: lighten( $accent-color, 10%);
//Gradients
$gradient-top: $light-white;
$gradient-bottom: $light-border-color;
.wp-pagenavi {
margin: 10% auto;
padding: 1%;
border: 1px solid $light-border-color;
background: $white-smoke;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, .08);
-moz-box-shadow: inset 0 2px 1px rgba(0, 0, 0, .08);
box-shadow: inset 0 2px 1px rgba(0, 0, 0, .08);
span.pages {
&:hover {
border: 1px solid $accent-color !important;
-moz-box-shadow: none !important;
-ms-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
}
span.current {
font-weight: bold;
}
span, span.current, span.pages, a {
display: inline-block;
border: 1px solid $accent-color;
margin: .5%;
padding: .8% 2%;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 1px #fff;
-moz-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px #fff;
background: $gradient-top; /* For IE and older browsers */
background-image: -moz-linear-gradient(top, $gradient-top 0, $gradient-bottom 100%);
background-image: -ms-linear-gradient(top, $gradient-top 0, $gradient-bottom 100%);
background-image: -o-linear-gradient(top, $gradient-top 0, $gradient-bottom 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $gradient-top), color-stop(100%, $gradient-bottom));
background-image: -webkit-linear-gradient(top, $gradient-top 0, $gradient-bottom 100%);
background-image: linear-gradient(to bottom, $gradient-top 0, $gradient-bottom 100%);
&:hover {
border: 1px solid darken($accent-color, 10%) !important;
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .25);
-ms-box-shadow: 0 0 2px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .25);
box-shadow: 0 0 2px rgba(0, 0, 0, .25);
}
}
}