<link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet"> 


<link id="theme-id" class="syntax-js" rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.10/build/styles/atom-one-light.min.css">

<body class="wrapper">
	<div class="header">
		<button class="toggle-button">
			<ion-icon id="dark-mode-icon" class="moon" name="moon"></ion-icon>
    	</button>
		<div class="code-toggles">
			<button class="toggle-button scss-tray-button">
			<ion-icon id="" class="sass" name="logo-sass"></ion-icon>
		</button>
			<button class="toggle-button css-tray-button">
			<ion-icon id="" class="css-icon " name="logo-css3"></ion-icon>
		</button>

		</div>

	</div>
	<div class="css-tray tray-toggle-hidden">
		<pre>
<code class=" code-output">

/* Global button properties */  
button {
    min-width: 150px;
    padding: 1rem;
    font-size: 16px;
    letter-spacing: 1px;
    border-width: 2px;
    border-radius: 0px;
    font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica Neue,
        Helvetica, Arial, sans-serif;
    transition: 0.2s;
    }
    /* Remove annoying default properties */
    button:focus { 
        outline: none;
    }
    button:active {
        border-style: solid;
    }

/* Individual border properties */
button.set-1 {
  border-width: 2px;
  border-style: solid;
  border-radius: 0px;
}

button.set-2 {
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
}

button.set-3 {
  border-width: 2px;
  border-style: solid;
  border-radius: 50px;
}

button.set-4 {
  border-width: 2px;
  border-style: solid;
  border-radius: 25% 10%;
}
/* Individual button colour properties --light mode */
.button.primary {
  color: #5183f5;
  border-color: #5183f5;
  background: #e2eafd;
}
.button.primary:hover {
  border-color: #5183f5;
  background: #b1c8fb;
}
.button.primary:active {
  border-color: #2161f2;
  background: #5183f5;
  color: white;
}
.button.secondary {
  color: #f59551;
  border-color: #f59551;
  background: #fdede2;
}
.button.secondary:hover {
  border-color: #f27821;
  background: #fbd0b1;
}
.button.secondary:active {
  border-color: #f27821;
  background: #f59551;
  color: white;
}
.button.success {
  color: #0cd498;
  border-color: #51f5c4;
  background: #e2fdf5;
}
.button.success:hover {
  border-color: #21f2b4;
  background: #b1fbe5;
}
.button.success:active {
  border-color: #21f2b4;
  background: #51f5c4;
  color: white;
}
.button.error {
  color: #f55169;
  border-color: #f55169;
  background: #fde2e6;
}
.button.error:hover {
  border-color: #f2213f;
  background: #fbb1bc;
}
.button.error:active {
  border-color: #f2213f;
  background: #f55169;
  color: white;
}
.button.warning {
  color: #f2b221;
  border-color: #f5c351;
  background: #fdf5e2;
}
.button.warning:hover {
  border-color: #f2b221;
  background: #fbe4b1;
}
.button.warning:active {
  border-color: #f2b221;
  background: #f5c351;
  color: white;
}
.button.neutral {
  color: #919191;
  border-color: #9e9e9e;
  background: #ebebeb;
}
.button.neutral:hover {
  border-color: #858585;
  background: #d1d1d1;
}
.button.neutral:active {
  border-color: #858585;
  background: #9e9e9e;
  color: white;
}

/* Individual button colour properties -- dark mode */
.dark .button.primary {
  color: #5183f5;
  border-color: #5183f5;
  background: transparent;
}
.dark .button.primary:hover {
  border-color: #5183f5;
  background: black;
}
.dark .button.primary:active {
  border-color: #0c49d4;
  background: black;
}
.dark .button.secondary {
  color: #f59551;
  border-color: #f59551;
  background: transparent;
}
.dark .button.secondary:hover {
  border-color: #f27821;
  background: #1d0d02;
}
.dark .button.secondary:active {
  border-color: #f27821;
  background: black;
}
.dark .button.success {
  color: #0cd498;
  border-color: #51f5c4;
  background: transparent;
}
.dark .button.success:hover {
  border-color: #21f2b4;
  background: #01130e;
}
.dark .button.success:active {
  border-color: #21f2b4;
  background: black;
}
.dark .button.error {
  color: #f55169;
  border-color: #f55169;
  background: transparent;
}
.dark .button.error:hover {
  border-color: #f2213f;
  background: #1d0206;
}
.dark .button.error:active {
  border-color: #f2213f;
  background: #090102;
}
.dark .button.warning {
  color: #f2b221;
  border-color: #f5c351;
  background: transparent;
}
.dark .button.warning:hover {
  border-color: #f2b221;
  background: #2b1f02;
}
.dark .button.warning:active {
  border-color: #f2b221;
  background: #130d01;
}
.dark .button.neutral {
  color: #919191;
  border-color: #9e9e9e;
  background: transparent;
}
.dark .button.neutral:hover {
  border-color: #858585;
  background: #1f1f1f;
}
.dark .button.neutral:active {
  border-color: #858585;
  background: #121212;
}
</code>
</pre>
	</div>
	<div class="scss-tray tray-toggle-hidden">
		<pre>
		<code class="code-output">
/* Variables */

// Button colours
$blue: #5183f5;
$red: #f55169;
$yellow: #f5c351;
$green: #51f5c4;
$orange: #f59551;
$grey: #9e9e9e;

/* Mixins */

// Remove defaults
@mixin purge-defaults {
	button {
		&:focus {
			outline: none;
		}
	}
}

// Global button properties
@mixin button-skeleton {
	min-width: 150px;
	padding: 1rem;
	font-size: 16px;
	letter-spacing: 1px;
}

// Colours
@mixin colours( $button-border-colour, $button-background-colour ) {
	border-color: $button-border-colour;
	background: $button-background-colour;
}

// Borders
@mixin button-borders( $width, $radius, $style ) {
	border-width: $width;
	border-style: $style;
	border-radius: $radius;
}

/* Application */

// Applying border radii 

// Squared

button.set-1 {
	@include button-borders(2px, 0px, solid);
}

// Rounded

button.set-2 {
	@include button-borders(2px, 8px, solid);
}

// Circular

button.set-3 {
	@include button-borders(2px, 50px, solid);
}

button.set-4 {
	@include button-borders(2px, 25% 10%, solid);
}


// Applying lightmode colours 
.button {
	@include button-skeleton;
	transition: 0.2s;
	&.primary {
		color: $blue;
		@include colours($blue, lighten($blue, 30%));
		&:hover {
			@include colours($blue, lighten($blue, 20%));
		}
		&:active {
			@include colours(darken($blue,10%), $blue);
			color: white;
		}
	}
	&.secondary {
		color: $orange;
		@include colours($orange, lighten($orange, 30%) );
		&:hover {
			@include colours(darken($orange,10%), lighten($orange, 20%) );
		}
		&:active {
			@include colours(darken($orange,10%), $orange);
			color: white;
		}
	}
	&.success {
		color: darken($green, 20%);
		@include colours($green, lighten($green, 30%) );
		&:hover {
			@include colours(darken($green,10%), lighten($green, 20%) );
		}
		&:active {
			@include colours(darken($green,10%), $green);
			color: white;
		}
	}
	&.error {
		color: $red;
		@include colours($red, lighten($red, 30%) );
		&:hover {
			@include colours(darken($red,10%), lighten($red, 20%) );
		}
		&:active {
			@include colours(darken($red,10%), $red);
			color: white;
		}
	}
	&.warning {
		color: darken($yellow, 10%);
		@include colours($yellow, lighten($yellow, 30%) );
		&:hover {
			@include colours(darken($yellow,10%), lighten($yellow, 20%) );
		}
		&:active {
			@include colours(darken($yellow,10%), $yellow);
			color: white;
		}
	}
	&.neutral {
		color: darken($grey, 5%);
		@include colours($grey, lighten($grey, 30%) );
		&:hover {
			@include colours(darken($grey,10%), lighten($grey, 20%) );
		}
		&:active {
			@include colours(darken($grey,10%), $grey);
			color: white;
		}
	}
}

// Applying dark mode colors 
.dark {
	background: #212121;
	color: #e0e0e0;
	.css-tray{
		background: transparent;
		color: #BDBDBD;

}
	.button {
		@include button-skeleton;
		transition: 0.2s;
		&.primary {
			color: $blue;
			@include colours($blue, transparent);
			&:hover {
				@include colours($blue, darken($blue, 80%));
			}
			&:active {
				@include colours(darken($blue,20%), darken($blue, 100%) );
				
			}
		}
		&.secondary {
			color: $orange;
			@include colours($orange, transparent);
			&:hover {
				@include colours(darken($orange,10%), darken($orange, 58%) );
			}
			&:active {
				@include colours(darken($orange,10%), darken($orange, 90%));
				
			}
		}
		&.success {
			color: darken($green, 20%);
			@include colours($green, transparent );
			&:hover {
				@include colours(darken($green,10%), darken($green, 60%) );
			}
			&:active {
				@include colours(darken($green,10%), darken($green, 100%));
				
			}
		}
		&.error {
			color: $red;
			@include colours($red, transparent );
			&:hover {
				@include colours(darken($red,10%), darken($red, 58%) );
			}
			&:active {
				@include colours(darken($red,10%), darken($red, 62%));
				
			}
		}
		&.warning {
			color: darken($yellow, 10%);
			@include colours($yellow, transparent );
			&:hover {
				@include colours(darken($yellow,10%), darken($yellow, 55%) );
			}
			&:active {
				@include colours(darken($yellow,10%), darken($yellow, 60%));
				
			}
		}
		&.neutral {
			color: darken($grey, 5%);
			@include colours($grey, transparent);
			&:hover {
				@include colours(darken($grey,10%), darken($grey, 50%) );
			}
			&:active {
				@include colours(darken($grey,10%), darken($grey, 55%));
			}
		}
	}
}


		</code>
	</pre>
	</div>
	<!-- Set One -->
	<div class="controls">
		<div class="title">
			<h2 style="text-align:center;letter-spacing: 1px;">
				Set 1 &middot; Squared
			</h2>
		</div>
	</div>

	<div class="grid set-one">
		<div class="cell">
			<button class="button  set-1 primary">Primary</button>
		</div>
		<div class="cell">
			<button class="button set-1 secondary">Secondary</button>
		</div>
		<div class="cell">
			<button class="button  set-1 success">Success</button>
		</div>
		<div class="cell">
			<button class="button set-1 error">Error</button>
		</div>
		<div class="cell">
			<button class="button set-1 warning">Warning</button>
		</div>
		<div class="cell">
			<button class="button set-1 neutral">Neutral</button>
		</div>
	</div>

	<!-- Set Two -->
	<div class="controls subsequent">
		<div class="title">
			<h2 style="text-align:center;letter-spacing: 1px;">
				Set 2 &middot; Rounded
			</h2>
		</div>
	</div>

	<div class="grid set-two">
		<div class="cell">
			<button class="button set-2 primary">Primary</button>
		</div>
		<div class="cell">
			<button class="button set-2 secondary">Secondary</button>
		</div>
		<div class="cell">
			<button class="button set-2 success">Success</button>
		</div>
		<div class="cell">
			<button class="button set-2 error">Error</button>
		</div>
		<div class="cell">
			<button class="button set-2 warning">Warning</button>
		</div>
		<div class="cell">
			<button class="button set-2 neutral">Neutral</button>
		</div>
	</div>

	<!-- Set Three -->
	<div class="controls subsequent">
		<div class="title">
			<h2 style="text-align:center;letter-spacing: 1px;">
				Set 3 &middot; Circular
			</h2>
		</div>
	</div>

	<div class="grid set-three">
		<div class="cell">
			<button class="button set-3 primary">Primary</button>
		</div>
		<div class="cell">
			<button class="button set-3 secondary">Secondary</button>
		</div>
		<div class="cell">
			<button class="button set-3 success">Success</button>
		</div>
		<div class="cell">
			<button class="button set-3 error">Error</button>
		</div>
		<div class="cell">
			<button class="button set-3 warning">Warning</button>
		</div>
		<div class="cell">
			<button class="button set-3 neutral">Neutral</button>
		</div>
	</div>

	<!-- Set Four -->
	<div class="controls subsequent">
		<div class="title">
			<h2 style="text-align:center;letter-spacing: 1px;">
				Set 4 &middot; Irregular
			</h2>
		</div>
	</div>
	</div>

	<div class="grid set-three">
		<div class="cell">
			<button class="button set-4 primary">Primary</button>
		</div>
		<div class="cell">
			<button class="button set-4 secondary">Secondary</button>
		</div>
		<div class="cell">
			<button class="button set-4 success">Success</button>
		</div>
		<div class="cell">
			<button class="button set-4 error">Error</button>
		</div>
		<div class="cell">
			<button class="button set-4 warning">Warning</button>
		</div>
		<div class="cell">
			<button class="button set-4 neutral">Neutral</button>
		</div>
	</div>
</body>
// ------------------------------------------------------------------------- //
/* Page layout & structuring */
/* Typography*/
body {
	font-family: 'PT Sans';
}

code,
pre {
	font-family: "Monoid", monospace;
	font-weight: normal;
}

.code-output,
.scss {
	font-size: 11px;
}

.wrapper {
	margin: 1rem;
	color: #404040;
}

.header {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

// Controls
.controls {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 2px dotted #404040;
	margin-bottom: 20px;
	&.subsequent {
		margin-top: 40px;
	}
}

.moon {
	color: #fbc02d;
	font-size: 28px;
}


.moon:active {
    font-size: 24px;
}

.moon:focus {
   font-size: 26px;
}

.sass {
	font-size: 28px;
	color: #ec407a;
}

.css-icon {
	color: #2979ff;
	font-size: 28px;
}

.emoji {
	font-size: 22px;
}

.toggle-button {
	background: transparent;
	box-shadow: none;
	outline: none;
	border: none;
	&:focus {
		outline: none;
	}
}

// CSS Output

.css-tray,
.scss-tray {
	background: transparent;
	height: 0px;
	opacity: 0;
	transition: all 0.4s ease;
	.code-output {
		display: none;
	}
}

.css-tray--active,
.scss-tray--active {
	height: 500px;
	margin-bottom: 50px;
	opacity: 1;
	overflow-y: scroll;
	height: 400px;
	display: block;
	.code-output {
		display: block;
	}
}

// Grid layout
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, auto));
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	justify-items: center;
}

// ------------------------------------------------------------------------- //
/* Button controls */

/* Global button properties */

// General colours

// Button Colours
$blue: #5183f5;
$red: #f55169;
$yellow: #f5c351;
$green: #51f5c4;
$orange: #f59551;
$grey: #9e9e9e;

// Positioning
@mixin positioning {
	display: flex;
}

// Remove defaults
@mixin purge-defaults {
	button {
		&:focus {
			outline: none;
			//shadow:none;
		}
	}
}

.cell {
	@include positioning;
	@include purge-defaults;
}

/* Local button properties -- Common */

// Basics
@mixin button-skeleton {
	min-width: 150px;
	padding: 1rem;
	font-size: 16px;
	letter-spacing: 1px;
	cursor: pointer;
}

// Colours
@mixin colours($button-border-colour, $button-background-colour) {
	border-color: $button-border-colour;
	background: $button-background-colour;
}

// Borders
@mixin button-borders($width, $radius, $style) {
	border-width: $width;
	border-style: $style;
	border-radius: $radius;
}

// Colours, applied

.button {
	font-family: "PT Sans";
	@include button-skeleton;
	transition: 0.2s;
	&.primary {
		color: $blue;
		@include colours($blue, lighten($blue, 30%));
		&:hover {
			@include colours($blue, lighten($blue, 20%));
		}
		&:active {
			@include colours(darken($blue,10%), $blue);
			color: white;
		}
	}
	&.secondary {
		color: $orange;
		@include colours($orange, lighten($orange, 30%) );
		&:hover {
			@include colours(darken($orange,10%), lighten($orange, 20%) );
		}
		&:active {
			@include colours(darken($orange,10%), $orange);
			color: white;
		}
	}
	&.success {
		color: darken($green, 20%);
		@include colours($green, lighten($green, 30%) );
		&:hover {
			@include colours(darken($green,10%), lighten($green, 20%) );
		}
		&:active {
			@include colours(darken($green,10%), $green);
			color: white;
		}
	}
	&.error {
		color: $red;
		@include colours($red, lighten($red, 30%) );
		&:hover {
			@include colours(darken($red,10%), lighten($red, 20%) );
		}
		&:active {
			@include colours(darken($red,10%), $red);
			color: white;
		}
	}
	&.warning {
		color: darken($yellow, 10%);
		@include colours($yellow, lighten($yellow, 30%) );
		&:hover {
			@include colours(darken($yellow,10%), lighten($yellow, 20%) );
		}
		&:active {
			@include colours(darken($yellow,10%), $yellow);
			color: white;
		}
	}
	&.neutral {
		color: darken($grey, 5%);
		@include colours($grey, lighten($grey, 30%) );
		&:hover {
			@include colours(darken($grey,10%), lighten($grey, 20%) );
		}
		&:active {
			@include colours(darken($grey,10%), $grey);
			color: white;
		}
	}
}

/* Local button properties -- Unique */

// Squared

button.set-1 {
	@include button-borders(2px, 0px, solid);
}

// Rounded

button.set-2 {
	@include button-borders(2px, 8px, solid);
}

// Circular

button.set-3 {
	@include button-borders(2px, 50px, solid);
}

button.set-4 {
	@include button-borders(2px, 25% 10%, solid);
}
// Dark styles

.dark {
	background: #212121;
	color: #e0e0e0;
	.css-tray {
		background: transparent;
		color: #bdbdbd;
	}
	.button {
		@include button-skeleton;
		transition: 0.2s;
		&.primary {
			color: $blue;
			@include colours($blue, transparent);
			&:hover {
				@include colours($blue, darken($blue, 80%));
			}
			&:active {
				@include colours(darken($blue,20%), darken($blue, 100%) );
			}
		}
		&.secondary {
			color: $orange;
			@include colours($orange, transparent);
			&:hover {
				@include colours(darken($orange,10%), darken($orange, 58%) );
			}
			&:active {
				@include colours(darken($orange,10%), darken($orange, 90%));
			}
		}
		&.success {
			color: darken($green, 20%);
			@include colours($green, transparent );
			&:hover {
				@include colours(darken($green,10%), darken($green, 60%) );
			}
			&:active {
				@include colours(darken($green,10%), darken($green, 100%));
			}
		}
		&.error {
			color: $red;
			@include colours($red, transparent );
			&:hover {
				@include colours(darken($red,10%), darken($red, 58%) );
			}
			&:active {
				@include colours(darken($red,10%), darken($red, 62%));
			}
		}
		&.warning {
			color: darken($yellow, 10%);
			@include colours($yellow, transparent );
			&:hover {
				@include colours(darken($yellow,10%), darken($yellow, 55%) );
			}
			&:active {
				@include colours(darken($yellow,10%), darken($yellow, 60%));
			}
		}
		&.neutral {
			color: darken($grey, 5%);
			@include colours($grey, transparent);
			&:hover {
				@include colours(darken($grey,10%), darken($grey, 50%) );
			}
			&:active {
				@include colours(darken($grey,10%), darken($grey, 55%));
			}
		}
	}
}
var toggle = document.querySelector("button.toggle-button");
var wrapper = document.querySelector(".wrapper");
var darkModeIcon = document.getElementById("dark-mode-icon");
var themeID = document.getElementById("theme-id");
var theme = document.querySelector(".syntax-js");
var cssToggle = document.querySelector("button.css-tray-button");
var cssTray = document.querySelector("div.css-tray");
var scssTray = document.querySelector("div.scss-tray");
var scssToggle = document.querySelector("button.scss-tray-button");

function toggleClass() {
	wrapper.classList.toggle("dark");
	if (darkModeIcon.name == "moon") {
		darkModeIcon.name = "sunny";
	} else {
		darkModeIcon.name = "moon";
	}
}

function changeTheme() {
	if (darkModeIcon.name == "sunny") {
		themeID.href =
			"//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.10/build/styles/atom-one-dark.min.css";
	} else {
		themeID.href =
			"//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.10/build/styles/atom-one-light.min.css";
	}
}

// Toggle dark mode
function toggleDarkMode() {
	toggleClass();
	changeTheme();
}

toggle.addEventListener("click", toggleDarkMode);

// CSS tray controls

function opencloseSCSSTray() {
	scssTray.classList.toggle("scss-tray--active");
}

scssToggle.addEventListener("click", opencloseSCSSTray);

function opencloseCSSTray() {
	cssTray.classList.toggle("css-tray--active");
}

cssToggle.addEventListener("click", opencloseCSSTray);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.