material-sass 0.0.1

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

@@ -0,0 +1,116 @@
+.dropdown {
+	position: relative;
+	&.open {
+		z-index: ($content-base + 1);
+	}
+	[data-toggle="dropdown"] {
+		cursor: pointer;
+	}
+}
+
+.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%;
+	padding-top: ($line-height / 2) !important;
+	padding-right: 0;
+	padding-bottom: ($line-height / 2) !important;
+	padding-left: 0;
+	position: absolute;
+		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));
+	.dropdown.open & {
+		display: block;
+	}
+	&.dropdown-menu-right,
+	.nav.pull-right & {
+		border-radius: 2px 0 2px 2px;
+		// position
+			right: 0;
+			left: auto;
+	}
+	a,
+	.a {
+		color: $black-text;
+		display: block;
+		padding: ($line-height / 2) $grid-gutter;
+		overflow: hidden;
+		position: relative;
+		text-align: left;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		&:focus,
+		&:hover {
+			background-color: $white-bg;
+			text-decoration: none;
+		}
+	}
+	.active > a,
+	.active > .a {
+		background-color: $white-bg;
+	}
+	li {
+		display: block;
+		position: relative;
+	}
+}
+
+.dropdown-toggle {
+	position: relative;
+	z-index: 1;
+	.dropdown.open & {
+		background-color: $white;
+		border: 1px solid $black-hint;
+		border-bottom: 0;
+		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);
+		}
+	}
+}
+
+.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 {
+			// position
+				right: -1px;
+		}
+		&:before {
+			// position
+				left: -1px;
+		}
+	}
+}
+
+.dropdown-wrap {
+	margin-top: $line-height;
+	margin-bottom: $line-height;
+	@include clearfix();
+}

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

@@ -0,0 +1,265 @@
+.picker {
+	position: absolute;
+	z-index: $top-base;
+	@include user-select(none);
+}
+
+// datepicker
+	.picker__input {
+		border-bottom-style: solid !important;
+		color: $black-text !important;
+		cursor: text !important;
+		&.picker__input--active {
+			border-bottom-color: $link-color;
+			border-bottom-width: 2px;
+		}
+	}
+
+// datepicker element
+	.picker__box {
+		background-clip: padding-box;
+		background-color: $white;
+		border-radius: 4px;
+		outline: 0;
+		overflow: hidden;
+		vertical-align: middle;
+		@include box-shadow(0 1px 30px rgba(0, 0, 0, 0.5));
+		@include clearfix();
+	}
+
+	// calendar
+		.picker__day {
+			border-radius: 50%;
+			height: ($line-height * 1.5);
+			margin: ($line-height / 4);
+			padding: ($line-height / 4) 0;
+			width: ($line-height * 1.5);
+			&:focus,
+			&:hover {
+				color: $link-color;
+				cursor: pointer;
+			}
+			&.picker__day--selected {
+				background-color: $brand-color;
+				color: $white !important;
+			}
+			&.picker__day--today {
+				color: $brand-color;
+			}
+		}
+
+		.picker__day--outfocus {
+			color: $white-bg-dark;
+		}
+
+		.picker__table {
+			border-collapse: collapse;
+			border-spacing: 0;
+			margin: 0 ($grid-gutter / 2);
+			table-layout: fixed;
+			// 992
+				@include responsive(md) {
+					float: left;
+					margin: 0;
+					width: 50%;
+				}
+		}
+
+		.picker__table td,
+		.picker__table th {
+			border: 0;
+			font-size: floor($font-size * 0.9);
+			line-height: $line-height;
+			margin: 0;
+			min-width: ($line-height * 2);
+			padding: 0;
+			text-align: center;
+			vertical-align: middle;
+		}
+
+		.picker__weekday {
+			color: $black-hint;
+			font-weight: 300;
+		}
+
+	// footer
+		.picker__footer {
+			clear: both;
+			padding: ($line-height / 2) ($grid-gutter / 2);
+			text-align: right;
+			button {
+				margin-left: ($grid-gutter / 2);
+				&:first-child {
+					margin-left: 0;
+				}
+			}
+		}
+
+	// header
+		.picker__header {
+			margin: ($line-height / 2) ($grid-gutter / 2);
+			position: relative;
+			// 992
+				@include responsive(md) {
+					float: left;
+					margin-top: ($line-height / 4);
+					margin-right: 0;
+					margin-left: 0;
+					width: 50%;
+				}
+		}
+
+		.picker__month,
+		.picker__year {
+			display: inline;
+			margin-left: $grid-gutter;
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+
+		.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%;
+			&:focus,
+			&:hover {
+				color: $link-color;
+			}
+		}
+
+		.picker__nav--next {
+			// position
+				right: 0;
+		}
+
+		.picker__nav--prev {
+			// position
+				left: 0;
+		}
+
+		.picker__select--month,
+		.picker__select--year {
+			@extend .form-control;
+			border-bottom: 0;
+			display: inline-block;
+			height: $line-height;
+			margin-left: $grid-gutter;
+			padding-top: 0;
+			padding-bottom: 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%;
+			}
+		}
+
+	// top date
+		.picker__date-display {
+			background-color: $brand-color;
+			border-radius: 4px 4px 0 0;
+			color: $white;
+			// 992
+				@include responsive(md) {
+					border-radius: 4px 0 0 0;
+					float: left;
+					width: 50%;
+				}
+		}
+		
+		.picker__day-display {
+			font-size: $font-size-lg;
+			line-height: $line-height-lg;
+			padding: 0 $grid-gutter;
+		}
+
+		.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 * 2);
+					padding-bottom: $line-height;
+				}
+		}
+
+		.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: $white-bg;
+			font-size: $font-size-h3;
+			font-weight: 300;
+			line-height: $line-height-h3;
+			padding: 0 $grid-gutter ($line-height / 2);
+			// 992
+				@include responsive(md) {
+					padding-top: $line-height;
+					padding-bottom: ($line-height * 2);
+				}
+		}
+
+// frame & holder
+	.picker__frame {
+		display: inline-block;
+		margin: ($line-height * 2) auto;
+		max-width: ($grid-gutter + $line-height * 14);
+		vertical-align: middle;
+		white-space: normal;
+		@include transform(scale(0, 0));
+		-webkit-transition: -webkit-transform 0.3s $timing 0s;
+		        transition: transform 0.3s $timing 0s;
+		.picker--opened & {
+			@include transform(scale(1, 1));
+		}
+		// 992
+			@include responsive(md) {
+				max-width: (($grid-gutter + $line-height * 14) * 2);
+			}
+	}
+
+	.picker__holder {
+		overflow-x: hidden;
+		overflow-y: auto;
+		position: fixed;
+			top: 100%;
+			right: 0;
+			bottom: 0;
+			left: 0;
+		text-align: center;
+		white-space: nowrap;
+		width: 100%;
+		-webkit-backface-visibility: hidden;
+		-webkit-overflow-scrolling: touch;
+		-ms-overflow-style: -ms-autohiding-scrollbar;
+		@include transition(background-color 0.3s $timing, top 0s linear 0.3s);
+		&:after {
+			content: '';
+			display: inline-block;
+			height: 100%;
+			vertical-align: middle;
+			width: 1px;
+		}
+		.picker--opened & {
+			background-color: rgba(0, 0, 0, 0.5);
+			// position
+				top: 0;
+			@include transition(background-color 0.3s $timing, top 0s linear 0s);
+		}
+	}

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

@@ -0,0 +1,277 @@
+// 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;
+		}
+	}