Merge pull request #544 from subshad/add-sass

Convert LESS to SCSS and re-organise

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;
+}