HTMLテンプレートやBootstrapを追加

app/assets/scss/material-dashboard/mixins/_badge.scss

@@ -0,0 +1,12 @@
+@mixin badge-variant($bg) {
+	color: saturate(darken($bg, 10%), 10);
+    background-color: lighten($bg, 32%);
+
+  	&[href] {
+	    @include hover-focus {
+	        color: color-yiq($bg);
+	        text-decoration: none;
+	        background-color: darken($bg, 12%);
+	    }
+	}
+}

app/assets/scss/material-dashboard/mixins/_buttons.scss

@@ -0,0 +1,12 @@
+@mixin colored-shadows($value){
+  // new box shadow optimized for Tablets and Phones
+  box-shadow: 0 3px 3px 0 rgba($value, .15),
+              0 3px 1px -2px rgba($value, .2),
+              0 1px 5px 0 rgba($value, .15);
+}
+
+@mixin colored-shadows-hover($value){
+    box-shadow: 0 14px 26px -12px rgba($value, .4),
+                0 4px 23px 0 rgba($value, .15),
+                0 8px 10px -5px rgba($value, .2);
+}

app/assets/scss/material-dashboard/mixins/_colored-shadows.scss

@@ -0,0 +1,5 @@
+@mixin shadow-big-color($color){
+  // new box shadow optimized for Tablets and Phones
+  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
+              0 7px 10px -5px rgba($color, 0.4)
+}

app/assets/scss/material-dashboard/mixins/_hover.scss

@@ -0,0 +1,27 @@
+
+@mixin hover() {
+  &:hover { @content; }
+}
+
+@mixin hover-focus() {
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin plain-hover-focus() {
+  &,
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin hover-focus-active() {
+  &:hover,
+  &:focus,
+  &:active {
+    @content;
+  }
+}

app/assets/scss/material-dashboard/mixins/_social-buttons.scss

@@ -0,0 +1,46 @@
+// for social buttons
+@mixin social-buttons-color ($color, $state-color) {
+  background-color: $color;
+  color: $white;
+
+  &:focus,
+  &:hover {
+    background-color: $state-color;
+    color: $white;
+  }
+  &:active,
+  &:focus,
+  &:active:focus {
+    box-shadow: none;
+  }
+
+  &.btn-simple {
+    color: $state-color;
+    background-color: transparent;
+    background-image: none !important;
+    box-shadow: none;
+    border: none;
+
+    &:hover,
+    &:focus,
+    &:hover:focus,
+    &:active,
+    &:hover:focus:active {
+      color: $state-color;
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+  }
+
+
+  &.btn-neutral {
+    color: $color;
+    background-color: $white;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: $state-color;
+    }
+  }
+}

app/assets/scss/material-dashboard/mixins/_vendor.scss

@@ -0,0 +1,58 @@
+@mixin transform-translate-y($value) {
+  -webkit-transform: translate3d(0, $value, 0);
+  -moz-transform: translate3d(0, $value, 0);
+  -o-transform: translate3d(0, $value, 0);
+  -ms-transform: translate3d(0, $value, 0);
+  transform: translate3d(0, $value, 0);
+}
+@mixin perspective($value) {
+  -webkit-perspective: $value;
+  -moz-perspective: $value;
+  -o-perspective: $value;
+  -ms-perspective: $value;
+  perspective: $value;
+}
+@mixin transitions($time, $type) {
+  -webkit-transition: all $time $type;
+  -moz-transition: all $time $type;
+  -o-transition: all $time $type;
+  -ms-transition: all $time $type;
+  transition: all $time $type;
+}
+@mixin transitions-property($property, $time, $type) {
+  -webkit-transition: $property $time $type;
+  -moz-transition: $property $time $type;
+  -o-transition: $property $time $type;
+  -ms-transition: $property $time $type;
+  transition: $property $time $type;
+}
+@mixin transform-style($type){
+  -webkit-transform-style: $type;
+  -moz-transform-style: $type;
+  -o-transform-style: $type;
+  -ms-transform-style: $type;
+  transform-style: $type;
+}
+
+@mixin backface-visibility($type){
+    -webkit-backface-visibility: $type;
+    -moz-backface-visibility: $type;
+    -o-backface-visibility: $type;
+    -ms-backface-visibility: $type;
+        backface-visibility: $type;
+}
+
+@mixin rotateY-180() {
+    -webkit-transform: rotateY( 180deg );
+    -moz-transform: rotateY( 180deg );
+    -o-transform: rotateY( 180deg );
+    -ms-transform: rotateY(180deg);
+    transform: rotateY( 180deg );
+}
+
+@mixin border-end-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-top-right-radius: valid-radius($radius) !important;
+    border-bottom-right-radius: valid-radius($radius) !important;
+  }
+}

app/assets/scss/material-dashboard/mixins/mixins.scss

@@ -0,0 +1,6 @@
+@import "badge";
+@import "buttons";
+@import "hover";
+@import "colored-shadows";
+@import "social-buttons";
+@import "vendor";