diff options
Diffstat (limited to 'stepped-solutions/FINISHED/frontend/components/CartCount.js')
| -rw-r--r-- | stepped-solutions/FINISHED/frontend/components/CartCount.js | 60 |
1 files changed, 0 insertions, 60 deletions
diff --git a/stepped-solutions/FINISHED/frontend/components/CartCount.js b/stepped-solutions/FINISHED/frontend/components/CartCount.js deleted file mode 100644 index c202d74..0000000 --- a/stepped-solutions/FINISHED/frontend/components/CartCount.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { TransitionGroup, CSSTransition } from 'react-transition-group'; -import styled from 'styled-components'; - -const AnimationStyles = styled.span` - position: relative; - .count { - display: block; - position: relative; - transition: all 0.4s; - backface-visibility: hidden; - } - /* Intial State of the entered Dot */ - .count-enter { - transform: scale(4) rotateX(0.5turn); - } - .count-enter-active { - transform: rotateX(0); - } - .count-exit { - top: 0; - position: absolute; - transform: rotateX(0); - } - .count-exit-active { - transform: scale(4) rotateX(0.5turn); - } -`; - -const Dot = styled.div` - background: ${props => props.theme.red}; - color: white; - border-radius: 50%; - padding: 0.5rem; - line-height: 2rem; - min-width: 3rem; - margin-left: 1rem; - font-weight: 100; - font-feature-settings: 'tnum'; - font-variant-numeric: tabular-nums; -`; - -const CartCount = ({ count }) => ( - <AnimationStyles> - <TransitionGroup> - <CSSTransition - unmountOnExit - className="count" - classNames="count" - key={count} - timeout={{ enter: 400, exit: 400 }} - > - <Dot>{count}</Dot> - </CSSTransition> - </TransitionGroup> - </AnimationStyles> -); - -export default CartCount; |
