crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak slides on mobile

Browse Source
This commit is contained in:
Fred Carlsen
2018-12-13 16:03:03 +01:00
parent daf334a588
commit bfc8a3ccee
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/website/ts/@next/components/slider/slider.tsx
View File

@@ -70,6 +70,12 @@ const StyledSlider = styled.div`
touch-action: pan-y; touch-action: pan-y;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
outline: none; outline: none;
@media (max-width: 500px) {
overflow: hidden;
margin-left: -20px;
width: calc(100vw - 20px);
}
} }
.flickity-viewport { .flickity-viewport {
@@ -132,18 +138,27 @@ const StyledSlide = styled.div`
opacity: 0.3; opacity: 0.3;
transition: opacity .40s ease-in-out; transition: opacity .40s ease-in-out;
& + & {
margin-left: 30px;
}
@media (max-width: 1200px) {
width: 100%;
}
@media (max-width: 500px) { @media (max-width: 500px) {
width: calc(100vw - 10px - 32px); //width: calc(100vw - 10px - 32px);
width: calc(100vw - 10px - 30px);
height: 450px; height: 450px;
& + & {
margin-left: 10px;
}
} }
&.is-selected { &.is-selected {
opacity: 1; opacity: 1;
} }
& + & {
margin-left: 30px;
}
`; `;
const SlideHead = styled.div` const SlideHead = styled.div`