Add to Cart Interaction
- Add To Cart +Add to Cart Interaction
++ 📝 View Tutorial + Add To Cart +
+-
+
- 0
- 0 -
diff --git a/README.md b/README.md index 9c844b8..23bbb5b 100755 --- a/README.md +++ b/README.md @@ -1,13 +1,19 @@ -Add to Cart Interaction +# Add to Cart Interaction -========= +A floating cart component that reveals itself when the user adds an item to the cart. -A floating cart that slides in when the user decides to buy an item. +[Article on CodyHouse](https://codyhouse.co/gem/add-to-cart-interaction) -[Article on CodyHouse](https://codyhouse.co/gem/add-to-cart-interaction/) +[Demo](https://codyhouse.co/demo/add-to-cart-interaction) -[Demo](https://codyhouse.co/demo/add-to-cart-interaction/index.html) +[License](https://codyhouse.co/license) -Icons: [Nucleo](http://nucleoapp.com/) - -[Terms](https://codyhouse.co/terms/) \ No newline at end of file +## Dependencies + +This experiment is built upon the [CodyHouse Framework](https://github.com/CodyHouse/codyhouse-framework). + +Make sure to include both _globals.scss and util.js files of the framework. + +## Credits + +Icons: [Nucleo Library](https://nucleoapp.com/) \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100755 index 0000000..f4696db --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1 @@ +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700");*,*::after,*::before{box-sizing:inherit}*{font:inherit}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,hr{margin:0;padding:0;border:0}html{box-sizing:border-box}body{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, white)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,form legend{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}button,input,textarea,select{margin:0}.btn,.form-control,.link,.reset{background-color:transparent;padding:0;border:0;border-radius:0;color:inherit;line-height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control::-ms-expand{display:none}textarea{resize:vertical;overflow:auto;vertical-align:top}input::-ms-clear{display:none}table{border-collapse:collapse;border-spacing:0}img,video,svg{max-width:100%}:root,[data-theme="default"]{--color-primary-darker:hsl(220, 90%, 36%);--color-primary-darker-h:220;--color-primary-darker-s:90%;--color-primary-darker-l:36%;--color-primary-dark:hsl(220, 90%, 46%);--color-primary-dark-h:220;--color-primary-dark-s:90%;--color-primary-dark-l:46%;--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-primary-light:hsl(220, 90%, 66%);--color-primary-light-h:220;--color-primary-light-s:90%;--color-primary-light-l:66%;--color-primary-lighter:hsl(220, 90%, 76%);--color-primary-lighter-h:220;--color-primary-lighter-s:90%;--color-primary-lighter-l:76%;--color-accent-darker:hsl(355, 90%, 41%);--color-accent-darker-h:355;--color-accent-darker-s:90%;--color-accent-darker-l:41%;--color-accent-dark:hsl(355, 90%, 51%);--color-accent-dark-h:355;--color-accent-dark-s:90%;--color-accent-dark-l:51%;--color-accent:hsl(355, 90%, 61%);--color-accent-h:355;--color-accent-s:90%;--color-accent-l:61%;--color-accent-light:hsl(355, 90%, 71%);--color-accent-light-h:355;--color-accent-light-s:90%;--color-accent-light-l:71%;--color-accent-lighter:hsl(355, 90%, 81%);--color-accent-lighter-h:355;--color-accent-lighter-s:90%;--color-accent-lighter-l:81%;--color-black:hsl(240, 8%, 12%);--color-black-h:240;--color-black-s:8%;--color-black-l:12%;--color-white:hsl(0, 0%, 100%);--color-white-h:0;--color-white-s:0%;--color-white-l:100%;--color-success-darker:hsl(94, 48%, 36%);--color-success-darker-h:94;--color-success-darker-s:48%;--color-success-darker-l:36%;--color-success-dark:hsl(94, 48%, 46%);--color-success-dark-h:94;--color-success-dark-s:48%;--color-success-dark-l:46%;--color-success:hsl(94, 48%, 56%);--color-success-h:94;--color-success-s:48%;--color-success-l:56%;--color-success-light:hsl(94, 48%, 66%);--color-success-light-h:94;--color-success-light-s:48%;--color-success-light-l:66%;--color-success-lighter:hsl(94, 48%, 76%);--color-success-lighter-h:94;--color-success-lighter-s:48%;--color-success-lighter-l:76%;--color-error-darker:hsl(355, 90%, 41%);--color-error-darker-h:355;--color-error-darker-s:90%;--color-error-darker-l:41%;--color-error-dark:hsl(355, 90%, 51%);--color-error-dark-h:355;--color-error-dark-s:90%;--color-error-dark-l:51%;--color-error:hsl(355, 90%, 61%);--color-error-h:355;--color-error-s:90%;--color-error-l:61%;--color-error-light:hsl(355, 90%, 71%);--color-error-light-h:355;--color-error-light-s:90%;--color-error-light-l:71%;--color-error-lighter:hsl(355, 90%, 81%);--color-error-lighter-h:355;--color-error-lighter-s:90%;--color-error-lighter-l:81%;--color-warning-darker:hsl(46, 100%, 41%);--color-warning-darker-h:46;--color-warning-darker-s:100%;--color-warning-darker-l:41%;--color-warning-dark:hsl(46, 100%, 51%);--color-warning-dark-h:46;--color-warning-dark-s:100%;--color-warning-dark-l:51%;--color-warning:hsl(46, 100%, 61%);--color-warning-h:46;--color-warning-s:100%;--color-warning-l:61%;--color-warning-light:hsl(46, 100%, 71%);--color-warning-light-h:46;--color-warning-light-s:100%;--color-warning-light-l:71%;--color-warning-lighter:hsl(46, 100%, 81%);--color-warning-lighter-h:46;--color-warning-lighter-s:100%;--color-warning-lighter-l:81%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}[data-theme]{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg);color:hsl(240, 4%, 20%);color:var(--color-contrast-high)}:root{--space-unit: 1em;--space-xxxxs: calc(0.125*var(--space-unit));--space-xxxs: calc(0.25*var(--space-unit));--space-xxs: calc(0.375*var(--space-unit));--space-xs: calc(0.5*var(--space-unit));--space-sm: calc(0.75*var(--space-unit));--space-md: calc(1.25*var(--space-unit));--space-lg: calc(2*var(--space-unit));--space-xl: calc(3.25*var(--space-unit));--space-xxl: calc(5.25*var(--space-unit));--space-xxxl: calc(8.5*var(--space-unit));--space-xxxxl: calc(13.75*var(--space-unit));--component-padding: var(--space-md)}@supports (--css: variables){@media (min-width: 64rem){:root{--space-unit: 1.25em}}}.margin-top,.margin-top--md{margin-top:1.25em;margin-top:var(--space-md)}.margin-top--xxxxs{margin-top:0.125em;margin-top:var(--space-xxxxs)}.margin-top--xxxs{margin-top:0.25em;margin-top:var(--space-xxxs)}.margin-top--xxs{margin-top:0.375em;margin-top:var(--space-xxs)}.margin-top--xs{margin-top:0.5em;margin-top:var(--space-xs)}.margin-top--sm{margin-top:0.75em;margin-top:var(--space-sm)}.margin-top--lg{margin-top:2em;margin-top:var(--space-lg)}.margin-top--xl{margin-top:3.25em;margin-top:var(--space-xl)}.margin-top--xxl{margin-top:5.25em;margin-top:var(--space-xxl)}.margin-top--xxxl{margin-top:8.5em;margin-top:var(--space-xxxl)}.margin-top--xxxxl{margin-top:13.75em;margin-top:var(--space-xxxxl)}.margin-bottom,.margin-bottom--md{margin-bottom:1.25em;margin-bottom:var(--space-md)}.margin-bottom--xxxxs{margin-bottom:0.125em;margin-bottom:var(--space-xxxxs)}.margin-bottom--xxxs{margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.margin-bottom--xxs{margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.margin-bottom--xs{margin-bottom:0.5em;margin-bottom:var(--space-xs)}.margin-bottom--sm{margin-bottom:0.75em;margin-bottom:var(--space-sm)}.margin-bottom--lg{margin-bottom:2em;margin-bottom:var(--space-lg)}.margin-bottom--xl{margin-bottom:3.25em;margin-bottom:var(--space-xl)}.margin-bottom--xxl{margin-bottom:5.25em;margin-bottom:var(--space-xxl)}.margin-bottom--xxxl{margin-bottom:8.5em;margin-bottom:var(--space-xxxl)}.margin-bottom--xxxxl{margin-bottom:13.75em;margin-bottom:var(--space-xxxxl)}:root{--container-width-xs: 37.5rem;--container-width-sm: 45rem;--container-width-md: 64rem;--container-width-lg: 80rem;--container-width-xl: 90rem}.container{width:calc(100% - 1.25em);width:calc(100% - 2*var(--component-padding));margin-left:auto;margin-right:auto}.container--full-width{width:100%}.container--xs{max-width:37.5rem;max-width:var(--container-width-xs)}.container--sm{max-width:45rem;max-width:var(--container-width-sm)}.container--md{max-width:64rem;max-width:var(--container-width-md)}.container--lg{max-width:80rem;max-width:var(--container-width-lg)}.container--xl{max-width:90rem;max-width:var(--container-width-xl)}.container--adaptive,.container--adaptive-lg{max-width:37.5rem;max-width:var(--container-width-xs)}@media (min-width: 64rem){.container--adaptive,.container--adaptive-lg{max-width:64rem;max-width:var(--container-width-md)}}@media (min-width: 90rem){.container--adaptive,.container--adaptive-lg{max-width:80rem;max-width:var(--container-width-lg)}}.container--adaptive-sm{max-width:37.5rem;max-width:var(--container-width-xs)}@media (min-width: 64rem){.container--adaptive-sm{max-width:45rem;max-width:var(--container-width-sm)}}.container--adaptive-md{max-width:37.5rem;max-width:var(--container-width-xs)}@media (min-width: 64rem){.container--adaptive-md{max-width:64rem;max-width:var(--container-width-md)}}.container--adaptive-xl{max-width:37.5rem;max-width:var(--container-width-xs)}@media (min-width: 64rem){.container--adaptive-xl{max-width:64rem;max-width:var(--container-width-md)}}@media (min-width: 90rem){.container--adaptive-xl{max-width:90rem;max-width:var(--container-width-xl)}}.grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid>*{background-clip:content-box;-ms-flex-preferred-size:100%;flex-basis:100%}.grid--gap-xs,.grid-gap--xs{margin:-0.5em 0 0 -0.5em;margin:calc(var(--space-xs)*-1) 0 0 calc(var(--space-xs)*-1)}.grid--gap-xs>*,.grid-gap--xs>*{padding:0.5em 0 0 0.5em;padding:var(--space-xs) 0 0 var(--space-xs)}.grid--gap-sm,.grid-gap--sm{margin:-0.75em 0 0 -0.75em;margin:calc(var(--space-sm)*-1) 0 0 calc(var(--space-sm)*-1)}.grid--gap-sm>*,.grid-gap--sm>*{padding:0.75em 0 0 0.75em;padding:var(--space-sm) 0 0 var(--space-sm)}.grid--gap-md,.grid-gap--md{margin:-1.25em 0 0 -1.25em;margin:calc(var(--space-md)*-1) 0 0 calc(var(--space-md)*-1)}.grid--gap-md>*,.grid-gap--md>*{padding:1.25em 0 0 1.25em;padding:var(--space-md) 0 0 var(--space-md)}.grid--gap-lg,.grid-gap--lg{margin:-2em 0 0 -2em;margin:calc(var(--space-lg)*-1) 0 0 calc(var(--space-lg)*-1)}.grid--gap-lg>*,.grid-gap--lg>*{padding:2em 0 0 2em;padding:var(--space-lg) 0 0 var(--space-lg)}.grid--gap-xl,.grid-gap--xl{margin:-3.25em 0 0 -3.25em;margin:calc(var(--space-xl)*-1) 0 0 calc(var(--space-xl)*-1)}.grid--gap-xl>*,.grid-gap--xl>*{padding:3.25em 0 0 3.25em;padding:var(--space-xl) 0 0 var(--space-xl)}.col{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col--1{-ms-flex-preferred-size:8.33%;flex-basis:8.33%;max-width:8.33%}.col--2{-ms-flex-preferred-size:16.66%;flex-basis:16.66%;max-width:16.66%}.col--3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col--4{-ms-flex-preferred-size:33.33%;flex-basis:33.33%;max-width:33.33%}.col--5{-ms-flex-preferred-size:41.66%;flex-basis:41.66%;max-width:41.66%}.col--6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col--7{-ms-flex-preferred-size:58.33%;flex-basis:58.33%;max-width:58.33%}.col--8{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;max-width:66.66%}.col--9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col--10{-ms-flex-preferred-size:83.33%;flex-basis:83.33%;max-width:83.33%}.col--11{-ms-flex-preferred-size:91.66%;flex-basis:91.66%;max-width:91.66%}.col--12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}@media (min-width: 30rem){.col--xs{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col--xs-1{-ms-flex-preferred-size:8.33%;flex-basis:8.33%;max-width:8.33%}.col--xs-2{-ms-flex-preferred-size:16.66%;flex-basis:16.66%;max-width:16.66%}.col--xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col--xs-4{-ms-flex-preferred-size:33.33%;flex-basis:33.33%;max-width:33.33%}.col--xs-5{-ms-flex-preferred-size:41.66%;flex-basis:41.66%;max-width:41.66%}.col--xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col--xs-7{-ms-flex-preferred-size:58.33%;flex-basis:58.33%;max-width:58.33%}.col--xs-8{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;max-width:66.66%}.col--xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col--xs-10{-ms-flex-preferred-size:83.33%;flex-basis:83.33%;max-width:83.33%}.col--xs-11{-ms-flex-preferred-size:91.66%;flex-basis:91.66%;max-width:91.66%}.col--xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}}@media (min-width: 37.5rem){.col--sm{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col--sm-1{-ms-flex-preferred-size:8.33%;flex-basis:8.33%;max-width:8.33%}.col--sm-2{-ms-flex-preferred-size:16.66%;flex-basis:16.66%;max-width:16.66%}.col--sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col--sm-4{-ms-flex-preferred-size:33.33%;flex-basis:33.33%;max-width:33.33%}.col--sm-5{-ms-flex-preferred-size:41.66%;flex-basis:41.66%;max-width:41.66%}.col--sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col--sm-7{-ms-flex-preferred-size:58.33%;flex-basis:58.33%;max-width:58.33%}.col--sm-8{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;max-width:66.66%}.col--sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col--sm-10{-ms-flex-preferred-size:83.33%;flex-basis:83.33%;max-width:83.33%}.col--sm-11{-ms-flex-preferred-size:91.66%;flex-basis:91.66%;max-width:91.66%}.col--sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}}@media (min-width: 64rem){.col--md{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col--md-1{-ms-flex-preferred-size:8.33%;flex-basis:8.33%;max-width:8.33%}.col--md-2{-ms-flex-preferred-size:16.66%;flex-basis:16.66%;max-width:16.66%}.col--md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col--md-4{-ms-flex-preferred-size:33.33%;flex-basis:33.33%;max-width:33.33%}.col--md-5{-ms-flex-preferred-size:41.66%;flex-basis:41.66%;max-width:41.66%}.col--md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col--md-7{-ms-flex-preferred-size:58.33%;flex-basis:58.33%;max-width:58.33%}.col--md-8{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;max-width:66.66%}.col--md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col--md-10{-ms-flex-preferred-size:83.33%;flex-basis:83.33%;max-width:83.33%}.col--md-11{-ms-flex-preferred-size:91.66%;flex-basis:91.66%;max-width:91.66%}.col--md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}}@media (min-width: 80rem){.col--lg{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col--lg-1{-ms-flex-preferred-size:8.33%;flex-basis:8.33%;max-width:8.33%}.col--lg-2{-ms-flex-preferred-size:16.66%;flex-basis:16.66%;max-width:16.66%}.col--lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col--lg-4{-ms-flex-preferred-size:33.33%;flex-basis:33.33%;max-width:33.33%}.col--lg-5{-ms-flex-preferred-size:41.66%;flex-basis:41.66%;max-width:41.66%}.col--lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col--lg-7{-ms-flex-preferred-size:58.33%;flex-basis:58.33%;max-width:58.33%}.col--lg-8{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;max-width:66.66%}.col--lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col--lg-10{-ms-flex-preferred-size:83.33%;flex-basis:83.33%;max-width:83.33%}.col--lg-11{-ms-flex-preferred-size:91.66%;flex-basis:91.66%;max-width:91.66%}.col--lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}}@media (min-width: 90rem){.col--xl{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col--xl-1{-ms-flex-preferred-size:8.33%;flex-basis:8.33%;max-width:8.33%}.col--xl-2{-ms-flex-preferred-size:16.66%;flex-basis:16.66%;max-width:16.66%}.col--xl-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col--xl-4{-ms-flex-preferred-size:33.33%;flex-basis:33.33%;max-width:33.33%}.col--xl-5{-ms-flex-preferred-size:41.66%;flex-basis:41.66%;max-width:41.66%}.col--xl-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col--xl-7{-ms-flex-preferred-size:58.33%;flex-basis:58.33%;max-width:58.33%}.col--xl-8{-ms-flex-preferred-size:66.66%;flex-basis:66.66%;max-width:66.66%}.col--xl-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col--xl-10{-ms-flex-preferred-size:83.33%;flex-basis:83.33%;max-width:83.33%}.col--xl-11{-ms-flex-preferred-size:91.66%;flex-basis:91.66%;max-width:91.66%}.col--xl-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}}.flex{display:-ms-flexbox;display:flex}.flex>*{display:inline-block}.flex--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex--column{-ms-flex-direction:column;flex-direction:column}.flex--end{-ms-flex-pack:end;justify-content:flex-end}.flex--center{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.flex--center-x{-ms-flex-pack:center;justify-content:center}.flex--center-y{-ms-flex-align:center;align-items:center}.flex--space-between{-ms-flex-pack:justify;justify-content:space-between}.flex--space-around{-ms-flex-pack:distribute;justify-content:space-around}.flex--space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.flex--grow>*{-ms-flex-positive:1;flex-grow:1}.flex--shrink-none>*{-ms-flex-negative:0;flex-shrink:0}.flex--gap>*,.flex--gap-md>*,.flex-gap>*,.flex-gap--md>*{margin-right:1.25em;margin-right:var(--space-md)}.flex--gap>*:last-child,.flex--gap-md>*:last-child,.flex-gap>*:last-child,.flex-gap--md>*:last-child{margin-right:0}.flex--wrap.flex--gap,.flex--wrap.flex--gap-md,.flex--wrap.flex-gap,.flex--wrap.flex-gap--md{margin-bottom:-1.25em;margin-bottom:calc(-1*var(--space-md))}.flex--wrap.flex--gap>*,.flex--wrap.flex--gap-md>*,.flex--wrap.flex-gap>*,.flex--wrap.flex-gap--md>*{margin-bottom:1.25em;margin-bottom:var(--space-md)}.flex--gap-xxs>*,.flex-gap--xxs>*{margin-right:0.375em;margin-right:var(--space-xxs)}.flex--gap-xxs>*:last-child,.flex-gap--xxs>*:last-child{margin-right:0}.flex--wrap.flex--gap-xxs,.flex--wrap.flex-gap--xxs{margin-bottom:-0.375em;margin-bottom:calc(-1*var(--space-xxs))}.flex--wrap.flex--gap-xxs>*,.flex--wrap.flex-gap--xxs>*{margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.flex--gap-xs>*,.flex-gap--xs>*{margin-right:0.5em;margin-right:var(--space-xs)}.flex--gap-xs>*:last-child,.flex-gap--xs>*:last-child{margin-right:0}.flex--wrap.flex--gap-xs,.flex--wrap.flex-gap--xs{margin-bottom:-0.5em;margin-bottom:calc(-1*var(--space-xs))}.flex--wrap.flex--gap-xs>*,.flex--wrap.flex-gap--xs>*{margin-bottom:0.5em;margin-bottom:var(--space-xs)}.flex--gap-sm>*,.flex-gap--sm>*{margin-right:0.75em;margin-right:var(--space-sm)}.flex--gap-sm>*:last-child,.flex-gap--sm>*:last-child{margin-right:0}.flex--wrap.flex--gap-sm,.flex--wrap.flex-gap--sm{margin-bottom:-0.75em;margin-bottom:calc(-1*var(--space-sm))}.flex--wrap.flex--gap-sm>*,.flex--wrap.flex-gap--sm>*{margin-bottom:0.75em;margin-bottom:var(--space-sm)}.flex--gap-lg>*,.flex-gap--lg>*{margin-right:2em;margin-right:var(--space-lg)}.flex--gap-lg>*:last-child,.flex-gap--lg>*:last-child{margin-right:0}.flex--wrap.flex--gap-lg,.flex--wrap.flex-gap--lg{margin-bottom:-2em;margin-bottom:calc(-1*var(--space-lg))}.flex--wrap.flex--gap-lg>*,.flex--wrap.flex-gap--lg>*{margin-bottom:2em;margin-bottom:var(--space-lg)}.flex--gap-xl>*,.flex-gap--xl>*{margin-right:3.25em;margin-right:var(--space-xl)}.flex--gap-xl>*:last-child,.flex-gap--xl>*:last-child{margin-right:0}.flex--wrap.flex--gap-xl,.flex--wrap.flex-gap--xl{margin-bottom:-3.25em;margin-bottom:calc(-1*var(--space-xl))}.flex--wrap.flex--gap-xl>*,.flex--wrap.flex-gap--xl>*{margin-bottom:3.25em;margin-bottom:var(--space-xl)}.flex-item--end{-ms-flex-item-align:end;align-self:flex-end}.flex-item--grow{-ms-flex-positive:1;flex-grow:1}.flex-item--shrink-none{-ms-flex-negative:0;flex-shrink:0}:root{--radius: 0.25em;--shadow-sm: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 8px rgba(0, 0, 0, .1);--shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15);--shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);--transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);--transition-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);--transition-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);--transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1)}:root{--font-primary: sans-serif;--text-base-size: 1em;--text-scale-ratio: 1.2;--text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio));--text-sm: calc(var(--text-xs)*var(--text-scale-ratio));--text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio));--text-lg: calc(var(--text-md)*var(--text-scale-ratio));--text-xl: calc(var(--text-lg)*var(--text-scale-ratio));--text-xxl: calc(var(--text-xl)*var(--text-scale-ratio));--text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio));--body-line-height: 1.4;--heading-line-height: 1.2;--font-primary-capital-letter: 1}@supports (--css: variables){@media (min-width: 64rem){:root{--text-base-size: 1.25em;--text-scale-ratio: 1.25}}}body{font-size:1em;font-size:var(--text-base-size);font-family:'Source Sans Pro', sans-serif;font-family:var(--font-primary);color:hsl(240, 4%, 20%);color:var(--color-contrast-high)}h1,h2,h3,h4{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher);line-height:1.2;line-height:var(--heading-line-height)}.text--xxxl{font-size:2.48832em;font-size:var(--text-xxxl)}h1,.text--xxl{font-size:2.0736em;font-size:var(--text-xxl)}h2,.text--xl{font-size:1.728em;font-size:var(--text-xl)}h3,.text--lg{font-size:1.44em;font-size:var(--text-lg)}h4,.text--md{font-size:1.2em;font-size:var(--text-md)}.text--sm,small{font-size:0.83333em;font-size:var(--text-sm)}.text--xs{font-size:0.69444em;font-size:var(--text-xs)}a,.link{color:hsl(220, 90%, 56%);color:var(--color-primary);text-decoration:underline}mark{background-color:hsla(355, 90%, 61%, 0.2);background-color:hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);color:inherit}strong{font-weight:bold}s{text-decoration:line-through}u{text-decoration:underline}.text--subtle,.text-component .text--subtle{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium)}.text--inherit,.text-component .text--inherit{color:inherit}.text-component{--component-body-line-height: calc(var(--body-line-height)*var(--line-height-multiplier, 1));--component-heading-line-height: calc(var(--heading-line-height)*var(--line-height-multiplier, 1));--line-height-multiplier: 1;--text-vspace-multiplier: 1}.text-component h1,.text-component h2,.text-component h3,.text-component h4{line-height:1.2;line-height:var(--component-heading-line-height);margin-bottom:0.25em;margin-bottom:calc(var(--space-xxxs)*var(--text-vspace-multiplier))}.text-component h2,.text-component h3,.text-component h4{margin-top:0.75em;margin-top:calc(var(--space-sm)*var(--text-vspace-multiplier))}.text-component p,.text-component blockquote,.text-component ul li,.text-component ol li{line-height:1.4;line-height:var(--component-body-line-height);color:hsl(240, 4%, 20%);color:var(--color-contrast-high)}.text-component ul,.text-component ol,.text-component p,.text-component blockquote,.text-component .text-component__block,.text-component .text-component__img{margin-bottom:0.75em;margin-bottom:calc(var(--space-sm)*var(--text-vspace-multiplier))}.text-component ul,.text-component ol{padding-left:1em}.text-component ul{list-style-type:disc}.text-component ol{list-style-type:decimal}.text-component em{font-style:italic}.text-component blockquote{padding-left:1em;border-left:4px solid hsl(240, 1%, 83%);border-left:4px solid var(--color-contrast-low)}.text-component hr{background:hsl(240, 1%, 83%);background:var(--color-contrast-low);height:1px;margin:2em auto;margin:calc(var(--space-lg)*var(--text-vspace-multiplier)) auto}.text-component>*:first-child{margin-top:0}.text-component>*:last-child{margin-bottom:0}.article.text-component{--line-height-multiplier: 1.13;--text-vspace-multiplier: 1.2}.text-component__block--full-width{width:100vw;margin-left:calc(50% - 50vw)}.text-component__img{text-align:center}.text-component__img img{display:block;margin:0 auto}.text-component__img figcaption{text-align:center;font-size:0.83333em;font-size:var(--text-sm);color:hsl(240, 1%, 48%);color:var(--color-contrast-medium);margin-top:0.5em;margin-top:var(--space-xs)}.text-component__block .text-component__img{margin-bottom:0}@media (min-width: 37.5rem){.text-component__block--left,.text-component__block--right,.text-component__img--left,.text-component__img--right{width:45%}.text-component__block--left img,.text-component__block--right img,.text-component__img--left img,.text-component__img--right img{width:100%}.text-component__block--left,.text-component__img--left{float:left;margin-right:0.75em;margin-right:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component__block--right,.text-component__img--right{float:right;margin-left:0.75em;margin-left:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}}@media (min-width: 90rem){.text-component__block--outset,.text-component__img--outset{width:calc(100% + 10.5em);width:calc(100% + 2*var(--space-xxl))}.text-component__block--outset img,.text-component__img--outset img{width:100%}.text-component__block--outset:not(.text-component__block--right),.text-component__img--outset:not(.text-component__img--right){margin-left:-5.25em;margin-left:calc(-1*var(--space-xxl))}.text-component__block--left,.text-component__block--right,.text-component__img--left,.text-component__img--right{width:50%}.text-component__block--right.text-component__block--outset,.text-component__img--right.text-component__img--outset{margin-right:-5.25em;margin-right:calc(-1*var(--space-xxl))}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--center{text-align:center}.text--replace{overflow:hidden;color:transparent;text-indent:100%;white-space:nowrap}:root{--icon-xxs: 12px;--icon-xs: 16px;--icon-sm: 24px;--icon-md: 32px;--icon-lg: 48px;--icon-xl: 64px;--icon-xxl: 128px}.icon{display:inline-block;color:hsl(240, 8%, 12%);color:var(--color-contrast-higher);fill:currentColor;height:1em;width:1em;line-height:1}.icon--xxs{font-size:12px;font-size:var(--icon-xxs)}.icon--xs{font-size:16px;font-size:var(--icon-xs)}.icon--sm{font-size:24px;font-size:var(--icon-sm)}.icon--md{font-size:32px;font-size:var(--icon-md)}.icon--lg{font-size:48px;font-size:var(--icon-lg)}.icon--xl{font-size:64px;font-size:var(--icon-xl)}.icon--xxl{font-size:128px;font-size:var(--icon-xxl)}.icon-text{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.icon-text>*:nth-child(2){margin-left:0.375em;margin-left:var(--space-xxs)}.icon-text .icon{color:inherit;-ms-flex-negative:0;flex-shrink:0}.icon-text.icon-text--gap-none>*:nth-child(2){margin-left:0}.icon-text.icon-text--gap-xxxs>*:nth-child(2){margin-left:0.25em;margin-left:var(--space-xxxs)}.icon-text.icon-text--gap-xxxxs>*:nth-child(2){margin-left:0.125em;margin-left:var(--space-xxxxs)}.icon-text--space-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.icon--is-spinning{-webkit-animation:icon-spin 1s infinite linear;animation:icon-spin 1s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icon use{color:inherit;fill:currentColor}:root{--btn-font-size: 1em;--btn-sm: calc(var(--btn-font-size) - 0.2em);--btn-md: calc(var(--btn-font-size) + 0.2em);--btn-lg: calc(var(--btn-font-size) + 0.4em)}.btn{display:-ms-inline-flexbox;display:inline-flex;position:relative;white-space:nowrap;text-decoration:none;line-height:1;padding:0.5em 0.75em;padding:var(--space-xs) var(--space-sm);border-radius:0.25em;font-size:1em;font-size:var(--btn-font-size);-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.btn--primary{background-color:hsl(220, 90%, 56%);background-color:var(--color-primary);color:hsl(0, 0%, 100%);color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--subtle{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher);border:1px solid hsl(240, 1%, 83%);border:1px solid var(--color-contrast-low)}.btn--accent{background-color:hsl(355, 90%, 61%);background-color:var(--color-accent);color:hsl(0, 0%, 100%);color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--disabled{cursor:not-allowed;box-shadow:none;opacity:0.6}.btn--sm{font-size:0.8em;font-size:var(--btn-sm)}.btn--md{font-size:1.2em;font-size:var(--btn-md)}.btn--lg{font-size:1.4em;font-size:var(--btn-lg)}.btn--full-width{display:-ms-flexbox;display:flex;width:100%}.btn .icon{color:inherit;-ms-flex-negative:0;flex-shrink:0}.btn--icon-text{-ms-flex-align:center;align-items:center}.btn--icon-text>*:nth-child(2){margin-left:0.375em;margin-left:var(--space-xxs)}.btn--icon{padding:0.5em;padding:var(--space-xs)}.form-control{padding:0.5em 0.75em;padding:var(--space-xs) var(--space-sm);background:hsl(0, 0%, 100%);background:var(--color-bg);border:2px solid hsl(240, 1%, 83%);border:2px solid var(--color-contrast-low);width:100%}.form-control:focus{outline:none;border-color:hsl(220, 90%, 56%);border-color:var(--color-primary);--color-shadow: hsla(220, 90%, 56%, 0.2);--color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control:focus:focus{box-shadow:0 0 0 3px hsla(220, 90%, 56%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-control::-webkit-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium)}.form-control::-moz-placeholder{opacity:1;color:hsl(240, 1%, 48%);color:var(--color-contrast-medium)}.form-control:-ms-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium)}.form-control:-moz-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium)}.form-control[disabled],.form-control[readonly]{cursor:not-allowed}.form-control[aria-invalid="true"]{border-color:hsl(355, 90%, 61%);border-color:var(--color-error)}.form-control[aria-invalid="true"]:focus{--color-shadow: hsla(355, 90%, 61%, 0.2);--color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control[aria-invalid="true"]:focus:focus{box-shadow:0 0 0 3px hsla(355, 90%, 61%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-legend{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher);line-height:1.2;font-size:1.2em;font-size:var(--text-md);margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.form-label{display:inline-block;font-size:0.83333em;font-size:var(--text-sm);margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.form__msg-error{background-color:hsl(355, 90%, 61%);background-color:var(--color-error);color:hsl(0, 0%, 100%);color:var(--color-white);font-size:0.83333em;font-size:var(--text-sm);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0.5em;padding:var(--space-xs);margin-top:0.75em;margin-top:var(--space-sm);border-radius:0.25em;position:absolute;clip:rect(1px, 1px, 1px, 1px)}.form__msg-error::before{content:'';position:absolute;left:0.75em;left:var(--space-sm);top:0;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);width:0;height:0;border:8px solid transparent;border-bottom-color:hsl(355, 90%, 61%);border-bottom-color:var(--color-error)}.form__msg-error--is-visible{position:relative;clip:auto}.radio-list>*,.checkbox-list>*{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.radio-list>*:last-of-type,.checkbox-list>*:last-of-type{margin-bottom:0}.radio-list label,.checkbox-list label{line-height:1.4;line-height:var(--body-line-height);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-list input,.checkbox-list input{vertical-align:top;margin-right:0.25em;margin-right:var(--space-xxxs);-ms-flex-negative:0;flex-shrink:0}.radio-list.radio-list--inline,.radio-list.checkbox-list--inline,.checkbox-list.radio-list--inline,.checkbox-list.checkbox-list--inline{display:-ms-flexbox;display:flex;margin-bottom:-1.25em;margin-bottom:calc(-1*var(--space-md))}.radio-list.radio-list--inline>*,.radio-list.checkbox-list--inline>*,.checkbox-list.radio-list--inline>*,.checkbox-list.checkbox-list--inline>*{margin:0 1.25em 1.25em 0;margin:0 var(--space-md) var(--space-md) 0}:root{--zindex-header: 2;--zindex-popover: 4;--zindex-fixed-element: 5;--zindex-overlay: 10}@media not all and (min-width: 30rem){.display--xs{display:none !important}}@media (min-width: 30rem){.hide--xs{display:none !important}}@media not all and (min-width: 37.5rem){.display--sm{display:none !important}}@media (min-width: 37.5rem){.hide--sm{display:none !important}}@media not all and (min-width: 64rem){.display--md{display:none !important}}@media (min-width: 64rem){.hide--md{display:none !important}}@media not all and (min-width: 80rem){.display--lg{display:none !important}}@media (min-width: 80rem){.hide--lg{display:none !important}}@media not all and (min-width: 90rem){.display--xl{display:none !important}}@media (min-width: 90rem){.hide--xl{display:none !important}}:root{--display: block}.is-visible{display:block !important;display:var(--display) !important}.is-hidden{display:none !important}.sr-only{position:absolute;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;border:0;white-space:nowrap}:root{--cd-color-1:hsl(210, 31%, 24%);--cd-color-1-h:210;--cd-color-1-s:31%;--cd-color-1-l:24%;--cd-color-2:hsl(204, 73%, 52%);--cd-color-2-h:204;--cd-color-2-s:73%;--cd-color-2-l:52%;--cd-color-3:hsl(0, 0%, 100%);--cd-color-3-h:0;--cd-color-3-s:0%;--cd-color-3-l:100%;--cd-color-4:hsl(192, 15%, 94%);--cd-color-4-h:192;--cd-color-4-s:15%;--cd-color-4-l:94%;--cd-color-5:hsl(7, 80%, 56%);--cd-color-5-h:7;--cd-color-5-s:80%;--cd-color-5-l:56%;--font-primary: 'Source Sans Pro', sans-serif}.cd-cart::before{content:'';position:fixed;z-index:1;height:100%;width:100%;top:0;left:0;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:opacity .4s, visibility .4s}.cd-cart--open::before{opacity:1;visibility:visible}.cd-cart__trigger,.cd-cart__content{position:fixed;bottom:20px;right:5%;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s, -webkit-transform .2s;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}.cd-cart--empty .cd-cart__trigger,.cd-cart--empty .cd-cart__content{-webkit-transform:translateY(150px);-ms-transform:translateY(150px);transform:translateY(150px)}@media (min-width: 80rem){.cd-cart__trigger,.cd-cart__content{bottom:40px}}.cd-cart__trigger{z-index:3;height:72px;width:72px;overflow:visible}.cd-cart__trigger::after,.cd-cart__trigger::before{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);height:100%;width:100%;background:url(../img/cd-icons-cart-close.svg) no-repeat 0 0;transition:opacity .2s, -webkit-transform .2s;transition:opacity .2s, transform .2s;transition:opacity .2s, transform .2s, -webkit-transform .2s}.cd-cart__trigger::after{background-position:-72px 0;opacity:0;-webkit-transform:translateX(-50%) translateY(-50%) rotate(90deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(90deg);transform:translateX(-50%) translateY(-50%) rotate(90deg)}.cd-cart--open .cd-cart__trigger::before{opacity:0}.cd-cart--open .cd-cart__trigger::after{opacity:1;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.cd-cart__trigger:hover+.cd-cart__content .cd-cart__layout{box-shadow:0 6px 40px rgba(0,0,0,0.3)}.cd-cart--open .cd-cart__trigger:hover+.cd-cart__content .cd-cart__layout{box-shadow:0 4px 30px rgba(0,0,0,0.17)}.cd-cart__count{position:absolute;top:-10px;right:-10px;height:28px;width:28px;background:hsl(7, 80%, 56%);background:var(--cd-color-5);color:hsl(0, 0%, 100%);color:var(--cd-color-3);font-size:0.83333em;font-size:var(--text-sm);font-weight:bold;border-radius:50%;text-indent:0;transition:-webkit-transform .2s .5s;transition:transform .2s .5s;transition:transform .2s .5s, -webkit-transform .2s .5s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cd-cart__count li{position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.15s;animation-duration:.15s}.cd-cart__count li:last-of-type{visibility:hidden}.cd-cart__count--update li:last-of-type{-webkit-animation-name:cd-qty-enter;animation-name:cd-qty-enter}.cd-cart__count--update li:first-of-type{-webkit-animation-name:cd-qty-leave;animation-name:cd-qty-leave}.cd-cart--open .cd-cart__count{transition:-webkit-transform .2s 0s;transition:transform .2s 0s;transition:transform .2s 0s, -webkit-transform .2s 0s;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.cd-cart--empty .cd-cart__count{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.cd-cart__content{z-index:2;width:90%;max-width:440px;height:400px;max-height:90%;pointer-events:none}.cd-cart__layout{position:absolute;bottom:0;right:0;z-index:2;overflow:hidden;height:72px;width:72px;border-radius:0.25em;border-radius:var(--radius);transition:height .4s .1s, width .4s .1s, box-shadow .3s;transition-timing-function:cubic-bezier(0.67, 0.17, 0.32, 0.95);background:hsl(0, 0%, 100%);background:var(--cd-color-3);box-shadow:0 4px 30px rgba(0,0,0,0.17);pointer-events:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.cd-cart--open .cd-cart__layout{height:100%;width:100%;transition-delay:0s}.cd-cart__header,.cd-cart__body{opacity:0;padding-left:0.825em;padding-left:calc(var(--space-sm)*1.1);padding-right:0.825em;padding-right:calc(var(--space-sm)*1.1)}.cd-cart--open .cd-cart__header,.cd-cart--open .cd-cart__body{opacity:1}.cd-cart__header{position:relative;z-index:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;border-radius:0.25em 0.25em 0 0;border-radius:var(--radius) var(--radius) 0 0;height:40px;line-height:40px;background-color:hsl(0, 0%, 100%);background-color:var(--cd-color-3);transition:opacity .2s 0s;border-bottom:1px solid hsl(0, 0%, 90%);border-bottom:1px solid hsl(var(--cd-color-3-h), var(--cd-color-3-s), calc(var(--cd-color-3-l)*0.9))}.cd-cart__header h2{text-transform:uppercase;display:inline-block;font-size:0.76388em;font-size:calc(var(--text-xs)*1.1);font-weight:700;letter-spacing:.1em}.cd-cart--open .cd-cart__header{transition:opacity .2s .2s}.cd-cart__undo{opacity:0;visibility:hidden;transition:opacity .2s, visibility .2s;color:hsl(210, 31%, 28.8%);color:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.2));font-size:0.69444em;font-size:var(--text-xs)}.cd-cart__undo a{text-decoration:underline;color:hsl(210, 31%, 24%);color:var(--cd-color-1)}.cd-cart__undo a:hover{color:hsl(204, 73%, 52%);color:var(--cd-color-2)}.cd-cart__undo--visible{opacity:1;visibility:visible}.cd-cart__body{-ms-flex-positive:1;flex-grow:1;padding-top:0.75em;padding-top:var(--space-sm);padding-bottom:0.75em;padding-bottom:var(--space-sm);overflow:auto;-webkit-overflow-scrolling:touch;transition:opacity .2s}.cd-cart__body ul{position:relative;padding-bottom:60px}@media (min-width: 64rem){.cd-cart__body ul{padding-bottom:90px}}.cd-cart--open .cd-cart__body{transition:opacity 0s}.cd-cart--open .cd-cart__body li{transition:opacity .3s .2s, -webkit-transform .3s .2s;transition:transform .3s .2s, opacity .3s .2s;transition:transform .3s .2s, opacity .3s .2s, -webkit-transform .3s .2s;opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.cd-cart--open .cd-cart__body li:nth-of-type(2){transition-duration:.4s}.cd-cart--open .cd-cart__body li:nth-of-type(3){transition-duration:.5s}.cd-cart--open .cd-cart__body li:nth-of-type(4),.cd-cart--open .cd-cart__body li:nth-of-type(5){transition-duration:.55s}.cd-cart__product{position:relative;opacity:0;-webkit-transform:translateX(80px);-ms-transform:translateX(80px);transform:translateX(80px);transition:opacity 0s .2s, -webkit-transform 0s .2s;transition:opacity 0s .2s, transform 0s .2s;transition:opacity 0s .2s, transform 0s .2s, -webkit-transform 0s .2s;display:-ms-flexbox;display:flex}.cd-cart__product:not(:last-of-type){margin-bottom:12px}.cd-cart__product a{text-decoration:none}.cd-cart__product--deleted{position:absolute;left:0;width:100%;opacity:0;-webkit-animation:cd-item-slide-out .3s forwards;animation:cd-item-slide-out .3s forwards}.cd-cart__product--deleted.cd-cart__product--undo{-webkit-animation:cd-item-slide-in .3s forwards;animation:cd-item-slide-in .3s forwards}.cd-cart__product--deleted+.cd-cart__product{-webkit-animation:cd-item-move-up-mobile .3s;animation:cd-item-move-up-mobile .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 64rem){.cd-cart__product--deleted+.cd-cart__product{-webkit-animation:cd-item-move-up .3s;animation:cd-item-move-up .3s}}.cd-cart__product--undo+.cd-cart__product{-webkit-animation:cd-item-move-down-mobile .3s;animation:cd-item-move-down-mobile .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 64rem){.cd-cart__product--undo+.cd-cart__product{-webkit-animation:cd-item-move-down .3s;animation:cd-item-move-down .3s}}.cd-cart__image{display:inline-block;width:50px;-ms-flex-negative:0;flex-shrink:0}.cd-cart__image img{display:block}@media (min-width: 64rem){.cd-cart__image{width:90px}}.cd-cart__details{position:relative;display:-ms-flexbox;display:flex;-ms-flex-line-pack:start;align-content:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-positive:1;flex-grow:1;padding-top:0.825em;padding-top:calc(var(--space-sm)*1.1);padding-left:0.6em;padding-left:calc(var(--space-xs)*1.2)}.cd-cart__details h3{font-weight:bold;width:70%;font-size:0.95833em;font-size:calc(var(--text-sm)*1.15)}.cd-cart__details h3 a{color:hsl(210, 31%, 24%);color:var(--cd-color-1)}.cd-cart__details h3 a:hover{color:hsl(204, 73%, 52%);color:var(--cd-color-2)}.cd-cart__price{width:30%;text-align:right;font-size:0.91666em;font-size:calc(var(--text-sm)*1.1);font-weight:bold}.cd-cart__actions{display:-ms-flexbox;display:flex;font-size:0.76388em;font-size:calc(var(--text-xs)*1.1)}.cd-cart__delete-item,.cd-cart__quantity{color:hsl(210, 31%, 28.8%);color:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.2));-webkit-backface-visibility:hidden;backface-visibility:hidden}.cd-cart__delete-item{margin-right:0.75em;margin-right:var(--space-sm)}.cd-cart__delete-item:hover{color:hsl(7, 80%, 56%);color:var(--cd-color-5)}.cd-cart__quantity{display:-ms-flexbox;display:flex}.cd-cart__quantity label{margin-right:0.375em;margin-right:var(--space-xxs)}.cd-cart__select{position:relative}.cd-cart__select select{position:relative;padding:0 1.25em 0 0;padding:0 var(--space-md) 0 0;cursor:pointer;color:currentColor}.cd-cart__select select:focus{outline:none;color:hsl(210, 31%, 24%);color:var(--cd-color-1);box-shadow:0 1px 0 currentColor}.cd-cart__select select::-ms-expand{display:none}.cd-cart__select .icon{position:absolute;z-index:1;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:block;width:12px;height:12px;color:currentColor;pointer-events:none}@media (min-width: 64rem){.cd-cart__select select{padding-right:0.75em;padding-right:var(--space-sm)}}.cd-cart__footer{position:absolute;bottom:0;width:100%;border-radius:0 0 0.25em 0.25em;border-radius:0 0 var(--radius) var(--radius);box-shadow:0 -2px 20px rgba(0,0,0,0.15);background:hsl(0, 0%, 100%);background:var(--cd-color-3)}.cd-cart__checkout{display:block;height:72px;line-height:72px;margin-right:72px;background:hsl(204, 73%, 52%);background:var(--cd-color-2);color:hsla(0, 0%, 100%, 0);color:hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;font-size:1.2em;font-size:var(--text-md);font-weight:600;transition:all .2s 0s}.cd-cart__checkout:hover{background:hsl(204, 73%, 56.16%);background:hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.08))}.cd-cart__checkout em{position:relative;display:inline-block;-webkit-transform:translateX(40px);-ms-transform:translateX(40px);transform:translateX(40px);transition:-webkit-transform 0s .2s;transition:transform 0s .2s;transition:transform 0s .2s, -webkit-transform 0s .2s}.cd-cart__checkout .icon{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:0;opacity:0;transition:opacity .2s;color:currentColor}.cd-cart--open .cd-cart__checkout{color:hsl(0, 0%, 100%);color:var(--cd-color-3);transition:color .2s .3s}.cd-cart--open .cd-cart__checkout em{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:padding .2s 0s, -webkit-transform .2s .3s;transition:transform .2s .3s, padding .2s 0s;transition:transform .2s .3s, padding .2s 0s, -webkit-transform .2s .3s}.cd-cart--open .cd-cart__checkout:hover em{padding-right:30px}.cd-cart--open .cd-cart__checkout:hover .icon{opacity:1}@-webkit-keyframes cd-qty-enter{0%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}100%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}}@keyframes cd-qty-enter{0%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}100%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}}@-webkit-keyframes cd-qty-leave{0%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}100%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}}@keyframes cd-qty-leave{0%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}100%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}}@-webkit-keyframes cd-item-move-up-mobile{0%{padding-top:62px}100%{padding-top:0px}}@keyframes cd-item-move-up-mobile{0%{padding-top:62px}100%{padding-top:0px}}@-webkit-keyframes cd-item-move-up{0%{padding-top:102px}100%{padding-top:0px}}@keyframes cd-item-move-up{0%{padding-top:102px}100%{padding-top:0px}}@-webkit-keyframes cd-item-move-down-mobile{0%{padding-top:0px}100%{padding-top:62px}}@keyframes cd-item-move-down-mobile{0%{padding-top:0px}100%{padding-top:62px}}@-webkit-keyframes cd-item-move-down{0%{padding-top:0px}100%{padding-top:102px}}@keyframes cd-item-move-down{0%{padding-top:0px}100%{padding-top:102px}}@-webkit-keyframes cd-item-slide-out{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0}}@keyframes cd-item-slide-out{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0}}@-webkit-keyframes cd-item-slide-in{100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}0%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0}}@keyframes cd-item-slide-in{100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}0%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0}}body{background-color:hsl(192, 15%, 94%);background-color:var(--cd-color-4)}.cd-main h1{color:hsl(210, 31%, 24%);color:var(--cd-color-1)}.cd-add-to-cart,.cd-article-link{display:inline-block;padding:0.75em 1.25em;padding:var(--space-sm) var(--space-md);border-radius:50em;text-transform:uppercase;font-weight:700;letter-spacing:.1em;text-decoration:none;font-size:0.83333em;font-size:var(--text-sm);transition:all .2s}.cd-add-to-cart{background:hsl(204, 73%, 52%);background:var(--cd-color-2);color:hsl(0, 0%, 100%);color:var(--cd-color-3);box-shadow:0 2px 10px rgba(0,0,0,0.2);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cd-add-to-cart:hover{background:hsl(204, 73%, 57.2%);background:hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.1))}.cd-add-to-cart:active{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}.cd-article-link{color:hsl(210, 31%, 24%);color:var(--cd-color-1);background-color:hsl(192, 15%, 84.6%);background-color:hsl(var(--cd-color-4-h), var(--cd-color-4-s), calc(var(--cd-color-4-l)*0.9))}.cd-article-link:hover{background-color:hsl(192, 15%, 89.3%);background-color:hsl(var(--cd-color-4-h), var(--cd-color-4-s), calc(var(--cd-color-4-l)*0.95))} diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100755 index 0000000..80e9c0a --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,635 @@ +@import '../../../../codyhouse-framework/main/assets/css/_global.scss'; // ⚠️ make sure to import the CodyHouse framework +@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700'); // custom font + +// -------------------------------- + +// Add to Cart Interaction - by CodyHouse.co + +// -------------------------------- + +:root { + // colors + @include defineColorHSL(--cd-color-1, 210, 31%, 24%); // Pickled Bluewood + @include defineColorHSL(--cd-color-2, 204, 73%, 52%); // Curious Blue + @include defineColorHSL(--cd-color-3, 0, 0%, 100%); // White + @include defineColorHSL(--cd-color-4, 192, 15%, 94%); // Porcelain + @include defineColorHSL(--cd-color-5, 7, 80%, 56%); // Cinnabar + + // font + --font-primary: 'Source Sans Pro', sans-serif; +} + +.cd-cart::before { // dark bg layer visible when the cart is open + content: ''; + position: fixed; + z-index: 1; + height: 100%; + width: 100%; + top: 0; + left: 0; + background: rgba(#000, .5); + opacity: 0; + visibility: hidden; + transition: opacity .4s, visibility .4s; +} + +.cd-cart--open::before { + opacity: 1; + visibility: visible; +} + +.cd-cart__trigger, +.cd-cart__content { + position: fixed; + bottom: 20px; + right: 5%; + transition: transform .2s; + // Force Hardware Acceleration in WebKit + transform: translateZ(0); + will-change: transform; + backface-visibility: hidden; + + .cd-cart--empty & { // hide cart + transform: translateY(150px); + } + + @include breakpoint(lg) { + bottom: 40px; + } +} + +.cd-cart__trigger { // button that triggers the cart content + z-index: 3; + height: 72px; + width: 72px; + overflow: visible; + + &::after, &::before { // used to create the cart/'X' icon + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + height: 100%; + width: 100%; + background: url(../img/cd-icons-cart-close.svg) no-repeat 0 0; + transition: opacity .2s, transform .2s; + } + + &::after { // 'X' icon + background-position: -72px 0; + opacity: 0; + transform: translateX(-50%) translateY(-50%) rotate(90deg); + } + + .cd-cart--open &::before { + opacity: 0; + } + + .cd-cart--open &::after { + opacity: 1; + transform: translateX(-50%) translateY(-50%); + } + + &:hover + .cd-cart__content .cd-cart__layout { + box-shadow: 0 6px 40px rgba(#000, .3); + } + + .cd-cart--open &:hover + .cd-cart__content .cd-cart__layout { + box-shadow: 0 4px 30px rgba(#000, .17); + } +} + +.cd-cart__count { // number of items indicator + position: absolute; + top: -10px; + right: -10px; + height: 28px; + width: 28px; + background: var(--cd-color-5); + color: var(--cd-color-3); + font-size: var(--text-sm); + font-weight: bold; + border-radius: 50%; + text-indent: 0; + transition: transform .2s .5s; + @include fontSmooth; + + li { // this is the number of items in the cart + position: absolute; + transform: translateZ(0); + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + animation-fill-mode: forwards; + animation-duration: .15s; + + &:last-of-type { + visibility: hidden; + } + } +} + +.cd-cart__count--update li:last-of-type { + animation-name: cd-qty-enter; +} + +.cd-cart__count--update li:first-of-type { + animation-name: cd-qty-leave; +} + +.cd-cart--open .cd-cart__count { + transition: transform .2s 0s; + transform: scale(0); +} + +.cd-cart--empty .cd-cart__count { // fix bug - when cart is empty, do not animate count + transform: scale(1); +} + +.cd-cart__content { // cart content + z-index: 2; + width: 90%; + max-width: 440px; + height: 400px; + max-height: 90%; + pointer-events: none; +} + +.cd-cart__layout { + position: absolute; + bottom: 0; + right: 0; + z-index: 2; + overflow: hidden; + height: 72px; + width: 72px; + border-radius: var(--radius); + transition: height .4s .1s, width .4s .1s, box-shadow .3s; + transition-timing-function: cubic-bezier(.67,.17,.32,.95); + background: var(--cd-color-3); + box-shadow: 0 4px 30px rgba(#000, .17); + pointer-events: auto; + // children alignment + display: flex; + flex-direction: column; +} + +.cd-cart--open .cd-cart__layout { + height: 100%; + width: 100%; + transition-delay: 0s; +} + +.cd-cart__header, .cd-cart__body { + opacity: 0; + padding-left: calc(var(--space-sm) *1.1); + padding-right: calc(var(--space-sm) *1.1); +} + +.cd-cart--open .cd-cart__header, +.cd-cart--open .cd-cart__body { + opacity: 1; +} + +.cd-cart__header { + position: relative; + z-index: 1; + flex-shrink: 0; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: var(--radius) var(--radius) 0 0; + height: 40px; + line-height: 40px; + background-color: var(--cd-color-3); + transition: opacity .2s 0s; + border-bottom: 1px solid lightness(var(--cd-color-3), 0.9); + + h2 { + text-transform: uppercase; + display: inline-block; + font-size: calc(var(--text-xs)*1.1); + font-weight: 700; + letter-spacing: .1em; + } +} + +.cd-cart--open .cd-cart__header { + transition: opacity .2s .2s; +} + +.cd-cart__undo { + opacity: 0; + visibility: hidden; + transition: opacity .2s, visibility .2s; + color: lightness(var(--cd-color-1), 1.2); + font-size: var(--text-xs); + + a { + text-decoration: underline; + color: var(--cd-color-1); + + &:hover { + color: var(--cd-color-2); + } + } +} + +.cd-cart__undo--visible { + opacity: 1; + visibility: visible; +} + +.cd-cart__body { + flex-grow: 1; + padding-top: var(--space-sm); + padding-bottom: var(--space-sm); + overflow: auto; + -webkit-overflow-scrolling: touch; + transition: opacity .2s; + + ul { + position: relative; + padding-bottom: 60px; // make sure animation of last item is visible when it is removed from the cart + } + + @include breakpoint(md) { + ul { + padding-bottom: 90px; + } + } +} + +.cd-cart--open .cd-cart__body { + transition: opacity 0s; + + li { + transition: transform .3s .2s, opacity .3s .2s; + opacity: 1; + transform: translateX(0); + + &:nth-of-type(2) { + transition-duration: .4s; + } + + &:nth-of-type(3) { + transition-duration: .5s; + } + + &:nth-of-type(4), + &:nth-of-type(5) { + transition-duration: .55s; + } + } +} + +.cd-cart__product { + position: relative; + opacity: 0; + transform: translateX(80px); + transition: opacity 0s .2s, transform 0s .2s; + display: flex; + + &:not(:last-of-type) { + margin-bottom: 12px; // this value will be used in the cd-item-slide-out/cd-item-slide-in animations + } + + a { + text-decoration: none; + } +} + +.cd-cart__product--deleted { // this class is added to an item when it is removed form the cart + position: absolute; + left: 0; + width: 100%; + opacity: 0; + animation: cd-item-slide-out .3s forwards; +} + +.cd-cart__product--deleted.cd-cart__product--undo { // used to reinsert an item deleted from the cart when user clicks 'Undo' + animation: cd-item-slide-in .3s forwards; +} + +.cd-cart__product--deleted + .cd-cart__product { + animation: cd-item-move-up-mobile .3s; + animation-fill-mode: forwards; + + @include breakpoint(md) { + animation: cd-item-move-up .3s; + } +} + +.cd-cart__product--undo + .cd-cart__product { + animation: cd-item-move-down-mobile .3s; + animation-fill-mode: forwards; + + @include breakpoint(md) { + animation: cd-item-move-down .3s; + } +} + +.cd-cart__image { + display: inline-block; + // the image height determines the height of the list item - in this case height = width + width: 50px; + flex-shrink: 0; + + img { + display: block; + } + + @include breakpoint(md) { + width: 90px; + } +} + +.cd-cart__details { + position: relative; + display: flex; + align-content: flex-start; + flex-wrap: wrap; + flex-grow: 1; + padding-top: calc(var(--space-sm) * 1.1); + padding-left: calc(var(--space-xs) * 1.2); + + h3 { + font-weight: bold; + width: 70%; + font-size: calc(var(--text-sm)*1.15); + + a { + color: var(--cd-color-1); + + &:hover { + color: var(--cd-color-2); + } + } + } +} + +.cd-cart__price { + width: 30%; + text-align: right; + font-size: calc(var(--text-sm)*1.1); + font-weight: bold; +} + +.cd-cart__actions { + display: flex; + font-size: calc(var(--text-xs)*1.1); +} + +.cd-cart__delete-item, .cd-cart__quantity { + color: lightness(var(--cd-color-1), 1.2); + backface-visibility: hidden; +} + +.cd-cart__delete-item { + margin-right: var(--space-sm); + + &:hover { + color: var(--cd-color-5); + } +} + +.cd-cart__quantity { + display: flex; + + label { + margin-right: var(--space-xxs); + } +} + +.cd-cart__select { + position: relative; + + select { + position: relative; + padding: 0 var(--space-md) 0 0; + cursor: pointer; + color: currentColor; + + &:focus { + outline: none; + color: var(--cd-color-1); + box-shadow: 0 1px 0 currentColor; + } + } + + select::-ms-expand { // hide default select arrow on IE + display: none; + } + + .icon { // switcher arrow + position: absolute; + z-index: 1; + right: 0; + top: 50%; + transform: translateY(-50%); + display: block; + width: 12px; + height: 12px; + color: currentColor; + pointer-events: none; + } + + @include breakpoint(md) { + select { + padding-right: var(--space-sm); + } + } +} + +.cd-cart__footer { + position: absolute; + bottom: 0; + width: 100%; + border-radius: 0 0 var(--radius) var(--radius); + box-shadow: 0 -2px 20px rgba(#000, .15); + background: var(--cd-color-3); +} + +.cd-cart__checkout { + display: block; + height: 72px; + line-height: 72px; + margin-right: 72px; + background: var(--cd-color-2); + color: alpha(var(--cd-color-3), 0); + @include fontSmooth; + text-align: center; + font-size: var(--text-md); + font-weight: 600; + transition: all .2s 0s; + + &:hover { + background: lightness(var(--cd-color-2), 1.08); + } + + em { + position: relative; + display: inline-block; + transform: translateX(40px); + transition: transform 0s .2s; + } + + .icon { // arrow icon + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + opacity: 0; + transition: opacity .2s; + color: currentColor; + } +} + +.cd-cart--open .cd-cart__checkout { + color: var(--cd-color-3); + transition: color .2s .3s; + + em { + transform: translateX(0); + transition: transform .2s .3s, padding .2s 0s; + } + + &:hover em { + padding-right: 30px; + } + + &:hover .icon { + opacity: 1; + } +} + +@keyframes cd-qty-enter { + 0% { + opacity: 0; + visibility: hidden; + transform: translateX(-50%) translateY(0); + } + 100% { + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(-50%); + } +} + +@keyframes cd-qty-leave { + 0% { + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(-50%); + } + 100% { + opacity: 0; + visibility: hidden; + transform: translateX(-50%) translateY(-100%); + } +} + +@keyframes cd-item-move-up-mobile { + 0% { + padding-top: 62px; + } + 100% { + padding-top: 0px; + } +} + +@keyframes cd-item-move-up { + 0% { + padding-top: 102px; + } + 100% { + padding-top: 0px; + } +} + +@keyframes cd-item-move-down-mobile { + 0% { + padding-top: 0px; + } + 100% { + padding-top: 62px; + } +} + +@keyframes cd-item-move-down { + 0% { + padding-top: 0px; + } + 100% { + padding-top: 102px; + } +} + +@keyframes cd-item-slide-out { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(80px); + opacity: 0; + } +} + +@keyframes cd-item-slide-in { + 100% { + transform: translateX(0); + opacity: 1; + } + 0% { + transform: translateX(80px); + opacity: 0; + } +} + +// demo style +body { + background-color: var(--cd-color-4); +} + +.cd-main h1 { + color: var(--cd-color-1); +} + +.cd-add-to-cart, +.cd-article-link { + display: inline-block; + padding: var(--space-sm) var(--space-md); + border-radius: 50em; + text-transform: uppercase; + font-weight: 700; + letter-spacing: .1em; + text-decoration: none; + font-size: var(--text-sm); + transition: all .2s; +} + +.cd-add-to-cart { + background: var(--cd-color-2); + color: var(--cd-color-3); + box-shadow: 0 2px 10px rgba(#000, .2); + @include fontSmooth; + + &:hover { + background: lightness(var(--cd-color-2), 1.1); + } + + &:active { + transform: scale(.9); + } +} + +.cd-article-link { + color: var(--cd-color-1); + background-color: lightness(var(--cd-color-4), 0.9); + + &:hover { + background-color: lightness(var(--cd-color-4), 0.95); + } +} \ No newline at end of file diff --git a/assets/img/cd-icon-arrow-next.svg b/assets/img/cd-icon-arrow-next.svg new file mode 100644 index 0000000..f2a9928 --- /dev/null +++ b/assets/img/cd-icon-arrow-next.svg @@ -0,0 +1,6 @@ + diff --git a/assets/img/cd-icon-select.svg b/assets/img/cd-icon-select.svg new file mode 100644 index 0000000..9722605 --- /dev/null +++ b/assets/img/cd-icon-select.svg @@ -0,0 +1,3 @@ + diff --git a/assets/img/cd-icons-cart-close.svg b/assets/img/cd-icons-cart-close.svg new file mode 100644 index 0000000..8ff2dd3 --- /dev/null +++ b/assets/img/cd-icons-cart-close.svg @@ -0,0 +1,19 @@ + diff --git a/img/product-preview.png b/assets/img/product-preview.png similarity index 100% rename from img/product-preview.png rename to assets/img/product-preview.png diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100755 index 0000000..e0827bd --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,187 @@ +(function(){ + // Add to Cart Interaction - by CodyHouse.co + var cart = document.getElementsByClassName('js-cd-cart'); + if(cart.length > 0) { + var cartAddBtns = document.getElementsByClassName('js-cd-add-to-cart'), + cartBody = cart[0].getElementsByClassName('cd-cart__body')[0], + cartList = cartBody.getElementsByTagName('ul')[0], + cartListItems = cartList.getElementsByClassName('cd-cart__product'), + cartTotal = cart[0].getElementsByClassName('cd-cart__checkout')[0].getElementsByTagName('span')[0], + cartCount = cart[0].getElementsByClassName('cd-cart__count')[0], + cartCountItems = cartCount.getElementsByTagName('li'), + cartUndo = cart[0].getElementsByClassName('cd-cart__undo')[0], + productId = 0, //this is a placeholder -> use your real product ids instead + cartTimeoutId = false; + initCartEvents(); + + + function initCartEvents() { + // add products to cart + for(var i = 0; i < cartAddBtns.length; i++) {(function(i){ + cartAddBtns[i].addEventListener('click', addToCart); + })(i);} + + // open/close cart + cart[0].getElementsByClassName('cd-cart__trigger')[0].addEventListener('click', function(event){ + event.preventDefault(); + toggleCart(); + }); + + cart[0].addEventListener('click', function(event) { + if(event.target == cart[0]) { // close cart when clicking on bg layer + toggleCart(true); + } else if (event.target.closest('.cd-cart__delete-item')) { // remove product from cart + event.preventDefault(); + removeProduct(event.target.closest('.cd-cart__product')); + } + }); + + // update product quantity inside cart + cart[0].addEventListener('change', function(event) { + if(event.target.tagName.toLowerCase() == 'select') quickUpdateCart(); + }); + + //reinsert product deleted from the cart + cartUndo.addEventListener('click', function(event) { + if(event.target.tagName.toLowerCase() == 'a') { + event.preventDefault(); + if(cartTimeoutId) clearInterval(cartTimeoutId); + // reinsert deleted product + var deletedProduct = cartList.getElementsByClassName('cd-cart__product--deleted')[0]; + Util.addClass(deletedProduct, 'cd-cart__product--undo'); + deletedProduct.addEventListener('animationend', function cb(){ + deletedProduct.removeEventListener('animationend', cb); + Util.removeClass(deletedProduct, 'cd-cart__product--deleted cd-cart__product--undo'); + deletedProduct.removeAttribute('style'); + quickUpdateCart(); + }); + Util.removeClass(cartUndo, 'cd-cart__undo--visible'); + } + }); + }; + + function addToCart(event) { + event.preventDefault(); + var cartIsEmpty = Util.hasClass(cart[0], 'cd-cart--empty'); + //update cart product list + addProduct(this); + //update number of items + updateCartCount(cartIsEmpty); + //update total price + updateCartTotal(this.getAttribute('data-price'), true); + //show cart + Util.removeClass(cart[0], 'cd-cart--empty'); + }; + + function toggleCart(bool) { // toggle cart visibility + var cartIsOpen = ( typeof bool === 'undefined' ) ? Util.hasClass(cart[0], 'cd-cart--open') : bool; + + if( cartIsOpen ) { + Util.removeClass(cart[0], 'cd-cart--open'); + //reset undo + if(cartTimeoutId) clearInterval(cartTimeoutId); + Util.removeClass(cartUndo, 'cd-cart__undo--visible'); + removePreviousProduct(); // if a product was deleted, remove it definitively from the cart + + setTimeout(function(){ + cartBody.scrollTop = 0; + //check if cart empty to hide it + if( Number(cartCountItems[0].innerText) == 0) Util.addClass(cart[0], 'cd-cart--empty'); + }, 500); + } else { + Util.addClass(cart[0], 'cd-cart--open'); + } + }; + + function addProduct(target) { + // this is just a product placeholder + // you should insert an item with the selected product info + // replace productId, productName, price and url with your real product info + // you should also check if the product was already in the cart -> if it is, just update the quantity + productId = productId + 1; + var productAdded = '
+ 📝 View Tutorial + Add To Cart +
+