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

Pagination styling

Browse Source
This commit is contained in:
Félix Péault
2020-02-20 19:02:32 +01:00
parent 055d36d5a7
commit 1e1b2fc1fb
1 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,9 +15,10 @@
// Pages // Pages
&__page { &__page {
position: relative; position: relative;
display: inline-block; display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 auto; margin: 0 auto;
padding-left: 72px;
font-family: $font-serif-extra; font-family: $font-serif-extra;
font-size: rem(72px); font-size: rem(72px);
color: rgba($color-text, 0.15); color: rgba($color-text, 0.15);
@@ -31,19 +32,19 @@
// Numbers // Numbers
&--numbers { &--numbers {
position: absolute;
top: 0;
left: -32px;
height: 136px;
overflow: hidden; overflow: hidden;
height: 62px;
@include breakpoint (sm) {
height: 136px;
}
.scroll { .scroll {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; transform: translate(0, 0);
text-align: right; text-align: right;
line-height: 0.85; line-height: 0.85;
transform: translate3d(0, -190%, 0);
transition: transform 250ms $ease-cubic; transition: transform 250ms $ease-cubic;
will-change: transform; will-change: transform;
} }
@@ -67,23 +68,36 @@
// Hover // Hover
&:hover { &:hover {
color: rgba($color-text, 0.25); color: rgba($color-text, 0.25);
.pagination__page--numbers {
.scroll {
transform: translate3d(0, -135%, 0);
}
}
} }
} }
// Caption // Caption
&__caption { &__caption {
max-width: 420px;
margin: 0 auto;
font-size: 10px; font-size: 10px;
color: $color-lightgray; color: $color-lightgray;
letter-spacing: 2px; letter-spacing: 2px;
line-height: 1.6;
@include breakpoint (sm) { @include breakpoint (sm) {
font-size: 14px; font-size: 14px;
} }
} }
// Message
&__message {
padding: pxVW(40) 0;
h3 {
font-family: $font-serif;
font-size: rem(32px);
color: $color-secondary;
margin-bottom: 16px;
@include breakpoint (sm) {
font-size: rem(40px);
}
}
}
} }