material-sass 0.0.4 → 1.0.0

data/app/assets/stylesheets/material/{_code.scss → components/_code.scss}

@@ -3,41 +3,43 @@ kbd,
 pre,
 samp {
 	font-family: $font-fam-mono;
+	font-size: 1em;
 }
 
 code {
-	background-color: $white-bg;
-	border: 1px solid $black-bg;
+	background-color: $offwhite-solid;
+	border: 1px solid $black-divider-solid;
 	border-radius: 4px;
-	color: $palette-red-dark;
+	color: $brand-color-accent;
 	font-size: 75%;
 	line-height: 1;
 	padding: 2px 4px;
 }
 
 kbd {
-	background-color: $black-text;
+	background-color: $black-text-solid;
 	border-radius: 4px;
-	color: $white;
+	color: $white-text-solid;
 	font-size: 75%;
 	padding: 2px 4px;
 	kbd {
 		font-size: 100%;
-		font-weight: $font-weight-bold;
+		font-weight: $font-weight-medium;
 		padding: 0;
 	}
 }
 
 pre {
-	background-color: $white-bg;
-	border: 1px solid $black-bg;
+	background-color: $offwhite-solid;
+	border: 1px solid $black-divider-solid;
 	border-radius: 2px;
-	color: $black-text;
+	color: $black-text-solid;
 	display: block;
 	font-size: $font-size-h6;
 	line-height: $line-height-h6;
-	margin: $line-height 0 ;
-	padding: ($line-height / 2) ($grid-gutter / 2);
+	margin: $margin-md 0;
+	overflow: auto;
+	padding: $margin-sm ($grid-gutter / 2);
 	word-break: break-all;
 	word-wrap: break-word;
 	code {
@@ -48,4 +50,4 @@ pre {
 		padding: 0;
 		white-space: pre-wrap;
 	}
-}
+}

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

@@ -0,0 +1,103 @@
+.dropdown {
+	position: relative;
+	z-index: 1;
+	[data-toggle="dropdown"] {
+		cursor: pointer;
+	}
+}
+
+.dropdown-inline {
+	display: inline-block;
+}
+
+.dropdown-menu {
+	background-color: $white;
+	border: 1px solid $black-divider;
+	border-radius: 0 2px 2px 2px;
+	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 0 3px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18);
+	list-style: none;
+	margin: 0 !important;
+	min-width: 100%;
+	opacity: 0;
+	padding-top: $margin-base !important;
+	padding-right: 0;
+	padding-bottom: $margin-base !important;
+	padding-left: 0;
+	position: absolute !important;
+		top: 100%;
+		left: 0;
+	transform: scale(0.3, 0);
+	transform-origin: 0 0;
+	transition-duration: 0.3s;
+	transition-property: opacity, transform;
+	transition-timing-function: $timing;
+	.dropdown.open & {
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+	&.dropdown-menu-right,
+	.dropdown.pull-right &,
+	.nav.pull-right & {
+		border-radius: 2px 0 2px 2px;
+		// position
+			right: 0;
+			left: auto;
+		transform-origin: 100% 0;
+	}
+	a,
+	.a {
+		color: $black-text-solid !important;
+		@include text-overflow();
+		&:focus,
+		&:hover {
+			background-color: $offwhite-solid;
+		}
+	}
+	.active > a,
+	.active > .a {
+		background-color: $offwhite-solid;
+	}
+}
+
+.dropdown-toggle {
+	transition: background-color 0.3s $timing;
+	.dropdown.open & {
+		background-color: $offwhite;
+		border-radius: 2px 2px 0 0;
+	}
+}
+
+.dropdown-toggle-btn {
+	margin-right: 1px;
+	margin-left: 1px;
+	padding-right: $grid-gutter;
+	padding-left: $grid-gutter;
+	position: relative;
+	z-index: 1;
+	.dropdown.open & {
+		background-color: $white;
+		box-shadow: none;
+		color: $black-text-solid;
+	}
+	~ .dropdown-menu {
+		min-width: 100%;
+		padding-top: ($btn-height + $margin-base + ($nav-height - $btn-height)) !important;
+		// position
+			top: ($margin-base * -1 + ($nav-height - $btn-height) / -2);
+			left: 0;
+		transform: scale(1, 0);
+		&.dropdown-menu-right,
+		.dropdown.pull-right &,
+		.nav.pull-right & {
+			// position
+				right: 0;
+				left: auto;
+		}
+	}
+}
+
+.dropdown-wrap {
+	margin-top: $line-height;
+	margin-bottom: $line-height;
+	@include clearfix();
+}

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

@@ -0,0 +1,161 @@
+.checkbox-adv,
+.radiobtn-adv {
+	font-size: $font-size;
+	line-height: $line-height;
+}
+
+[class*="checkbox-circle"],
+[class*="radiobtn-circle"] {
+	display: block;
+	height: $font-size;
+	position: absolute;
+		top: (($line-height - $font-size) / 2 - 1);
+		left: 0;
+	width: $font-size;
+}
+
+[class*="radiobtn-circle"] {
+	border-radius: 50%;
+}
+
+.checkbox-circle,
+.radiobtn-circle {
+	border: 2px solid $black-sec;
+	transition: border-color 0.3s $timing;
+}
+
+.checkbox-circle {
+	input[type="checkbox"]:focus ~ & {
+		border-color: $black-text;
+	}
+	fieldset[disabled] input[type="checkbox"] ~ &,
+	input[type="checkbox"][disabled] ~ &,
+	.checkbox-adv.disabled input[type="checkbox"] ~ & {
+		border-color: $black-hint;
+	}
+}
+
+.radiobtn-circle {
+	input[type="radio"]:focus ~ & {
+		border-color: $black-text;
+	}
+	input[type="radio"]:checked ~ & {
+		border-color: $brand-color-accent;
+	}
+	fieldset[disabled] input[type="radio"] ~ &,
+	input[type="radio"][disabled] ~ &,
+	.radiobtn-adv.disabled input[type="radio"] ~ & {
+		border-color: $black-hint;
+	}
+	fieldset[disabled] input[type="radio"]:checked ~ &,
+	input[type="radio"]:checked[disabled] ~ &,
+	.radiobtn-adv.disabled input[type="radio"]:checked ~ & {
+		border-color: $brand-color-accent-light;
+	}
+}
+
+.checkbox-circle-check,
+.radiobtn-circle-check {
+	background-color: transparent;
+	transform: scale(0, 0);
+	transition: transform 0.3s $timing;
+	&:after,
+	&:before {
+		background-color: $brand-color-accent;
+		border-radius: 50%;
+		content: "";
+		display: block;
+		opacity: 0;
+		position: absolute;
+	}
+	&:after {
+		height: ($font-size * 5);
+		// position
+			top: ($font-size * -2);
+			left: ($font-size * -2);
+		width: ($font-size * 5);
+	}
+	&:before {
+		height: 100%;
+		// position
+			top: 0;
+			left: 0;
+		transition: opacity 0.3s $timing;
+		width: 100%;
+	}
+}
+
+.checkbox-circle-check {
+	input[type="checkbox"]:checked ~ & {
+		transform: scale(0.5, 0.5);
+		&:after {
+			animation: circle-check 0.6s;
+		}
+	}
+	fieldset[disabled] &,
+	input[type="checkbox"][disabled] ~ &,
+	.checkbox-adv.disabled & {
+		display: none;
+	}
+}
+
+.radiobtn-circle-check {
+	input[type="radio"]:checked ~ & {
+		transform: scale(0.5, 0.5);
+		&:after {
+			animation: circle-check 0.6s;
+		}
+		&:before {
+			opacity: 1;
+		}
+	}
+	fieldset[disabled] &,
+	input[type="radio"][disabled] ~ &,
+	.radiobtn-adv.disabled & {
+		&:after,
+		&:before {
+			display: none;
+		}
+	}
+	fieldset[disabled] input[type="radio"]:checked ~ &,
+	input[type="radio"]:checked[disabled] ~ &,
+	.radiobtn-adv.disabled input[type="radio"]:checked ~ & {
+		background-color: $brand-color-accent-light;
+	}
+}
+
+.checkbox-circle-icon {
+	background-color: $brand-color-accent;
+	color: $brand-text-accent;
+	opacity: 0;
+	transform: scale(0.5, 0.5);
+	transition-duration: 0.3s;
+	transition-property: opacity, transform;
+	transition-timing-function: $timing;
+	&:before {
+		// position
+			top: auto;
+	}
+	input[type="checkbox"]:checked ~ & {
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+	fieldset[disabled] input[type="checkbox"]:checked ~ &,
+	input[type="checkbox"]:checked[disabled] ~ &,
+	.checkbox-adv.disabled input[type="checkbox"]:checked ~ & {
+		background-color: $brand-color-accent-light;
+	}
+}
+
+// animation
+	@keyframes circle-check {
+		0% {
+			opacity: 0;
+		}
+		25% {
+			opacity: 0.25;
+		}
+		100% {
+			opacity: 0;
+		}
+	}

data/app/assets/stylesheets/material/{element → components}/_form-adv-datepicker.scss

@@ -5,44 +5,30 @@
 }
 
 .picker__box {
-	background-clip: padding-box;
-	background-color: $white;
 	border-radius: 4px;
 	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5);
+	display: flex;
+	flex-direction: column;
 	outline: 0;
-	overflow: hidden;
 	position: relative;
 	vertical-align: middle;
 	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;
-			}
+			flex-direction: row;
 		}
 }
 
 .picker__date-display {
 	background-color: $brand-color;
 	border-radius: 4px 4px 0 0;
-	color: $white;
-	padding: ($line-height / 2) $grid-gutter;
+	color: $brand-text;
+	padding: $margin-sm $grid-gutter;
 	text-align: left;
 	// 992
 		@include responsive(md) {
-			border-radius: 4px 0 0 0;
-			float: left;
-			width: (($grid-gutter + $line-height * 2 * 7) / 2);
+			border-radius: 4px 0 0 4px;
+			width: floor(($cell-height * 7 + $grid-gutter) / 2);
 		}
 }
 
@@ -53,28 +39,42 @@
 
 .picker__date-display-top {
 	color: $brand-color-light;
-	font-weight: $font-weight-light;
-	margin-bottom: ($line-height / 4);
+	margin-bottom: $margin-base;
+}
+
+.picker__date-inner {
+	background-color: $white;
+	border-radius: 0 0 4px 4px;
+	flex: 1;
+	// 992
+		@include responsive(md) {
+			border-radius: 0 4px 4px 0;
+		}
 }
 
 .picker__day {
 	border-radius: 50%;
 	display: inline-block;
-	height: ($line-height * 1.5);
-	padding: ($line-height / 4) 0;
-	width: ($line-height * 1.5);
+	height: $btn-height;
+	padding: (($btn-height - $line-height) / 2) 0;
+	width: $btn-height;
 	&:focus,
 	&:hover {
-		color: $link-color;
+		color: $brand-color;
 		cursor: pointer;
 	}
-	&.picker__day--selected {
-		background-color: $brand-color;
-		color: $white !important;
+	&.picker__day--disabled {
+		color: inherit;
+		cursor: not-allowed;
+		opacity: 0.5;
 	}
-	&.picker__day--today {
+	&.picker__day--highlighted {
 		color: $brand-color;
 	}
+	&.picker__day--selected {
+		background-color: $brand-color;
+		color: $brand-text !important;
+	}
 }
 
 .picker__day-display {
@@ -82,96 +82,91 @@
 }
 
 .picker__day--outfocus {
-	color: $white-bg-dark;
+	display: none;
 }
 
 .picker__footer {
-	clear: both;
-	padding: ($line-height / 2) ($grid-gutter / 2);
+	padding: $margin-base $grid-gutter;
+	text-align: right;
 	button {
 		margin-left: ($grid-gutter / 2);
 		&:first-child {
 			margin-left: 0;
 		}
 	}
-	// 480
-		@include responsive(xs) {
-			text-align: right;
+	// 992
+		@include responsive(md) {
+			padding-right: ($grid-gutter * 1.5);
+			padding-left: ($grid-gutter * 1.5);
 		}
 }
 
 .picker__frame {
-	display: inline-block;
-	margin: ($line-height * 2) auto;
-	max-width: ($grid-gutter + $line-height * 1.5 * 7);
+	margin: $margin-lg auto;
+	max-width: ($btn-height * 7 + $grid-gutter);
+	position: relative;
 	transform: scale(0, 0);
-	transition: all 0.3s $timing;
-	transition-property: transform;
-	vertical-align: middle;
-	white-space: normal;
+	transition: transform 0.3s $timing;
 	.picker--opened & {
 		transform: scale(1, 1);
 	}
-	// 480
-		@include responsive(xs) {
-			max-width: ($grid-gutter + $line-height * 1.75 * 7);
-		}
 	// 992
 		@include responsive(md) {
-			max-width: (($grid-gutter + $line-height * 2 * 7) * 1.5);
+			max-width: ceil(($cell-height * 7 + $grid-gutter) * 1.5);
 		}
 }
 
 .picker__header {
-	margin: ($line-height / 2) ($grid-gutter / 2) ($line-height / 4);
+	margin-top: $margin-sm;
+	margin-bottom: (($btn-height - $line-height) / 2);
 	position: relative;
-	// 992
-		@include responsive(md) {
-			float: left;
-			margin-top: ($line-height / 4);
-			margin-right: 0;
-			margin-left: 0;
-			width: ($grid-gutter + $line-height * 14);
-		}
 }
 
 .picker__holder {
+	align-items: center;
 	backface-visibility: hidden;
+	display: flex;
 	overflow-x: hidden;
 	overflow-y: auto;
 	position: fixed;
-		top: 100%;
+		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
 	text-align: center;
-	transition: background-color 0.3s $timing, top 0s linear 0.3s;
-	white-space: nowrap;
+	transform: translateY(100%);
+	transition: transform 0s 0.3s;
 	width: 100%;
 	-webkit-overflow-scrolling: touch;
 	-ms-overflow-style: -ms-autohiding-scrollbar;
-	&:after {
+	&:before {
+		background-color: $black;
 		content: "";
-		display: inline-block;
+		display: block;
 		height: 100%;
-		vertical-align: middle;
-		width: 1px;
+		opacity: 0;
+		position: absolute;
+			top: 0;
+			left: 0;
+		transition: opacity 0.3s $timing;
+		width: 100%;
 	}
 	.picker--opened & {
-		background-color: rgba(0, 0, 0, 0.5);
-		// position
-			top: 0;
-		transition: background-color 0.3s $timing, top 0s linear 0s;
+		transform: translateZ(0);
+		transition: none;
+		&:before {
+			opacity: 0.5;
+		}
 	}
 }
 
 .picker__input {
 	background-color: transparent !important;
 	border-bottom-style: solid !important;
-	color: $black-text !important;
+	color: inherit !important;
 	cursor: text !important;
 	&.picker__input--active {
-		border-color: $link-color;
+		border-color: $brand-color-accent;
 		border-bottom-width: 2px;
 		&.form-control-default {
 			border-bottom-width: 1px;
@@ -191,69 +186,57 @@
 .picker__nav--next,
 .picker__nav--prev {
 	cursor: pointer;
+	height: $btn-height;
 	line-height: $line-height;
-	margin-top: ($line-height / -2);
+	margin-top: ($btn-height / -2);
+	padding-top: (($btn-height - $line-height) / 2);
+	padding-bottom: (($btn-height - $line-height) / 2);
 	position: absolute;
 		top: 50%;
 	text-align: center;
-	width: ($line-height * 1.5);
+	width: $btn-height;
 	&:focus,
 	&:hover {
-		color: $link-color;
+		color: $brand-color;
 	}
-	// 480
-		@include responsive(xs) {
-			width: ($line-height * 1.75);
-		}
 	// 992
 		@include responsive(md) {
-			width: ($line-height * 2);
+			width: $cell-height;
 		}
 }
 
 .picker__nav--next {
 	// position
-		right: 0;
+		right: ($grid-gutter / 2);
 	&:before {
 		content: "keyboard_arrow_right";
 	}
-	// 992
-		@include responsive(md) {
-			right: ($grid-gutter / 2);
-		}
 }
 
 .picker__nav--prev {
 	// position
-		left: 0;
+		left: ($grid-gutter / 2);
 	&:before {
 		content: "keyboard_arrow_left";
 	}
-	// 992
-		@include responsive(md) {
-			left: ($grid-gutter / 2);
-		}
 }
 
 .picker__select--month,
 .picker__select--year {
 	@extend .form-control;
+	background-position: 100% (($line-height - 12) / 2) !important;
 	border-bottom: 0;
 	display: inline-block;
 	height: $line-height;
 	margin-left: $grid-gutter;
-	padding-top: 0;
-	padding-bottom: 0;
+	padding: 0;
 	width: auto;
 	&:first-child {
 		margin-left: 0;
 	}
-}
-
-@media only screen and (-webkit-min-device-pixel-ratio: 0) {
-	select.picker__select--month,
-	select.picker__select--year {
-		background-position: 100% 50%;
+	&:focus {
+		border-bottom: 0;
+		padding-bottom: 0;
 	}
 }
 
@@ -264,7 +247,6 @@
 	table-layout: fixed;
 	// 992
 		@include responsive(md) {
-			float: left;
 			margin: 0;
 		}
 }
@@ -278,28 +260,25 @@
 	padding: 0;
 	text-align: center;
 	vertical-align: middle;
-	width: ($line-height * 1.5);
-	// 480
-		@include responsive(xs) {
-			width: ($line-height * 1.75);
-		}
+	width: $btn-height;
 	// 992
 		@include responsive(md) {
-			width: ($line-height * 2);
+			width: $cell-height;
 			&:first-child {
 				padding-left: ($grid-gutter / 2);
-				width: ($grid-gutter / 2 + $line-height * 2);
+				width: ($cell-height + $grid-gutter / 2);
 			}
 			&:last-child {
 				padding-right: ($grid-gutter / 2);
-				width: ($grid-gutter / 2 + $line-height * 2);
+				width: ($cell-height + $grid-gutter / 2);
 			}
 		}
 }
 
 .picker__weekday {
-	color: $black-hint;
-	font-weight: $font-weight-light;
+	color: $black-hint-solid;
+	padding-top: (($btn-height - $line-height) / 2) !important;
+	padding-bottom: (($btn-height - $line-height) / 2) !important;
 }
 
 .picker__weekday-display {