material-sass 0.0.1 → 0.0.2

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

@@ -1,277 +0,0 @@
-// checkbox & radio
-	.checkbox-adv {
-		font-size: $font-size;
-		line-height: $line-height;
-		[class^="circle"] {
-			display: block;
-			height: $font-size;
-			position: absolute;
-				top: (($line-height - $font-size) / 2 - 1);
-				left: 0;
-			width: $font-size;
-		}
-		.circle {
-			border: 2px solid $black-sec;
-			@include transition(border-color 0.3s $timing);
-		}
-		&.disabled,
-		fieldset[disabled] & {
-			.circle {
-				border-color: $black-hint !important;
-			}
-		}
-		input.access-hide:focus ~ .circle {
-			border-color: $black-text;
-		}
-		input.access-hide:checked ~ .circle {
-			border-color: $brand-color;
-		}
-		.circle-check {
-			background-color: transparent;
-			@include transform(scale(0));
-			@include transition(background-color 0.3s $timing, transform 0.3s $timing);
-			&:after {
-				background-color: $brand-color;
-				border-radius: 50%;
-				content: '';
-				display: block;
-				height: ($font-size * 5);
-				position: absolute;
-					top: ($font-size * -2);
-					left: ($font-size * -2);
-				width: ($font-size * 5);
-				@include opacity(0);
-			}
-		}
-		&.disabled,
-		fieldset[disabled] & {
-			.circle-check:after {
-				background-color: $black-hint;
-			}
-		}
-		input.access-hide:checked ~ .circle-check {
-			@include transform(scale(0.5));
-			&:after {
-				@include animation(circle-check 0.6s);
-			}
-		}
-		.circle-icon {
-			background-color: transparent;
-			color: transparent;
-			@include transform(scale(0.5));
-			@include transition(background-color 0.3s $timing, transform 0.3s $timing);
-		}
-		input.access-hide:checked ~ .circle-icon {
-			background-color: $brand-color;
-			color: $white;
-			@include transform(scale(1));
-		}
-		&.disabled,
-		fieldset[disabled] & {
-			input.access-hide:checked ~ .circle-icon {
-				background-color: $black-hint;
-			}
-		}
-	}
-
-	.radio-adv {
-		@extend .checkbox-adv;
-		[class^="circle"] {
-			border-radius: 50%;
-		}
-		input.access-hide:checked ~ .circle-check {
-			background-color: $brand-color;
-		}
-		&.disabled,
-		fieldset[disabled] & {
-			input.access-hide:checked ~ .circle-check {
-				background-color: $black-hint;
-			}
-		}
-	}
-
-// floating label
-	.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 & {
-			font-size: ($input-height - $line-height);
-			// position
-				top: (($input-height - $line-height) / -2);
-		}
-		.form-group-label.control-focus & {
-			color: $link-color;
-		}
-		.form-group-label.form-group-alt & {
-			color: $brand-color;
-		}
-		.form-group-label.form-group-blue & {
-			color: $palette-blue;
-		}
-		.form-group-label.form-group-green & {
-			color: $palette-green;
-		}
-		.form-group-label.form-group-purple & {
-			color: $palette-purple;
-		}
-		.form-group-label.form-group-red & {
-			color: $palette-red;
-		}
-		.form-group-label.form-group-yellow & {
-			color: $palette-yellow;
-		}
-	}
-
-	.form-group-label {
-		position: relative;
-		.form-control {
-			@include placeholder(transparent);
-		}
-	}
-
-// icon label
-	.form-icon-label {
-		cursor: pointer;
-		display: block;
-		padding: (($input-height - $line-height) / 2) 0;
-		.form-group-icon.control-focus & {
-			color: $link-color;
-		}
-		.form-group-icon.form-group-blue & {
-			color: $palette-blue;
-		}
-		.form-group-icon.form-group-green & {
-			color: $palette-green;
-		}
-		.form-group-icon.form-group-purple & {
-			color: $palette-purple;
-		}
-		.form-group-icon.form-group-red & {
-			color: $palette-red;
-		}
-		.form-group-icon.form-group-yellow & {
-			color: $palette-yellow;
-		}
-	}
-
-// switch
-	.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 rgba(0, 0, 0, 0.5));
-			@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 rgba(0, 0, 0, 0.5), 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 rgba(0, 0, 0, 0.5), 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 rgba(0, 0, 0, 0.5), 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 rgba(0, 0, 0, 0.5), 0 0 0 (($font-size * 5 - $font-size-h4) / 4) rgba(0, 0, 0, 0.1));
-			}
-		}
-	}
-
-// textarea autosize
-	.textarea-autosize {
-		min-height: $input-height;
-		overflow-x: hidden;
-	}
-
-// ###
-	@-webkit-keyframes circle-check {
-		0% {
-			opacity: 0;
-		}
-		25% {
-			opacity: 0.25;
-		}
-		100% {
-			opacity: 0;
-		}
-	}
-
-	@keyframes circle-check {
-		0% {
-			opacity: 0;
-		}
-		25% {
-			opacity: 0.25;
-		}
-		100% {
-			opacity: 0;
-		}
-	}