material-sass 1.4.1 → 4.0.0.alpha5

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

@@ -0,0 +1,86 @@
+.tooltip {
+  display: block;
+  font-size: $tooltip-font-size;
+  position: absolute;
+  z-index: $tooltip-zindex;
+  @include reset-text;
+
+  &.bs-tether-element-attached-bottom,
+  &.tooltip-top {
+    margin-top: ($tooltip-margin * -1);
+  }
+
+  &.bs-tether-element-attached-left,
+  &.tooltip-right {
+    margin-left: $tooltip-margin;
+  }
+
+  &.bs-tether-element-attached-right,
+  &.tooltip-left {
+    margin-left: ($tooltip-margin * -1);
+  }
+
+  &.bs-tether-element-attached-top,
+  &.tooltip-bottom {
+    margin-top: $tooltip-margin;
+  }
+
+  &.fade {
+    opacity: 0;
+    transition-property: opacity;
+
+    .tooltip-inner {
+      transform: scale(0.87);
+      @include transition-acceleration(transform);
+    }
+  }
+
+  &.fade.in {
+    opacity: $tooltip-opacity;
+    transition-property: opacity;
+
+    .tooltip-inner {
+      transform: scale(1);
+      @include transition-deceleration(transform);
+    }
+  }
+}
+
+.tooltip-inner {
+  background-color: $tooltip-bg;
+  color: $tooltip-color;
+  padding: $tooltip-padding-y $tooltip-padding-x;
+  text-align: center;
+  @include border-radius($border-radius);
+}
+
+// desktop
+  @include media-breakpoint-up(md) {
+    .tooltip {
+      font-size: $tooltip-font-size-md-up;
+
+      &.bs-tether-element-attached-bottom,
+      &.tooltip-top {
+        margin-top: ($tooltip-margin-md-up * -1);
+      }
+
+      &.bs-tether-element-attached-left,
+      &.tooltip-right {
+        margin-left: $tooltip-margin-md-up;
+      }
+
+      &.bs-tether-element-attached-right,
+      &.tooltip-left {
+        margin-left: ($tooltip-margin-md-up * -1);
+      }
+
+      &.bs-tether-element-attached-top,
+      &.tooltip-bottom {
+        margin-top: $tooltip-margin-md-up;
+      }
+    }
+
+    .tooltip-inner {
+      padding: $tooltip-padding-y-md-up $tooltip-padding-x-md-up;
+    }
+  }

data/app/assets/stylesheets/material/mixins/_background-variant.scss

@@ -0,0 +1,14 @@
+@mixin bg-variant($class, $color, $color-dark: "") {
+  #{$class} {
+    background-color: $color !important;
+  }
+
+  @if ($color-dark != "") {
+    a#{$class} {
+      // active, focus, hover
+        @include active-focus-hover {
+          background-color: $color-dark !important;
+        }
+    }
+  }
+}

data/app/assets/stylesheets/material/mixins/_border-radius.scss

@@ -0,0 +1,34 @@
+@mixin border-radius($radius: $border-radius) {
+  @if $enable-rounded {
+    border-radius: $radius;
+  }
+}
+
+// single side
+  @mixin border-top-radius($radius: $border-radius) {
+    @if $enable-rounded {
+      border-top-left-radius: $radius;
+      border-top-right-radius: $radius;
+    }
+  }
+
+  @mixin border-right-radius($radius: $border-radius) {
+    @if $enable-rounded {
+      border-top-right-radius: $radius;
+      border-bottom-right-radius: $radius;
+    }
+  }
+
+  @mixin border-bottom-radius($radius: $border-radius) {
+    @if $enable-rounded {
+      border-bottom-right-radius: $radius;
+      border-bottom-left-radius: $radius;
+    }
+  }
+
+  @mixin border-left-radius($radius: $border-radius) {
+    @if $enable-rounded {
+      border-bottom-left-radius: $radius;
+      border-top-left-radius: $radius;
+    }
+  }

data/app/assets/stylesheets/material/mixins/_breakpoint.scss

@@ -0,0 +1,38 @@
+@function breakpoint-max($name) {
+  $next: breakpoint-next($name);
+  @return if($next, breakpoint-min($next) - 1px, null);
+}
+
+@function breakpoint-min($name) {
+  $min: map-get($grid-breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-next($name, $names: map-keys($grid-breakpoints)) {
+  $n: index($names, $name);
+  @return if($n < length($names), nth($names, $n + 1), null);
+}
+
+@mixin media-breakpoint-down($name) {
+  $max: breakpoint-max($name);
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-up($name) {
+  $min: breakpoint-min($name);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content
+  }
+}

data/app/assets/stylesheets/material/mixins/_clearfix.scss

@@ -0,0 +1,7 @@
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}

data/app/assets/stylesheets/material/mixins/_form.scss

@@ -0,0 +1,60 @@
+@mixin floating-label-size($floating-label-height, $floating-label-padding-top, $font-size, $height, $line-height, $margin-bottom, $padding-top) {
+  $form-control-padding-top: ($floating-label-height - $floating-label-padding-top - $line-height - ($height - $padding-top - $line-height));
+
+  margin-bottom: $margin-bottom;
+  padding-top: $floating-label-padding-top;
+
+  > label {
+    font-size: $font-size;
+    line-height: $line-height;
+    // position
+      top: ($floating-label-padding-top + $form-control-padding-top);
+  }
+
+  &.has-value > label,
+  &.is-focused > label {
+    // position
+      top: $floating-label-padding-top;
+    transform: scale($floating-label-font-size-focus / $font-size);
+  }
+
+  > .form-control {
+    padding-top: $form-control-padding-top;
+  }
+
+  > select.form-control {
+    background-position: 100% ($form-control-padding-top + ($line-height - $material-icon-size / $font-size-root) / 2);
+  }
+}
+
+@mixin form-control-size($border-width, $font-size, $height, $line-height, $margin-bottom, $padding-top) {
+  font-size: $font-size;
+  line-height: $line-height;
+  margin-bottom: $margin-bottom;
+  padding: $padding-top 0 ($height - $padding-top - $line-height - $border-width / $font-size-root);
+
+  @if $border-width != 0px {
+    &:focus {
+      padding-bottom: ($height - $padding-top - $line-height - ($border-width + 1) / $font-size-root);
+    }
+  }
+}
+
+@mixin form-control-validation($color) {
+  .custom-control,
+  .form-check,
+  .form-control-feedback,
+  .form-control-label,
+  // &.checkbox label,
+  // &.checkbox-inline label,
+  &.form-check label,
+  &.form-check-inline label {
+  // &.radio label,
+  // &.radio-inline label {
+    color: $color;
+  }
+
+  .form-control {
+    border-bottom-color: $color;
+  }
+}

data/app/assets/stylesheets/material/mixins/_grid.scss

@@ -0,0 +1,149 @@
+//
+// make column
+//
+  @mixin make-grid-columns() {
+    %grid-column {
+      min-height: 1px;
+      position: relative;
+      @include make-gutters;
+
+      @if $enable-flex {
+        width: 100%;
+      }
+    }
+
+    $breakpoint-counter: 0;
+
+    @each $breakpoint in map-keys($grid-breakpoints) {
+      $breakpoint-counter: ($breakpoint-counter + 1);
+
+      .col-#{$breakpoint} {
+        @extend %grid-column;
+      }
+
+      @for $i from 1 through $grid-columns {
+        .col-#{$breakpoint}-#{$i} {
+          @extend %grid-column;
+        }
+      }
+
+      @include media-breakpoint-up($breakpoint) {
+        @if $enable-flex {
+          .col-#{$breakpoint} {
+            flex-basis: 0;
+            flex-grow: 1;
+            max-width: 100%;
+          }
+        }
+
+        @for $i from 1 through $grid-columns {
+          .col-#{$breakpoint}-#{$i} {
+            @include make-col($i);
+          }
+        }
+
+        @each $modifier in (pull, push) {
+          @for $i from 0 through $grid-columns {
+            .#{$modifier}-#{$breakpoint}-#{$i} {
+              @include make-col-modifier($i, $modifier);
+            }
+          }
+        }
+
+        @for $i from 0 through ($grid-columns - 1) {
+          @if $breakpoint-counter != 1 or $i != 0 {
+            .offset-#{$breakpoint}-#{$i} {
+              @include make-col-modifier($i, offset);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // col
+    @mixin make-col($size) {
+      @if $enable-flex {
+        flex: 0 0 percentage($size / $grid-columns);
+        max-width: percentage($size / $grid-columns);
+      } @else {
+        float: left;
+        width: percentage($size / $grid-columns);
+      }
+    }
+
+  // gutter
+    @mixin make-gutters($type: padding) {
+      @each $breakpoint in map-keys($grid-gutter-widths) {
+        @include media-breakpoint-up($breakpoint) {
+          $gutter: map-get($grid-gutter-widths, $breakpoint);
+
+          @if ($type == margin) {
+            margin-right: ($gutter / -2);
+            margin-left: ($gutter / -2);
+          } @else if ($type == padding) {
+            padding-right: ($gutter / 2);
+            padding-left: ($gutter / 2);
+          }
+        }
+      }
+    }
+
+  // modifier
+    @mixin make-col-modifier($size, $type) {
+      @if ($type == offset) {
+        @include make-col-offset($size);
+      } @else if ($type == pull) {
+        @include make-col-pull($size);
+      } @else if ($type == push ){
+        @include make-col-push($size);
+      }
+    }
+
+    @mixin make-col-offset($size) {
+      margin-left: percentage($size / $grid-columns);
+    }
+
+    @mixin make-col-pull($size) {
+      right: if($size > 0, percentage($size / $grid-columns), auto);
+    }
+
+    @mixin make-col-push($size) {
+      left: if($size > 0, percentage($size / $grid-columns), auto);
+    }
+
+//
+// make container
+//
+  @mixin make-container() {
+    margin-right: auto;
+    margin-left: auto;
+    @include make-gutters;
+
+    @if not $enable-flex {
+      @include clearfix;
+    }
+  }
+
+  @mixin make-container-max-widths() {
+    @each $breakpoint, $container-max-width in $container-max-widths {
+      @include media-breakpoint-up($breakpoint) {
+        max-width: 100%;
+        width: $container-max-width;
+      }
+    }
+  }
+
+//
+// make row
+//
+  @mixin make-row() {
+    @include make-gutters(margin);
+
+    @if $enable-flex {
+      display: flex;
+      flex-wrap: wrap;
+    } @else {
+      @include clearfix;
+    }
+  }

data/app/assets/stylesheets/material/mixins/_hex-to-rgba.scss

@@ -0,0 +1,3 @@
+@function hex-to-rgba($color, $opacity) {
+  @return rgba(red($color), green($color), blue($color), $opacity);
+}

data/app/assets/stylesheets/material/mixins/_hover.scss

@@ -0,0 +1,70 @@
+@mixin active-focus-hover {
+  @if $enable-hover-media-query {
+    &:active,
+    &:focus {
+      @content
+    }
+
+    @include hover {
+      @content
+    }
+  } @else {
+    &:active,
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin focus-hover {
+  @if $enable-hover-media-query {
+    &:focus {
+      @content
+    }
+
+    @include hover {
+      @content
+    }
+  } @else {
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin hover {
+  @if $enable-hover-media-query {
+    @media (hover: hover) {
+      &:hover {
+        @content
+      }
+    }
+  } @else {
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin plain-active-focus-hover {
+  @if $enable-hover-media-query {
+    &,
+    &:active,
+    &:focus {
+      @content
+    }
+
+    @include hover {
+      @content
+    }
+  } @else {
+    &,
+    &:active,
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
+}