css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              .intro
	span Component inspired by 
		a(href="https://dribbble.com/shots/4462916-Tab-Bar" target="_blank") Prekesh's Dribbble post

.toolbar
	svg.icon.icon--home.toolbar__icon(width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg")
		path(fill-rule="evenodd" clip-rule="evenodd" d="M0 11.4V8.4L3 6.3V2H6V4.2L12 0L24 8.4V11.4L12 3L0 11.4ZM2 11V24H9V16H15V24H22V11L12 4L2 11Z" fill="currentColor")

	svg.icon.icon--chart.toolbar__icon(width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg")
		path(fill-rule="evenodd" clip-rule="evenodd" d="M14.2491 16.7555C13.9697 17.321 13.4303 18 12.5 18C11.6845 18 11.1251 17.5105 10.7863 16.9787C10.4629 16.4712 10.2644 15.8237 10.1285 15.1732C9.85403 13.8589 9.7633 12.1512 9.7038 10.5368C9.69123 10.1958 9.68004 9.85882 9.66906 9.52853C9.62659 8.25006 9.58744 7.07143 9.48457 6.14116C9.47719 6.07445 9.46959 6.01015 9.46178 5.94825C9.45696 5.96452 9.45214 5.98098 9.4473 5.99763C9.16661 6.96419 8.93645 8.27726 8.69349 9.67166L8.68604 9.71441C8.45204 11.0574 8.20493 12.4757 7.89001 13.5601C7.73252 14.1025 7.5375 14.6372 7.27709 15.0557C7.03799 15.4399 6.56714 16 5.79166 16C4.7035 16 4.09185 15.1378 3.77627 14.5138C3.43377 13.8367 3.20233 12.9844 3.02231 12.233C2.95225 11.9406 2.89044 11.6665 2.83272 11.4105C2.76944 11.1299 2.71107 10.8711 2.65214 10.6338C2.35554 11.1802 2.09737 11.851 1.95258 12.3043L0.0474205 11.6957C0.219649 11.1566 0.530238 10.3423 0.914202 9.64346C1.10415 9.29774 1.33678 8.93433 1.60956 8.64373C1.85202 8.38542 2.29764 8 2.91666 8C3.61347 8 3.97613 8.54018 4.10107 8.7549C4.25983 9.02776 4.37297 9.35807 4.46035 9.65648C4.57709 10.0551 4.69172 10.562 4.80457 11.061C4.85921 11.3025 4.91343 11.5423 4.96727 11.767C5.14663 12.5156 5.33445 13.1633 5.56097 13.6112C5.60393 13.6961 5.64269 13.7634 5.6768 13.8166C5.76702 13.6261 5.86619 13.3576 5.96936 13.0024C6.25005 12.0358 6.48021 10.7227 6.72317 9.32834L6.73062 9.28559C6.96462 7.94259 7.21173 6.5243 7.52665 5.43987C7.68414 4.89755 7.87916 4.36278 8.13958 3.94431C8.37867 3.5601 8.84952 3 9.625 3C10.5539 3 10.962 3.80362 11.1143 4.1998C11.2992 4.6807 11.4032 5.29472 11.4725 5.92134C11.5847 6.93626 11.6271 8.22023 11.6697 9.50767C11.6802 9.82731 11.6908 10.1472 11.7024 10.4632C11.7627 12.0988 11.8517 13.6411 12.0863 14.7643C12.1992 15.3051 12.33 15.6645 12.4541 15.8734C12.4548 15.8721 12.4554 15.8708 12.4561 15.8695C12.6027 15.5727 12.7399 15.0708 12.8519 14.3471C13.0573 13.0198 13.1353 11.2642 13.2182 9.3995C13.2247 9.252 13.2313 9.10383 13.238 8.95512C13.327 6.97365 13.4332 4.89535 13.7421 3.30893C13.8951 2.52269 14.1144 1.76214 14.4648 1.17501C14.8262 0.569572 15.4295 0 16.3333 0C17.3348 0 17.917 0.740883 18.2253 1.38429C18.5418 2.04487 18.7345 2.90987 18.8656 3.82728C19.1284 5.66656 19.1895 8.08749 19.2484 10.4259L19.2497 10.4748C19.3101 12.8713 19.3699 15.1794 19.6143 16.8898C19.7377 17.7536 19.897 18.373 20.0783 18.7515C20.1443 18.8892 20.1948 18.9611 20.2257 18.9964C20.2865 18.9875 20.3283 18.96 20.3864 18.8897C20.4961 18.7572 20.626 18.496 20.7381 18.0416C20.9635 17.1285 21.0228 15.8671 21.0843 14.4565L21.0874 14.3841C21.1449 13.0637 21.2082 11.6078 21.4868 10.4791C21.6292 9.9022 21.8513 9.30411 22.2395 8.83506C22.6622 8.32426 23.2583 8 24 8V10C23.9031 10 23.8553 10.0195 23.7802 10.1103C23.6705 10.2428 23.5407 10.504 23.4285 10.9584C23.2031 11.8715 23.1438 13.1329 23.0824 14.5435L23.0792 14.6159C23.0218 15.9363 22.9585 17.3922 22.6798 18.5209C22.5374 19.0978 22.3154 19.6959 21.9272 20.1649C21.5044 20.6757 20.9083 21 20.1667 21C19.1652 21 18.583 20.2591 18.2747 19.6157C17.9582 18.9551 17.7655 18.0901 17.6344 17.1727C17.3716 15.3335 17.3105 12.9125 17.2516 10.5742L17.2503 10.5252C17.1899 8.1287 17.1301 5.82061 16.8857 4.11022C16.7623 3.24638 16.603 2.62701 16.4217 2.24853C16.372 2.14478 16.331 2.07836 16.3007 2.03681C16.2716 2.06752 16.2309 2.11845 16.1822 2.19999C16.0104 2.48786 15.8441 2.97731 15.7052 3.69107C15.43 5.10465 15.3266 7.02635 15.236 9.04488C15.2289 9.20321 15.2218 9.36217 15.2148 9.52144C15.1341 11.3454 15.0515 13.2111 14.8284 14.6529C14.7083 15.4292 14.5348 16.1773 14.2491 16.7555ZM16.2576 1.98608C16.2451 1.98042 16.2393 1.97489 16.2394 1.97355C16.2396 1.9722 16.2459 1.97502 16.2576 1.98608ZM20.2606 19.0265C20.2604 19.0278 20.2541 19.025 20.2424 19.0139C20.2549 19.0196 20.2608 19.0251 20.2606 19.0265ZM12.3411 16.0514C12.341 16.0506 12.345 16.0461 12.3533 16.04C12.3454 16.0491 12.3412 16.0521 12.3411 16.0514ZM12.5554 16.0115C12.5626 16.0152 12.5662 16.0184 12.5662 16.0192C12.5662 16.0199 12.5626 16.0181 12.5554 16.0115ZM5.50813 14.0958C5.50809 14.0953 5.51152 14.0913 5.51855 14.0852C5.51169 14.0932 5.50817 14.0963 5.50813 14.0958ZM5.83704 14.0059C5.84383 14.0081 5.84711 14.0101 5.84705 14.0106C5.84699 14.0111 5.84359 14.01 5.83704 14.0059ZM3.14321 9.9434C3.1432 9.94379 3.13943 9.94679 3.13194 9.95123C3.13948 9.94522 3.14322 9.94301 3.14321 9.9434ZM2.37001 9.75666C2.36171 9.7457 2.3577 9.73894 2.35777 9.7383C2.35783 9.73766 2.36198 9.74314 2.37001 9.75666ZM9.90853 4.90419C9.90858 4.90466 9.90514 4.90867 9.89812 4.91481C9.90498 4.90679 9.90849 4.90372 9.90853 4.90419ZM9.20506 4.81965C9.19503 4.80615 9.19045 4.79728 9.19067 4.79622C9.1909 4.79516 9.19591 4.8019 9.20506 4.81965Z" fill="currentColor")


	.icon.icon--smile.toolbar__icon.is-active
		svg(width="20px" height="17.5px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink")
			g(stroke="none" stroke-width="1" fill="none" fill-rule="evenodd")
				path.eyes(d="M2,0 L4.94384766,0 L4.94384766,4.95300293 L2,4.95300293 L2,0 Z M11,0 L13.9438477,0 L13.9438477,4.95300293 L11,4.95300293 L11,0 Z M0.22565013,10.9812657 L1.77434987,9.01873435 C4.95970517,11.5324058" fill="#1F1B2C")
				path.mouth(d="M2,0 L4.94384766,0 L11,0 Z M0.22565013,10.9812657 L1.77434987,9.01873435 C4.95970517,11.5324058 10.563769,12.0991976 14.2481226,9.03849361 L15.8456274,10.9615064 C11.1502649,14.8620861 4.26043783,14.1652529 0.22565013,10.9812657 Z" fill="#1F1B2C")

	svg.icon.icon--bell.toolbar__icon(width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg")
		path(fill-rule="evenodd" clip-rule="evenodd" d="M6.04129 0.377307C6.78265 0.178661 7.53944 0.456928 7.98593 1.02405C11.3602 0.9202 14.4868 3.13724 15.3984 6.5393L17.8065 15.5265L3.42694 19.3795L1.01882 10.3923C0.107241 6.99022 1.70644 3.50691 4.68055 1.90972C4.78366 1.19534 5.29993 0.575954 6.04129 0.377307ZM1.2124 21.8994L20.9843 16.6015L21.4659 18.399L15.6989 19.9442C15.8898 20.2506 16 20.6124 16 21C16 22.1046 15.1046 23 14 23C12.8954 23 12 22.1046 12 21C12 20.9783 12.0003 20.9566 12.001 20.9351L1.69402 23.6968L1.2124 21.8994Z" fill="currentColor")

	svg.icon.icon--search.toolbar__icon(width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg")
		path(fill-rule="evenodd" clip-rule="evenodd" d="M9.5 17C13.6421 17 17 13.6421 17 9.5C17 5.35786 13.6421 2 9.5 2C5.35786 2 2 5.35786 2 9.5C2 13.6421 5.35786 17 9.5 17ZM9.5 19C11.6132 19 13.5652 18.31 15.1431 17.1431L22 24L24 22L17.1431 15.1431C18.31 13.5652 19 11.6132 19 9.5C19 4.25329 14.7467 0 9.5 0C4.25329 0 0 4.25329 0 9.5C0 14.7467 4.25329 19 9.5 19ZM13.9135 8.61731C13.5032 6.55467 11.6832 5 9.5 5V3C12.6535 3 15.2824 5.24564 15.875 8.225L13.9135 8.61731Z" fill="currentColor")

            
          
!
            
              $light-blue: #E6F4FD;
$dark-blue: #1F1B2C;
$blue: #24A1FD;
$red: #ff0030;
$yellow: #ffc600;
$purple: #e546ff;
$green: #00ff36;

$bg: $light-blue;
$component-bg: $dark-blue;
$component-color: $bg;
$component-active: $blue;

$component: (
	bg: $dark-blue,
	color: $bg,
	active-color: $blue,
	width: 25em,
	padding: 1.4em 2em,
	font-size: 2em,
	border-radius: 2em,
	icon-hover: scale(1.1),
	icon-active-animation: bump 200ms,
	blue: $blue,
	green: $green,
	purple: $purple,
	red: $red,
	yellow: $yellow
);

@function component($key) {
	@return map-get($component, $key);
}

@mixin transition {
	transition: all 100ms cubic-bezier(.61,.01,.43,.99);
}

@mixin boxShadow {
	box-shadow: 0px 20px 30px rgba($dark-blue, .15), 0px 5px 15px rgba($dark-blue, .05); 
}


html {
	box-sizing: border-box;
	font-size: 62.5%;
}

*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	width: 100%;
	height: 100%;
}

@function bodyBg($color) {
	@return linear-gradient(45deg, lighten($color, 35%), lighten($color, 45%))
}

body {
	font-size: 1.6rem;
	background: $bg;
	background: linear-gradient(45deg, darken($bg, 5%), lighten($bg, 5%));
	&.bg--blue {
		background: bodyBg($blue);
	}
	&.bg--red {
		background: bodyBg($red);
	}
	&.bg--yellow {
		background: bodyBg($yellow);
	}
	&.bg--green {
		background: bodyBg($green);
	}
	&.bg--purple {
		background: bodfyBg($purple);
	}
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
}

.toolbar {
	background: component(bg);
	background: linear-gradient(to top, component(bg), lighten(component(bg), 10%));
	color: component(color);
	width: 100%;
	max-width: component(width);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: auto;
	padding: component(padding);
	border-radius: component(border-radius);
	@include boxShadow;
	&__icon {
		cursor: pointer;
		font-size: component(font-size);
		@include transition;
		&:hover {
			transform: component(icon-hover);
			@include transition;
		}
		&.icon--smile {
			background: currentColor;
			position: relative;
			border-radius: 1rem;
			svg {
				$val: 3px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				transition: all 150ms ease;
				&.min-right {
					left: 55%;
					width: 85%;
					transform: translate(-50%,-50%) scaleX(.9);
				}
				&.min-left {
					left: 45%;
					width: 85%;
					transform: translate(-50%,-50%) scaleX(.9);
				}
				&.maj-right {
					left: 65%;
					width: 65%;
					transform: translate(-50%,-50%) scaleX(.8);
				}
				&.maj-left {
					left: 35%;
					width: 65%;
					transform: translate(-50%,-50%) scaleX(.8);
				}
			}
		}
		&.is-active {
			animation: component(icon-active-animation);
			&.icon--home {
				color: component(yellow);
			}
			&.icon--chart {
				color: component(green);
			}
			&.icon--smile {
				color: component(blue);
			}
			&.icon--bell {
				color: component(red);
			}
			&.icon--search {
				color: component(purple);
			}
		}
	}
}

@keyframes bump {
	0% 		{}
	25% 	{ transform: scale(1.15); }
	50% 	{ transform: scale(0.9); }
	75% 	{ transform: scale(1.05); }
	100% { transform: scale(1); }
}

.intro {
	position: absolute;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.3rem;
	text-align: center;
	a {
		$color: #ea4c89;
		display: inline-block;
		color: white;
		background: $color;
		text-decoration: none;
		padding: .4rem .7rem;
		border-radius: .3rem;
		&:hover {
			background: darken($color, 12%);
			@include transition;
		}
		&:focus {
			box-shadow: 0px 0px 0px 3px rgba($color, .4);
		}
	}
}
            
          
!
            
              console.clear();

const icon = document.querySelectorAll('.toolbar__icon');
const smile = document.querySelector('.icon--smile svg');

for(var i = 0; i < icon.length; i++) {
	icon[i].addEventListener('click', function() {
		for(var i = 0; i < icon.length; i++) {
			icon[i].classList.remove('is-active');
			smile.classList.remove('maj-left');
			smile.classList.remove('maj-right');
			smile.classList.remove('min-left');
			smile.classList.remove('min-right');
		}
		this.classList.add('is-active');
		if(this.classList.contains('icon--home')) {
			smile.classList.add('maj-left');
			document.body.classList = 'bg--yellow';
		} else if(this.classList.contains('icon--chart')) {
			smile.classList.add('min-left');
			document.body.classList = 'bg--green';
		} else if(this.classList.contains('icon--bell')) {
			smile.classList.add('min-right');
			document.body.classList = 'bg--red';
		} else if(this.classList.contains('icon--search')) {
			smile.classList.add('maj-right');
			document.body.classList = 'bg--purple';
		} else {
			document.body.classList = 'bg--blue';
		}
	})
}
            
          
!
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.
Loading ..................

Console