material-sass 0.0.1 → 0.0.2

data/app/assets/stylesheets/material/element/_form-adv-label.scss

@@ -0,0 +1,64 @@
+.floating-label {
+	color: $black-hint;
+	cursor: text;
+	font-size: $font-size;
+	line-height: 1;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+		top: (($input-height - $font-size) / 2);
+		left: 0;
+	@include transition(color 0.3s $timing, font-size 0.3s $timing, top 0.3s $timing);
+	.form-group-label [class*="col-"] & {
+		// position
+			left: $grid-gutter;
+	}
+	.form-group-label.control-focus &,
+	.form-group-label.control-highlight & {
+		color: $black-sec;
+		font-size: ($input-height - $line-height);
+		// position
+			top: (($input-height - $line-height) * -1);
+	}
+	.form-group-label.control-focus & {
+		color: $link-color;
+	}
+}
+
+.form-group-label {
+	margin-top: ($line-height * 1.5);
+	margin-bottom: ($line-height * 1.5);
+	position: relative;
+	.form-control {
+		position: relative;
+		z-index: 1;
+		@include placeholder(transparent);
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.form-group-label.form-group-#{$color} .floating-label {
+			color: nth($palette-color, $i);
+		}
+	}
+
+.form-icon-label {
+	cursor: pointer;
+	display: block;
+	padding: (($input-height - $line-height) / 2) 0;
+	.form-group-icon.control-focus & {
+		color: $link-color;
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.form-group-icon.form-group-#{$color} .form-icon-label {
+			color: nth($palette-color, $i);
+		}
+	}

data/app/assets/stylesheets/material/element/_form-adv-switch.scss

@@ -0,0 +1,76 @@
+.switch {
+	position: relative;
+	&.checkbox,
+	&.radio {
+		label {
+			padding-left: ($font-size-h4 + ($font-size * 5 - $font-size-h4) / 4 + $grid-gutter / 2);
+		}
+	}
+}
+
+.switch-toggle {
+	background-color: $black-hint;
+	border-radius: ($font-size-h6 / 2);
+	cursor: pointer;
+	display: inline-block;
+	height: $font-size-h6;
+	margin-right: ($grid-gutter / 2);
+	position: relative;
+	vertical-align: middle;
+	width: ($font-size-h4 + ($font-size * 5 - $font-size-h4) / 4);
+	@include transition(background-color 0.3s $timing);
+	&:after {
+		background-color: $white;
+		border-radius: 50%;
+		content: "";
+		display: block;
+		height: $font-size-h4;
+		position: absolute;
+			top:(($font-size-h4 - $font-size-h6) / -2);
+			left: 0;
+		width: $font-size-h4;
+		@include box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.25));
+		@include transition(background-color 0.3s $timing, box-shadow 0.15s $timing, left 0.3s $timing);
+	}
+	input[type="checkbox"]:checked + &,
+	input[type="radio"]:checked + & {
+		background-color: $brand-color-light-m;
+		&:after {
+			background-color: $brand-color;
+			// position
+				left: (($font-size * 5 - $font-size-h4) / 4);
+		}
+	}
+	.checkbox.switch &,
+	.radio.switch & {
+		position: absolute;
+			top: (($line-height - $font-size-h6) / 2);
+			left: 0;
+	}
+	.no-touch & {
+		&:active:after {
+			@include box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 0 0 (($font-size * 5 - $font-size-h4) / 4) rgba(0, 0, 0, 0.1));
+		}
+	}
+	.no-touch input[type="checkbox"]:checked + &,
+	.no-touch input[type="radio"]:checked + & {
+		&:active:after {
+			@include box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 0 0 (($font-size * 5 - $font-size-h4) / 4) rgba(red($brand-color), green($brand-color), blue($brand-color), 0.25));
+		}
+	}
+	.touch & {
+		@include transition(background-color 0.3s $timing 0.15s);
+		&:after {
+			@include transition(background-color 0.3s $timing 0.15s, box-shadow 0.15s $timing, left 0.3s $timing 0.15s);
+		}
+		&.switch-toggle-on:after {
+			@include box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 0 0 (($font-size * 5 - $font-size-h4) / 4) rgba(red($brand-color), green($brand-color), blue($brand-color), 0.25));
+		}
+	}
+	.touch input[type="checkbox"]:checked + &,
+	.touch input[type="radio"]:checked + & {
+		&.switch-toggle-on:after {
+			@include box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 0 0 (($font-size * 5 - $font-size-h4) / 4) rgba(0, 0, 0, 0.1));
+		}
+	}
+}

data/app/assets/stylesheets/material/element/_form-adv-textarea.scss

@@ -0,0 +1,4 @@
+.textarea-autosize {
+	min-height: $input-height;
+	overflow-x: hidden;
+}

data/app/assets/stylesheets/material/element/_form.scss

@@ -1,3 +1,68 @@
+legend {
+	&[class*="col-xx-"] {
+		padding-left: ($grid-gutter / 2);
+	}
+	// 480
+		@include responsive(xs) {
+			&[class*="col-xs-"] {
+				padding-left: ($grid-gutter / 2);
+			}
+		}
+	// 768
+		@include responsive(sm) {
+			&[class*="col-sm-"] {
+				padding-left: ($grid-gutter / 2);
+			}
+		}
+	// 992
+		@include responsive(md) {
+			&[class*="col-md-"] {
+				padding-left: ($grid-gutter / 2);
+			}
+		}
+	// 1440
+		@include responsive(lg) {
+			&[class*="col-lg-"] {
+				padding-left: ($grid-gutter / 2);
+			}
+		}
+}
+
+.checkbox,
+.radio {
+	display: block;
+	position: relative;
+	.form-group & {
+		margin-top: (($input-height - $line-height) / 2);
+		padding-bottom: (($input-height - $line-height) / 2);
+	}
+	label {
+		cursor: pointer;
+		margin: 0;
+		min-height: $font-size;
+		padding-left: $line-height;
+	}
+	&.disabled,
+	fieldset[disabled] & {
+		label {
+			color: $black-hint;
+			cursor: not-allowed;
+		}
+	}
+}
+
+.checkbox input[type="checkbox"],
+.radio input[type="radio"] {
+	margin-left: ($line-height * -1);
+	position: absolute;
+}
+
+.checkbox-inline,
+.radio-inline {
+	display: inline-block;
+	margin-right: $grid-gutter;
+}
+
 .form {
 	margin-top: $line-height;
 	margin-bottom: $line-height;
@@ -37,18 +102,40 @@
 		vertical-align: middle;
 		width: auto;
 	}
+	&.form-control-default,
+	.form-control-default & {
+		border: 1px solid $black-hint;
+		padding: (($input-height - $line-height) / 2 - 1) ($grid-gutter / 2);
+		@include transition(none);
+		&:focus {
+			border: 1px solid $brand-color;
+			padding: (($input-height - $line-height) / 2 - 1) ($grid-gutter / 2);
+		}
+	}
+}
+
+// colour
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
 		
-		.form-group-#{$color} & {
+		.form-group-#{$color} .form-control {
 			border-bottom-color: nth($palette-color, $i);
 		}
 	}
+
+input[type="color"].form-control-default,
+.form-control-default input[type="color"] {
+	min-width: ($grid-gutter + $line-height + 2);
+}
+
+label + .form-control.form-control-default,
+.form-control-default label + .form-control {
+	margin-top: ($line-height / 4);
 }
 
 select.form-control {
 	-webkit-appearance: none;
-	@include responsive('-webkit-min-device-pixel-ratio: 0') {
+	@include responsive("(-webkit-min-device-pixel-ratio: 0)") {
 		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAkCAMAAACg5NohAAAAZlBMVEUAAABlZWXLy8vg4OB6enrX19fg4OCdnZ2KiopsbGzn5+dzc3Pt7e3GxsbPz89ubm7u7u5ycnLY2NiJiYmGhoZoaGjq6up/f3+WlpaGhoaZmZllZWVhYWFYWFhaWlpdXV1bW1tWVlaZeqNTAAAAHHRSTlMA+WVC31BEqMzyNekpcGDpKNxJzcjkL9CjwZ/yNlWBeQAAALBJREFUKM/NztkWwiAMRdFQoNparR2cGf//J8UFNdXEd8/rXrkAq9rLoIGt3Vkn9A8xJoiaSqeSJGskuXlJNs2sFRPjWo7lptzVVEoO7VyEWofvoEn8NTUUxuZo2KyCPjo2+wB9m7ZM01zB/9feN2zXEVS0bLEHZQ1b6EE2jhNvDsBbMBWkampepJtizNpi4UPyGrEimBbhLT4L2nLnzR6+ksnIGm7iGjXv8xq14bSWJwymLjvMk/6KAAAAAElFTkSuQmCC);
 		background-position: 100% (($input-height - 12) / 2 - 1);
 		background-repeat: no-repeat;
@@ -62,6 +149,19 @@ select.form-control {
 	}
 }
 
+select.form-control-default,
+.form-control-default select {
+	@include responsive("(-webkit-min-device-pixel-ratio: 0)") {
+		background-position: 99% (($input-height - 12) / 2 - 1);
+		background-position: calc(100% - #{$grid-gutter / 2}) (($input-height - 12) / 2 - 1);
+		padding-right: ($grid-gutter * 1.5);
+		&[multiple],
+		&[size] {
+			padding-right: ($grid-gutter / 2);
+		}
+	}
+}
+
 textarea.form-control {
 	height: auto;
 }
@@ -81,146 +181,83 @@ textarea.form-control {
 	margin-bottom: 0;
 	padding-top: (($input-height - $line-height) / 2);
 	padding-bottom: (($input-height - $line-height) / 2 - 1);
-}
-
-// checkbox & radio
-	.checkbox,
-	.radio {
-		display: block;
-		position: relative;
-		.form-group & {
-			margin-top: (($input-height - $line-height) / 2);
-			padding-bottom: (($input-height - $line-height) / 2);
-		}
-		label {
-			cursor: pointer;
-			margin: 0;
-			min-height: $font-size;
-			padding-left: $line-height;
-		}
-		&.disabled,
-		fieldset[disabled] & {
-			label {
-				color: $black-hint;
-				cursor: not-allowed;
-			}
-		}
-	}
-
-	.checkbox input[type="checkbox"],
-	.radio input[type="radio"] {
-		margin-left: ($line-height * -1);
-		position: absolute;
+	&.form-control-default {
+		padding-top: (($input-height - $line-height) / 2 - 1);
 	}
+}
 
-	.checkbox-inline,
-	.radio-inline {
-		display: inline-block;
-		margin-right: $grid-gutter;
+.form-group {
+	margin-top: $line-height;
+	margin-bottom: $line-height;
+	legend + & {
+		margin-top: 0;
 	}
+}
 
-// group
-	.form-group {
+.form-group-btn {
+	margin-bottom: $line-height;
+	.btn {
 		margin-top: $line-height;
-		margin-bottom: $line-height;
-	}
-
-	.form-group-btn {
-		margin-bottom: $line-height;
-		.btn {
-			margin-top: $line-height;
-			margin-right: $grid-gutter;
-		}
+		margin-right: $grid-gutter;
 	}
+}
 
-// help
-	.form-help {
-		display: block;
-		font-size: $font-size-h6;
-		font-weight: 400;
-		margin-top: ($line-height / 2);
-		margin-bottom: ($line-height / 2);
-		position: relative;
-	}
+.form-help {
+	display: block;
+	font-size: $font-size-h6;
+	font-weight: 400;
+	margin-top: ($line-height / 2);
+	margin-bottom: ($line-height / 2);
+	position: relative;
+}
 
-	.form-help-icon {
-		position: absolute;
-			top: (($line-height - $font-size-h6) / 2);
-			right: 0;
-	}
+.form-help-icon {
+	position: absolute;
+		top: (($line-height - $font-size-h6) / 2);
+		right: 0;
+}
 
-	.form-help-msg {
-		padding-right: (18em / 14);
-	}
+.form-help-msg {
+	padding-right: (18em / 14);
+}
 
-// label
-	.form-label {
-		display: block;
-		margin-top: ($line-height / 2);
-		@each $color in $palette-list {
-			$i: index($palette-list, $color);
-			
-			.form-group-#{$color} & {
-				color: nth($palette-color, $i);
+.form-label {
+	display: block;
+	// 480
+		@include responsive(xs) {
+			[class*="col-xs"] > & {
+				@include form-label();
 			}
 		}
-		// 480
-			@include responsive(xs) {
-				[class*="col-xs"] > & {
-					@include form-label();
-				}
-			}
-		// 768
-			@include responsive(sm) {
-				[class*="col-sm"] > & {
-					@include form-label();
-				}
+	// 768
+		@include responsive(sm) {
+			[class*="col-sm"] > & {
+				@include form-label();
 			}
-		// 992
-			@include responsive(md) {
-				[class*="col-md"] > & {
-					@include form-label();
-				}
+		}
+	// 992
+		@include responsive(md) {
+			[class*="col-md"] > & {
+				@include form-label();
 			}
-		// 1440
-			@include responsive(lg) {
-				[class*="col-lg"] > & {
-					@include form-label();
-				}
+		}
+	// 1440
+		@include responsive(lg) {
+			[class*="col-lg"] > & {
+				@include form-label();
 			}
+		}
 }
 
-	.label {
-		margin-bottom: ($line-height / 2);
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.form-group-#{$color} .form-label {
+			color: nth($palette-color, $i);
+		}
 	}
 
-// legend
-	legend {
-		&[class*="col-xx-"] {
-			padding-left: ($grid-gutter / 2);
-		}
-		// 480
-			@include responsive(xs) {
-				&[class*="col-xs-"] {
-					padding-left: ($grid-gutter / 2);
-				}
-			}
-		// 768
-			@include responsive(sm) {
-				&[class*="col-sm-"] {
-					padding-left: ($grid-gutter / 2);
-				}
-			}
-		// 992
-			@include responsive(md) {
-				&[class*="col-md-"] {
-					padding-left: ($grid-gutter / 2);
-				}
-			}
-		// 1440
-			@include responsive(lg) {
-				&[class*="col-lg-"] {
-					padding-left: ($grid-gutter / 2);
-				}
-			}
-	}
+.label {
+	margin-bottom: ($line-height / 2);
+}