material-sass 0.0.4 → 1.0.0

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

@@ -1,95 +0,0 @@
-.btn {
-	background-color: $white;
-	background-image: none;
-	background-position: 50% 50%;
-	background-size: 100% 100%;
-	border: 1px solid transparent;
-	border-radius: 2px;
-	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15), 0 1px 5px 1px rgba(0, 0, 0, 0.15);
-	color: $black-text;
-	cursor: pointer;
-	display: inline-block;
-	font-size: $font-size;
-	font-weight: $font-weight;
-	line-height: $line-height;
-	margin-bottom: 0;
-	max-width: 100%;
-	padding: (($btn-height - $line-height - 2) / 2) ($grid-gutter - 1);
-	position: relative;
-	text-align: center;
-	text-transform: uppercase;
-	transition: background-color 0.3s $timing, box-shadow 0.3s $timing;
-	user-select: none;
-	vertical-align: middle;
-	white-space: nowrap;
-	&:active,
-	&:focus,
-	&:hover {
-		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15), 0 5px 10px 1px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15);
-		color: $black-text;
-		outline: 0;
-		text-decoration: none;
-	}
-	&[disabled],
-	fieldset[disabled] & {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-	&.waves-effect {
-		border: 0;
-		padding: (($btn-height - $line-height) / 2) $grid-gutter;
-	}
-}
-
-// colour
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-
-		.btn-#{$color} {
-			background-color: nth($palette-color, $i);
-			color: $white;
-			&:active,
-			&:focus,
-			&:hover {
-				color: $white;
-			}
-			&[disabled],
-			fieldset[disabled] & {
-				background-color: nth($palette-color, $i);
-			}
-		}
-	}
-
-// size
-	.btn-lg {
-		font-size: $font-size-h4;
-		line-height: $line-height-h4;
-		padding: (($base * 3 * 2.5 - $line-height-h4 - 2) / 2) ($grid-gutter * 1.5 - 1);
-		&.waves-effect {
-			padding: (($base * 3 * 2.5 - $line-height-h4) / 2) ($grid-gutter * 1.5);
-		}
-	}
-
-	.btn-sm {
-		font-size: $font-size-h6;
-		line-height: ($line-height - 2);
-		padding: 0 ($grid-gutter / 2 - 1);
-		&.waves-effect {
-			padding: 1px ($grid-gutter / 2);
-		}
-	}
-
-.btn-block {
-	display: block;
-	white-space: normal;
-	width: 100%;
-}
-
-.btn-text {
-	color: $black-text;
-	display: inline-block;
-	font-size: $font-size;
-	font-weight: $font-weight;
-	line-height: $line-height;
-	padding: (($btn-height - $line-height) / 2) 0;
-}

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

@@ -1,245 +0,0 @@
-.card {
-	background-color: $white;
-	border-radius: 2px;
-	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
-	display: block;
-	display: flex;
-	margin-bottom: $line-height;
-	transition: box-shadow 0.3s $timing;
-	position: relative;
-	&[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} {
-			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();
-	&:first-child {
-		border-top: 0;
-	}
-	.nav {
-		margin-top: 0;
-		margin-bottom: 0;
-		> li {
-			> a,
-			> .a {
-				color: $black-sec;
-				&:focus,
-				&:hover {
-					color: $link-color;
-				}
-				.card[class*="-bg"] & {
-					color: $white;
-				}
-			}
-			&.active > {
-				a,
-				.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);
-	position: relative;
-	@include clearfix();
-	&:before {
-		border-bottom: 1px solid $black-bg;
-		content: "";
-		display: block;
-		position: absolute;
-			bottom: 0;
-			left: 0;
-		width: 100%;
-	}
-}
-
-.card-heading {
-	display: block;
-	font-size: $font-size-h4;
-	line-height: $line-height-h4;
-	margin-top: $line-height;
-	margin-bottom: $line-height;
-	.card-header & {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-}
-
-.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;
-		width: 100%;
-	}
-}
-
-.card-img-heading {
-	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
-	color: $white;
-	font-size: $font-size-h4;
-	line-height: $line-height-h4;
-	margin: 0;
-	padding: ($line-height / 2) $grid-gutter;
-	position: absolute;
-		bottom: 0;
-		left: 0;
-	width: 100%;
-}
-
-.card-inner {
-	padding-right: $grid-gutter;
-	padding-left: $grid-gutter;
-	position: relative;
-	z-index: 1;
-	.card-header & {
-		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 {
-	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;
-	&[href] {
-		color: $black-text;
-		&:focus,
-		&:hover {
-			background-color: $white-bg-dark;
-			text-decoration: none;
-		}
-	}
-	&.card-side-img {
-		overflow: hidden;
-		padding-right: 0;
-		padding-left: 0;
-	}
-	&.card-side-right {
-		border-radius: 0 2px 2px 0;
-		order: 2;
-	}
-}
-
-// colour
-	.card-offwhite .card-side {
-		background-color: $white-bg-dark;
-	}
-
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
-
-		.card-side {
-			.card-#{$color} & {
-				background-color: nth($palette-color, $i);
-				color: $white;
-				&[href] {
-					&:focus,
-					&:hover {
-						background-color: nth($palette-color-dark-m, $i);
-					}
-				}
-			}
-			.card-#{$color}-bg & {
-				background-color: nth($palette-color-dark-m, $i);
-				&[href] {
-					&:focus,
-					&:hover {
-						background-color: nth($palette-color-dark, $i);
-					}
-				}
-			}
-		}
-	}
-
-.card-wrap {
-	margin-top: $line-height;
-}

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

@@ -1,132 +0,0 @@
-.dropdown {
-	position: relative;
-	transition: z-index 0s 0.3s;
-	&.open {
-		transition: z-index 0s;
-		z-index: ($content-base + 1);
-	}
-	[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;
-	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15);
-	list-style: none;
-	margin: -1px 0 0 !important;
-	min-width: 100%;
-	opacity: 0;
-	padding-top: ($line-height / 2) !important;
-	padding-right: 0;
-	padding-bottom: ($line-height / 2) !important;
-	padding-left: 0;
-	position: absolute;
-		top: 100%;
-		left: 0;
-	transform: scale(0.25, 0);
-	transform-origin: 0 0;
-	transition: all 0.3s $timing;
-	transition-property: opacity, transform;
-	.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;
-		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;
-	}
-	// no csstransform
-		.no-csstransforms & {
-			display: none;
-		}
-		.no-csstransforms .dropdown.open & {
-			display: block;
-		}
-}
-
-.dropdown-toggle {
-	transition: background-color 0.3s $timing;
-	.dropdown.open & {
-		background-color: $black-bg;
-		border-radius: 2px 2px 0 0;
-	}
-}
-
-// 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;
-		box-shadow: none;
-		color: $black-text;
-	}
-	~ .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;
-		transform: scale(1, 0);
-		&.dropdown-menu-right,
-		.dropdown.pull-right &,
-		.nav.pull-right & {
-			// position
-				right: -1px;
-				left: auto;
-		}
-	}
-}
-
-.dropdown-wrap {
-	margin-top: $line-height;
-	margin-bottom: $line-height;
-	@include clearfix();
-}