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.

            
              input#bluepurple.variation(type="radio" value="1" name="color" checked)
label(for="bluepurple")

input#sunset.variation(type="radio" value="2" name="color")
label(for="sunset")

input#godiva.variation(type="radio" value="3" name="color")
label(for="godiva")

input#dark.variation(type="radio" value="4" name="color")
label(for="dark")

input#pinkaru.variation(type="radio" value="5" name="color")
label(for="pinkaru")

main
	section.colors
		h6 colors
		div.palette.main
			div.palette__main
			- for (var i=0; i<6; i++)
				div.palette__shade
			h5 Primary
		div.palette.secondary
			div.palette__main
			- for (var i=0; i<6; i++)
				div.palette__shade
			h5 Secondary
		div.palette.accent1
			div.palette__main
			- for (var i=0; i<6; i++)
				div.palette__shade
			h5 Accent #1
		div.palette.accent2
			div.palette__main
			- for (var i=0; i<6; i++)
				div.palette__shade
			h5 Accent #2
		div.palette.accent3
			div.palette__main
			- for (var i=0; i<6; i++)
				div.palette__shade
			h5 Accent #3
		div.palette.neutrals
			- for (var i=0; i<8; i++)
				div.palette__shade
			h5 Neutrals
	section.typography
		h6 typography
		div.font-family
			div.font-family-bold
				h1 Aa
				h4 Poppins Bold
			div.font-family-medium
				h1 Aa
				h4 Poppins Medium
			div.font-family-light
				h1 Aa
				h4 Poppins Light
		div.font-example
			div.font-example__headline
				h6.subheader Headlines
				h1 h1 headline
				h2 h2 headline
				h3 h3 headline
				h4 h4 headline
				h5 h5 headline
				h6 h6 headline
			div.font-example__bodytext
				h6.subheader Body Text
				p I think we need to start from scratch. Jazz it up a little bit- use a funky color like purple.
				p
					strong  Can you add a bit of pastel pink and baby blue because the purple alone looks too fancy.
				p
					em  Make the purple more well, purple-er. Try a more powerful colour, it needs to be the same, but totally different.
	section.buttons-wrapper
		h6 Buttons
		div.buttons
			a.button Default Button
			input.button.hover(type="button" value="Hovered Button")
			button.button.active Active Button
			a.button.disabled Disabled Button
			a.button.secondary Secondary Button
			a.button.accent Other Button
			a.button.accent2 Other Button
			a.button.accent3 Another Button
			div
				a.button.medium Medium Button
				a.button.small Smol Button
	section.links
		h6 Links
		.links__sec
			a.link Sample Link
			br
			a.link.hover Hovered Link
		.links__sec
			a.link.primary Sample Link
			br
			a.link.primary.hover Hovered Link
		.links__sec
			a.link.secondary Sample Link
			br
			a.link.secondary.hover Hovered Link
	section.inputs-selects
		h6 Inputs & Selects
		div.inputs
			.input__wrapper
				label.label-form A Normal Input
				input.input-form(type="text" placeholder="Placeholder")
				p.feedback-form A message here.
			.input__wrapper
				label.label-form An Active Input
				input.input-form.active(type="text" placeholder="Placeholder" value="Typing Here...")
			.input__wrapper
				label.label-form A Disabled Input
				input.input-form(type="text" placeholder="Placeholder" disabled)
			.input__wrapper
				label.label-form A Normal Select
				select(type="text" placeholder="Placeholder")
					option(value='1') Option 1
					option(value='2') Option 2		
		div.textarea-select
			.input__wrapper.input-success
				label.label-form A Right Input
				.input__validator
					input.input-form(type="text" placeholder="Placeholder")
					.input__validator__status
				p.feedback-form Awesome job.
			.input__wrapper.input-error
				label.label-form A Left Input
				.input__validator
					input.input-form(type="text" placeholder="Placeholder")
					.input__validator__status
				p.feedback-form You shall not pass.
			.input__wrapper
				label.label-form Textarea
				textarea(type="text" placeholder="Placeholder")
		div.toggle-buttons
			h6.subheader Toggle Buttons
			.checkbox-toggle
				input#toggle-checkbox(type="checkbox")
				label(for="toggle-checkbox")
			.checkbox-toggle
				input#toggle-checkbox-1(type="checkbox" checked)
				label(for="toggle-checkbox-1")
			.checkbox-toggle
				input#toggle-checkbox-2(type="checkbox" disabled)
				label(for="toggle-checkbox-2")
		div.checkboxes
			h6.subheader Checkboxes
			.checkbox
				input#checkbox-1(type="checkbox")
				label(for="checkbox-1") Checkbox
					span.box
			.checkbox
				input#checkbox-2(type="checkbox" checked)
				label(for="checkbox-2") Checked Box
					span.box
		div.radio-buttons
			h6.subheader Radio Buttons
			.radio
				input#radio-1(type="radio" name="radio-test" value="1" checked)
				label(for="radio-1") Radio Button
			.radio
				input#radio-2(type="radio" name="radio-test" value="1")
				label(for="radio-2") Selected Radio Button
	section.badges
		h6 Badges
		span.badge.status-primary Received
		span.badge.status-secondary Pending
		span.badge.status-info Pending
		span.badge.status-success Approved
		span.badge.status-error Rejected
	section.tooltips
		h6 Tooltips
		div
			.tooltip.top.hovered(data-tooltip="Show a helpful tooltip here 😄") 
				span Light Tooltip
			.tooltip.top.dark.hovered(data-tooltip="Show a helpful tooltip here 😄") 
				span Dark Tooltip
			.tooltip.bottom(data-tooltip="Hello 👋") 
				span Bottom Tooltip
	section.alerts
		h6 Alerts
		.alert.status-primary A normal alert here.
		.alert.status-secondary A normal alert here.
		.alert.status-info A normal alert here.
		.alert.status-success A happy alert here.
		.alert.status-error A sad alert here.
	section.loading
		h6 loading indicators
		div.spinner-1
			.spinner(data-loading="Loading...")
			label Please wait...
		div.spinner-2
			.spinner(data-loading="Loading...")
			label Loading...

footer
	.explanation
		| Part of the  
		a(href="https://codepen.io/collection/DQvYpQ" target="_blank") CSS Grid collection here
		| .
	.social
		a(href="https://twitter.com/meowlivia_" target="_blank")
			i.icon-social-twitter.icons
		a(href="https://github.com/oliviale" target="_blank")
			i.icon-social-github.icons
		a(href="https://dribbble.com/oliviale" target="_blank")
			i.icon-social-dribbble.icons
            
          
!
            
              :root {
	--canvasColor: #f9f9f9;
}

body {
	background: var(--canvasColor);
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	line-height: 1.5;
	font-size: 16px;
	text-align: center;
	transition: all .3s ease;
}

* {
	box-sizing: border-box;
}

main {
	--neutralShade1: #f2f2f2;
	--neutralShade2: #e8e9e9;
	--neutralShade3: #d1d3d4;
	--neutralShade4: #babdbf;
	--neutralShade5: #808488;
	--neutralShade6: #666a6d;
	--neutralShade7: #4d5052;
	--neutralShade8: #212122;

	--grayColor: #999;
	--lightGrayColor: #ddd;

	--borderRadius: 6px;
	--boxShadow: 0 2px 5px rgba(#333, 0.2);
}

/*overall layout*/

main {
	width: 90%;
	max-width: 1050px;
	margin: 3em auto 0;
	border: 1px solid var(--accentColor);
	display: grid;
	grid: repeat(5, fit-content(300px)) / repeat(4, 1fr);
	grid-template-areas:
		"colors typography typography typography"
		"colors buttons buttons links"
		"inputs inputs inputs inputs"
		"badges tooltips alerts alerts"
		"loading tooltips alerts alerts";
	color: var(--foregroundColor);
	text-align: left;
}

main > section {
	position: relative;
	> h6 {
		color: var(--accentColor);
		background: var(--canvasColor);
		position: absolute;
		top: -10px;
		left: 20px;
		padding: 0 10px;
	}
	h6.subheader {
		color: var(--grayColor);
		margin-top: 20px;
		margin-bottom: 20px;
		width: 100%;
	}
}

.colors {
	grid-area: colors;
	padding: 30px;
	border: 1px solid var(--accentColor);
	border-width: 0 1px 1px 0;
}

.typography {
	grid-area: typography;
	border-bottom: 1px solid var(--accentColor);
}

.buttons-wrapper {
	grid-area: buttons;
	padding: 30px;
	border-bottom: 1px solid var(--accentColor);
}

.links {
	grid-area: links;
	padding: 30px;
	border: 1px solid var(--accentColor);
	border-width: 0 0 1px 1px;
}

.inputs-selects {
	padding: 40px 30px;
	grid-area: inputs;
	display: grid;
	grid-auto-flow: dense;
	grid: repeat(2, max-content) / repeat(6, 1fr);
	grid-gap: 30px;
	border-bottom: 1px solid var(--accentColor);
	.inputs {
		grid-column: span 3;
	}
	.textarea-select {
		grid-column: span 3;
	}
	.inputs,
	.textarea-select {
		.input__wrapper:last-child {
			margin: 0;
		}
	}
	.toggle-buttons,
	.checkboxes,
	.radio-buttons {
		grid-column: span 2;
	}
}

.badges {
	grid-area: badges;
	padding: 30px 30px 40px;
}

.alerts {
	grid-area: alerts;
	padding: 40px 30px;
}

.tooltips {
	grid-area: tooltips;
	padding: 20px 30px 30px;
	border: 1px solid var(--accentColor);
	border-width: 0 1px;
	.tooltip {
		&:nth-child(-n + 2) {
			margin: 90px 0 20px;
		}
	}
}

.loading {
	grid-area: loading;
	padding: 40px 30px 30px 30px;
	text-align: center;
	border-top: 1px solid var(--accentColor);
	.spinner-2 {
		margin-top: 30px;
	}
}

/*colors*/
.palette {
	display: grid;
	grid: 80px 45px min-content / repeat(5, minmax(50px, 1fr));
	margin-bottom: 1em;
	&__main {
		grid-column: span 5;
	}
	h5 {
		grid-column: span 5;
		text-align: left;
		padding: 10px 0;
	}
	&.main {
		div:nth-child(1) {
			background: var(--primaryColor);
		}
		div:nth-child(2) {
			background: var(--primaryShade1);
		}
		div:nth-child(3) {
			background: var(--primaryShade2);
		}
		div:nth-child(4) {
			background: var(--primaryShade3);
		}
		div:nth-child(5) {
			background: var(--primaryShade4);
		}
		div:nth-child(6) {
			background: var(--primaryShade5);
		}
	}
	&.secondary {
		div:nth-child(1) {
			background: var(--secondaryColor);
		}
		div:nth-child(2) {
			background: var(--secondaryShade1);
		}
		div:nth-child(3) {
			background: var(--secondaryShade2);
		}
		div:nth-child(4) {
			background: var(--secondaryShade3);
		}
		div:nth-child(5) {
			background: var(--secondaryShade4);
		}
		div:nth-child(6) {
			background: var(--secondaryShade5);
		}
	}
	&.accent1 {
		div:nth-child(1) {
			background: var(--accentColor);
		}
		div:nth-child(2) {
			background: var(--accentShade1);
		}
		div:nth-child(3) {
			background: var(--accentShade2);
		}
		div:nth-child(4) {
			background: var(--accentShade3);
		}
		div:nth-child(5) {
			background: var(--accentShade4);
		}
		div:nth-child(6) {
			background: var(--accentShade5);
		}
	}
	&.accent2 {
		div:nth-child(1) {
			background: var(--accent2Color);
		}
		div:nth-child(2) {
			background: var(--accent2Shade1);
		}
		div:nth-child(3) {
			background: var(--accent2Shade2);
		}
		div:nth-child(4) {
			background: var(--accent2Shade3);
		}
		div:nth-child(5) {
			background: var(--accent2Shade4);
		}
		div:nth-child(6) {
			background: var(--accent2Shade5);
		}
	}
	&.accent3 {
		div:nth-child(1) {
			background: var(--accent3Color);
		}
		div:nth-child(2) {
			background: var(--accent3Shade1);
		}
		div:nth-child(3) {
			background: var(--accent3Shade2);
		}
		div:nth-child(4) {
			background: var(--accent3Shade3);
		}
		div:nth-child(5) {
			background: var(--accent3Shade4);
		}
		div:nth-child(6) {
			background: var(--accent3Shade5);
		}
	}
	&.neutrals {
		grid-template-rows: repeat(2, 50px) min-content;
		grid-template-columns: repeat(4, 1fr);
		div:nth-child(1) {
			background: var(--neutralShade1);
		}
		div:nth-child(2) {
			background: var(--neutralShade2);
		}
		div:nth-child(3) {
			background: var(--neutralShade3);
		}
		div:nth-child(4) {
			background: var(--neutralShade4);
		}
		div:nth-child(5) {
			background: var(--neutralShade5);
			grid-row: 2;
		}
		div:nth-child(6) {
			background: var(--neutralShade6);
			grid-row: 2;
		}
		div:nth-child(7) {
			background: var(--neutralShade7);
			grid-row: 2;
		}
		div:nth-child(8) {
			background: var(--neutralShade8);
			grid-row: 2;
		}
	}
}

/*typography*/
strong {
	font-weight: 500;
}

em {
	font-style: italic;
}

h1 {
	font: 700 48px/1.2 "Poppins", sans-serif;
	margin-bottom: 10px;
}

h2 {
	font: 700 32px/1.2 "Poppins", sans-serif;
	margin-bottom: 10px;
}

h3 {
	font: 700 24px/1.2 "Poppins", sans-serif;
	margin-bottom: 10px;
}

h4 {
	font: 700 20px/1.2 "Poppins", sans-serif;
	margin-bottom: 10px;
}

h5 {
	font: 500 18px/1.2 "Poppins", sans-serif;
	margin-bottom: 10px;
}

h6 {
	font: 500 16px/1.2 "Poppins", sans-serif;
	text-transform: uppercase;
}

.font-family {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	> div {
		flex: 1 1 30%;
		padding: 30px 30px 0;
		min-width: 10em;
	}
}

.font-family-medium > * {
	font-weight: 500;
}

.font-family-light > * {
	font-weight: 300;
}

.font-example {
	display: flex;
	flex-wrap: wrap;
	> div {
		flex: 1 1 45%;
		padding: 30px;
		min-width: 16em;
	}
	p {
		margin-bottom: 15px;
	}
}

/*checkboxes*/
input:disabled {
	~ * {
		opacity: 0.3;
		user-select: none;
		pointer-events: none;
	}
}

.checkbox-toggle {
	input {
		display: none;
	}
	label {
		outline: 0;
		display: block;
		width: 45px;
		height: 16px;
		background: var(--grayColor);
		position: relative;
		cursor: pointer;
		border-radius: 2em;
		padding: 2px;
		transition: all 0.4s ease;
		margin: 0.8em;
		&:after {
			position: relative;
			display: block;
			content: "";
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #fff;
			transition: all 0.2s ease;
			border: 1px solid var(--grayColor);
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			left: -4px;
			top: -5px;
		}
	}
	input:checked + label {
		background: var(--accent2Color);
		&:after {
			left: 52%;
		}
	}
}

.checkbox {
	position: relative;
	user-select: none;
	margin-bottom: 10px;
	input {
		display: none;
	}
	label {
		position: relative;
		vertical-align: middle;
		cursor: pointer;
		font-weight: 500;
		padding-left: 35px;
	}
	span.box {
		display: inline-block;
		width: 20px;
		border-radius: var(--borderRadius);
		border: 1px solid var(--grayColor);
		width: 24px;
		height: 24px;
		vertical-align: middle;
		margin-right: 3px;
		transition: 0.3s ease;
		position: absolute;
		left: 0;
		&:before,
		&:after {
			content: "";
			position: absolute;
			width: 4px;
			height: 16px;
			border-radius: 40px;
			background: var(--backgroundColor);
			transition: all 0.3s ease;
		}
		&:before {
			transform: rotate(45deg) translateY(-5px) translateX(10px) scale(0);
		}
		&:after {
			height: 8px;
			transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(0);
		}
	}
	input:checked {
		+ label {
			span.box {
				background: var(--accent2Color);
				border-color: var(--accent2Color);
				&:before {
					transform: rotate(45deg) translateY(-5px) translateX(10px) scale(1);
				}
				&:after {
					height: 8px;
					transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(1);
				}
			}
		}
	}
	input:disabled:checked + span.box {
		background: var(--grayColor);
		border: var(--grayColor);
	}
	input:disabled:checked ~ label {
		&:before,
		&:after {
			background: black;
		}
	}
}

/*radio buttons*/
.radio {
	margin: 10px 0;
	input {
		display: none;
		&:checked + label:after {
			transform: scale(1);
		}
	}
	label {
		position: relative;
		padding-left: 32px;
		cursor: pointer;
		font-weight: 500;
		&:before {
			content: "";
			position: absolute;
			width: 22px;
			height: 22px;
			border: 1px solid var(--grayColor);
			border-radius: 50%;
			left: 0;
			top: 0;
		}
		&:after {
			content: "";
			position: absolute;
			width: 16px;
			height: 16px;
			top: 4px;
			left: 4px;
			background: var(--accent2Color);
			border-radius: 50%;
			transform: scale(0);
			transition: 0.3s ease;
		}
	}
}

/*buttons & links*/

.links {
	&__sec {
		margin: 10px 0 30px;
	}
	a.link {
		display: inline;
		margin: 10px 30px 5px 0;
		border-bottom: 2px dashed;
		font-weight: 500;
		line-height: 2.5;
		cursor: pointer;
		color: var(--neutralShade5);
		&:hover,
		&.hover {
			color: var(--neutralShade6);
			border-bottom: 2px solid;
		}
		&.primary {
			color: var(--primaryColor);
			&:hover,
			&.hover {
				color: var(--primaryShade5);
			}
		}
		&.secondary {
			color: var(--secondaryColor);
			&:hover,
			&.hover {
				color: var(--secondaryShade5);
			}
		}
	}
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	> * {
		flex: 1 1 calc(50% - 20px);
		margin-top: 20px;
		&:nth-child(odd) {
			margin-right: 20px;
		}
	}
}

a.button,
input.button,
button {
	outline: none;
	width: 100%;
	text-align: center;
	display: inline-block;
	border: none;
	font: 500 16px/1 "Poppins", sans-serif;
	padding: 20px;
	cursor: pointer;
	border-radius: var(--borderRadius);
	background: var(--primaryColor);
	color: var(--backgroundColor);
	position: relative;
	top: 0;
	transition: 0.2s ease;
	&:hover,
	&.hover {
		top: -3px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	}
	&:active,
	&.active {
		background: var(--primaryShade4);
		outline: none;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
		top: 0;
	}
	&.disabled {
		opacity: 0.4;
		user-select: none;
		pointer-events: none;
	}
	&.medium {
		padding: 15px 18px;
		width: auto;
		margin-right: 20px;
		margin-bottom: 20px;
	}
	&.small {
		padding: 10px 12px;
		width: auto;
		font-size: 14px;
		font-weight: 500;
	}
	&.secondary {
		background: var(--secondaryColor);
		&:active,
		&:focus,
		&.active {
			background: var(--secondaryShade4);
			outline: none;
		}
	}
	&.accent {
		background: var(--accentColor);
		&:active,
		&:focus,
		&.active {
			background: var(--accentShade4);
		}
	}
	&.accent2 {
		background: var(--accent2Color);
		&:active,
		&:focus,
		&.active {
			background: var(--accent2Shade4);
		}
	}
	&.accent3 {
		background: var(--accent3Color);
		&:active,
		&:focus,
		&.active {
			background: var(--accent3Shade4);
		}
	}
}

/*inputs*/

.input__wrapper {
	margin-bottom: 30px;
}

.label-form {
	font-weight: 500;
	display: block;
	margin-bottom: 5px;
}

input.input-form,
select,
textarea {
	height: 50px;
	font-size: 16px;
	border: 2px solid var(--neutralShade3);
	width: 100%;
	padding: 12px;
	font-family: "Poppins";
	border-radius: var(--borderRadius);
	color: var(--foregroundColor);
	background: var(--backgroundColor);
	&:focus,
	&.active {
		outline: none;
		border-color: var(--primaryColor);
	}
	&:disabled {
		cursor: not-allowed;
		background: var(--neutralShade1);
		opacity: 0.6;
	}
}

textarea {
	resize: vertical;
	min-height: 117px;
}

select {
	height: 45px;
	padding: 8px 12px;
	cursor: pointer;
	option {
		font-weight: 300;
	}
}

.input__validator {
	position: relative;
	&__status {
		position: absolute;
		border-radius: 50%;
		background: purple;
		width: 30px;
		height: 30px;
		right: 10px;
		top: 10px;
		&:before,
		&:after {
			content: "";
			position: absolute;
			width: 4px;
			height: 18px;
			border-radius: 40px;
			background: var(--backgroundColor);
		}
	}
}

.input-error {
	input,
	select,
	textarea {
		border-color: var(--accent3Color);
	}
	.feedback-form {
		color: var(--accent3Shade3);
	}
	.input__validator__status {
		background: var(--accent3Color);
		&:before {
			transform: rotate(45deg) translateY(-5.5px) translateX(13.5px);
		}
		&:after {
			transform: rotate(-45deg) translateY(13.5px) translateX(5.5px);
		}
	}
}

.input-success {
	input,
	select,
	textarea {
		border-color: var(--accent2Color);
	}
	.feedback-form {
		color: var(--accent2Shade4);
	}
	.input__validator__status {
		background: var(--accent2Color);
		&:before {
			transform: rotate(45deg) translateY(-6px) translateX(16px);
		}
		&:after {
			height: 7px;
			transform: rotate(-45deg) translateY(16px) translateX(-5px);
		}
	}
}

.feedback-form {
	margin-top: 5px;
	color: var(--neutralShade6);
}

/*badges*/

.badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 50px;
	font-weight: 500;
	text-transform: uppercase;
	margin: 5px 10px 5px 0;
	line-height: 1;
}

.alert {
	margin-bottom: 15px;
	display: block;
	padding: 10px 15px;
	border-radius: var(--borderRadius);
	font-weight: 500;
	position: relative;
	cursor: pointer;
	&:before,
	&:after {
		content: "";
		position: absolute;
		width: 4px;
		height: 16px;
		border-radius: 40px;
		right: 30px;
		top: 8px;
	}
	&:before {
		transform: rotate(45deg) translateY(-5.5px) translateX(13.5px);
	}
	&:after {
		transform: rotate(-45deg) translateY(13.5px) translateX(5.5px);
	}
}

.status-primary {
	background: var(--primaryShade1);
	color: var(--primaryShade4);
	&:before,
	&:after {
		background: var(--primaryShade4);
	}
}

.status-secondary {
	background: var(--secondaryShade1);
	color: var(--secondaryShade5);
	&:before,
	&:after {
		background: var(--secondaryShade4);
	}
}

.status-info {
	background: var(--accentShade1);
	color: var(--accentShade4);
	&:before,
	&:after {
		background: var(--accentShade4);
	}
}

.status-success {
	background: var(--accent2Shade1);
	color: var(--accent2Shade4);
	&:before,
	&:after {
		background: var(--accent2Shade4);
	}
}

.status-error {
	background: var(--accent3Shade1);
	color: var(--accent3Shade4);
	&:before,
	&:after {
		background: var(--accent3Shade4);
	}
}

/*tooltips*/

.tooltip {
	cursor: pointer;
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	z-index: 10;
	span {
		border-bottom: 1px dotted;
	}
	&:after {
		content: attr(data-tooltip);
		background: var(--neutralShade2);
		max-width: 90%;
		width: auto;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		opacity: 0;
		height: auto;
		font-size: 14px;
		padding: 10px;
		border-radius: var(--borderRadius);
		color: var(--foregroundColor);
		text-align: center;
	}
	&.dark:after {
		background: var(--neutralShade7);
		color: var(--backgroundColor);
	}
	&.top {
		&:after {
			bottom: 80%;
			transition: opacity 0.3s ease 0.3s,
				bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
		}
		&:hover,
		&.hovered {
			&:after {
				bottom: 130%;
				opacity: 1;
			}
		}
	}
	&.bottom {
		&:after {
			top: 80%;
			transition: opacity 0.3s ease 0.3s,
				top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
		}
		&:hover,
		&.hovered {
			&:after {
				top: 130%;
				opacity: 1;
			}
		}
	}
}

/*spinner*/

.spinner + label {
	font-size: 14px;
	font-weight: 500;
	margin-top: 8px;
	display: inline-block;
	text-transform: uppercase;
	color: var(--primaryShade4);
}

.spinner-1 .spinner {
	max-width: 50px;
	margin: auto;
	height: 20px;
	position: relative;
	&:after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		left: -10%;
		background: var(--primaryColor);
		animation: spinnerLeftRight 0.6s infinite;
	}
	&:before {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		left: -10%;
		background: var(--primaryShade2);
		opacity: 1;
		animation: spinnerLeftRight 0.6s infinite 0.06s;
	}
}

.spinner-2 .spinner {
	width: 90%;
	margin: auto;
	height: 10px;
	background: var(--neutralShade2);
	border-radius: 40px;
	position: relative;
	&:before {
		content: "";
		border-radius: inherit;
		position: absolute;
		width: 10%;
		height: 100%;
		left: 0;
		background: var(--primaryColor);
		opacity: 1;
		animation: spinnerFill 5s infinite;
	}
}

@keyframes spinnerLeftRight {
	0% {
		left: 85%;
	}
	50% {
		left: -10%;
	}
	100% {
		left: 85%;
	}
}

@keyframes spinnerFill {
	0% {
		width: 2%;
	}
	50%,
	100% {
		width: 100%;
	}
}

@media (max-width: 992px) {
	main {
		grid: repeat(9, fit-content(300px)) / 100%;
		grid-template-areas:
			"colors"
			"typography"
			"buttons"
			"links"
			"inputs"
			"badges"
			"tooltips"
			"alerts"
			"loading";
		> section:not(:last-child) {
			border: 1px solid var(--accentColor);
			border-width: 0 0 1px;
		}
		> section:last-child {
			border-width: 0;
		}
	}
	.typography,
	.buttons-wrapper {
		padding-bottom: 40px;
	}
	.tooltips {
		padding-bottom: 60px;
	}
	.inputs-selects .inputs,
	.inputs-selects .textarea-select {
		grid-column: span 6;
	}
	.inputs-selects .toggle-buttons,
	.inputs-selects .checkboxes,
	.inputs-selects .radio-buttons {
		grid-column: span 3;
	}
}

/*variations*/
input.variation {
	display: none;
	+ label {
		display: inline-block;
		width: 50px;
		height: 50px;
		margin: 30px 20px 0;
		border-radius: 50%;
		cursor: pointer;
		border: 6px solid #fff;
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
	}
}

@media (min-width: 500px) {
	input.variation + label {
		margin: 70px 20px 20px;
	}
}

#bluepurple {
	+ label {
		background: linear-gradient(to left, #673ab7 50%, #03a9f4 50%);
	}
	&:checked ~ main {
		--backgroundColor: #fff;
		--foregroundColor: #111;
		--primaryColor: #03a9f4;
		--primaryShade1: #e1f5fe;
		--primaryShade2: #b3e5fc;
		--primaryShade3: #4fc3f7;
		--primaryShade4: #0288d1;
		--primaryShade5: #0277bd;
		--secondaryColor: #673ab7;
		--secondaryShade1: #ede7f6;
		--secondaryShade2: #d1c4e9;
		--secondaryShade3: #9575cd;
		--secondaryShade4: #512da8;
		--secondaryShade5: #311b92;
		--accentColor: #009688;
		--accentShade1: #e0f2f1;
		--accentShade2: #b2dfdb;
		--accentShade3: #4db6ac;
		--accentShade4: #00796b;
		--accentShade5: #004d40;
		--accent2Color: #8bc34a;
		--accent2Shade1: #e7f6d5;
		--accent2Shade2: #c5e1a5;
		--accent2Shade3: #aed581;
		--accent2Shade4: #689f38;
		--accent2Shade5: #558b2f;
		--accent3Color: #f44336;
		--accent3Shade1: #ffdde0;
		--accent3Shade2: #ffcdd2;
		--accent3Shade3: #ef9a9a;
		--accent3Shade4: #d32f2f;
		--accent3Shade5: #b71c1c;
	}
}

#sunset {
	+ label {
		background: linear-gradient(to right, #ff9557 50%, #ffcc67 50%);
	}
	&:checked ~ main {
		--canvasColor: #f9f9f9;
		--backgroundColor: #fff;
		--foregroundColor: #111;
		--primaryColor: #ff9557;
		--primaryShade1: #ffe2d1;
		--primaryShade2: #ffceb2;
		--primaryShade3: #ffb184;
		--primaryShade4: #e88850;
		--primaryShade5: #d17a48;
		--secondaryColor: #ffcc67;
		--secondaryShade1: #fff1d5;
		--secondaryShade2: #ffde9e;
		--secondaryShade3: #ffd074;
		--secondaryShade4: #e8ba5e;
		--secondaryShade5: #ba954b;
		--accentColor: #4e5166;
		--accentShade1: #cecfd5;
		--accentShade2: #aeafb9;
		--accentShade3: #8e909d;
		--accentShade4: #6e7081;
		--accentShade5: #404354;
		--accent2Color: #588b8b;
		--accent2Shade1: #c2d4d4;
		--accent2Shade2: #a3bfbf;
		--accent2Shade3: #85aaaa;
		--accent2Shade4: #507f7f;
		--accent2Shade5: #497272;
		--accent3Color: #fe5f55;
		--accent3Shade1: #fec4c1;
		--accent3Shade2: #fea7a2;
		--accent3Shade3: #fe7c73;
		--accent3Shade4: #e7574e;
		--accent3Shade5: #b9463e;
	}
}

#godiva {
	+ label {
		background: linear-gradient(to right, #a05793 50%, #a3d858 50%);
	}
	&:checked ~ main {
		--canvasColor: #f9f9f9;
		--backgroundColor: #fff;
		--foregroundColor: #111;

		--primaryColor: #a05793;
		--primaryShade1: #e5d1e1;
		--primaryShade2: #d3b2cd;
		--primaryShade3: #b984b0;
		--primaryShade4: #925086;
		--primaryShade5: #834879;

		--secondaryColor: #a3d858;
		--secondaryShade1: #e5f4d1;
		--secondaryShade2: #cce9a3;
		--secondaryShade3: #bce285;
		--secondaryShade4: #95c550;
		--secondaryShade5: #779e41;

		--accentColor: #245e71;
		--accentShade1: #d7e1e5;
		--accentShade2: #afc4cb;
		--accentShade3: #7398a4;
		--accentShade4: #4b7b8a;
		--accentShade5: #1e4d5d;

		--accent2Color: #2aa5a1;
		--accent2Shade1: #d8eeed;
		--accent2Shade2: #9ed6d4;
		--accent2Shade3: #64bdba;
		--accent2Shade4: #279693;
		--accent2Shade5: #1f7976;

		--accent3Color: #92374d;
		--accent3Shade1: #ebdad3;
		--accent3Shade2: #cda4ae;
		--accent3Shade3: #af6d7d;
		--accent3Shade4: #853246;
		--accent3Shade5: #6b2939;
	}
}

#dark {
	+ label {
		background: linear-gradient(to right, #367bc3 50%, #38bfa7 50%);
	}
	&:checked ~ main {
		--canvasColor: #2a313b;
		--backgroundColor: #2a313b;
		--foregroundColor: #ebe8d8;

		--primaryColor: #367bc3;
		--primaryShade5: #b5cfe9;
		--primaryShade4: #91b7de;
		--primaryShade3: #5a93cd;
		--primaryShade2: #3270b2;
		--primaryShade1: #285a8e;

		--secondaryColor: #38bfa7;
		--secondaryShade5: #c8ede7;
		--secondaryShade4: #92dccf;
		--secondaryShade3: #6ed0be;
		--secondaryShade2: #33ae98;
		--secondaryShade1: #2e9d89;

		--accentColor: #586994;
		--accentShade5: #d1d6e1;
		--accentShade4: #a3adc4;
		--accentShade3: #7684a7;
		--accentShade2: #49567a;
		--accentShade1: #39435f;

		--accent2Color: #8fe1a2;
		--accent2Shade5: #d6f4dd;
		--accent2Shade4: #c1eecc;
		--accent2Shade3: #a3e6b2;
		--accent2Shade2: #82cd94;
		--accent2Shade1: #76b985;

		--accent3Color: #fe938c;
		--accent3Shade5: #fee1df;
		--accent3Shade4: #fec4c0;
		--accent3Shade3: #fea6a0;
		--accent3Shade2: #e78680;
		--accent3Shade1: #b96b66;
		color: #f1f2eb;
		border-color: #f1f2eb;
		> section {
			border-color: #f1f2eb;
			> h6 {
				color: #f1f2eb;
			}
		}
	}
}

#pinkaru {
	+ label {
		background: linear-gradient(to right, #f95794 50%, #323da5 50%);
	}
	&:checked ~ main {
		border-color: #fff;
		> section {
			border-color: #fff;
			> h6 {
				color: #fff;
			}
		}
		--canvasColor: #2a313b;
		--backgroundColor: #2a313b;
		--foregroundColor: #e3f2fd;

		--primaryColor: #f95794;
		--primaryShade5: #fdd1e1;
		--primaryShade4: #fba3c4;
		--primaryShade3: #fa75a7;
		--primaryShade2: #e35087;
		--primaryShade1: #b6406c;

		--secondaryColor: #323da5;
		--secondaryShade5: #c7cae6;
		--secondaryShade4: #8f95cd;
		--secondaryShade3: #6971bd;
		--secondaryShade2: #2e3896;
		--secondaryShade1: #293288;

		--accentColor: #FFC729;
		--accentShade5: #ffefc4;
		--accentShade4: #ffe08a;
		--accentShade3: #ffd14f;
		--accentShade2: #e8b526;
		--accentShade1: #d1a322;

		--accent2Color: #53dd6c;
		--accent2Shade5: #d0f5d6;
		--accent2Shade4: #a1ecae;
		--accent2Shade3: #72e386;
		--accent2Shade2: #4cc963;
		--accent2Shade1: #3da14f;

		--accent3Color: #f52f57;
		--accent3Shade5: #fcc6d1;
		--accent3Shade4: #f98da3;
		--accent3Shade3: #f65475;
		--accent3Shade2: #df2b50;
		--accent3Shade1: #b32340;
	}
}

#dark,
#pinkaru {
	&:checked ~ main {
		h6.subheader,
		.feedback-form {
			color: var(--neutralShade1);
		}
		::placeholder {
			color: var(--neutralShade4);
			opacity: 1;
		}
		:-ms-input-placeholder {
			color: var(--neutralShade4);
		}
		::-ms-input-placeholder {
			color: var(--neutralShade4);
		}
		.tooltip:after {
			color: var(--backgroundColor);
		}
		a.button,
		input.button,
		button,
		.tooltip.dark:after {
			color: var(--foregroundColor);
			text-shadow: 0 1px 2px rgba(0,0,0,0.1);
		}
		.button:active, .button.active {
			background: var(--primaryShade1);
		}
		.button.secondary:active, .button.secondary.active {
			background: var(--secondaryShade1);
		}
		.button.accent {
			background: var(--accentShade2);
			&:active {
				background: var(--accentShade1);
			}
		}
		.button.accent2 {
			background: var(--accent2Shade2);
			&:active {
				background: var(--accent2Shade1);
			}
		}
		.button.accent3 {
			background: var(--accent3Shade2);
			&:active {
				background: var(--accent3Shade1);
			}
		}
		a.link {
		color: var(--neutralShade2);
		&:hover,
		&.hover {
			color: var(--neutralShade1);
			border-bottom: 2px solid;
		}
		&.primary {
			color: var(--primaryShade4);
			&:hover,
			&.hover {
				color: var(--primaryShade5);
			}
		}
		&.secondary {
			color: var(--secondaryShade4);
			&:hover,
			&.hover {
				color: var(--secondaryShade5);
			}
		}
	}
	}
}


footer {
	display: grid;
	grid: min-content / 1fr max-content;
	text-align: left;
	width: 90%;
	margin: 1em auto 4em;
	max-width: 1050px;
	align-items: center;
	a {
		text-decoration: none;
		color: #333;
		padding: 3px 0;
		border-bottom: 1px dashed;
		&:hover {
			border-bottom: 1px solid;
		}
	}
	.social a {
		text-decoration: none;
		margin-left: 10px;
		.icons {
			display: inline-block;
			font-size: 20px;
		}
	}
	&.dark, &.dark a {
		color: #f9f9f9;
	}
}
            
          
!
            
              //the alert is collapsible yay
$(".alert").on("click", function() {
	$(this).hide("slow");
});

//apprearance
$("input.variation").on("click", function() {
	if ($(this).val() > 3) {
		$("body").css("background", "#2a313b");
		$("footer").attr('class','dark');
	} else {
		$("body").css("background", "#f9f9f9");
		$("footer").attr('class','');
	}
});

            
          
!
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