material-sass 0.0.1 → 0.0.2

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

@@ -9,48 +9,90 @@
 	display:         flex;
 	margin-bottom: $line-height;
 	position: relative;
-	@include box-shadow(0 0 1px rgba(0, 0, 0, 0.5));
+	@include box-shadow(0 1px 6px rgba(0, 0, 0, 0.3));
 	@include transition(box-shadow 0.3s $timing);
-	&:focus,
-	&:hover {
-		@include box-shadow(0 0 5px rgba(0, 0, 0, 0.25));
+	&[class*="-bg"] {
+		color: $white;
 	}
+	// no boxshadow
+		.no-boxshadow & {
+			border: 1px solid $black-bg;
+		}
 }
 
+// colour
+	.card-offwhite {
+		background-color: $white-bg;
+	}
+
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.card-#{$color} {
+			@include box-shadow(0 0 2px rgba(0, 0, 0, 0.3), 0 1px 6px rgba(red(nth($palette-color, $i)), green(nth($palette-color, $i)), blue(nth($palette-color, $i)), 0.3));
+			// no boxshadow
+				.no-boxshadow & {
+					border-color: nth($palette-color-light, $i);
+				}
+		}
+
+		.card-#{$color}-bg {
+			@extend .card-#{$color};
+			background-color: nth($palette-color, $i);
+		}
+	}
+
 .card-action {
+	border-top: 1px solid $black-bg;
 	position: relative;
 	@include clearfix();
-	&:before {
-		border-top: 1px solid $black-bg;
-		content: '';
-		display: block;
-		position: absolute;
-			top: 0;
-			left: 0;
-		width: 100%;
-		.card-header + & {
-			display: none;
-		}
+	&:first-child {
+		border-top: 0;
 	}
 	.nav {
 		margin-top: 0;
 		margin-bottom: 0;
 		> li {
-			> a {
+			> a,
+			> .a {
 				color: $black-sec;
 				&:focus,
 				&:hover {
 					color: $link-color;
 				}
+				.card[class*="-bg"] & {
+					color: $white;
+				}
+			}
+			&.active > {
+				a,
+				.a {
+					color: $link-color;
+				}
 			}
-			&.active > a,
-			&.open > a {
-				color: $link-color;
+			&.open > {
+				a,
+				.a {
+					color: $black-text;
+				}
 			}
 		}
 	}
 }
 
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.card-#{$color} .card-action {
+			border-top-color: nth($palette-color-light, $i);
+		}
+
+		.card-#{$color}-bg .card-action {
+			border-top-color: nth($palette-color-dark-m, $i);
+		}
+	}
+
 .card-header {
 	padding-top: ($line-height / 4);
 	padding-bottom: ($line-height / 4);
@@ -58,7 +100,7 @@
 	@include clearfix();
 	&:before {
 		border-bottom: 1px solid $black-bg;
-		content: '';
+		content: "";
 		display: block;
 		position: absolute;
 			bottom: 0;
@@ -80,7 +122,14 @@
 }
 
 .card-img {
+	overflow: hidden;
 	position: relative;
+	&:first-child {
+		border-radius: 2px 2px 0 0;
+	}
+	&:last-child {
+		border-radius: 0 0 2px 2px;
+	}
 	img {
 		display: block;
 		height: auto;
@@ -110,6 +159,20 @@
 		padding-top: ($line-height / 2);
 		padding-bottom: ($line-height / 2);
 	}
+	.card-inner-side ~ & {
+		overflow: hidden;
+	}
+}
+
+.card-inner-side {
+	padding-top: ($line-height / 2);
+	padding-bottom: ($line-height / 2);
+	&.pull-left {
+		padding-left: $grid-gutter;
+	}
+	&.pull-right {
+		padding-right: $grid-gutter;
+	}
 }
 
 .card-main {
@@ -120,8 +183,18 @@
 	            flex: 1;
 }
 
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.card-#{$color}-bg .card-main a {
+			color: nth($palette-color-light, $i);
+		}
+	}
+
 .card-side {
 	background-color: $white-bg;
+	border-radius: 2px 0 0 2px;
 	max-width: 33.33333%;
 	padding-right: $grid-gutter;
 	padding-left: $grid-gutter;
@@ -139,6 +212,7 @@
 		padding-left: 0;
 	}
 	&.card-side-right {
+		border-radius: 0 2px 2px 0;
 		-webkit-box-ordinal-group: 2;
 		   -moz-box-ordinal-group: 2;
 		           -ms-flex-order: 2;
@@ -147,24 +221,16 @@
 	}
 }
 
-.card-wrap {
-	margin-top: $line-height;
-}
-
 // colour
+	.card-offwhite .card-side {
+		background-color: $white-bg-dark;
+	}
+
 	@each $color in $palette-list {
 		$i: index($palette-list, $color);
 
-		.card-#{$color} {
-			@include box-shadow(0 0 1px nth($palette-color, $i));
-			&:focus,
-			&:hover {
-				@include box-shadow(0 0 5px nth($palette-color, $i));
-			}
-			.card-action:before {
-				border-top-color: nth($palette-color-light, $i);
-			}
-			.card-side {
+		.card-side {
+			.card-#{$color} & {
 				background-color: nth($palette-color, $i);
 				color: $white;
 				&[href] {
@@ -174,11 +240,7 @@
 					}
 				}
 			}
-		}
-
-		.card-#{$color}-bg {
-			background-color: nth($palette-color, $i);
-			.card-side {
+			.card-#{$color}-bg & {
 				background-color: nth($palette-color-dark-m, $i);
 				&[href] {
 					&:focus,
@@ -190,14 +252,6 @@
 		}
 	}
 
-	.card[class*="-bg"] {
-		color: $white;
-		.card-action .nav > li {
-			> a {
-				color: $white;
-			}
-			&.open > a {
-				color: $black-text;
-			}
-		}
-	}
+.card-wrap {
+	margin-top: $line-height;
+}

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

@@ -1,18 +1,23 @@
 .dropdown {
 	position: relative;
+	@include transition(z-index 0s 0.3s);
 	&.open {
 		z-index: ($content-base + 1);
+		@include transition(z-index 0s);
 	}
 	[data-toggle="dropdown"] {
 		cursor: pointer;
 	}
 }
 
+.dropdown-inline {
+	display: inline-block;
+}
+
 .dropdown-menu {
 	background-color: $white;
 	border: 1px solid $black-hint;
 	border-radius: 0 2px 2px 2px;
-	display: none;
 	list-style: none;
 	margin: -1px 0 0 !important;
 	min-width: 100%;
@@ -24,15 +29,26 @@
 		top: 100%;
 		left: 0;
 	@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15));
+	@include opacity(0);
+	@include transform(scale(0.25, 0));
+	-webkit-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	@include transition(all 0.3s $timing);
+	-webkit-transition-property: opacity, -webkit-transform;
+	        transition-property: opacity, transform;
 	.dropdown.open & {
-		display: block;
+		@include opacity(1);
+		@include transform(scale(1, 1));
 	}
 	&.dropdown-menu-right,
+	.dropdown.pull-right &,
 	.nav.pull-right & {
 		border-radius: 2px 0 2px 2px;
 		// position
 			right: 0;
 			left: auto;
+		-webkit-transform-origin: 100% 0;
+		        transform-origin: 100% 0;
 	}
 	a,
 	.a {
@@ -58,53 +74,56 @@
 		display: block;
 		position: relative;
 	}
+	// no csstransform
+		.no-csstransforms & {
+			display: none;
+		}
+		.no-csstransforms .dropdown.open & {
+			display: block;
+		}
 }
 
 .dropdown-toggle {
-	position: relative;
-	z-index: 1;
+	@include transition(background-color 0.3s $timing);
 	.dropdown.open & {
-		background-color: $white;
-		border: 1px solid $black-hint;
-		border-bottom: 0;
+		background-color: $black-bg;
 		border-radius: 2px 2px 0 0;
-		padding: ($line-height / 2 - 1) ($grid-gutter - 1) ($line-height / 2);
-		.content-nav &,
-		.header & {
-			border-top: 0;
-			border-radius: 0;
-			padding-top: ($line-height / 2);
-		}
 	}
 }
 
+// colour
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+
+		.dropdown-toggle-#{$color} {
+			.dropdown.open & {
+				background-color: nth($palette-color-dark, $i);
+			}
+		}
+	}
+
 .dropdown-toggle-btn {
 	position: relative;
 	z-index: 1;
 	.dropdown.open & {
 		background-color: $white;
-		border-color: $black-hint;
-		border-bottom-color: transparent;
-		border-radius: 2px 2px 0 0;
 		color: $black-text;
 		@include box-shadow(none);
-		&:after,
-		&:before {
-			background-color: $black-hint;
-			content: '';
-			display: block;
-			height: 1px;
-			position: absolute;
-				bottom: -1px;
-			width: 1px;
-		}
-		&:after {
+	}
+	~ .dropdown-menu {
+		min-width: 101%;
+		min-width: calc(100% + 2px);
+		padding-top: ($btn-height + $line-height / 2) !important;
+		// position
+			top: ($line-height / -2);
+			left: -1px;
+		@include transform(scale(1, 0));
+		&.dropdown-menu-right,
+		.dropdown.pull-right &,
+		.nav.pull-right & {
 			// position
 				right: -1px;
-		}
-		&:before {
-			// position
-				left: -1px;
+				left: auto;
 		}
 	}
 }

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

@@ -0,0 +1,123 @@
+.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(all 0.3s $timing);
+		-webkit-transition-property: background-color, -webkit-transform;
+		        transition-property: background-color, transform;
+		&: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(all 0.3s $timing);
+		-webkit-transition-property: background-color, color, -webkit-transform;
+		        transition-property: background-color, color, transform;
+		&:before {
+			// position
+				top: auto;
+		}
+	}
+	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;
+		}
+	}
+}
+
+// animation
+	@-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;
+		}
+	}