diff options
Diffstat (limited to 'packages/website/ts/components/slider/slider.tsx')
-rw-r--r-- | packages/website/ts/components/slider/slider.tsx | 177 |
1 files changed, 0 insertions, 177 deletions
diff --git a/packages/website/ts/components/slider/slider.tsx b/packages/website/ts/components/slider/slider.tsx deleted file mode 100644 index f0a29f894..000000000 --- a/packages/website/ts/components/slider/slider.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import * as React from 'react'; -import Flickity from 'react-flickity-component'; -import styled from 'styled-components'; - -import { colors } from 'ts/style/colors'; - -import { Icon } from 'ts/components/icon'; -import { Heading, Paragraph } from 'ts/components/text'; - -interface SliderProps {} - -interface SlideProps { - icon: string; - heading: string; - text: string; - href?: string; -} - -const flickityOptions = { - initialIndex: 0, - cellAlign: 'left', - arrowShape: - 'M0 50.766L42.467 93.58l5.791-5.839-32.346-32.61H100V46.84H15.48L50.2 11.838 44.409 6 5.794 44.93l-.003-.003z', - prevNextButtons: true, -}; - -export const Slide: React.StatelessComponent<SlideProps> = (props: SlideProps) => { - const { heading, text, icon } = props; - - return ( - <StyledSlide> - <SlideHead> - <Icon name={icon} size="large" /> - </SlideHead> - <SlideContent> - <Heading asElement="h4" size="small" marginBottom="15px"> - {heading} - </Heading> - <Paragraph isMuted={true}>{text}</Paragraph> - </SlideContent> - </StyledSlide> - ); -}; - -export const Slider: React.StatelessComponent<SliderProps> = props => { - return ( - <StyledSlider> - <Flickity - className={'carousel'} // default '' - elementType={'div'} // default 'div' - options={flickityOptions} // takes flickity options {} - disableImagesLoaded={false} // default false - > - {props.children} - </Flickity> - </StyledSlider> - ); -}; - -const StyledSlider = styled.div` - //overflow: hidden; - width: 100%; - height: 520px; - - @media (max-width: 500px) { - height: 450px; - } - - .carousel { - display: block; - user-select: none; - touch-action: pan-y; - -webkit-tap-highlight-color: transparent; - outline: none; - - @media (max-width: 500px) { - overflow: hidden; - margin-left: -20px; - width: calc(100vw - 20px); - } - } - - .flickity-viewport { - outline: none; - } - - .flickity-button { - cursor: pointer; - position: absolute; - width: 74px; - height: 74px; - background-color: #000; - display: flex; - outline: 0; - top: calc(50% - 37px); - border: 0; - padding: 0; - transition: background-color 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out; - - &:disabled { - opacity: 0; - visibility: hidden; - } - - &:hover { - background-color: hsla(0, 0%, 10%, 1); - } - - &.previous { - left: 0; - } - - &.next { - right: 0; - } - - svg { - margin: auto; - width: 28px; - height: auto; - } - - path { - fill: #fff; - } - } -`; - -const StyledSlide = styled.div` - background-color: ${colors.backgroundDark}; - width: 560px; - height: 520px; - flex: 0 0 auto; - opacity: 0.3; - transition: opacity 0.4s ease-in-out; - - & + & { - margin-left: 30px; - } - - @media (max-width: 1200px) { - width: 100%; - } - - @media (max-width: 500px) { - width: calc(100vw - 10px - 30px); - height: 450px; - - & + & { - margin-left: 10px; - } - } - - &.is-selected { - opacity: 1; - } -`; - -const SlideHead = styled.div` - background-color: ${colors.brandDark}; - height: 300px; - display: flex; - justify-content: center; - align-items: center; - - @media (max-width: 500px) { - height: 240px; - } -`; - -const SlideContent = styled.div` - padding: 30px; - - @media (max-width: 500px) { - padding: 20px; - } -`; |