123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="nav">
	<a>Half Ritz</a>
	<svg class="logo" viewBox="0 0 120 89">
		<defs>
			<linearGradient x1="39.0683594%" y1="9.82521256%" x2="57.7929687%" y2="106.189076%" id="linearGradient-1">
				<stop stop-color="#FFFFFF" offset="0%"></stop>
				<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
			</linearGradient>
		</defs>
		<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<g id="half" fill="url(#linearGradient-1)">
				<path d="M36.2386235,23 C45.3864939,23 54.1108322,27.4051914 60.0064108,29.9012871 C66.4822577,27.4051914 71.9827774,23 81.1306479,23 C96.7394064,23 110,43.2434164 110,43.2434164 L68.4562981,43.2434164 L66.6642944,43.8168873 C62.985525,44.9941543 57.0210518,44.9936033 53.3384248,43.8168873 L51.5437019,43.2434164 L10,43.2434164 C10,43.2434164 20.629865,23 36.2386235,23 Z M10,43.6796273 C10,43.6796273 35.0249071,46.3318972 60.0064108,47.8155528 C84.9905757,46.3318972 110,43.6796273 110,43.6796273 C110,52.9800743 83.9192494,66.7530292 60.0064108,66.7530292 C36.0935722,66.7530292 10,54.2516504 10,43.6796273 Z" id="Combined-Shape"></path>
			</g>
		</g>
	</svg> 
	<a class="bag">My Bag (0)</a>
</div>

<div class="wrapper">
	<div class="product-info">
		<div class="ls-preview">
			<div class="ls-color">Beetroot</div>
			<svg class="lipstick" viewBox="0 0 319 322">
				<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
					<g class="amuse">
						<path d="M151.578531,17.5796241 C152.007157,16.5594425 153.206211,16.0006568 154.255263,16.3310911 C165.454454,19.8586529 177.052963,31.712125 180.294125,42.8388138 C180.294125,42.8388138 183.188612,50.8793603 183.188612,54.7724291 L183.188612,107.970703 L136.811659,107.970703 L136.811659,54.7253677 C136.811659,53.6214581 136.754041,49.9296875 138.321424,44.8740234 C139.888807,39.8183594 151.578531,17.5796241 151.578531,17.5796241 Z" class="ls-bullet" fill="#690727"></path>
						<path d="M146.796579,27.5962539 C143.834365,31.130756 138.552749,44.1278753 138.321424,44.8740234 C136.754041,49.9296875 136.811659,53.6214581 136.811659,54.7253677 L136.811659,107.970703 L138.321424,107.970703 C138.321424,107.970703 138.288788,56.6451963 139.013184,50.2338867 C139.616983,44.8899183 145.732862,39.9569334 147.717794,36.394518 C148.10624,37.2323879 148.431374,37.7075695 148.431374,37.7075695 C149.124647,39.974579 150.274452,42.128592 151.758434,44.0951064 L152.982422,107.970703 L167.676665,107.970703 L167.676665,54.2624706 C169.217132,54.595819 170.76625,54.7724291 172.291382,54.7724291 L178.853609,54.7724291 C178.853249,74.0695294 180.294125,107.970703 180.294125,107.970703 L183.188612,107.970703 L183.188612,54.7724291 C183.188612,52.8258947 182.46499,49.8424909 181.741368,47.3457207 C181.017747,44.8489504 180.294125,42.8388138 180.294125,42.8388138 C177.052963,31.712125 165.454454,19.8586529 154.255263,16.3310911 C153.206211,16.0006568 152.007157,16.5594425 151.578531,17.5796241 C151.578531,17.5796241 149.977272,20.6258883 147.880569,24.7198311 C147.377446,25.7022104 147.027147,26.6657575 146.796579,27.5962539 Z" class="bullet-shadow" fill="#000000" opacity="0.1"></path>
					</g>
					<path d="M129.5,107.997618 C129.5,105.23751 131.70706,102.601623 134.427333,102.158347 C134.427333,102.158347 144.75,100 160,100 C175.25,100 185.572667,102.158347 185.572667,102.158347 C188.293958,102.623179 190.5,105.239037 190.5,107.997618 L190.5,232 L129.5,232 L129.5,107.997618 Z" class="holder-tube-2" fill="#191621"></path>
					<path d="M129.5,110.997618 C129.5,108.23751 131.70706,105.601623 134.427333,105.158347 C134.427333,105.158347 144.75,103 160,103 C175.25,103 185.572667,105.158347 185.572667,105.158347 C188.293958,105.623179 190.5,108.239037 190.5,110.997618 L190.5,235 L129.5,235 L129.5,110.997618 Z" class="holder-tube-1" fill="#1E1A27"></path>
					<path d="M126.5,226.008788 C126.5,224.34708 127.83835,223 129.509011,223 L190.490989,223 C192.15282,223 193.5,224.34559 193.5,226.008788 L193.5,244 L126.5,244 L126.5,226.008788 Z" class="holder-joint-2" fill="#191621"></path>
					<path d="M126.5,228.008788 C126.5,226.34708 127.83835,225 129.509011,225 L190.490989,225 C192.15282,225 193.5,226.34559 193.5,228.008788 L193.5,246 L126.5,246 L126.5,228.008788 Z" class="holder-joint-1" fill="#2F2632"></path>
					<path d="M122.447266,242.939394 C122.447266,242.939394 141.223633,241 160,241 C178.776367,241 197.552734,242.939394 197.552734,242.939394 L197.552734,302.006688 C197.552734,303.659849 196.217263,305 194.562164,305 L125.437836,305 C123.78619,305 122.447266,303.660599 122.447266,302.006688 L122.447266,242.939394 Z" class="holder-twist-2" fill="#191621"></path>
					<path d="M122.447266,244.939394 C122.447266,244.939394 141.223633,243 160,243 C178.776367,243 197.552734,244.939394 197.552734,244.939394 L197.552734,304.006688 C197.552734,305.659849 196.217263,307 194.562164,307 L125.437836,307 C123.78619,307 122.447266,305.660599 122.447266,304.006688 L122.447266,244.939394 Z" class="holder-twist-1" fill="#2F2632"></path>
					<path d="M158.220442,281.502352 L158.220442,279.774992 L148,279.774992 L148,281.502352 L158.220442,281.502352 Z M155.390977,283.576902 C157.163249,283.576902 158.220442,284.868419 158.220442,287.027327 L158.220442,292.357422 L152.259233,292.357422 L152.259233,287.485431 C152.259233,286.423942 151.780431,285.814699 150.945456,285.814699 L150.916165,285.814699 C150.150706,285.814699 149.705099,286.364189 149.69104,287.321013 L149.689868,287.377251 L148,287.377251 L148,287.159329 C148,286.10487 148.316338,285.261303 148.913865,284.718842 C149.382122,284.294325 149.939033,284.090072 150.626384,284.090072 L150.655284,284.090072 C151.6496,284.090072 152.382644,284.49311 152.898158,285.324961 C153.378522,284.133032 154.163508,283.576902 155.362467,283.576902 L155.390977,283.576902 Z M153.874509,290.658571 L156.534089,290.658571 L156.534089,287.014048 C156.534089,285.910772 156.061535,285.303481 155.206251,285.303481 L155.175008,285.303481 C154.324411,285.303481 153.874509,285.937328 153.874509,287.130429 L153.874509,290.658571 Z M149.759775,277.734809 L149.759775,274.330077 L158.220442,274.330077 L158.220442,272.592173 L149.759384,272.592173 L149.759384,269.185489 L148,269.185489 L148,277.734418 L149.759775,277.734418 L149.759775,277.734809 Z M156.518858,265.441378 L153.917859,265.441378 L153.917859,260.317488 L152.215884,260.317488 L152.215884,265.441378 L149.700803,265.441378 L149.700803,259.225928 L148,259.225928 L148,267.165614 L158.220442,267.165614 L158.220442,259.161489 L156.518858,259.161489 L156.518858,265.441378 Z" class="holder-logo" fill="#000000"></path>
					<path d="M129.5,107.682812 C129.5,105.071506 131.70706,102.577725 134.427333,102.158347 L134.427333,225 L129.5,225 L129.5,107.682812 Z M126.5,228.008788 C126.5,226.34708 127.83835,225 129.509011,225 L129.509011,246 L126.5,246 L126.5,228.008788 Z M143.658203,242.977384 L143.658203,226.279779 C143.658203,224.626973 145.000371,223.287109 146.659841,223.287109 L149.828125,223.287109 L149.828125,107.997618 C149.828125,105.23751 151.834438,101.992698 154.39366,100.998957 C154.39366,100.998957 154.914062,100 160,100 C165.085937,100 165.60634,100.998957 165.60634,100.998957 C168.127816,102.104102 170.171875,105.239037 170.171875,107.997618 L170.171875,223.287109 L173.340159,223.287109 C174.997918,223.287109 176.341797,224.639885 176.341797,226.279779 L176.341797,242.977384 C179.776829,243.41579 181.991211,243.813447 181.991211,243.813447 L181.991211,303.994889 C181.991211,305.654566 180.650889,307 178.985431,307 L141.014569,307 C139.354522,307 138.008789,305.651027 138.008789,303.994889 L138.008789,243.813447 C138.008789,243.813447 140.223171,243.41579 143.658203,242.977384 L143.658203,242.977384 Z M122.447266,244.939394 L126.437836,244.939394 L126.437836,307 C124.233905,307 122.447266,305.660599 122.447266,304.006688 L122.447266,244.939394 Z M190.5,107.682812 L190.5,225 L185.572667,225 L185.572667,102.158347 C188.29294,102.577725 190.5,105.071506 190.5,107.682812 Z M193.5,228.008788 L193.5,246 L190.490989,246 L190.490989,225 C192.16165,225 193.5,226.34708 193.5,228.008788 Z M197.552734,244.939394 L197.552734,304.006688 C197.552734,305.660599 195.766095,307 193.562164,307 L193.562164,244.939394 L197.552734,244.939394 Z" class="holder-shadow" fill="#000000" opacity="0.15"></path>
					<rect x="0" y="0" width="319" height="322"  fill="RGBA(255, 255, 255, 0.1)"/>
				</g>
			</svg>
		</div>
		<div class="ls-details">
			<h2 style="font-weight: 500">Bite Beauty</h2>
			<h1>Amuse Bouche</h1>
			<h2 style="opacity: 0.5">$26.00 USD</h2>
			<p>High-impact, handcrafted lipsticks in dimensional shades.</p>
			<div class="controls">
				<div class="quantity">
					<span>Quantity:</span>
					<input type="number" value="5">
				</div>
				<button class="cta">Add&nbspto&nbspBag</button>
			</div>
		</div>
	</div>
	<div class="ls-colors">
		<div class="ls-color-info">
			<span>Color:</span>
			<span class="ls-color"><i>Choose Color</i></span>
		</div>
		<grid class="ls-swatches">
			<button class="ls-swatch" data-name="Beetroot" data-hex="690727"></button>
			<button class="ls-swatch" data-name="Black Truffle" data-hex="35222F"></button>
			<button class="ls-swatch" data-name="Cava" data-hex="CCA1A6"></button>
			<button class="ls-swatch" data-name="Cayenne" data-hex="BA0C2F"></button>
			<button class="ls-swatch" data-name="Chai" data-hex="632F2B"></button>
			<button class="ls-swatch" data-name="Cotton Candy" data-hex="F662A8"></button>
			<button class="ls-swatch" data-name="Cremini" data-hex="956C58"></button>
			<button class="ls-swatch" data-name="Dragon Fruit" data-hex="9E3871"></button>
			<button class="ls-swatch" data-name="Eggplant" data-hex="792566"></button>
			<button class="ls-swatch" data-name="Enoki" data-hex="AD7C59"></button>
			<button class="ls-swatch" data-name="Fig" data-hex="BD434A"></button>
			<button class="ls-swatch" data-name="Gazpacho" data-hex="902031"></button>
			<button class="ls-swatch" data-name="Gin Fizz" data-hex="DA507E"></button>
			<button class="ls-swatch" data-name="Gingersnap" data-hex="CB6460"></button>
			<button class="ls-swatch" data-name="Honeycomb" data-hex="915048"></button>
			<button class="ls-swatch" data-name="Jam" data-hex="6C1D45"></button>
			<button class="ls-swatch" data-name="Kale" data-hex="183028"></button>
			<button class="ls-swatch" data-name="Kimchi" data-hex="CB2D73"></button>
			<button class="ls-swatch" data-name="Lavender" data-hex="7474C1"></button>
			<button class="ls-swatch" data-name="Liquorice" data-hex="692A3C"></button>
			<button class="ls-swatch" data-name="Maple" data-hex="9C3036"></button>
			<button class="ls-swatch" data-name="Meringue" data-hex="A85A4B"></button>
			<button class="ls-swatch" data-name="Molasses" data-hex="833C36"></button>
			<button class="ls-swatch" data-name="Nori" data-hex="4A2223"></button>
			<button class="ls-swatch" data-name="Pepper" data-hex="A2524D"></button>
			<button class="ls-swatch" data-name="Persimmon" data-hex="D50032"></button>
			<button class="ls-swatch" data-name="Pickled Ginger" data-hex="CE4A5B"></button>
			<button class="ls-swatch" data-name="Portobello" data-hex="7C4D3A"></button>
			<button class="ls-swatch" data-name="Radish" data-hex="920053"></button>
			<button class="ls-swatch" data-name="Rhubarb" data-hex="7F2837"></button>
			<button class="ls-swatch" data-name="Sake" data-hex="9F7077"></button>
			<button class="ls-swatch" data-name="Sangria" data-hex="BA335D"></button>
			<button class="ls-swatch" data-name="Sorbet" data-hex="D44660"></button>
			<button class="ls-swatch" data-name="Souffle" data-hex="E097A8"></button>
			<button class="ls-swatch" data-name="Sour Cherry" data-hex="820B27"></button>
			<button class="ls-swatch" data-name="Spritzer" data-hex="976A96"></button>
			<button class="ls-swatch" data-name="Squid Ink" data-hex="081F2C"></button>
			<button class="ls-swatch" data-name="Sugar Cane" data-hex="AE767F"></button>
			<button class="ls-swatch" data-name="Sweet Cream" data-hex="D34642"></button>
			<button class="ls-swatch" data-name="Tannin" data-hex="862633"></button>
			<button class="ls-swatch" data-name="Taro" data-hex="86647A"></button>
			<button class="ls-swatch" data-name="Thistle" data-hex="866761"></button>
			<button class="ls-swatch" data-name="Verbena" data-hex="883343"></button>
			<button class="ls-swatch" data-name="Whiskey" data-hex="412625"></button>
			<button class="ls-swatch" data-name="Porcini" data-hex="7B4C3A"></button>
		</grid>
	</div>
</div>
            
          
!
            
              // Animation
.logo {
	opacity:0;
	transform-origin: center center;
	animation: logo-enter 1000ms linear both;
}

.ls-details {
	opacity: 0;
	animation: fade-in 1000ms ease-out 1000ms forwards;
}

.ls-preview {
	opacity: 0;
	animation: slide-left 1000ms ease-out 1000ms forwards;
	.ls-color {
		opacity: 0;
		animation: fade-in 1500ms ease-out 1750ms forwards;
	}
	svg {
		.amuse {
			opacity:0;
			animation: rise 1500ms linear 1250ms both;
			transform-origin: center bottom;
		}
	}
}
.ls-colors {
	opacity: 0;
	animation: rise 2000ms linear 2000ms forwards;
}

/*https://goo.gl/2RK08n */
@keyframes rise { 
	0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 100, 0, 1); opacity:0; }
	1% {opacity:1;}
	3.2% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 56.546, 0, 1); }
	6.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 29.862, 0, 1); }
	9.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 14.497, 0, 1); }
	12.81% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.216, 0, 1); }
	19.22% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.243, 0, 1); }
	25.63% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.577, 0, 1); }
	65.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.001, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:1;} 
}

@keyframes fade-in {
	0% {opacity:0;}
	100% {opacity:1;}
}
/* https://goo.gl/bWyLl9 */
@keyframes logo-enter { 
	0% { transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:0;}
	1% {opacity:1;}
	4.1% { transform: matrix3d(0.622, 0, 0, 0, 0, 0.622, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	8.11% { transform: matrix3d(0.905, 0, 0, 0, 0, 0.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	12.11% { transform: matrix3d(1.017, 0, 0, 0, 0, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	16.12% { transform: matrix3d(1.039, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	27.23% { transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	38.34% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	60.56% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	82.78% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
	100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:1; } 
}
@keyframes slide-left {
	0% {transform: translateX(-20px); opacity:0;}
	100% {transform: translateX(0px); opacity:1;}
}

body {
	background: #F9D8E8;
	font-family: "sofia-pro-soft", 'Brandon Grotesque', sans-serif;
	font-style: normal;
	text-align: center;
}

.wrapper {
	background: #F7F8FC;
}

.nav {
	background: #C6AFC1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	a {
		text-transform: uppercase;
		font-size: 1.25em;
		font-weight: 700;
		color: #F7F8FC;
		appearance: none;
		text-decoration: none;
		&:hover {
			color: #35313D;
		}
		&:active {
			color: #E2D6DF;
		}
	}
}

.ls-preview {
	background: rgba(198, 175, 193, 0.10);
	// border: 1px solid #C6AFC1;
	-webkit-box-shadow: 0px 0px 32px 12px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 32px 12px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 32px 12px rgba(198, 175, 193, 0.3);
	border-radius: 1px;
	position: relative;
	padding: 24px;
	overflow: hidden;
	.ls-color {
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 2.5em;
		font-weight: 700;
		margin: 0;
		color: #690727;
		text-transform: uppercase;
		letter-spacing: 0.5rem;
		transform: translate(-50%, -50%);
	}
}

.ls-details {
	h1 {
		text-transform: uppercase;
		margin-top: -12px;
		margin-bottom: -12px;
		font-weight: 400;
	}
	h2 {
		text-transform: uppercase;
		font-size: 1.25em;
		font-weight: 400;
	}
	.controls {
		.quantity {
			background: rgba(198, 175, 193, 0.10);
			border: 1px solid #C6AFC1;
			border-radius: 1px;
			font-size: 0.75em;
			padding: 12px;
			text-transform: uppercase;
			margin-right: 3px;
			input {
				background: none;
				border: none;
				appearance: none;
				font-family: "sofia-pro-soft", 'Brandon Grotesque', sans-serif;
				font-style: normal;
				font-weight: 700;
				text-align: right;
			}
		}
		.cta {
			appearance: none;
			outline:none;
			font-family: "sofia-pro-soft", 'Brandon Grotesque', sans-serif;
			font-style: normal;
			font-weight: bold;
			font-size: 0.75em;
			border: 1.5px solid #C6AFC1;
			border-radius: 1px;
			background: #C6AFC1;
			color: #FFFFFF;
			padding: 12px;
			margin-left: 3px;
		}
	}
}

.ls-colors {
	.ls-swatches {
		button {
			appearance: none;
			border: none;
			border-radius: 1px;
			padding: 3px!important;
			margin-bottom: 5px;
			min-width: 64px;
			min-height: 45px;
			outline: none;
			transition: ease-out;
			&:hover {
				transform: scale(1.2);
				-webkit-box-shadow: 0px 0px 32px 12px rgba(0,0,0,0.1);
				-moz-box-shadow: 0px 0px 32px 12px rgba(0,0,0,0.1);
				box-shadow: 0px 0px 32px 12px rgba(198, 175, 193, 0.3);
			}
			&:active {
				outline: none;
				transform: scale(0.9);
			}
		}
	}
}

// Desktop
@media screen and (min-width: 601px) {
	body {
	padding: 48px;
	}
	.nav {
		padding: 12px;
		svg {
			width: 10%;
			height: auto;
		}
	}
	.wrapper {	
		padding: 24px 120px;
		.product-info {
			display: flex;
			flex-flow: row nowrap;
			align-content: space-around;
			padding: 48px 24px;
			.ls-preview {
				min-width: 50%;
				max-height: 256px;
				svg {
					height: 100%;
					width: 100%;
				}
			}
			.ls-details {
				// min-width: 40%;
				margin-left: 24px;
				.controls {
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-around;
					align-content: space-around;
					align-items: flex-start;
					padding: 24px;
					.quantity {
						display: flex;
						justify-content: space-between;
						align-content: space-between;
						align-self: flex-start;
						flex-flow: row nowrap;
						flex-grow: 2;
						min-width: 60%;
						input {
							align-self: flex-end;
							width: 25px;
						}
					}
					.cta {
						align-self: flex-end;
						flex-grow: 1;
						min-width: 50%;
						outline: none;
						&:hover {
							background: #35313D;
							border: 1px solid #35313D;
							appearance: none;
							outline: none;
							box-shadow: none;
						}
						&:active {
							appearance: none;
							outline: none;
							background: #E2D6DF;
							border: 1px solid #E2D6DF;
							box-shadow: none;
						}
					}
				}

			}
		}
		.ls-colors {
			width: 100%;
			.ls-color-info {
				padding: 24px;
			}
		}
	}
}

// Mobile
@media screen and (max-width: 600px) {
	.wrapper {
		min-width: 320px;
		padding: 24px;
	}
	.nav {
		min-width: 320px;
		padding: 12px;
		svg {
			width: 90px;
			height: auto;
		}
	}
	.ls-preview {
		svg {
			max-width: 50%;
			height: auto;
		}
	}
	.ls-details {
		.controls {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			align-content: space-around;
			align-items: flex-start;
			padding: 24px;
			.quantity {
				display: flex;
				justify-content: space-between;
				align-content: space-between;
				align-self: flex-start;
				flex-flow: row nowrap;
				flex-grow: 2;
				min-width: 60%;
				input {
					align-self: flex-end;
					width: 25px;
				}
			}
			.cta {
				align-self: flex-end;
				flex-grow: 1;
				min-width: 40%;
			}
		}
	}
	.ls-colors {
		.ls-color-info {
			margin-bottom: 24px;
		}
	}
}


// Swatches
.ls-colors {
	.ls-swatches {
		button {
			&:nth-of-type(1) {
				background-color: #690727;
			}
			&:nth-of-type(2) {
				background-color: #35222F;
			}
			&:nth-of-type(3) {
				background-color: #CCA1A6;
			}
			&:nth-of-type(4) {
				background-color: #BA0C2F;
			}
			&:nth-of-type(5) {
				background-color: #632F2B;
			}
			&:nth-of-type(6) {
				background-color: #F662A8;
			}
			&:nth-of-type(7) {
				background-color: #956C58;
			}
			&:nth-of-type(8) {
				background-color: #9E3871;
			}
			&:nth-of-type(9) {
				background-color: #792566;
			}
			&:nth-of-type(10) {
				background-color: #AD7C59;
			}
			&:nth-of-type(11) {
				background-color: #BD434A;
			}
			&:nth-of-type(12) {
				background-color: #902031;
			}
			&:nth-of-type(13) {
				background-color: #DA507E;
			}
			&:nth-of-type(14) {
				background-color: #CB6460;
			}
			&:nth-of-type(15) {
				background-color: #915048;
			}
			&:nth-of-type(16) {
				background-color: #6C1D45;
			}
			&:nth-of-type(17) {
				background-color: #183028;
			}
			&:nth-of-type(18) {
				background-color: #CB2D73;
			}
			&:nth-of-type(19) {
				background-color: #7474C1;
			}
			&:nth-of-type(20) {
				background-color: #692A3C;
			}
			&:nth-of-type(21) {
				background-color: #9C3036;
			}
			&:nth-of-type(22) {
				background-color: #A85A4B;
			}
			&:nth-of-type(23) {
				background-color: #833C36;
			}
			&:nth-of-type(24) {
				background-color: #4A2223;
			}
			&:nth-of-type(25) {
				background-color: #A2524D;
			}
			&:nth-of-type(26) {
				background-color: #D50032;
			}
			&:nth-of-type(27) {
				background-color: #CE4A5B;
			}
			&:nth-of-type(28) {
				background-color: #7C4D3A;
			}
			&:nth-of-type(29) {
				background-color: #920053;
			}
			&:nth-of-type(30) {
				background-color: #7F2837;
			}
			&:nth-of-type(31) {
				background-color: #9F7077;
			}
			&:nth-of-type(32) {
				background-color: #BA335D;
			}
			&:nth-of-type(33) {
				background-color: #D44660;
			}
			&:nth-of-type(34) {
				background-color: #E097A8;
			}
			&:nth-of-type(35) {
				background-color: #820B27;
			}
			&:nth-of-type(36) {
				background-color: #976A96;
			}
			&:nth-of-type(37) {
				background-color: #081F2C;
			}
			&:nth-of-type(38) {
				background-color: #AE767F;
			}
			&:nth-of-type(39) {
				background-color: #D34642;
			}
			&:nth-of-type(40) {
				background-color: #862633;
			}
			&:nth-of-type(41) {
				background-color: #86647A;
			}
			&:nth-of-type(42) {
				background-color: #866761;
			}
			&:nth-of-type(43) {
				background-color: #883343;
			}
			&:nth-of-type(44) {
				background-color: #412625;
			}
			&:nth-of-type(45) {
				background-color: #7B4C3A;
			}
		}
	}
}

            
          
!
            
              $(".ls-swatch").click(function(){
	var swatch = $(this);
	var name = swatch.attr("data-name");
	var hex = "#" + swatch.attr("data-hex");
	var color = $(".ls-color");
	var bullet = $(".ls-bullet");
	setTimeout(function(){
		color.css("color", hex);
		color.html(name);
		bullet.css("fill", hex);
	}, 10);
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console