material-sass 0.0.3 → 0.0.4

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

@@ -1,32 +1,62 @@
 .picker {
 	position: absolute;
 	z-index: $top-base;
-	@include user-select(none);
+	user-select: none;
 }
 
 .picker__box {
 	background-clip: padding-box;
 	background-color: $white;
 	border-radius: 4px;
+	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5);
 	outline: 0;
 	overflow: hidden;
+	position: relative;
 	vertical-align: middle;
-	@include box-shadow(0 1px 30px rgba(0, 0, 0, 0.5));
+	z-index: 1;
 	@include clearfix();
+	// 992
+		@include responsive(md) {
+			&:before {
+				background-color: $brand-color;
+				border-radius: 4px 0 0 4px;
+				content: "";
+				display: block;
+				height: 100%;
+				position: absolute;
+					top: 0;
+					left: 0;
+				width: (($grid-gutter + $line-height * 2 * 7) / 2);
+				z-index: -1;
+			}
+		}
 }
 
 .picker__date-display {
 	background-color: $brand-color;
 	border-radius: 4px 4px 0 0;
 	color: $white;
+	padding: ($line-height / 2) $grid-gutter;
+	text-align: left;
 	// 992
 		@include responsive(md) {
 			border-radius: 4px 0 0 0;
 			float: left;
-			width: 50%;
+			width: (($grid-gutter + $line-height * 2 * 7) / 2);
 		}
 }
 
+.picker__date-display-bottom {
+	font-size: $font-size-h2;
+	line-height: $line-height-h2;
+}
+
+.picker__date-display-top {
+	color: $brand-color-light;
+	font-weight: $font-weight-light;
+	margin-bottom: ($line-height / 4);
+}
+
 .picker__day {
 	border-radius: 50%;
 	display: inline-block;
@@ -48,15 +78,7 @@
 }
 
 .picker__day-display {
-	font-size: $font-size-lg;
-	line-height: $line-height-lg;
-	padding: 0 $grid-gutter;
-	// 992
-		@include responsive(md) {
-			div {
-				font-size: 2em;
-			}
-		}
+	margin-right: ($grid-gutter / 2);
 }
 
 .picker__day--outfocus {
@@ -82,14 +104,13 @@
 	display: inline-block;
 	margin: ($line-height * 2) auto;
 	max-width: ($grid-gutter + $line-height * 1.5 * 7);
+	transform: scale(0, 0);
+	transition: all 0.3s $timing;
+	transition-property: transform;
 	vertical-align: middle;
 	white-space: normal;
-	@include transform(scale(0, 0));
-	@include transition(all 0.3s $timing);
-	-webkit-transition-property: -webkit-transform;
-	        transition-property: transform;
 	.picker--opened & {
-		@include transform(scale(1, 1));
+		transform: scale(1, 1);
 	}
 	// 480
 		@include responsive(xs) {
@@ -97,7 +118,7 @@
 		}
 	// 992
 		@include responsive(md) {
-			max-width: (($grid-gutter + $line-height * 1.5 * 7) * 2);
+			max-width: (($grid-gutter + $line-height * 2 * 7) * 1.5);
 		}
 }
 
@@ -110,11 +131,12 @@
 			margin-top: ($line-height / 4);
 			margin-right: 0;
 			margin-left: 0;
-			width: 50%;
+			width: ($grid-gutter + $line-height * 14);
 		}
 }
 
 .picker__holder {
+	backface-visibility: hidden;
 	overflow-x: hidden;
 	overflow-y: auto;
 	position: fixed;
@@ -123,12 +145,11 @@
 		bottom: 0;
 		left: 0;
 	text-align: center;
+	transition: background-color 0.3s $timing, top 0s linear 0.3s;
 	white-space: nowrap;
 	width: 100%;
 	-webkit-overflow-scrolling: touch;
 	-ms-overflow-style: -ms-autohiding-scrollbar;
-	@include backface(hidden);
-	@include transition(background-color 0.3s $timing, top 0s linear 0.3s);
 	&:after {
 		content: "";
 		display: inline-block;
@@ -140,7 +161,7 @@
 		background-color: rgba(0, 0, 0, 0.5);
 		// position
 			top: 0;
-		@include transition(background-color 0.3s $timing, top 0s linear 0s);
+		transition: background-color 0.3s $timing, top 0s linear 0s;
 	}
 }
 
@@ -167,41 +188,51 @@
 	}
 }
 
-.picker__month-display {
-	font-size: $font-size-h3;
-	font-weight: 300;
-	line-height: $line-height-h3;
-	padding: ($line-height / 2) $grid-gutter 0;
-	text-transform: uppercase;
-	// 992
-		@include responsive(md) {
-			padding-top: $line-height;
-			padding-bottom: (($line-height * 1.5 * 6 + $line-height - $line-height-lg) / 2 - $line-height - $line-height-h3);
-		}
-}
-
 .picker__nav--next,
 .picker__nav--prev {
 	cursor: pointer;
 	line-height: $line-height;
 	margin-top: ($line-height / -2);
-	padding: 0 $grid-gutter;
 	position: absolute;
 		top: 50%;
+	text-align: center;
+	width: ($line-height * 1.5);
 	&:focus,
 	&:hover {
 		color: $link-color;
 	}
+	// 480
+		@include responsive(xs) {
+			width: ($line-height * 1.75);
+		}
+	// 992
+		@include responsive(md) {
+			width: ($line-height * 2);
+		}
 }
 
 .picker__nav--next {
 	// position
 		right: 0;
+	&:before {
+		content: "keyboard_arrow_right";
+	}
+	// 992
+		@include responsive(md) {
+			right: ($grid-gutter / 2);
+		}
 }
 
 .picker__nav--prev {
 	// position
 		left: 0;
+	&:before {
+		content: "keyboard_arrow_left";
+	}
+	// 992
+		@include responsive(md) {
+			left: ($grid-gutter / 2);
+		}
 }
 
 .picker__select--month,
@@ -235,7 +266,6 @@
 		@include responsive(md) {
 			float: left;
 			margin: 0;
-			width: 50%;
 		}
 }
 
@@ -255,38 +285,30 @@
 		}
 	// 992
 		@include responsive(md) {
-			width: ($line-height * 1.5);
+			width: ($line-height * 2);
 			&:first-child {
 				padding-left: ($grid-gutter / 2);
-				width: ($grid-gutter / 2 + $line-height * 1.5);
+				width: ($grid-gutter / 2 + $line-height * 2);
 			}
 			&:last-child {
 				padding-right: ($grid-gutter / 2);
-				width: ($grid-gutter / 2 + $line-height * 1.5);
+				width: ($grid-gutter / 2 + $line-height * 2);
 			}
 		}
 }
 
 .picker__weekday {
 	color: $black-hint;
-	font-weight: 300;
+	font-weight: $font-weight-light;
 }
 
 .picker__weekday-display {
-	background-color: $brand-color-dark-m;
-	border-radius: 4px 4px 0 0;
-	padding: ($line-height / 4) $grid-gutter;
-}
-
-.picker__year-display {
-	color: $brand-color-light;
-	font-size: $font-size-h3;
-	font-weight: 300;
-	line-height: $line-height-h3;
-	padding: 0 $grid-gutter ($line-height / 2);
+	margin-right: ($grid-gutter / 2);
+	&:after {
+		content: ",";
+	}
 	// 992
 		@include responsive(md) {
-			padding-top: (($line-height * 1.5 * 6 + $line-height - $line-height-lg) / 2 - $line-height - $line-height-h3);
-			padding-bottom: $line-height;
+			display: block;
 		}
-}
+}

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

@@ -8,7 +8,7 @@
 	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);
+	transition: color 0.3s $timing, font-size 0.3s $timing, top 0.3s $timing;
 	.form-group-label [class*="col-"] & {
 		// position
 			left: $grid-gutter;
@@ -61,4 +61,4 @@
 		.form-group-icon.form-group-#{$color} .form-icon-label {
 			color: nth($palette-color, $i);
 		}
-	}
+	}

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

@@ -16,27 +16,27 @@
 	height: $font-size-h6;
 	margin-right: ($grid-gutter / 2);
 	position: relative;
+	transition: background-color 0.3s $timing;
 	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%;
+		box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
 		content: "";
 		display: block;
 		height: $font-size-h4;
 		position: absolute;
 			top:(($font-size-h4 - $font-size-h6) / -2);
 			left: 0;
+		transition: background-color 0.3s $timing, box-shadow 0.15s $timing, left 0.3s $timing;
 		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;
+		background-color: lighten($link-color, 15%);
 		&:after {
-			background-color: $brand-color;
+			background-color: $link-color;
 			// position
 				left: (($font-size * 5 - $font-size-h4) / 4);
 		}
@@ -49,28 +49,54 @@
 	}
 	.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));
+			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));
+			box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 0 0 (($font-size * 5 - $font-size-h4) / 4) rgba(red($link-color), green($link-color), blue($link-color), 0.25);
 		}
 	}
 	.touch & {
-		@include transition(background-color 0.3s $timing 0.15s);
+		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);
+			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));
+			box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 0 0 (($font-size * 5 - $font-size-h4) / 4) rgba(red($link-color), green($link-color), blue($link-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));
+			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);
+		}
+	}
+}
+
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.switch-toggle-#{$color} {
+			input[type="checkbox"]:checked + &,
+			input[type="radio"]:checked + & {
+				background-color: nth($palette-color-light-m, $i);
+				&:after {
+					background-color: nth($palette-color, $i);
+				}
+			}
+			.no-touch input[type="checkbox"]:checked + &,
+			.no-touch input[type="radio"]:checked + & {
+				&:active:after {
+					box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 0 0 (($font-size * 5 - $font-size-h4) / 4) rgba(red(nth($palette-color, $i)), green(nth($palette-color, $i)), blue(nth($palette-color, $i)), 0.25);
+				}
+			}
+			.touch & {
+				&.switch-toggle-on:after {
+					box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25), 0 0 0 (($font-size * 5 - $font-size-h4) / 4) rgba(red(nth($palette-color, $i)), green(nth($palette-color, $i)), blue(nth($palette-color, $i)), 0.25);
+				}
+			}
 		}
 	}
-}

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

@@ -80,9 +80,9 @@ legend {
 	height: $input-height;
 	line-height: $line-height;
 	padding: (($input-height - $line-height) / 2) 0 (($input-height - $line-height) / 2 - 1);
+	transition: border-bottom-color 0.15s $timing;
 	width: 100%;
 	@include placeholder($black-hint);
-	@include transition(border-bottom-color 0.15s $timing);
 	&:focus {
 		border-color: $link-color;
 		border-bottom-width: 2px;
@@ -106,7 +106,7 @@ legend {
 	.form-control-default & {
 		border: 1px solid $black-hint;
 		padding: (($input-height - $line-height) / 2 - 1) ($grid-gutter / 2);
-		@include transition(none);
+		transition: none;
 		&:focus {
 			border: 1px solid $link-color;
 			padding: (($input-height - $line-height) / 2 - 1) ($grid-gutter / 2);
@@ -122,7 +122,7 @@ legend {
 // colour
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
-		
+
 		.form-group-#{$color} {
 			.form-control,
 			.form-control:focus {
@@ -188,7 +188,7 @@ textarea.form-control {
 	border-bottom: 1px solid $black-hint;
 	display: block;
 	font-size: $font-size;
-	font-weight: 400;
+	font-weight: $font-weight;
 	line-height: $line-height;
 	margin-top: 0;
 	margin-bottom: 0;
@@ -218,7 +218,7 @@ textarea.form-control {
 .form-help {
 	display: block;
 	font-size: $font-size-h6;
-	font-weight: 400;
+	font-weight: $font-weight;
 	margin-top: ($line-height / 2);
 	margin-bottom: ($line-height / 2);
 	position: relative;
@@ -265,7 +265,7 @@ textarea.form-control {
 // colour
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
-		
+
 		.form-group-#{$color} .form-label {
 			color: nth($palette-color, $i);
 		}
@@ -273,4 +273,4 @@ textarea.form-control {
 
 .label {
 	margin-bottom: ($line-height / 2);
-}
+}

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

@@ -5,7 +5,7 @@
 	display: inline;
 	font-size: 75%;
 	font-style: normal;
-	font-weight: 400;
+	font-weight: $font-weight;
 	line-height: 1;
 	padding: 0.2em 0.6em;
 	vertical-align: baseline;

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

@@ -1,4 +1,5 @@
 .modal {
+	backface-visibility: hidden;
 	display: none;
 	overflow: hidden;
 	outline: 0;
@@ -10,7 +11,6 @@
 	z-index: $top-base;
 	-webkit-overflow-scrolling: touch;
 	-ms-overflow-style: -ms-autohiding-scrollbar;
-	@include backface(hidden);
 	.modal-open & {
 		overflow-x: hidden;
 		overflow-y: auto;
@@ -18,18 +18,18 @@
 }
 
 .modal-backdrop {
+	backface-visibility: hidden;
 	background-color: $black;
+	opacity: 0;
 	position: fixed;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
+	transition: opacity 0.3s $timing;
 	z-index: ($top-base - 1);
-	@include backface(hidden);
-	@include opacity(0);
-	@include transition(opacity 0.3s $timing);
 	&.fade.in {
-		@include opacity(0.5);
+		opacity: 0.5;
 	}
 }
 
@@ -55,21 +55,17 @@
 	background-color: $white;
 	border: 1px solid transparent;
 	border-radius: 4px;
+	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5);
 	outline: 0;
 	position: relative;
-	@include box-shadow(0 1px 30px rgba(0, 0, 0, 0.5));
-	.modal-uploader & {
-		height: 100%;
-	}
 }
 
 .modal-dialog {
-	margin-right: auto;
-	margin-left: auto;
-	padding: ($line-height * 2) $grid-gutter;
+	margin: ($line-height * 2) $grid-gutter;
 	position: relative;
 	&.modal-full {
 		height: 100%;
+		height: calc(100% - #{$line-height * 4});
 		.modal-content {
 			height: 100%;
 			overflow-x: hidden;
@@ -79,22 +75,25 @@
 		}
 	}
 	.modal.fade & {
-		@include transform(scale(0, 0));
-		@include transition(all 0.3s $timing);
-		-webkit-transition-property: -webkit-transform;
-		        transition-property: transform;
+		transform: scale(0, 0);
+		transition: all 0.3s $timing;
+		transition-property: transform;
 	}
 	.modal.fade.in & {
-		@include transform(scale(1, 1));
+		transform: scale(1, 1);
 	}
 	// 480
 		@include responsive(xs) {
 			&.modal-xs {
-				width: $screen-xs;
+				margin-right: auto;
+				margin-left: auto;
+				width: ($screen-xs - $grid-gutter * 2);
 			}
 		}
 	// 992
 		@include responsive(md) {
+			margin-right: auto;
+			margin-left: auto;
 			width: ($screen-md - $grid-gutter * 2);
 		}
 	// 1440
@@ -107,6 +106,10 @@
 	padding-right: ($grid-gutter * 2);
 	padding-left: ($grid-gutter * 2);
 	.btn + .btn {
+		margin-right: $grid-gutter;
+	}
+	.text-right .btn + .btn {
+		margin-right: auto;
 		margin-left: $grid-gutter;
 	}
 }
@@ -133,4 +136,4 @@
 	margin-top: 0;
 	margin-right: ($grid-gutter + 12);
 	margin-bottom: $line-height;
-}
+}