flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Félix Péault
2020-02-13 22:24:28 +01:00
parent 9b0c154f61
commit ef23d90eb6
60 changed files with 1665 additions and 930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/style/molecules/_pagination.scss
View File

@@ -1,42 +1,75 @@
// Pagination
.pagination {
position: relative;
padding: 64px 0 72px;
background-color: $color-tertiary;
text-align: center;
padding: 64px 0 72px;
position: relative;
@include breakpoint (sm) {
padding: 16vw 0 7.5vw;
margin-top: -64px;
padding: pxVW(176) 0 pxVW(120);
}
@include breakpoint (xl) {
padding-top: 200px;
padding: 176px 0 120px;
}
// Pages
&__page {
p {
font-family: $font-serif-extra;
color: rgba($color-text, .15);
position: relative;
line-height: 1;
font-size: rem(72px);
position: relative;
display: inline-block;
margin: 0 auto;
padding-left: 72px;
font-family: $font-serif-extra;
font-size: rem(72px);
color: rgba($color-text, 0.15);
line-height: 1;
cursor: pointer;
transition: color 250ms $ease-cubic;
@include breakpoint (sm) {
font-size: rem(160px);
}
// Numbers
&--numbers {
position: absolute;
top: 0;
left: -32px;
height: 136px;
overflow: hidden;
.scroll {
display: flex;
flex-direction: column;
height: 100%;
text-align: right;
line-height: 0.85;
transform: translate3d(0, -190%, 0);
transition: transform 250ms $ease-cubic;
}
}
// Info
&--info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -72%);
font-family: $font-serif;
font-size: 18px;
color: $color-secondary-bright;
@include breakpoint (sm) {
font-size: rem(160px);
font-size: rem(40px);
}
}
span {
font-family: $font-serif;
color: #FF0536;
position: absolute;
font-size: 18px;
top: 50%;
left: 50%;
transform: translate(-50%, -65%);
// Hover
&:hover {
color: rgba($color-text, 0.25);
@include breakpoint (sm) {
font-size: rem(40px);
.pagination__page--numbers {
.scroll {
transform: translate3d(0, -135%, 0);
}
}
}