More Paginatoin Styling, responsive
This commit is contained in:
parent
427ce11adb
commit
384cdcaae7
@ -8,12 +8,14 @@
|
||||
.LP-Pagination__List{
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: row;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.LP-Pagination__Item{
|
||||
margin: 0 4px;
|
||||
|
||||
|
||||
&--disabled{
|
||||
color: rgb(182, 182, 182);
|
||||
}
|
||||
@ -22,7 +24,6 @@
|
||||
|
||||
.LP-Link{
|
||||
background-color: $-beige;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover{
|
||||
background-color: $-beige;
|
||||
@ -30,48 +31,54 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Link{
|
||||
padding: 15px 20px;
|
||||
vertical-align: sub;
|
||||
border-radius: 2px;
|
||||
|
||||
.LP-Link{
|
||||
padding: 15px 25px;
|
||||
vertical-align: sub;
|
||||
&:active, &:hover{
|
||||
background-color: $-beige;
|
||||
color: $-grey;
|
||||
}
|
||||
}
|
||||
|
||||
&:active, &:hover{
|
||||
background-color: $-beige;
|
||||
border-radius: 2px;
|
||||
color: $-grey;
|
||||
}
|
||||
}
|
||||
.LP-Icon{
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Pagination__First{
|
||||
&:before{
|
||||
content: "⟪";
|
||||
padding-right: 1em;
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
@media(max-width: $-viewport-normal){
|
||||
.LP-Pagination{
|
||||
.LP-Link{
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.LP-Pagination__Item--other{
|
||||
.LP-Text{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Pagination__Previous{
|
||||
&:before{
|
||||
content: "⟨";
|
||||
padding-right: 1em;
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
@media(max-width: $-viewport-small){
|
||||
.LP-Pagination{
|
||||
.LP-Pagination__Item{
|
||||
margin: 0 1px;
|
||||
.LP-Link{
|
||||
padding: 13px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Pagination__Next{
|
||||
&:after{
|
||||
content: "⟩";
|
||||
padding-left: 1em;
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Pagination__Last{
|
||||
&:after{
|
||||
content: "⟫";
|
||||
padding-left: 1em;
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
@media(max-width: $-viewport-extra-small){
|
||||
.LP-Pagination{
|
||||
.LP-Pagination__Item{
|
||||
.LP-Link{
|
||||
padding: 8px 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -1,43 +1,54 @@
|
||||
<div class="LP-Pagination">
|
||||
<ul class="LP-Pagination__List">
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--first LP-Pagination__Item--disabled">
|
||||
<span class="LP-Pagination__First">first</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--previous LP-Pagination__Item--disabled">
|
||||
<span class="LP-Pagination__Previous">previous</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--number LP-Pagination__Item--current">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">1</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--number">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">2</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--number">
|
||||
<a class="LP-Link" href="#"><span class="LP-Pagination__Number">3</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--number">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">4</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--number">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">5</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--number">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">6</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--number">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">7</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--number">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">8</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--number">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Number">9</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--next">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Next">next</span></a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--last">
|
||||
<a href="#" class="LP-Link"><span class="LP-Pagination__Last">last</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="LP-Pagination__List">
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--first">
|
||||
<a href="#" class="LP-Link">
|
||||
<span class="LP-Icon">⟪</span>
|
||||
<span class="LP-Text">First</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--previous">
|
||||
<a href="#" class="LP-Link">
|
||||
<span class="LP-Icon">⟨</span>
|
||||
<span class="LP-Text">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
|
||||
<a href="#" class="LP-Link">
|
||||
<span class="LP-Text">1</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
|
||||
<a href="#" class="LP-Link">
|
||||
<span class="LP-Text">2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
|
||||
<a href="#" class="LP-Link">
|
||||
<span class="LP-Text">3</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--current">
|
||||
<a href="#" class="LP-Link">
|
||||
<span class="LP-Text">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
|
||||
<a href="#" class="LP-Link">
|
||||
<span class="LP-Text">5</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next">
|
||||
<a href="#" class="LP-Link">
|
||||
<span class="LP-Text">Next</span>
|
||||
<span class="LP-Icon">⟩</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last">
|
||||
<a href="#" class="LP-Link">
|
||||
<span class="LP-Text">Last</span>
|
||||
<span class="LP-Icon">⟫</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
@ -21,7 +21,7 @@
|
||||
|
||||
.LP-PlaceList__Item{
|
||||
max-width: 900px;
|
||||
min-width: 450px;
|
||||
//min-width: 450px;
|
||||
margin: 18px 0;
|
||||
}
|
||||
}
|
||||
|
@ -26,8 +26,8 @@ $-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
|
||||
$-primary-serif-font: Crimson, Times, serif;
|
||||
$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
|
||||
|
||||
$-viewport-small: 650px;
|
||||
$-viewport-extra-small: 450px;
|
||||
$-viewport-small: 650px;
|
||||
$-viewport-medium: 750px;
|
||||
$-viewport-normal: 1000px;
|
||||
|
||||
@ -99,6 +99,12 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-extra-small){
|
||||
.LP-Main__Sidebar{
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-toggle-sidebar){
|
||||
.LP-Wrapper__Site{
|
||||
grid-template-columns: 0 1fr;
|
||||
@ -125,7 +131,7 @@ body{
|
||||
}
|
||||
|
||||
#toggle_sidebar ~ .LP-Main__Sidebar{
|
||||
left: -1 * $-sidebar-width;
|
||||
left: -1 * $-sidebar-width - 1;
|
||||
}
|
||||
|
||||
.LP-Menu__TriggerLabel{
|
||||
|
@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
@font-face {
|
||||
font-family: Crimson;
|
||||
src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
|
||||
@ -56,17 +55,11 @@ body {
|
||||
.LP-Section .LP-Headline {
|
||||
margin: 0; } }
|
||||
|
||||
@media (max-width: 450px) {
|
||||
.LP-Main__Sidebar {
|
||||
max-width: 100vw; } }
|
||||
|
||||
@media (max-width: 650px) {
|
||||
@keyframes slide_out_siedebar {
|
||||
from {
|
||||
left: -250px; }
|
||||
to {
|
||||
left: 0; } }
|
||||
@keyframes slide_in_siedebar {
|
||||
from {
|
||||
left: 0; }
|
||||
to {
|
||||
left: -250px; } }
|
||||
.LP-Wrapper__Site {
|
||||
grid-template-columns: 0 1fr; }
|
||||
.LP-Main__Sidebar {
|
||||
@ -77,16 +70,14 @@ body {
|
||||
left: -251px;
|
||||
height: 100vh;
|
||||
top: 60px;
|
||||
border-right: 1px solid #C09F80; }
|
||||
border-right: 1px solid #C09F80;
|
||||
transition: left 0.3s; }
|
||||
.LP-Main__Sidebar--hidden {
|
||||
visibility: hidden; }
|
||||
#toggle_sidebar:checked ~ .LP-Main__Sidebar {
|
||||
animation-name: slide_out_siedebar;
|
||||
animation-duration: .3s;
|
||||
left: 0; }
|
||||
#toggle_sidebar ~ .LP-Main__Sidebar {
|
||||
animation-name: slide_in_siedebar;
|
||||
animation-duration: .3s; }
|
||||
left: -251px; }
|
||||
.LP-Menu__TriggerLabel {
|
||||
z-index: 20;
|
||||
height: 60px;
|
||||
@ -315,41 +306,44 @@ body {
|
||||
.LP-Pagination .LP-Pagination__List {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: row; }
|
||||
flex-direction: row;
|
||||
padding-left: 0;
|
||||
padding-right: 0; }
|
||||
.LP-Pagination .LP-Pagination__Item {
|
||||
margin: 0 4px; }
|
||||
.LP-Pagination .LP-Pagination__Item--disabled {
|
||||
color: #b6b6b6; }
|
||||
.LP-Pagination .LP-Pagination__Item--current .LP-Link {
|
||||
background-color: #D7CEC7;
|
||||
border-radius: 2px; }
|
||||
background-color: #D7CEC7; }
|
||||
.LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
|
||||
background-color: #D7CEC7;
|
||||
color: #565656; }
|
||||
.LP-Pagination .LP-Link {
|
||||
padding: 15px 25px;
|
||||
vertical-align: sub; }
|
||||
padding: 15px 20px;
|
||||
vertical-align: sub;
|
||||
border-radius: 2px; }
|
||||
.LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
|
||||
background-color: #D7CEC7;
|
||||
border-radius: 2px;
|
||||
color: #565656; }
|
||||
.LP-Pagination .LP-Pagination__First:before {
|
||||
content: "⟪";
|
||||
padding-right: 1em;
|
||||
font-size: larger; }
|
||||
.LP-Pagination .LP-Pagination__Previous:before {
|
||||
content: "⟨";
|
||||
padding-right: 1em;
|
||||
font-size: larger; }
|
||||
.LP-Pagination .LP-Pagination__Next:after {
|
||||
content: "⟩";
|
||||
padding-left: 1em;
|
||||
font-size: larger; }
|
||||
.LP-Pagination .LP-Pagination__Last:after {
|
||||
content: "⟫";
|
||||
padding-left: 1em;
|
||||
.LP-Pagination .LP-Icon {
|
||||
font-size: larger; }
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.LP-Pagination .LP-Link {
|
||||
padding: 10px 15px; }
|
||||
.LP-Pagination .LP-Pagination__Item--other .LP-Text {
|
||||
display: none; } }
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.LP-Pagination .LP-Pagination__Item {
|
||||
margin: 0 1px; }
|
||||
.LP-Pagination .LP-Pagination__Item .LP-Link {
|
||||
padding: 13px 16px; } }
|
||||
|
||||
@media (max-width: 450px) {
|
||||
.LP-Pagination .LP-Pagination__Item .LP-Link {
|
||||
padding: 8px 11px; } }
|
||||
|
||||
.LP-Content {
|
||||
padding: 35px; }
|
||||
|
||||
@ -578,7 +572,6 @@ body {
|
||||
border-left: 2px #565656 solid; }
|
||||
.LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
|
||||
max-width: 900px;
|
||||
min-width: 450px;
|
||||
margin: 18px 0; }
|
||||
|
||||
.LP-PlaceList .LP-Pagination {
|
||||
|
Loading…
Reference in New Issue
Block a user