A fully responsive and interactive visualisation of a Nike Product Page UI using Knockout.js.
A Pen by Rushabh Nagda on CodePen.
Created
February 28, 2019 08:09
-
-
Save rushabhnagda11/5a302eb1ea398fd39ec24b52613ef649 to your computer and use it in GitHub Desktop.
Round 2 - Nike Product Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="cpc-viewport" data-bind="style: {display: 'block'}"> | |
| <div class="cpc-table-cell"> | |
| <div class="cpc-table-align"> | |
| <main role="main" class="cpc-main"> | |
| <div data-bind="attr: {class: data.currentShoeOption().className + ' cpc-product-imgs'}"> | |
| <!-- <div class="cpc-nike-tick"> | |
| <svg version="1.1" id="Layer_1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-721.4 867.1 196 69.9" style="enable-background:new -721.4 867.1 196 69.9;" xml:space="preserve"> | |
| <path d="M-699.8,937c-5.8-0.2-10.6-1.8-14.4-4.8c-0.7-0.6-2.4-2.3-3-3c-1.5-1.9-2.5-3.8-3.2-5.8c-2.1-6.3-1-14.6,3.1-23.8 | |
| c3.5-7.8,9-15.5,18.5-26.3c1.4-1.6,5.6-6.2,5.6-6.2c0,0-0.2,0.4-0.5,0.9c-2.5,4.2-4.6,9-5.8,13.3c-1.9,6.8-1.6,12.6,0.7,17.2 | |
| c1.6,3.1,4.3,5.8,7.3,7.3c5.3,2.6,13.1,2.8,22.7,0.6c0.7-0.2,33.2-8.8,72.2-19.2c39.1-10.4,71-18.9,71.1-18.9 | |
| c0,0-90.8,38.9-137.9,59c-7.5,3.2-9.5,4-13,5.2C-685.2,935.7-693.3,937.2-699.8,937z"/> | |
| </svg> | |
| </div> --> | |
| <div class="cpc-product-imgs"> | |
| <img id="cpc-img" class="cpc-product-shoe-img animated fadeInLeft" src="https://nanonets.com/index/static/img/animations/emotion.gif" /> | |
| <div style='padding-left: 20px' class="cpc-product-imgs">Train your model to classify emotion</div> | |
| </div> | |
| </div> | |
| <div class="cpc-product-info"> | |
| <article class="animated fadeInRight"> | |
| <section class="cpc-product-header"> | |
| <h1 class="cpc-product-title">Image Classification</h1> | |
| </section> | |
| <section> | |
| <h2 class="cpc-product-desc">Description</h2> | |
| <p class="cpc-product-desc-text">Sort types of Dresses, Identify types of location, gender, age. | |
| </section> | |
| <section> | |
| <h2 class="cpc-product-color-title">ElI5</h2> | |
| <p class="cpc-product-desc-text">I have images of Cats, Dogs and Horses. Given an image, tell me if it's one of Cat, Dog, Horse. | |
| </section> | |
| <section class="cpc-atc-share-section"> | |
| <a href="#" class="cpc-atc-button">Build</a> | |
| </section> | |
| </article> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var viewModel = { | |
| data: { | |
| shoeOptions: [{ | |
| "shoeColor": "Mint Green", | |
| "RRP": "$150", | |
| "discountPrice": "$114.00", | |
| "className": "cpc-product-green", | |
| "rating": 92, | |
| "inputID": "rad1", | |
| "labelClass": "cpc-radio-green", | |
| "shoeImage": "http://gdurl.com/XBhW" | |
| }, { | |
| "shoeColor": "Vibrant Yellow", | |
| "RRP": "$140", | |
| "discountPrice": "$109.00", | |
| "className": "cpc-product-yellow", | |
| "rating": 50, | |
| "inputID": "rad2", | |
| "labelClass": "cpc-radio-yellow", | |
| "shoeImage": "http://gdurl.com/0Nzm" | |
| }, { | |
| "shoeColor": "Deep Purple", | |
| "RRP": "$140", | |
| "discountPrice": "$129.00", | |
| "className": "cpc-product-purple", | |
| "rating": 61, | |
| "inputID": "rad3", | |
| "labelClass": "cpc-radio-purple", | |
| "shoeImage": "http://gdurl.com/oAyW" | |
| }, { | |
| "shoeColor": "Pitch Black", | |
| "RRP": "$190", | |
| "discountPrice": "$159.00", | |
| "className": "cpc-product-black", | |
| "rating": 100, | |
| "inputID": "rad4", | |
| "labelClass": "cpc-radio-black", | |
| "shoeImage": "http://gdurl.com/Avin" | |
| }, { | |
| "shoeColor": "Washout Grey", | |
| "RRP": "$150", | |
| "discountPrice": "$112.00", | |
| "className": "cpc-product-grey", | |
| "rating": 10, | |
| "inputID": "rad5", | |
| "labelClass": "cpc-radio-grey", | |
| "shoeImage": "http://gdurl.com/Avin" | |
| }], | |
| currentShoeOption: ko.observable({ | |
| "shoeColor": "Mint Green", | |
| "RRP": "$150", | |
| "discountPrice": "$114.00", | |
| "className": "cpc-product-green", | |
| "rating": 92, | |
| "inputID": "rad1", | |
| "shoeImage": "http://gdurl.com/XBhW" | |
| }) // Passing this first line in to set as a default value | |
| }, | |
| functions: { | |
| colorOptionClick: function(index) { | |
| viewModel.data.currentShoeOption(viewModel.data.shoeOptions[index]); | |
| var image = $('#cpc-img').clone().removeClass(); | |
| $('#cpc-img').remove(); | |
| $('.cpc-img-wrapper').append(image); | |
| $('#cpc-img').addClass('cpc-product-shoe-img animated fadeInLeft'); | |
| $('#cpc-img').prop("src", viewModel.data.currentShoeOption().shoeImage) | |
| }, | |
| checkedRadio: function() { | |
| return true; | |
| }, | |
| shareShoe: function() { | |
| var link = window.location.href, | |
| text = "Check%20out%20this%20awesome%20Nike%20Roshe%20Run%20shoe%20on%20", | |
| tweet = "https://twitter.com/intent/tweet?text=" + text + "&url=" + encodeURI(link); | |
| window.open(tweet, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600") | |
| } | |
| } | |
| }; | |
| ko.applyBindings(viewModel); | |
| $(document).ready(function() { | |
| $("#rad1").prop("checked", true) | |
| }); | |
| $.preloadImages = function() { | |
| for (var i = 0; i < arguments.length; i++) { | |
| $("<img />").attr("src", arguments[i]); | |
| } | |
| } | |
| $.preloadImages("http://gdurl.com/XBhW", "http://gdurl.com/0Nzm", "http://gdurl.com/oAyW", "http://gdurl.com/Avin"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> | |
| <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(https://fonts.googleapis.com/css?family=Fjalla+One); | |
| @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300); | |
| $color-page-background: #f5f5f5; | |
| $color-app-background: #ffffff; | |
| $color-product-background: #6bfec8; | |
| $color-text-off-black: #444444; | |
| $color-text-grey: #8b8b8b; | |
| $color-rating-false: #dddddd; | |
| $color-share-grey: #bbbbbb; | |
| $color-rating-true: #fe6067; | |
| $color-discount-price: #fe6067; | |
| $color-radio-green: #59e8c8; | |
| $color-radio-yellow: #ffee71; | |
| $color-radio-purple: #6654af; | |
| $color-radio-black: #343434; | |
| $color-radio-grey: #dfdfdf; | |
| $icon-star-solid: "\f005"; | |
| $icon-share-alt: "\f1e0"; | |
| $icon-shopping-cart: "\f07a"; | |
| $font-family-text: "Fjalla One"; | |
| $font-family-icons: "FontAwesome"; | |
| $width-main-screen: 800px; | |
| $width-reponsive-breakpoint: $width-main-screen + 150px; | |
| @mixin section-titles { | |
| text-transform: uppercase; | |
| font-size: 13px; | |
| margin: 0; | |
| } | |
| @mixin icon($icon, $color, $font-size, $pseudo: 'before') { | |
| &:#{$pseudo} { | |
| font-family: $font-family-icons; | |
| content: $icon; | |
| color: $color; | |
| font-size: $font-size; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| display: inline-block; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| } | |
| html, | |
| body { | |
| margin: 0; | |
| background-color: $color-page-background; | |
| font-family: $font-family-text, Arial, sans serif; | |
| color: $color-text-off-black; | |
| } | |
| *, | |
| *:before, | |
| *:after { | |
| box-sizing: border-box; | |
| } | |
| .animated { | |
| -webkit-animation-duration: 1.5s; | |
| animation-duration: 1.5s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| } | |
| @keyframes fadeInLeft { | |
| from { | |
| opacity: 0; | |
| -webkit-transform: translate3d(-100%, 0, 0); | |
| transform: translate3d(-100%, 0, 0); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform: none; | |
| transform: none; | |
| } | |
| } | |
| .fadeInLeft { | |
| -webkit-animation-name: fadeInLeft; | |
| animation-name: fadeInLeft; | |
| } | |
| @-webkit-keyframes fadeInRight { | |
| from { | |
| opacity: 0; | |
| -webkit-transform: translate3d(100%, 0, 0); | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform: none; | |
| transform: none; | |
| } | |
| } | |
| @keyframes fadeInRight { | |
| from { | |
| opacity: 0; | |
| -webkit-transform: translate3d(100%, 0, 0); | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform: none; | |
| transform: none; | |
| } | |
| } | |
| .fadeInRight { | |
| -webkit-animation-name: fadeInRight; | |
| animation-name: fadeInRight; | |
| } | |
| .cpc-viewport { | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .cpc-table-cell { | |
| display: table; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .cpc-table-align { | |
| display: table-cell; | |
| vertical-align: middle; | |
| position: relative; | |
| @media screen and (max-width: $width-reponsive-breakpoint) { | |
| padding: 20px; | |
| } | |
| } | |
| .cpc-main { | |
| display: table; | |
| margin: auto; | |
| overflow: hidden; | |
| max-width: $width-main-screen; | |
| background-color: $color-app-background; | |
| border-radius: 14px; | |
| -webkit-box-shadow: 14px 14px 60px 4px rgba(217, 217, 217, 1); | |
| -moz-box-shadow: 14px 14px 60px 4px rgba(217, 217, 217, 1); | |
| box-shadow: 14px 14px 60px 4px rgba(217, 217, 217, 1); | |
| } | |
| .cpc-product-imgs { | |
| display: table-cell; | |
| width: 33%; | |
| height: 100%; | |
| font-size: 15px; | |
| @media screen and (max-width: $width-reponsive-breakpoint) { | |
| display: block; | |
| height: 265px; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| } | |
| .cpc-product-shoe-img { | |
| width: 265px; | |
| margin-top: 31px; | |
| position: absolute; | |
| @media screen and (max-width: $width-reponsive-breakpoint) { | |
| margin-top: 22px; | |
| width: 265px; | |
| position: inherit; | |
| margin-left: -12px; | |
| } | |
| } | |
| .cpc-circle-container { | |
| margin-top: 339px; | |
| text-align: center; | |
| @media screen and (max-width: $width-reponsive-breakpoint) { | |
| display: none; | |
| } | |
| } | |
| .cpc-product-img-circle { | |
| display: inline-block; | |
| background-color: #349a97; | |
| width: 10px; | |
| height: 10px; | |
| margin-right: 2px; | |
| border-radius: 50%; | |
| &:first-child { | |
| background-color: white !important; | |
| } | |
| &:last-child { | |
| margin-right: 0px; | |
| } | |
| } | |
| .cpc-product-green { | |
| background: rgba(119, 254, 203, 1); | |
| background: -moz-linear-gradient(-45deg, rgba(119, 254, 203, 1) 0%, rgba(65, 200, 203, 1) 100%); | |
| background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(119, 254, 203, 1)), color-stop(100%, rgba(65, 200, 203, 1))); | |
| background: -webkit-linear-gradient(-45deg, rgba(119, 254, 203, 1) 0%, rgba(65, 200, 203, 1) 100%); | |
| background: -o-linear-gradient(-45deg, rgba(119, 254, 203, 1) 0%, rgba(65, 200, 203, 1) 100%); | |
| background: -ms-linear-gradient(-45deg, rgba(119, 254, 203, 1) 0%, rgba(65, 200, 203, 1) 100%); | |
| background: linear-gradient(135deg, rgba(119, 254, 203, 1) 0%, rgba(65, 200, 203, 1) 100%); | |
| } | |
| .cpc-product-yellow { | |
| background: rgba(255,238,113,1); | |
| background: -moz-linear-gradient(-45deg, rgba(255,238,113,1) 0%, rgba(252,232,82,1) 46%, rgba(209,188,34,1) 100%); | |
| background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,238,113,1)), color-stop(46%, rgba(252,232,82,1)), color-stop(100%, rgba(209,188,34,1))); | |
| background: -webkit-linear-gradient(-45deg, rgba(255,238,113,1) 0%, rgba(252,232,82,1) 46%, rgba(209,188,34,1) 100%); | |
| background: -o-linear-gradient(-45deg, rgba(255,238,113,1) 0%, rgba(252,232,82,1) 46%, rgba(209,188,34,1) 100%); | |
| background: -ms-linear-gradient(-45deg, rgba(255,238,113,1) 0%, rgba(252,232,82,1) 46%, rgba(209,188,34,1) 100%); | |
| background: linear-gradient(135deg, rgba(255,238,113,1) 0%, rgba(252,232,82,1) 46%, rgba(209,188,34,1) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffee71', endColorstr='#d1bc22', GradientType=1 ); | |
| .cpc-product-img-circle { | |
| background-color: #9e9234; | |
| } | |
| } | |
| .cpc-product-purple { | |
| background: rgba(102,84,175,1); | |
| background: -moz-linear-gradient(-45deg, rgba(102,84,175,1) 0%, rgba(92,76,154,1) 46%, rgba(41,33,74,1) 100%); | |
| background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(102,84,175,1)), color-stop(46%, rgba(92,76,154,1)), color-stop(100%, rgba(41,33,74,1))); | |
| background: -webkit-linear-gradient(-45deg, rgba(102,84,175,1) 0%, rgba(92,76,154,1) 46%, rgba(41,33,74,1) 100%); | |
| background: -o-linear-gradient(-45deg, rgba(102,84,175,1) 0%, rgba(92,76,154,1) 46%, rgba(41,33,74,1) 100%); | |
| background: -ms-linear-gradient(-45deg, rgba(102,84,175,1) 0%, rgba(92,76,154,1) 46%, rgba(41,33,74,1) 100%); | |
| background: linear-gradient(135deg, rgba(102,84,175,1) 0%, rgba(92,76,154,1) 46%, rgba(41,33,74,1) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6654af', endColorstr='#29214a', GradientType=1 ); | |
| .cpc-product-img-circle { | |
| background-color: #28223f; | |
| } | |
| } | |
| .cpc-product-black { | |
| background: rgba(100,100,100,1); | |
| background: -moz-linear-gradient(-45deg, rgba(100,100,100,1) 0%, rgba(78,77,77,1) 46%, rgba(18,18,18,1) 100%); | |
| background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(100,100,100,1)), color-stop(46%, rgba(78,77,77,1)), color-stop(100%, rgba(18,18,18,1))); | |
| background: -webkit-linear-gradient(-45deg, rgba(100,100,100,1) 0%, rgba(78,77,77,1) 46%, rgba(18,18,18,1) 100%); | |
| background: -o-linear-gradient(-45deg, rgba(100,100,100,1) 0%, rgba(78,77,77,1) 46%, rgba(18,18,18,1) 100%); | |
| background: -ms-linear-gradient(-45deg, rgba(100,100,100,1) 0%, rgba(78,77,77,1) 46%, rgba(18,18,18,1) 100%); | |
| background: linear-gradient(135deg, rgba(100,100,100,1) 0%, rgba(78,77,77,1) 46%, rgba(18,18,18,1) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646464', endColorstr='#121212', GradientType=1 ); | |
| .cpc-product-img-circle { | |
| background-color: black; | |
| } | |
| } | |
| .cpc-product-grey { | |
| background: rgba(223,223,223,1); | |
| background: -moz-linear-gradient(-45deg, rgba(223,223,223,1) 0%, rgba(197,197,197,1) 46%, rgba(130,130,130,1) 100%); | |
| background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(223,223,223,1)), color-stop(46%, rgba(197,197,197,1)), color-stop(100%, rgba(130,130,130,1))); | |
| background: -webkit-linear-gradient(-45deg, rgba(223,223,223,1) 0%, rgba(197,197,197,1) 46%, rgba(130,130,130,1) 100%); | |
| background: -o-linear-gradient(-45deg, rgba(223,223,223,1) 0%, rgba(197,197,197,1) 46%, rgba(130,130,130,1) 100%); | |
| background: -ms-linear-gradient(-45deg, rgba(223,223,223,1) 0%, rgba(197,197,197,1) 46%, rgba(130,130,130,1) 100%); | |
| background: linear-gradient(135deg, rgba(223,223,223,1) 0%, rgba(197,197,197,1) 46%, rgba(130,130,130,1) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#828282', GradientType=1 ); | |
| .cpc-product-img-circle { | |
| background-color: #575757; | |
| } | |
| } | |
| .cpc-nike-tick { | |
| display: block; | |
| width: 50px; | |
| height: 30px; | |
| margin: 0 auto; | |
| svg { | |
| path { | |
| fill: #fff; | |
| } | |
| } | |
| @media screen and (max-width: $width-reponsive-breakpoint) { | |
| padding-top: 25px; | |
| } | |
| } | |
| .cpc-product-info { | |
| display: table-cell; | |
| width: 67%; | |
| font-size: 15px; | |
| padding: 50px; | |
| @media screen and (max-width: $width-reponsive-breakpoint) { | |
| display: block; | |
| width: 100%; | |
| padding: 35px; | |
| } | |
| } | |
| .cpc-product-header { | |
| margin-bottom: 40px; | |
| position: relative; | |
| } | |
| .cpc-product-title { | |
| display: inline-block; | |
| text-transform: uppercase; | |
| margin: 0; | |
| font-size: 30px; | |
| letter-spacing: .5px; | |
| } | |
| .cpc-rating-container { | |
| display: inline-block; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| @media screen and (max-width: 450px) { | |
| display: block; | |
| width: 100%; | |
| position: inherit; | |
| margin-bottom: 5px; | |
| } | |
| } | |
| .cpc-product-rating { | |
| display: inline-block; | |
| position: relative; | |
| vertical-align: top; | |
| margin-top: 7px; | |
| } | |
| .cpc-product-rating-width { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| -webkit-transition: width .4s ease-in-out; | |
| -moz-transition: width .4s ease-in-out; | |
| -o-transition: width .4s ease-in-out; | |
| -ms-transition: width .4s ease-in-out; | |
| transition: width .4s ease-in-out; | |
| } | |
| .cpc-product-star-true { | |
| display: inline-block; | |
| @include icon($icon-star-solid,$color-rating-true,16px) | |
| } | |
| .cpc-product-star-false { | |
| display: inline-block; | |
| @include icon($icon-star-solid,$color-rating-false,16px) | |
| } | |
| .cpc-product-color { | |
| margin: 0; | |
| padding-top: 7px; | |
| padding-bottom: 7px; | |
| text-transform: uppercase; | |
| font-style: italic; | |
| font-size: 14px; | |
| color: $color-text-grey; | |
| font-weight: 500; | |
| } | |
| .cpc-product-rrp { | |
| margin-right: 10px; | |
| font-size: 19px; | |
| text-decoration: line-through; | |
| } | |
| .cpc-product-dp { | |
| font-size: 20px; | |
| color: $color-discount-price; | |
| } | |
| .cpc-product-desc, | |
| .cpc-product-color-title, | |
| .cpc-product-size-title, | |
| .cpc-product-qty-title { | |
| @include section-titles(); | |
| } | |
| .cpc-product-color-title { | |
| margin-bottom: 13px; | |
| } | |
| .cpc-product-qty-title, | |
| .cpc-product-size-title { | |
| margin-bottom: 11px; | |
| } | |
| .cpc-product-desc-text { | |
| margin: 0; | |
| margin-top: 10px; | |
| margin-bottom: 30px; | |
| font-size: 12px; | |
| color: $color-text-grey; | |
| font-weight: 100; | |
| line-height: 23px; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .cpc-product-color-item { | |
| display: inline-block; | |
| cursor: pointer; | |
| width: 20px; | |
| height: 20px; | |
| background-color: red; | |
| border-radius: 50%; | |
| span { | |
| display: none; | |
| } | |
| } | |
| .cpc-atc-button { | |
| padding: 16px 20px; | |
| border-radius: 8px; | |
| border: none; | |
| background: rgba(255, 136, 106, 1); | |
| background: -moz-linear-gradient(top, rgba(255, 136, 106, 1) 0%, rgba(255, 61, 100, 1) 100%); | |
| background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 136, 106, 1)), color-stop(100%, rgba(255, 61, 100, 1))); | |
| background: -webkit-linear-gradient(top, rgba(255, 136, 106, 1) 0%, rgba(255, 61, 100, 1) 100%); | |
| background: -o-linear-gradient(top, rgba(255, 136, 106, 1) 0%, rgba(255, 61, 100, 1) 100%); | |
| background: -ms-linear-gradient(top, rgba(255, 136, 106, 1) 0%, rgba(255, 61, 100, 1) 100%); | |
| background: linear-gradient(to bottom, rgba(255, 136, 106, 1) 0%, rgba(255, 61, 100, 1) 100%); | |
| color: white; | |
| cursor: pointer; | |
| text-transform: uppercase; | |
| font-size: 15px; | |
| -webkit-box-shadow: 5px 5px 30px -6px rgba(255,62,100,1); | |
| -moz-box-shadow: 5px 5px 30px -6px rgba(255,62,100,1); | |
| box-shadow: 5px 5px 30px -6px rgba(255,62,100,1); | |
| -webkit-transition: background .4s ease-in-out; | |
| -moz-transition: background .4s ease-in-out; | |
| -o-transition: background .4s ease-in-out; | |
| -ms-transition: background .4s ease-in-out; | |
| transition: background .4s ease-in-out; | |
| &:before { | |
| -webkit-transition: margin-right .4s ease-in-out; | |
| -moz-transition: margin-right .4s ease-in-out; | |
| -o-transition: margin-right .4s ease-in-out; | |
| -ms-transition: margin-right .4s ease-in-out; | |
| transition: margin-right .4s ease-in-out; | |
| margin-right: 10px; | |
| } | |
| &:hover { | |
| &:before { | |
| margin-right: 20px; | |
| } | |
| } | |
| } | |
| .cpc-color-section, | |
| .cpc-size-section { | |
| display: inline-block; | |
| vertical-align: top; | |
| padding-right: 30px; | |
| border-right: 1px solid #dfdfdf; | |
| margin-right: 20px; | |
| } | |
| .cpc-color-section, | |
| .cpc-size-section, | |
| .cpc-qty-section { | |
| @media screen and (max-width: 530px) { | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 25px; | |
| } | |
| } | |
| .cpc-qty-section { | |
| @media screen and (max-width: 530px) { | |
| margin-bottom: 0px; | |
| } | |
| } | |
| .cpc-product-size-select, .cpc-product-qty-select { | |
| font-family: $font-family-text, Arial, Helvetica, sans-serif; | |
| color: #b4b4b4; | |
| font-size: 17px; | |
| font-weight: 600; | |
| border: 0px; | |
| } | |
| input[type="radio"] { | |
| display: none; | |
| } | |
| label { | |
| position: relative; | |
| display: inline-block; | |
| height: 20px; | |
| width: 20px; | |
| background: #333; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| z-index: 1; | |
| cursor: pointer; | |
| } | |
| .cpc-radio-green { | |
| background: $color-radio-green; | |
| } | |
| input[type="radio"]:checked + .cpc-radio-green { | |
| &:after { | |
| border: solid 2px $color-radio-green; | |
| } | |
| } | |
| .cpc-radio-yellow { | |
| background: $color-radio-yellow; | |
| } | |
| input[type="radio"]:checked + .cpc-radio-yellow { | |
| &:after { | |
| border: solid 2px $color-radio-yellow; | |
| } | |
| } | |
| .cpc-radio-purple { | |
| background: $color-radio-purple; | |
| } | |
| input[type="radio"]:checked + .cpc-radio-purple { | |
| &:after { | |
| border: solid 2px $color-radio-purple; | |
| } | |
| } | |
| .cpc-radio-black { | |
| background: $color-radio-black; | |
| } | |
| input[type="radio"]:checked + .cpc-radio-black { | |
| &:after { | |
| border: solid 2px $color-radio-black; | |
| } | |
| } | |
| .cpc-radio-grey { | |
| background: $color-radio-grey; | |
| } | |
| input[type="radio"]:checked + .cpc-radio-grey { | |
| &:after { | |
| border: solid 2px $color-radio-grey; | |
| } | |
| } | |
| input[type="radio"]:checked + label { | |
| &:after { | |
| content: ""; | |
| position: absolute; | |
| top: -4px; | |
| left: -4px; | |
| height: 28px; | |
| width: 28px; | |
| border: solid 2px #333; | |
| border-radius: 50%; | |
| z-index: 0; | |
| } | |
| } | |
| .cpc-qty-section { | |
| display: inline-block; | |
| vertical-align: top; | |
| } | |
| .cpc-atc-share-section { | |
| margin-top: 50px; | |
| margin-bottom: 15px; | |
| position: relative; | |
| a { | |
| text-decoration: none; | |
| } | |
| } | |
| .cpc-sharing { | |
| @include icon($icon-share-alt,$color-share-grey,22px); | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| } | |
| .cpc-sharing-text { | |
| display: none; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment