Conversion of parts of MP6 to SCSS for http://core.trac.wordpress.org/ticket/22862

_utilities.scss

@mixin background-gradient($start-color, $end-color) {
	background: $start-color;
	@include background-image(linear-gradient(top, $start-color 0%, $end-color 100%));
	@include ie-filter($start-color, $end-color);
}

@mixin ie-filter($start-color, $end-color) {
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0 );
}

buttons.scss

/* ----------------------------------------------------------------------------

Last merged revision: 22948

WordPress-style Buttons
=======================
Create a button by adding the `.button` class to an element. For backwards
compatibility, we support several other classes (such as `.button-secondary`),
but these will *not* work with the stackable classes described below.

Button Styles
-------------
To display a primary button style, add the `.button-primary` class to a button.

Button Sizes
------------
Adjust a button's size by adding the `.button-large` or `.button-small` class.

Button States
-------------
Lock the state of a button by adding the name of the pseudoclass as
an actual class (e.g. `.hover` for `:hover`).


TABLE OF CONTENTS:
------------------
 1.0 - Button Layouts
 2.0 - Default Button Style
 3.0 - Primary Button Style
 4.0 - Button Groups

---------------------------------------------------------------------------- */

@import "utilities";
@import "compass/css3/images";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/box-sizing";

.wp-core-ui {
	///////////////////////////////////////////////////////////////////////////
	//  1.0 - Button Layouts
	///////////////////////////////////////////////////////////////////////////

	.button,
	.button-primary,
	.button-secondary {
		display: inline-block;
		text-decoration: none;
		font-size: 13px;
		line-height: 22px;
		height: 24px;
		margin: 0;
		padding: 0 10px 1px;
		cursor: pointer;
		border-width: 1px;
		border-style: solid;
		-webkit-appearance: none;
		@include border-radius(3px);
		white-space: nowrap;
		@include box-sizing(border-box);
	}

	.button {
		&.button-large {
			height: 30px;
			line-height: 28px;
			padding: 0 12px 2px;
		}
		&.button-small {
			height: 21px;
			line-height: 20px;
			padding: 0 8px 1px;
		}
		&.button-hero {
			font-size: 14px;
			height: 46px;
			line-height: 44px;
			padding: 0 36px;
		}
		&:active {
			outline: none;
		}

		&.hidden {
			display: none;
		}
	}

	.button-group.button-large .button {
		@extend .button.button-large;
	}

	.button-group.button-small .button {
		@extend .button.button-small;
	}

	.button-group.button-hero .button {
		@extend .button.button-hero;
	}

	// Remove the dotted border on :focus and the extra padding in Firefox
	button::-moz-focus-inner,
	input[type="reset"]::-moz-focus-inner,
	input[type="button"]::-moz-focus-inner,
	input[type="submit"]::-moz-focus-inner {
		border-width: 1px 0;
		border-style: solid none;
		border-color: transparent;
		padding: 0;
	}

	// Style Reset buttons as simple text links
	input[type="reset"],
	input[type="reset"]:hover,
	input[type="reset"]:active,
	input[type="reset"]:focus {
		background: none;
		border: none;
		@include box-shadow(none);
		padding-left: 2px;
		padding-right: 2px;
		width: auto;
	}

	///////////////////////////////////////////////////////////////////////////
	// 2.0 - Default Button Style
	///////////////////////////////////////////////////////////////////////////

	.button,
	.button-secondary {
		background: #fafafa;
		@include background-image(linear-gradient(top, #fafafa, #e9e9e9));
		border-color: #adadad;
	 	color: #333;
		text-shadow: 0 1px 0 #fff;

		-webkit-box-shadow: inset 0 1px 0 #fff;
		-moz-box-shadow: inset 0 1px 0 #fff;
		box-shadow: inset 0 1px 0 #fff;

		&.hover, &:hover, &.focus, &:focus {
			background: #f3f3f3;
			@include background-image(linear-gradient(top, #fff, #f3f3f3));
			border-color: #999;
			color: #222;
		}

		&.focus, &:focus {
			-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
			box-shadow: 1px 1px 1px rgba(0,0,0,.2);
		}

		&.active, &.active:hover, &.active:focus, &:active {
			background: #eee;
			@include background-image(linear-gradient(top, #f4f4f4, #fefefe));
			border-color: #999;
			color: #333;
			text-shadow: 0 -1px 0 #fff;
			-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
		 	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
		}

		&[disabled], &:disabled {
			color: #aaa !important;
			border-color: #ddd !important;
			@include background-image(linear-gradient(top, #f4f4f4, #fefefe) !important);
			@include box-shadow(none !important);
			text-shadow: 0 1px 0 #fff !important;
			cursor: default;
		}
	}

	.button-disabled {
		@extend .button:disabled;
	}

	///////////////////////////////////////////////////////////////////////////
	// 3.0 - Primary Button Style
	///////////////////////////////////////////////////////////////////////////

	.button-primary {
		@include background-gradient(#2ea2cc, #1e8cbe);
		border-color: #0074a2;
	 	@include box-shadow(inset 0 1px 0 rgba(120,200,230,0.5));
	 	color: #fff;
		text-decoration: none;
		text-shadow: 0 1px 0 rgba(0,86,132,0.7);

		&.hover, &:hover, &.focus, &:focus {
			$start-color: #1e8cbe;
			$end-color: #0074a2;
			@include background-gradient($start-color, $end-color);
			border-color: $end-color;
		 	@include box-shadow(inset 0 1px 0 rgba(120,200,230,0.6));
			color: #fff;
		}

		&.focus, &:focus {
			border-color: #0e3950;
			@include box-shadow(inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4));
		}

		&.active, &.active:hover,
		&.active:focus, &:active {
			@include background-image(linear-gradient(bottom, #1e8cbe 0%,#0074a2 100%));
			border-color: #005684;
			color: rgba(255,255,255,0.95);
		 	@include box-shadow(inset 0 1px 0 rgba(0,0,0,0.1));
			text-shadow: 0 1px 0 rgba(0,0,0,0.1);
		}

		&[disabled], &:disabled,
		&.button-primary-disabled {
			color: #94cde7 !important;
			background: #298cba !important;
			border-color: #1b607f !important;
			@include box-shadow(none !important);
			text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
			cursor: default;
		}
	}

	///////////////////////////////////////////////////////////////////////////
	// 4.0 - Button Groups
	///////////////////////////////////////////////////////////////////////////

	.button-group {
		position: relative;
		display: inline-block;
		white-space: nowrap;
		font-size: 0;
		vertical-align: middle;

		> .button {
			display: inline-block;
			border-radius: 0;
			margin-right: -1px;
			z-index: 10;

			&:hover {
				z-index: 20;
			}
			&:first-child {
				border-radius: 3px 0 0 3px;
			}
			&:last-child {
				border-radius: 0 3px 3px 0;
			}
		}

		> .button-primary {
			z-index: 100;
		}
	}

}

media.scss

/* Last merged revision: 22629 */
/* Styles for the media library iframe (not used on the Library screen) */

div#media-upload-header {
	margin: 0;
	padding: 5px 5px 0;
	font-weight: bold;
	position: relative;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

body#media-upload ul#sidemenu {
	font-weight: normal;
	margin: 0 5px;
	left: 0;
	bottom: -1px;
	float: none;
	overflow: hidden;
}

#media-upload {
	&:after { // clearfix
		content: "";
		display: table;
		clear: both;
	}

	&, .media-item .slidetoggle {
		background: #fff;
	}

	.slidetoggle {
		border-top-color: #dfdfdf;
	}

	input[type="radio"] {
		padding: 0;
	}
}

form {
	margin: 1em;
}

#search-filter {
	text-align: right;
}

th {
	position: relative;
}

.media-upload-form {
	label.form-help, td.help {
		font-family: sans-serif;
		font-style: italic;
		font-weight: normal;
	}

	p.help {
		margin: 0;
		padding: 0;
	}

	fieldset {
		width: 100%;
		border: none;
		text-align: justify;
		margin: 0 0 1em 0;
		padding: 0;
	}
}

// specific to the image upload form
.image-align-none-label {
	background: url('../images/align-none.png') no-repeat center left;
}

.image-align-left-label {
	background: url('../images/align-left.png') no-repeat center left;
}

.image-align-center-label {
	background: url('../images/align-center.png') no-repeat center left;
}

.image-align-right-label {
	background: url('../images/align-right.png') no-repeat center left;
}

tr.image-size td {
	width: 460px;
}

tr.image-size div.image-size-item {
	margin: 0 0 5px;
}

#library-form .progress,
#gallery-form .progress,
.insert-gallery,
.describe.startopen,
.describe.startclosed {
	display: none;
}

.media-item .thumbnail {
	max-width: 128px;
	max-height: 128px;
}

thead.media-item-info tr {
	background-color: transparent;
}

.form-table thead.media-item-info {
	border: 8px solid #fff;
}

abbr.required {
	text-decoration: none;
	border: none;
}

.describe {
	label {
		display: inline;
	}

	td.error {
		padding: 2px 8px;
	}

	td.A1 {
		width: 132px;
	}

	input[type="text"],
	textarea {
		width: 460px;
		border-width: 1px;
		border-style: solid;
	}
}

// Specific to Uploader
#media-upload {
	p.ml-submit {
		padding: 1em 0;
	}

	p.help, label.help {
		font-family: sans-serif;
		font-style: italic;
		font-weight: normal;
	}

	.ui-sortable .media-item {
		cursor: move;
	}

	tr.image-size {
		margin-bottom: 1em;
		height: 3em;
	}

	#filter {
		width: 623px;
	}

	#filter .subsubsub {
		margin: 8px 0;
	}

	.del-attachment {
		display: none;
		margin: 5px 0;
	}

	th.order-head {
		width: 20%;
		text-align: center;
	}

	th.actions-head {
		width: 25%;
		text-align: center;
	}

	a.wp-post-thumbnail {
		margin: 0 20px;
	}

	.widefat {
		width: 626px;
		border-style: solid solid none;
	}
}

#filter .tablenav select {
	border-style: solid;
	border-width: 1px;
	padding: 2px;
	vertical-align: top;
	width: auto;
}

.menu_order {
	float: right;
	font-size: 11px;
	margin: 10px 10px 0;
}

.menu_order_input {
	border: 1px solid #ddd;
	font-size: 10px;
	padding: 1px;
	width: 23px;
}

.ui-sortable-helper {
	background-color: #fff;
	border: 1px solid #aaa;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.sorthelper {
	height: 37px;
	width: 623px;
	display: block;
}

@mixin media-title {
	font-family: Georgia,"Times New Roman",Times,serif;
	font-weight: normal;
	color: #5A5A5A;
}

h3.media-title  {
	@include media-title;

	font-size: 1.6em;
}

h4.media-sub-title  {
	@include media-title;

	border-bottom: 1px solid #DADADA;
	font-size: 1.3em;
	margin: 12px;
	padding: 0 0 3px;
}

#gallery-settings {

	th.label {
		width: 160px;
	}

	#basic th.label {
		padding: 5px 5px 5px 0;
	}

	.title {
		@include media-title;

		clear: both;
		padding: 0 0 3px;
		font-size: 1.6em;
		border-bottom: 1px solid #DADADA;
	}

	.describe {
		padding: 5px;
		width: 615px;
		clear: both;
		cursor: default;

		td {
			vertical-align: middle;
			height: 3em;
		}

		th.label {
			padding-top: .5em;
			text-align: left;
		}

		select {
			width: 15em;
		}

		select option,
		td {
			padding: 0;
		}
	}

	label,
	legend {
		font-size: 13px;
		color: #464646;
		margin-right: 15px;
	}

	.align .field label {
		margin: 0 1em 0 3px;
	}

	p.ml-submit {
		border-top: 1px solid #dfdfdf;
	}

	select#columns {
		width: 6em;
	}
}

#sort-buttons {
	font-size: 0.8em;
	margin: 3px 25px -8px 0;
	text-align: right;
	max-width: 625px;

	a {
		text-decoration: none;
	}

	#asc,
	#showall {
		padding-left: 5px;
	}

	span {
		margin-right: 25px;
	}
}

p.media-types {
	margin: 1em;
}

tr.not-image {
	display: none;
}

table.not-image {
	tr.not-image {
		display: table-row;
	}

	tr.image-only {
		display: none;
	}
}

///////////////////////////////////////////////////////////////////////////
// HiDPI Displays
///////////////////////////////////////////////////////////////////////////
@media print,
  (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi) {

	.image-align-none-label {
		background-image: url('../images/align-none-2x.png?ver=20120916');
		background-size: 21px 15px;
	}

	.image-align-left-label {
		background-image: url('../images/align-left-2x.png?ver=20120916');
		background-size: 22px 15px;
	}

	.image-align-center-label {
		background-image: url('../images/align-center-2x.png?ver=20120916');
		background-size: 21px 15px;
	}

	.image-align-right-label {
		background-image: url('../images/align-right-2x.png?ver=20120916');
		background-size: 22px 15px;
	}
}