module Design.View.Payment.Pages ( design ) where import Clay import qualified Design.Color as Color import qualified Design.Constants as Constants import qualified Design.Helper as Helper import qualified Design.Media as Media design :: Css design = do display flex justifyContent center Media.desktop $ do padding (px 40) (px 30) (px 30) (px 30) Media.tablet $ do padding (px 30) (px 30) (px 30) (px 30) Media.mobile $ do padding (px 20) (px 0) (px 20) (px 0) lineHeight (px 40) svg ? "path" ? ("fill" -: Color.toString Color.dustyGray) ".page" ? do display inlineBlock fontWeight bold Media.desktop $ do Helper.button Color.white Color.dustyGray (px 50) Constants.focusDarken Media.tabletDesktop $ do border solid (px 2) Color.dustyGray marginRight (px 10) Media.tablet $ do Helper.button Color.white Color.dustyGray (px 40) Constants.focusDarken fontSize (px 15) Media.mobile $ do Helper.button Color.white Color.dustyGray (px 30) Constants.focusDarken fontSize (px 12) border solid (px 1) Color.dustyGray marginRight (px 5) ":not(.current)" & cursor pointer ".current" & do borderColor Color.chestnutRose color Color.chestnutRose