material-sass 0.0.1 → 0.0.2

data/app/assets/stylesheets/material/_utilities-responsive.scss

@@ -0,0 +1,97 @@
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-xx-block,
+.visible-xx-inline,
+.visible-xx-inline-block {
+	display: none !important;
+}
+
+// 0 - 479
+	@include responsive("(max-width: #{$screen-xs - 1})") {
+		.hidden-xx {
+			display: none !important;
+		}
+		.visible-xx-block {
+			display: block !important;
+		}
+		.visible-xx-inline {
+			display: inline !important;
+		}
+		.visible-xx-inline-block {
+			display: inline-block !important;
+		}
+	}
+
+// 480 - 767
+	@include responsive("(min-width: #{$screen-xs}) and (max-width: #{$screen-sm - 1})") {
+		.hidden-xs {
+			display: none !important;
+		}
+		.visible-xs-block {
+			display: block !important;
+		}
+		.visible-xs-inline {
+			display: inline !important;
+		}
+		.visible-xs-inline-block {
+			display: inline-block !important;
+		}
+	}
+
+// 768 - 991
+	@include responsive("(min-width: #{$screen-sm}) and (max-width: #{$screen-md - 1})") {
+		.hidden-sm {
+			display: none !important;
+		}
+		.visible-sm-block {
+			display: block !important;
+		}
+		.visible-sm-inline {
+			display: inline !important;
+		}
+		.visible-sm-inline-block {
+			display: inline-block !important;
+		}
+	}
+
+// 992 - 1439
+	@include responsive("(min-width: #{$screen-md}) and (max-width: #{$screen-lg - 1})") {
+		.hidden-md {
+			display: none !important;
+		}
+		.visible-md-block {
+			display: block !important;
+		}
+		.visible-md-inline {
+			display: inline !important;
+		}
+		.visible-md-inline-block {
+			display: inline-block !important;
+		}
+	}
+
+// 1440
+	@include responsive(lg) {
+		.hidden-lg {
+			display: none !important;
+		}
+		.visible-lg-block {
+			display: block !important;
+		}
+		.visible-lg-inline {
+			display: inline !important;
+		}
+		.visible-lg-inline-block {
+			display: inline-block !important;
+		}
+	}

data/app/assets/stylesheets/material/{_utilitise.scss → _utilities.scss}

@@ -34,6 +34,45 @@
 	}
 }
 
+.avoid-fout {
+	position: relative;
+}
+
+body.avoid-fout {
+	position: static;
+}
+
+.avoid-fout-indicator {
+	font-family: sans-serif !important;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+		top: 0;
+		left: 0;
+	text-align: center;
+	width: 0;
+	.avoid-fout > & {
+		background-color: $white;
+		height: 100%;
+		padding: $line-height $grid-gutter;
+		width: 100%;
+		z-index: ($top-base + 1);
+		@include 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));
+		@include opacity(1);
+	}
+	.avoid-fout-done > & {
+		height: 0;
+		padding: 0;
+		width: 0;
+		@include opacity(0);
+		@include transition(height 0s 0.3s, opacity 0.3s $timing, padding 0s 0.3s, width 0s 0.3s);
+	}
+}
+
+.avoid-fout-indicator-fixed {
+	position: fixed;
+}
+
 .clearfix {
 	@include clearfix();
 }
@@ -78,6 +117,15 @@
 	}
 }
 
+.iframe-seamless {
+	border: 0;
+	display: block;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+}
+
 .img-responsive {
 	@include img-responsive();
 }
@@ -163,6 +211,14 @@
 	}
 }
 
+.modal-scrollbar-measure {
+	height: 50px;
+	overflow: scroll;
+	position: absolute;
+		top: -99999px;
+	width: 50px;
+}
+
 .no-overflow {
 	overflow: hidden;
 }
@@ -177,16 +233,26 @@
 	float: left;
 }
 
+.pull-none {
+	float: none !important;
+}
+
 .pull-right {
 	float: right;
 }
 
-.scrollbar-measure {
-	height: 50px;
-	overflow: scroll;
-	position: absolute;
-		top: -99999px;
-	width: 50px;
+.text-break {
+	word-break: break-all;
+	-webkit-hyphens: auto;
+	   -moz-hyphens: auto;
+	    -ms-hyphens: auto;
+	        hyphens: auto;
+}
+
+.text-lead {
+	font-size: $font-size-h4;
+	font-weight: 300;
+	line-height: $line-height-h4;
 }
 
 .text-overflow {
@@ -197,7 +263,7 @@
 	white-space: nowrap;
 }
 
-// text alignment
+// alignment
 	.text-center {
 		text-align: center;
 	}
@@ -210,43 +276,35 @@
 		text-align: right;
 	}
 
-// text color
-	.text-alt {
-		color: $brand-color;
+// color
+	.text-bg {
+		color: $black-bg;
 	}
 
 	.text-black {
-		color: $black-text;
+		color: $black;
 	}
 
-	.text-blue {
-		color: $palette-blue;
-	}
-
-	.text-green {
-		color: $palette-green;
+	.text-default {
+		color: $black-text;
 	}
 
 	.text-hint {
 		color: $black-hint;
 	}
 
-	.text-purple {
-		color: $palette-purple;
-	}
-
-	.text-red {
-		color: $palette-red;
-	}
-
 	.text-sec {
 		color: $black-sec;
 	}
 
-	.text-yellow {
-		color: $palette-yellow;
-	}
-
 	.text-white {
 		color: $white;
+	}
+
+	@each $color in $palette-list {
+		$i: index($palette-list, $color);
+		
+		.text-#{$color} {
+			color: nth($palette-color, $i);
+		}
 	}

data/app/assets/stylesheets/material/_variable.scss

@@ -1,96 +1,97 @@
 // base
 	$base: 8px;
+	$css-path: ".";
 
 // colour
 	// basic colour
-		// black
-			$black: #000000;
-			$black-bg: #e0e0e0;
-			$black-hint: #9e9e9e;
-			$black-sec: #616161;
-			$black-text: #212121;
-
-		// palette
-			$palette-blue: #2196f3;
-			$palette-blue-dark: #0d47a1;
-			$palette-blue-dark-m: #1976d2;
-			$palette-blue-light: #bbdefb;
-			$palette-blue-light-m: #64b5f6;
-
-			$palette-green: #4caf50;
-			$palette-green-dark: #1b5e20;
-			$palette-green-dark-m: #388e3c;
-			$palette-green-light: #c8e6c9;
-			$palette-green-light-m: #81c784;
-
-			$palette-purple: #9c27b0;
-			$palette-purple-dark: #4a148c;
-			$palette-purple-dark-m: #7b1fa2;
-			$palette-purple-light: #e1bee7;
-			$palette-purple-light-m: #ba68c8;
-
-			$palette-red: #f44336;
-			$palette-red-dark: #b71c1c;
-			$palette-red-dark-m: #d32f2f;
-			$palette-red-light: #ffcdd2;
-			$palette-red-light-m: #e57373;
-
-			$palette-yellow: #ffc107;
-			$palette-yellow-dark: #ff6f00;
-			$palette-yellow-dark-m: #ffa000;
-			$palette-yellow-light: #ffecb3;
-			$palette-yellow-light-m: #ffd54f;
-
-		// white
-			$white: #ffffff;
-			$white-bg: #f5f5f5;
-			$white-bg-dark: #eeeeee;
-			$white-bg-light: #fafafa;
+		$palette-blue:           #2196f3;
+		$palette-blue-dark:      #0d47a1;
+		$palette-blue-dark-m:    #1976d2;
+		$palette-blue-light:     #bbdefb;
+		$palette-blue-light-m:   #64b5f6;
+
+		$palette-green:          #8bc34a;
+		$palette-green-dark:     #33691e;
+		$palette-green-dark-m:   #689f38;
+		$palette-green-light:    #dcedc8;
+		$palette-green-light-m:  #aed581;
+
+		$palette-purple:         #9c27b0;
+		$palette-purple-dark:    #4a148c;
+		$palette-purple-dark-m:  #7b1fa2;
+		$palette-purple-light:   #e1bee7;
+		$palette-purple-light-m: #ba68c8;
+
+		$palette-red:            #f44336;
+		$palette-red-dark:       #b71c1c;
+		$palette-red-dark-m:     #d32f2f;
+		$palette-red-light:      #ffcdd2;
+		$palette-red-light-m:    #e57373;
+
+		$palette-yellow:         #ffc107;
+		$palette-yellow-dark:    #ff6f00;
+		$palette-yellow-dark-m:  #ffa000;
+		$palette-yellow-light:   #ffecb3;
+		$palette-yellow-light-m: #ffd54f;
+
+	// black and white
+		$black:                  #000000;
+		$black-bg:               #e0e0e0;
+		$black-hint:             #9e9e9e;
+		$black-sec:              #616161;
+		$black-text:             #212121;
+
+		$white:                  #ffffff;
+		$white-bg:               #f5f5f5;
+		$white-bg-dark:          #eeeeee;
+		$white-bg-light:         #fafafa;
 
 	// brand colour
-		@import "variable-color";
+		$brand-color:            #4caf50;
+		$brand-color-dark:       #1b5e20;
+		$brand-color-dark-m:     #388e3c;
+		$brand-color-light:      #c8e6c9;
+		$brand-color-light-m:    #81c784;
 
 	// list
-		$palette-color: $brand-color, $palette-blue, $palette-green, $palette-purple, $palette-red, $palette-yellow;
-		$palette-color-dark: $brand-color-dark, $palette-blue-dark, $palette-green-dark, $palette-purple-dark, $palette-red-dark, $palette-yellow-dark;
-		$palette-color-dark-m: $brand-color-dark-m, $palette-blue-dark-m, $palette-green-dark-m, $palette-purple-dark-m, $palette-red-dark-m, $palette-yellow-dark-m;
-		$palette-color-light: $brand-color-light, $palette-blue-light, $palette-green-light, $palette-purple-light, $palette-red-light, $palette-yellow-light;
+		$palette-color:         $brand-color, $palette-blue, $palette-green, $palette-purple, $palette-red, $palette-yellow;
+		$palette-color-dark:    $brand-color-dark, $palette-blue-dark, $palette-green-dark, $palette-purple-dark, $palette-red-dark, $palette-yellow-dark;
+		$palette-color-dark-m:  $brand-color-dark-m, $palette-blue-dark-m, $palette-green-dark-m, $palette-purple-dark-m, $palette-red-dark-m, $palette-yellow-dark-m;
+		$palette-color-light:   $brand-color-light, $palette-blue-light, $palette-green-light, $palette-purple-light, $palette-red-light, $palette-yellow-light;
 		$palette-color-light-m: $brand-color-light-m, $palette-blue-light-m, $palette-green-light-m, $palette-purple-light-m, $palette-red-light-m, $palette-yellow-light-m;
-		$palette-list: "alt", "blue", "green", "purple", "red", "yellow";
+		$palette-list:          "alt", "blue", "green", "purple", "red", "yellow";
 
 // font
-	$font-fam: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
-	$font-fam-mono: Monaco, Menlo, Consolas, "Courier New", monospace;
+	$font-fam:       Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+	$font-fam-mono:  Monaco, Menlo, Consolas, "Courier New", monospace;
 	$font-fam-serif: Georgia, serif;
 
-	// base
-		$base-font-size: ($base * 2);             // 16px
-		$base-line-height: ($base * 3);           // 24px
-
 	// font size
-		$font-size: $base-font-size;              // 16px
-		$font-size-h1: ($base-font-size * 2.75);  // 44px
-		$font-size-h2: ($base-font-size * 2.25);  // 36px
-		$font-size-h3: ($base-font-size * 1.75);  // 28px
-		$font-size-h4: ($base-font-size * 1.25);  // 20px
-		$font-size-h5: ($base-font-size * 1);     // 16px
-		$font-size-h6: ($base-font-size * 0.75);  // 12px
-		$font-size-lg: ($base-font-size * 4);     // 60px
+		$font-size:    ($base * 2);         // 16px
+		$font-size-h1: ($base * 5.5);       // 44px
+		$font-size-h2: ($base * 4.5);       // 36px
+		$font-size-h3: ($base * 3.5);       // 28px
+		$font-size-h4: ($base * 2.5);       // 20px
+		$font-size-h5: ($base * 2);         // 16px
+		$font-size-h6: ($base * 1.5);       // 12px
+		$font-size-lg: ($base * 7.5);       // 60px
 
 	// line height
-		$line-height: $base-line-height;          // 24px
-		$line-height-h1: ($base-line-height * 2); // 48px
-		$line-height-h2: ($base-line-height * 2); // 48px
-		$line-height-h3: ($base-line-height * 2); // 48px
-		$line-height-h4: ($base-line-height * 1); // 24px
-		$line-height-h5: ($base-line-height * 1); // 24px
-		$line-height-h6: ($base-line-height * 1); // 24px
-		$line-height-lg: ($base-line-height * 3); // 72px
+		$line-height:    ($base * 3);       // 24px
+		$line-height-h1: ($base * 6);       // 48px
+		$line-height-h2: ($base * 5);       // 40px
+		$line-height-h3: ($base * 4);       // 32px
+		$line-height-h4: ($base * 3.5);     // 28px
+		$line-height-h5: ($base * 3);       // 24px
+		$line-height-h6: ($base * 2.5);     // 20px
+		$line-height-lg: ($base * 9);       // 72px
 
 	// other
-		$btn-height: ($base-line-height * 1.5);
-		$cell-height: ($base-line-height * 2);
-		$input-height: ($base-line-height * 1.5);
+		$btn-height:   (($base * 3) * 1.5); // 36px
+		$cell-height:  (($base * 3) * 2);   // 48px
+		$input-height: (($base * 3) * 1.5); // 36px
+
+		$fa-font-size-base: $font-size !default;
 
 // grid
 	$grid-cols: 12;
@@ -110,7 +111,7 @@
 	$timing: cubic-bezier(0.4, 0, 0.2, 1);
 
 // z-index
-	$bottom-base: 10;
+	$bottom-base:  10;
 	$content-base: 20;
-	$header-base: 30;
-	$top-base: 40;
+	$header-base:  30;
+	$top-base:     40;