diff --git a/components/01_Atoms/pagination/_pagination.scss b/components/01_Atoms/pagination/_pagination.scss index 8e88e7f..3ed474c 100644 --- a/components/01_Atoms/pagination/_pagination.scss +++ b/components/01_Atoms/pagination/_pagination.scss @@ -1,67 +1,73 @@ .LP-Pagination{ - font-family: $-primary-sans-serif-font; - font-weight: bold; - display: flex; - flex-direction: row; - justify-content: center; + font-family: $-primary-sans-serif-font; + font-weight: bold; + display: flex; + flex-direction: row; + justify-content: center; - .LP-Pagination__List{ - list-style-type: none; - display: flex; - flex-direction: row; - } + .LP-Pagination__List{ + list-style-type: none; + display: flex; + flex-direction: row; + } - .LP-Pagination__Item{ - margin: 0 4px; + .LP-Pagination__Item{ + margin: 0 4px; - &--current{ + &--current{ - .LP-Link{ - background-color: $-beige; - border-radius: 2px; + .LP-Link{ + background-color: $-beige; + border-radius: 2px; - &:hover{ - background-color: $-beige; - color: $-grey; - } - } - } + &:hover{ + background-color: $-beige; + color: $-grey; + } + } + } - } + } - .LP-Link{ - padding: 15px 25px; + .LP-Link{ + padding: 15px 25px; - &:active, &:hover{ - background-color: $-beige; - border-radius: 2px; - color: $-grey; - } - } + &:active, &:hover{ + background-color: $-beige; + border-radius: 2px; + color: $-grey; + } + } - .LP-Pagination__First{ - - &:before{ - content: "«"; - } - } + .LP-Pagination__First{ + &:before{ + content: "⟪"; + padding-right: 1em; + font-size: larger; + } + } - .LP-Pagination__Previous{ - &:before{ - content: "»"; - } - } + .LP-Pagination__Previous{ + &:before{ + content: "⟨"; + padding-right: 1em; + font-size: larger; + } + } - .LP-Pagination__Next{ - - &:after{ - content: "\f061"; - } - } + .LP-Pagination__Next{ + &:after{ + content: "⟩"; + padding-left: 1em; + font-size: larger; + } + } - .LP-Pagination__Last{ - &:after{ - content: "»"; - } - } + .LP-Pagination__Last{ + &:after{ + content: "⟫"; + padding-left: 1em; + font-size: larger; + } + } } \ No newline at end of file diff --git a/public/main.css b/public/main.css index 16a276d..7321bd6 100644 --- a/public/main.css +++ b/public/main.css @@ -277,13 +277,21 @@ body { border-radius: 2px; color: #565656; } .LP-Pagination .LP-Pagination__First:before { - content: "«"; } + content: "⟪"; + padding-right: 1em; + font-size: larger; } .LP-Pagination .LP-Pagination__Previous:before { - content: "»"; } + content: "⟨"; + padding-right: 1em; + font-size: larger; } .LP-Pagination .LP-Pagination__Next:after { - content: "\f061"; } + content: "⟩"; + padding-left: 1em; + font-size: larger; } .LP-Pagination .LP-Pagination__Last:after { - content: "»"; } + content: "⟫"; + padding-left: 1em; + font-size: larger; } .LP-Content { padding: 35px; }