material-sass 0.0.4 → 1.0.0

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

@@ -1,109 +0,0 @@
-.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;
-		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;
-		transform: scale(0);
-		transition: all 0.3s $timing;
-		transition-property: background-color, transform;
-		&:after {
-			background-color: $brand-color;
-			border-radius: 50%;
-			content: "";
-			display: block;
-			height: ($font-size * 5);
-			opacity: 0;
-			position: absolute;
-				top: ($font-size * -2);
-				left: ($font-size * -2);
-			width: ($font-size * 5);
-		}
-	}
-	&.disabled,
-	fieldset[disabled] & {
-		.circle-check:after {
-			background-color: $black-hint;
-		}
-	}
-	input.access-hide:checked ~ .circle-check {
-		transform: scale(0.5);
-		&:after {
-			animation: circle-check 0.6s;
-		}
-	}
-	.circle-icon {
-		background-color: transparent;
-		color: transparent;
-		transform: scale(0.5);
-		transition: all 0.3s $timing;
-		transition-property: background-color, color, transform;
-		&:before {
-			// position
-				top: auto;
-		}
-	}
-	input.access-hide:checked ~ .circle-icon {
-		background-color: $brand-color;
-		color: $white;
-		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
-	@keyframes circle-check {
-		0% {
-			opacity: 0;
-		}
-		25% {
-			opacity: 0.25;
-		}
-		100% {
-			opacity: 0;
-		}
-	}

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

@@ -1,102 +0,0 @@
-.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;
-	transition: background-color 0.3s $timing;
-	vertical-align: middle;
-	width: ($font-size-h4 + ($font-size * 5 - $font-size-h4) / 4);
-	&: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;
-	}
-	input[type="checkbox"]:checked + &,
-	input[type="radio"]:checked + & {
-		background-color: lighten($link-color, 15%);
-		&:after {
-			background-color: $link-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 {
-			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 {
-			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 & {
-		transition: background-color 0.3s $timing 0.15s;
-		&:after {
-			transition: background-color 0.3s $timing 0.15s, box-shadow 0.15s $timing, left 0.3s $timing 0.15s;
-		}
-		&.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($link-color), green($link-color), blue($link-color), 0.25);
-		}
-	}
-	.touch input[type="checkbox"]:checked + &,
-	.touch input[type="radio"]:checked + & {
-		&.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(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/_label.scss

@@ -1,22 +0,0 @@
-.label {
-	background-color: $black-sec;
-	border-radius: 2px;
-	color: $white;
-	display: inline;
-	font-size: 75%;
-	font-style: normal;
-	font-weight: $font-weight;
-	line-height: 1;
-	padding: 0.2em 0.6em;
-	vertical-align: baseline;
-	white-space: nowrap;
-}
-
-// colour
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-		
-		.label-#{$color} {
-			background-color: nth($palette-color, $i);
-		}
-	}

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

@@ -1,8 +0,0 @@
-.sortable-ghost {
-	opacity: 0.5;
-}
-
-.sortable-handle {
-	cursor: move;
-	cursor: -webkit-grab;
-}

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

@@ -1,107 +0,0 @@
-.tab-nav {
-	box-shadow: 0 1px 0 $black-bg;
-	margin-top: $line-height;
-	margin-bottom: $line-height;
-	position: relative;
-	.nav {
-		margin-top: 0 !important;
-		margin-bottom: 0 !important;
-		> li {
-			vertical-align: bottom;
-			> a,
-			> .a {
-				border-bottom: 2px solid transparent;
-				color: $black-text;
-				padding-right: ($grid-gutter / 2);
-				padding-bottom: ($line-height / 2 - 2);
-				padding-left: ($grid-gutter / 2);
-				text-transform: uppercase;
-				transition: border-bottom-color 0s;
-				&:focus,
-				&:hover {
-					border-bottom-color: lighten($link-color, 30%);
-					color: $link-color;
-					transition: border-bottom-color 0.3s $timing;
-				}
-			}
-			&.active > a,
-			&.active > .a {
-				border-bottom-color: $link-color;
-				color: $link-color;
-				transition: border-bottom-color 0s 0.45s;
-			}
-		}
-	}
-}
-
-.tab-nav-indicator {
-	background-color: $link-color;
-	height: 2px;
-	position: absolute;
-		bottom: 0;
-	transition: left 0.3s $timing 0.15s, right 0.3s $timing;
-	&.reverse {
-		transition: left 0.3s $timing, right 0.3s $timing 0.15s;
-	}
-}
-
-// colour
-	.tab-nav-offwhite {
-		.nav {
-			> li {
-				> a,
-				> .a {
-					color: $white;
-					&:focus,
-					&:hover {
-						border-bottom-color: rgba(255, 255, 255, 0.5);
-						color: $white;
-					}
-				}
-				&.active > a,
-				&.active > .a {
-					border-bottom-color: $white;
-					color: $white;
-				}
-			}
-		}
-		.tab-nav-indicator {
-			background-color: $white;
-		}
-	}
-
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-
-		.tab-nav-#{$color} {
-			.nav {
-				> li {
-					> a,
-					> .a {
-						&:focus,
-						&:hover {
-							border-bottom-color: nth($palette-color-light, $i);
-							color: nth($palette-color, $i);
-						}
-					}
-					&.active > a,
-					&.active > .a {
-						border-bottom-color: nth($palette-color, $i);
-						color: nth($palette-color, $i);
-					}
-				}
-			}
-			.tab-nav-indicator {
-				background-color: nth($palette-color, $i);
-			}
-		}
-	}
-
-.tab-pane {
-	display: none;
-	visibility: hidden;
-	&.active {
-		display: block;
-		visibility: visible;
-	}
-}

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

@@ -1,48 +0,0 @@
-.table {
-	background-color: $white;
-	margin-top: $line-height;
-	margin-bottom: $line-height;
-	width: 100%;
-	td,
-	th {
-		border: 1px solid $black-bg;
-		line-height: $line-height;
-		padding: (($cell-height - $line-height) / 2) $grid-gutter (($cell-height - $line-height) / 2 - 1);
-		vertical-align: top;
-		&.nowrap {
-			white-space: nowrap;
-			width: 1%;
-		}
-	}
-	> thead {
-		td,
-		th {
-			background-color: $white-bg;
-			color: $black-sec;
-			vertical-align: bottom;
-		}
-	}
-}
-
-.table-stripe > tbody > tr:nth-child(odd) {
-	background-color: $white-bg-light;
-}
-
-.table-hover > tbody > tr:hover {
-	background-color: $white-bg-dark;
-}
-
-// responsive
-	.table-responsive {
-		margin-top: $line-height;
-		margin-bottom: $line-height;
-		min-height: 0.01%;
-		overflow-x: auto;
-		overflow-y: hidden;
-		-webkit-overflow-scrolling: touch;
-		-ms-overflow-style: -ms-autohiding-scrollbar;
-		.table {
-			margin-top: 0;
-			margin-bottom: 0;
-		}
-	}

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

@@ -1,193 +0,0 @@
-.tile {
-	background-color: $white;
-	box-shadow: 0 -1px 0 $black-bg, 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15);
-	display: block;
-	position: relative;
-	@include clearfix();
-	&[href] {
-		color: $black-text;
-		&:focus,
-		&:hover {
-			color: $link-color;
-			text-decoration: none;
-		}
-	}
-	&.active {
-		margin-top: $line-height !important;
-		margin-bottom: $line-height !important;
-	}
-	.tile-wrap-animation & {
-		opacity: 0;
-		transform: translate(0, 100%);
-		transition: all 0.6s $timing;
-		transition-property: opacity, transform;
-	}
-	.tile-wrap-animation.isinview & {
-		opacity: 1;
-		transform: translate(0, 0) !important;
-	}
-	// no boxshadow
-		.no-boxshadow & {
-			border: 1px solid $black-bg;
-			+ .tile {
-				margin-top: -1px;
-			}
-		}
-}
-
-// colour
-	.tile-offwhite {
-		background-color: $white-bg;
-	}
-
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-
-		.tile-#{$color} {
-			background-color: nth($palette-color, $i);
-			color: $white;
-			a {
-				color: nth($palette-color-light, $i);
-			}
-		}
-	}
-
-.tile-action {
-	@extend .card-action;
-	border-top: 0;
-	float: right;
-	user-select: none;
-	.no-touch &,
-	.touch .tile-collapse & {
-		display: none;
-	}
-	.no-touch .tile:hover &,
-	.tile-collapse.active & {
-		display: block;
-	}
-}
-
-.tile-action-show {
-	display: block !important;
-}
-
-.tile-active-show {
-	transition: height 0.15s linear;
-}
-
-.tile-collapse {
-	transition: margin 0.15s linear;
-	&.active {
-		margin-right: ($grid-gutter * -1 + 1);
-		margin-left: ($grid-gutter * -1 + 1);
-	}
-	.tile-wrap-animation & {
-		transition: all 0.6s $timing, margin 0.15s linear;
-		transition-property: margin, opacity, transform;
-	}
-}
-
-.tile-collapse-full {
-	// 1056 - 1439
-		@media only screen and (min-width: ($grid-gutter * 4 + $screen-md)) and (max-width: ($screen-lg - 1)) {
-			&.active {
-				margin-right: ($grid-gutter * -4 + 1);
-				margin-left: ($grid-gutter * -4 + 1);
-			}
-		}
-	// 1504
-		@media only screen and (min-width: ($grid-gutter * 4 + $screen-lg)) {
-			&.active {
-				margin-right: ($grid-gutter * -4 + 1);
-				margin-left: ($grid-gutter * -4 + 1);
-			}
-		}
-}
-
-.tile-footer {
-	background-color: $white-bg;
-	border-top: 1px solid $black-bg;
-	position: relative;
-	@include clearfix();
-	&:first-child {
-		border-top: 0;
-	}
-	.nav {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-}
-
-// colour
-	.tile-offwhite .tile-footer {
-		background-color: $white-bg-dark;
-	}
-
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-
-		.tile-#{$color} .tile-footer {
-			background-color: nth($palette-color-dark-m, $i);
-			border-top-color: nth($palette-color-dark-m, $i);
-			.nav > li {
-				> a,
-				> .a {
-					color: $white;
-				}
-			}
-		}
-	}
-
-.tile-inner {
-	padding: ($line-height / 2) $grid-gutter;
-	position: relative;
-	.tile-action ~ &,
-	.tile-side ~ & {
-		overflow: hidden;
-	}
-}
-
-.tile-side {
-	@extend .card-inner-side;
-}
-
-.tile-side-container {
-	padding: 0 !important;
-}
-
-.tile-sub {
-	display: inline-block;
-	padding-right: $grid-gutter;
-	padding-left: $grid-gutter;
-	position: relative;
-	width: 100%;
-	&:before {
-		border-top: 1px solid $black-bg;
-		content: "";
-		display: block;
-		position: absolute;
-			top: 0;
-			left: 0;
-		width: 100%;
-	}
-}
-
-// colour
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-
-		.tile-#{$color} .tile-sub:before {
-			border-top-color: nth($palette-color-dark-m, $i);
-		}
-	}
-
-.tile-toggle {
-	cursor: pointer;
-	@include clearfix();
-}
-
-.tile-wrap {
-	margin-top: $line-height;
-	margin-bottom: $line-height;
-	position: relative;
-}