Convert LESS to SCSS and re-organise

Convert LESS to SCSS using the less2sass gem. Fix references to some
mixins in the individual scss files, and allow the importing of the
variables separately from the components so an end user can override the
variables before use.

scss/components.scss

@@ -0,0 +1,5 @@
+@import "control";
+@import "menu";
+@import "mixins";
+@import "multi";
+@import "spinner";

scss/control.scss

@@ -0,0 +1,241 @@
+//
+// Control
+// ------------------------------
+
+@import 'spinner';
+@import 'mixins';
+
+.Select {
+	position: relative;
+
+	// preferred box model
+	&,
+	& div,
+	& input,
+	& span {
+		@include box-sizing(border-box);
+	}
+
+	// handle disabled state
+	&.is-disabled > .Select-control {
+		background-color: $select-input-bg-disabled;
+	}
+	&.is-disabled .Select-arrow-zone {
+		cursor: default;
+		pointer-events: none;
+	}
+}
+
+// base
+
+.Select-control {
+	background-color: $select-input-bg;
+	border-color: lighten($select-input-border-color, 5%) $select-input-border-color darken($select-input-border-color, 10%);
+	border-radius: $select-input-border-radius;
+	border: $select-input-border-width solid $select-input-border-color;
+	color: $select-text-color;
+	cursor: default;
+	display: table;
+	height: $select-input-height;
+	outline: none;
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+
+	&:hover {
+		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+	}
+}
+
+.is-searchable {
+	&.is-open > .Select-control {
+		cursor: text;
+	}
+}
+
+.is-open > .Select-control {
+	@include border-bottom-radius( 0 );
+	background: $select-input-bg;
+	border-color: darken($select-input-border-color, 10%) $select-input-border-color lighten($select-input-border-color, 5%);
+
+	// flip the arrow so its pointing up when the menu is open
+	> .Select-arrow {
+		border-color: transparent transparent $select-arrow-color;
+		border-width: 0 $select-arrow-width $select-arrow-width;
+	}
+}
+
+.is-searchable {
+	&.is-focused:not(.is-open) > .Select-control {
+		cursor: text;
+	}
+}
+
+.is-focused:not(.is-open) > .Select-control {
+	border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%);
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade($select-input-border-focus,50%);
+}
+
+// placeholder
+
+.Select-placeholder {
+	bottom: 0;
+	color: $select-input-placeholder;
+	left: 0;
+	line-height: $select-input-internal-height;
+	padding-left: $select-padding-horizontal;
+	padding-right: $select-padding-horizontal;
+	position: absolute;
+	right: 0;
+	top: 0;
+
+	// crop text
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.has-value > .Select-control > .Select-placeholder {
+	color: $select-text-color;
+}
+
+// value with custom renderer
+
+.Select-value {
+	color: $select-input-placeholder;
+	left: 0;
+	padding: $select-padding-vertical 52px $select-padding-vertical $select-padding-horizontal;
+	position: absolute;
+	right: -($select-arrow-width + $select-padding-horizontal);
+	top: 0;
+
+	// crop text
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.has-value > .Select-control > .Select-value {
+	color: $select-text-color;
+}
+
+
+// the <input> element users type in
+
+.Select-input {
+	// inherits `display: inline-block` from "react-input-autosize"
+	height: $select-input-internal-height;
+	padding-left: $select-padding-horizontal;
+	padding-right: $select-padding-horizontal;
+	vertical-align: middle;
+
+	> input {
+		background: none transparent;
+		border: 0 none;
+		box-shadow: none;
+		cursor: default;
+		display: inline-block;
+		font-family: inherit;
+		font-size: inherit;
+		height: $select-input-internal-height;
+		margin: 0;
+		outline: none;
+		padding: 0;
+		-webkit-appearance: none;
+
+		.is-focused & {
+			cursor: text;
+		}
+	}
+
+}
+
+// fake input
+.Select-control:not(.is-searchable) > .Select-input {
+	outline: none;
+}
+
+// loading indicator
+.Select-loading-zone {
+	cursor: pointer;
+	display: table-cell;
+	position: relative;
+	text-align: center;
+	vertical-align: middle;
+	width: $select-loading-size;
+}
+.Select-loading {
+	@include Select-spinner($select-loading-size, $select-loading-color-bg, $select-loading-color);
+	vertical-align: middle;
+}
+
+
+// the little cross that clears the field
+
+.Select-clear-zone {
+	@include animation( Select-animation-fadeIn 200ms );
+	color: $select-clear-color;
+	cursor: pointer;
+	display: table-cell;
+	position: relative;
+	text-align: center;
+	vertical-align: middle;
+	width: $select-clear-width;
+
+	&:hover {
+		color: $select-clear-hover-color;
+	}
+}
+.Select-clear {
+	display: inline-block;
+	font-size: $select-clear-size;
+	line-height: 1;
+}
+.Select--multi .Select-clear-zone {
+	width: $select-clear-width;
+}
+
+
+// arrow indicator
+
+.Select-arrow-zone {
+	cursor: pointer;
+	display: table-cell;
+	position: relative;
+	text-align: center;
+	vertical-align: middle;
+	width: ($select-arrow-width * 5);
+	padding-right: $select-arrow-width;
+}
+
+.Select-arrow {
+	border-color: $select-arrow-color transparent transparent;
+	border-style: solid;
+	border-width: $select-arrow-width $select-arrow-width ($select-arrow-width / 2);
+	display: inline-block;
+	height: 0;
+	width: 0;
+}
+.is-open .Select-arrow,
+.Select-arrow-zone:hover > .Select-arrow {
+	border-top-color: $select-arrow-color-hover;
+}
+
+
+
+
+// Animation
+// ------------------------------
+
+// fade in
+
+@-webkit-keyframes Select-animation-fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+@keyframes Select-animation-fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}

scss/default.scss

@@ -0,0 +1,6 @@
+@import "select";
+@import "control";
+@import "menu";
+@import "mixins";
+@import "multi";
+@import "spinner";

scss/menu.scss

@@ -0,0 +1,73 @@
+//
+// Select Menu
+// ------------------------------
+
+
+// wrapper around the menu
+
+.Select-menu-outer {
+	// Unfortunately, having both border-radius and allows scrolling using overflow defined on the same
+	// element forces the browser to repaint on scroll.  However, if these definitions are split into an
+	// outer and an inner element, the browser is able to optimize the scrolling behavior and does not
+	// have to repaint on scroll.
+	@include border-bottom-radius( $select-input-border-radius );
+	background-color: $select-input-bg;
+	border: 1px solid $select-input-border-color;
+	border-top-color: mix($select-input-bg, $select-input-border-color, 50%);
+	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+	box-sizing: border-box;
+	margin-top: -1px;
+	max-height: $select-menu-max-height;
+	position: absolute;
+	top: 100%;
+	width: 100%;
+	z-index: $select-menu-zindex;
+	-webkit-overflow-scrolling: touch;
+}
+
+
+// wrapper
+
+.Select-menu {
+	max-height: ($select-menu-max-height - 2px);
+	overflow-y: auto;
+}
+
+
+// options
+
+.Select-option {
+	box-sizing: border-box;
+	color: $select-option-color;
+	cursor: pointer;
+	display: block;
+	padding: $select-padding-vertical $select-padding-horizontal;
+
+	&:last-child {
+		@include border-bottom-radius( $select-input-border-radius );
+	}
+
+	&.is-focused {
+		background-color: $select-option-focused-bg;
+		color: $select-option-focused-color;
+	}
+
+	&.is-disabled {
+		color: $select-option-disabled-color;
+		cursor: not-allowed;
+	}
+
+}
+
+
+// no results
+
+.Select-noresults,
+.Select-search-prompt,
+.Select-searching {
+	box-sizing: border-box;
+	color: $select-noresults-color;
+	cursor: default;
+	display: block;
+	padding: $select-padding-vertical $select-padding-horizontal;
+}

scss/mixins.scss

@@ -0,0 +1,66 @@
+//
+// Mixins
+// ------------------------------
+
+
+// Utilities
+
+@mixin size($width, $height)
+{
+	width: $width;
+	height: $height;
+}
+@mixin square($size)
+{
+	@include size($size, $size);
+}
+@mixin border-top-radius($radius)
+{
+	border-top-right-radius: $radius;
+	border-top-left-radius: $radius;
+}
+@mixin border-right-radius($radius)
+{
+	border-bottom-right-radius: $radius;
+	border-top-right-radius: $radius;
+}
+@mixin border-bottom-radius($radius)
+{
+	border-bottom-right-radius: $radius;
+	border-bottom-left-radius: $radius;
+}
+@mixin border-left-radius($radius)
+{
+	border-bottom-left-radius: $radius;
+	border-top-left-radius: $radius;
+}
+
+
+// Vendor Prefixes
+
+@mixin animation($animation)
+{
+	-webkit-animation: $animation;
+	-o-animation: $animation;
+	animation: $animation;
+}
+@mixin box-sizing($boxmodel)
+{
+	-webkit-box-sizing: $boxmodel;
+	-moz-box-sizing: $boxmodel;
+	box-sizing: $boxmodel;
+}
+@mixin rotate($degrees)
+{
+	-webkit-transform: rotate($degrees);
+	-ms-transform: rotate($degrees); // IE9 only
+	-o-transform: rotate($degrees);
+	transform: rotate($degrees);
+}
+@mixin transform($transform)
+{
+	-webkit-transform: $transform;
+	-moz-transform: $transform;
+	-ms-transform: $transform;
+	transform: $transform;
+}