The pagination for the ATM locator is often designed to have arrows or triangles instead of our default, the words “Next” and “Previous”. Here are two premade SCSS files that give you an easy path to either use iconfont arrows or CSS-created triangles.
How To
You will be creating a new pagination.scss file and placing it inside the scss > custom folder of a Bootstrap 3/Bootstrap 4 project. This is written in SASS normally but you can convert to LESS if needed.
Don’t forget to include your newly created file within your main.scss.
Iconfont Arrows Option
Here is the pagination.scss file that allows the option for iconfont arrows. You should have the iconfont arrows from your design and they’ll likely differ from site-to-site, so they’re not included here. Just make sure that the icon names match what you have.
//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
display: inline-block;
padding-left: 0;
margin: 10px 0;
border-radius: 0;
font-size: 16px;
font-weight: 400;
#page_navigation {
margin: 0;
padding: 0;
}
li {
display: inline-block; // Remove list-style and block-level defaults
vertical-align: middle;
border: 0;
position: relative;
> a,
> span {
position: relative;
padding: $pagination-padding-y $pagination-padding-x;
line-height: $line-height-base;
text-decoration: underline;
color: $pagination-color;
background-color: transparent;
border: 0;
margin: 0 0 0 -1px;
display: block;
}
&:first-child {
> a,
> span {
margin-left: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
&:last-child {
> a,
> span {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
}
li > a,
li > span {
&:hover,
&:focus {
color: $pagination-hover-color;
background-color: transparent;
border-color: $pagination-hover-border-color;
text-decoration: none;
}
}
li.active > a,
li.active > span {
text-decoration: none;
}
li.active > a,
li.active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: $pagination-active-color;
background-color: transparent;
border-color: $pagination-active-border-color;
cursor: default;
}
}
.disabled {
> span,
> span:hover,
> span:focus,
> a,
> a:hover,
> a:focus {
color: $pagination-disabled-color;
background-color: transparent;
border-color: $pagination-disabled-border-color;
}
}
.previous_link,.next_link {
position: relative;
height: 30px;
a {
font-size: 0;
@include transition(all .2s ease-in-out);
color: $pagination-color;
position: relative;
&:before {
position: absolute;
content: '';
mask-position: center;
width: 16px;
height: 16px;
mask-size: 16px 16px;
background-color: $pagination-color;
transition: all .3s ease-in-out;
}
@include hover-focus {
text-decoration: none;
&:before {
background-color: darken($pagination-color,10%);
transform: scale(1.2);
}
}
}
&.disabled a {
color: lighten($pagination-color,10%);
cursor: not-allowed;
&:hover,&:focus {
color: lighten($pagination-color,10%);
text-decoration: none;
cursor: not-allowed;
}
}
}
.previous_link a:before {
mask: url(/assets/img/svgs/chevron-left.svg);
}
.next_link a:before{
mask: url(/assets/img/svgs/chevron-right.svg);
}
}
Example Sites
- Embers Credit Union (New/current BS4 method)
- The National Bank of Indianapolis (Old method, uses @extend .icon)
- Rayne State Bank (Old method, uses @extend .icon)
CSS Triangles Option
Here is the pagination.scss file that allows the option for CSS triangles. If the triangles are the wrong size, you can use this website to get a new size, and replace what’s there. You can also change the color as needed.
.pagination {
display: flex;
@include list-unstyled();
@include border-radius();
}
.page_link,.page-link {
position: relative;
display: block;
margin-left: -$pagination-border-width;
margin-bottom: 0;
line-height: $pagination-line-height;
color: $pagination-color;
background-color: $pagination-bg;
border: 0;
text-decoration: none;
a {
text-decoration: none;
padding: $pagination-padding-y $pagination-padding-x;
display: inline-block;
font-size: 16px;
}
&:hover,&:focus {
z-index: 2;
color: $pagination-hover-color;
text-decoration: underline;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border-color;
a {
text-decoration: underline;
}
}
&:focus {
z-index: 2;
outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow;
}
&.active{
z-index: 1;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;
text-decoration: underline;
pointer-events: none;
a {
text-decoration: underline;
}
}
&.disabled{
color: $pagination-disabled-color;
pointer-events: none;
// Opinionated: remove the "hand" cursor set previously for .page_link
cursor: not-allowed;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border-color;
a {
pointer-events: none;
}
}
}
.previous_link,.next_link {
font-size: 0;
width: 36px;
height: 36px;
display: inline-block;
vertical-align: middle;
a {
padding: $pagination-padding-y $pagination-padding-x;
text-decoration: none;
position: relative;
font-size: 0;
width: 100%;
height: 100%;
display: inline-block;
background-color: transparent;
transition: all .2s ease-in-out;
&:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-style: solid;
position: absolute;
top: 50%;
transition: all .2s ease-in-out;
transform: translate(0,-50%);
right: 0;
left: 0;
margin: 0 auto;
}
}
&:hover,&:focus {
background-color: $pagination-hover-bg;
}
&.disabled{
color: $pagination-disabled-color;
pointer-events: none;
// Opinionated: remove the "hand" cursor set previously for .page_link
cursor: not-allowed;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border-color;
a {
pointer-events: none;
}
}
}
.previous_link{
margin: 0;
a {
&:before {
border-width: 5px 5px 5px 0;
border-color: transparent $pagination-color transparent transparent;
}
&:hover,&:focus {
&:before {
border-color: transparent darken($pagination-color,25%) transparent transparent;
}
}
}
&.disabled a,
&.disabled a:hover,
&.disabled a:focus {
&:before {
border-color: transparent lighten($pagination-color,25%) transparent transparent;
}
}
}
.next_link {
margin: 0 0 0 0-$pagination-border-width;
a {
&:before {
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent $pagination-color;
transition: all .2s ease-in-out;
}
&:hover,&:focus {
&:before {
border-color: transparent transparent transparent darken($pagination-color,25%);
}
}
}
&.disabled a,
&.disabled a:hover,
&.disabled a:focus {
&:before {
border-color: transparent transparent transparent lighten($pagination-color,25%);
}
}
}
Example Sites
Tags: scss, sass, styling, iconfont, pagination, atm locator