From 8ed7d5b734ba588fe0570e0e22f21a0fcda13422 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Wed, 9 May 2018 11:25:33 -0400 Subject: Moving styles to folder --- frontend/components/styles/CartStyles.js | 47 ++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 frontend/components/styles/CartStyles.js (limited to 'frontend/components/styles/CartStyles.js') diff --git a/frontend/components/styles/CartStyles.js b/frontend/components/styles/CartStyles.js new file mode 100644 index 0000000..d5ee93a --- /dev/null +++ b/frontend/components/styles/CartStyles.js @@ -0,0 +1,47 @@ +import styled from 'styled-components'; + +const CartStyles = styled.div` + padding: 20px; + position: relative; + background: white; + position: fixed; + height: 100%; + top: 0; + right: 0; + width: 40%; + min-width: 500px; + bottom: 0; + transform: translateX(100%); + transition: all 0.3s; + box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2); + z-index: 5; + display: grid; + grid-template-rows: auto 1fr auto; + ${props => props.open && `transform: translateX(0);`}; + header { + border-bottom: 5px solid ${props => props.theme.black}; + margin-bottom: 2rem; + padding-bottom: 2rem; + } + footer { + border-top: 10px double ${props => props.theme.black}; + margin-top: 2rem; + padding-top: 2rem; + display: grid; + grid-template-columns: auto auto; + align-items: center; + font-size: 3rem; + font-weight: 900; + p { + margin: 0; + } + } + ul { + margin: 0; + padding: 0; + list-style: none; + overflow: scroll; + } +`; + +export default CartStyles; -- cgit v1.3