Extending WordPress admin core UI button and input fields

input.scss

/**
 * Extend Core UI Button Style And Size for custom dashboard
 * @version 1.0.0
 * @copyright KD <[email protected]>
 * @license MIT
 * @see https://github.com/markjaquith/WordPress/blob/master/wp-admin/css/colors/_admin.scss
 * @see https://github.com/markjaquith/WordPress/blob/master/wp-admin/css/colors/_mixins.scss
 * @todo input styles
 */
@mixin button( $button-color, $text-color: #fff ) {
	background: $button-color;
	border-color: $button-color;
	color: $text-color;
	> svg {
		fill: $text-color;
	}
	&:hover,
	&:focus {
		background: lighten( $button-color, 3% );
		border-color: darken( $button-color, 3% );
		color: $text-color;
		> svg {
			fill: $text-color;
		}
	}

	&:focus {
		box-shadow:
			0 0 0 1px #fff,
			0 0 0 3px $button-color;
	}

	&:active {
		background: darken( $button-color, 5% );
		border-color: darken( $button-color, 5% );
		color: $text-color;
		> svg {
			fill: $text-color;
		}
	}

	&.active,
	&.active:focus,
	&.active:hover {
		background: $button-color;
		color: $text-color;
		border-color: darken( $button-color, 15% );
		box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
		> svg {
			fill: $text-color;
		}
	}

	&[disabled],
	&:disabled,
	&.button-primary-disabled,
	&.disabled {
		color: hsl( hue( $button-color ), 10%, 80% ) !important;
		background: lighten( $button-color, 15% ) !important;
		border-color: lighten( $button-color, 15% ) !important;
		text-shadow: none !important;
		> svg {
			fill: hsl( hue( $button-color ), 10%, 80% ) !important;
		}
	}
}
/* Button Skin */
$button-color:#00D4D4;
$text-color: #fff;
.prefix-admin {
	// Default & Secondary Button
	.button,
	.button-secondary {
		color: $button-color;
		border-color: $button-color;
		> svg {
			width: 15px;
			margin-left: 5px;
			fill: $button-color;
		}
		> .dashicons {
			color: $button-color;
		}
	}

	.button.hover,
	.button:hover,
	.button-secondary:hover,
	.button.focus,
	.button:focus,
	.button-secondary:focus {
		border-color: darken( $button-color, 5% );
		color: darken( $button-color, 5% );
		> svg {
			fill: darken( $button-color, 5% );
		}
		> .dashicons {
			color: darken( $button-color, 5% );
		}
	}
	
	.button.focus,
	.button:focus,
	.button-secondary:focus {
		border-color: $button-color;
		color: darken( $button-color, 5% );
		box-shadow: 0 0 0 1px $button-color;
		> svg {
			fill: darken( $button-color, 5% );
		}
		> .dashicons {
			color: darken( $button-color, 5% );
		}
	}

	.button:active {
		background: darken( $button-color, 5% );
		border-color: darken( $button-color, 5% );
	}

	.button.active,
	.button.active:focus,
	.button.active:hover {
		border-color: darken( $button-color, 5% );
		color: darken( $button-color, 5% );
		box-shadow: inset 0 2px 5px -3px darken( $button-color, 5% );
		> svg {
			fill: darken( $button-color, 5% );
		}
		> .dashicons {
			color: darken( $button-color, 5% );
		}
	}
	
	// Primary Button
	.button-primary {
		@include button( $button-color );
		box-shadow: 0 1px 0 darken( $button-color, 5%);
		text-shadow: 0 -1px 1px darken( $button-color, 5%), 1px 0 1px darken( $button-color, 5%), 0 1px 1px darken( $button-color, 5%), -1px 0 1px darken( $button-color, 5%);
	}
	// Hero Button
	.button {
		&.button-primary {
			&.button-hero {
				box-shadow: 0 2px 0 darken( $button-color, 5%);
				&:focus {
					box-shadow:
						0 2px 0 darken( $button-color, 5%),
						0 1px 0 darken( $button-color, 3%),
						0 0 2px 1px lighten( $button-color, 5%);
				}
				&.active,
				&.active:hover,
				&.active:focus,
				&:active {
					box-shadow: inset 0 3px 0 darken( $button-color, 10%);
				}
			}
		}
	}
	
	.button-group > .button.active {
		border-color: $button-color;
	}
}
/* Button Sizes */
.prefix-admin {
	.button.button-xl,
	.button-group.button-xl .button {
		height: 30px;
		line-height: 28px;
		padding: 0 12px 2px;
	}
	.button.button-hero,
	.button-group.button-hero .button {
		font-size: 18px;
		height: 50px;
		line-height: 48px;
		padding: 0 36px;
	}
}
@media screen and (max-width: 782px) {
	.prefix-admin {
		.button.button-xl {
			padding: 6px 14px;
			line-height: normal;
			font-size: 14px;
			vertical-align: middle;
			height: auto;
			margin-bottom: 4px;
		}
	}
}