material-sass 4.0.0.alpha5 → 4.0.0.alpha6

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

@@ -5,105 +5,109 @@
 //
 
 .progress {
-  appearance: none;
-  background-color: transparent;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, #{$progress-bar-color} ,#{$progress-bar-color});
-  border: 0;
-  display: block;
-  height: $progress-height;
-  margin-bottom: $progress-margin-bottom;
+  display: flex;
   overflow: hidden;
   position: relative;
-  width: 100%;
-}
-
-.progress::-webkit-progress-bar {
-  background-color: transparent;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, #{$progress-bar-color} ,#{$progress-bar-color});
 }
 
-// bar
-  .progress[value]::-ms-fill {
-    background-color: $progress-bar-color;
-    border: 0;
-    @include border-right-radius($border-radius);
-  }
-
-  .progress[value]::-moz-progress-bar {
-    background-color: $progress-bar-color;
-    @include border-right-radius($border-radius);
-  }
+.progress-bar {
+  background-color: $progress-bar-bg;
+  height: $progress-height;
 
-  .progress[value]::-webkit-progress-value {
-    background-color: $progress-bar-color;
-    @include border-right-radius($border-radius);
+  &::before {
+    background-color: inherit;
+    background-image: linear-gradient(to right, $progress-bar-mask, $progress-bar-mask);
+    content: "";
+    display: block;
+    position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    z-index: -1;
   }
+}
 
-  .progress[value="100"]::-moz-progress-bar {
-    border-right-radius: 0;
+//
+// animated & striped
+//
+  .progress-bar-animated {
+    &::before {
+      animation-direction: reverse;
+      animation-duration: $transition-duration;
+      animation-iteration-count: infinite;
+      animation-name: progress-bar-animation;
+      animation-timing-function: linear;
+    }
   }
 
-  .progress[value="100"]::-webkit-progress-value {
-    border-right-radius: 0;
-  }
+  .progress-bar-animated,
+  .progress-bar-striped {
+    border-right: ($progress-height * 3) solid $progress-bar-mask;
+    box-sizing: content-box;
 
-// colour
-  @each $color in $palettes {
-    $i: index($palettes, $color);
+    &[style*="width:100%"],
+    &[style*="width: 100%"] {
+      border-right: 0;
+    }
 
-    .progress-#{$color} {
+    &::before {
       background-color: transparent;
-      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, #{nth($palettes-color, $i)} ,#{nth($palettes-color, $i)});
-
-      &::-webkit-progress-bar {
-        background-color: transparent;
-        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, #{nth($palettes-color, $i)} ,#{nth($palettes-color, $i)});
-      }
+      background-image: repeating-radial-gradient(#{$progress-height / 2} #{$progress-height / 2}, #{$black-divider}, #{$black-divider} #{$progress-height / 2}, transparent #{$progress-height / 2}, transparent 100%);
+      background-image: -webkit-repeating-radial-gradient(#{$progress-height / 2} #{$progress-height / 2}, #{$black-divider}, #{$black-divider} #{$progress-height / 2}, transparent #{$progress-height / 2}, transparent 100%);
+      background-position: 0 0;
+      background-repeat: repeat-x;
+      background-size: ($progress-height * 3) ($progress-height * 3);
     }
+  }
 
-    .progress-#{$color}[value] {
-      // filled-in portion of the bar
-        &::-ms-fill {
-          background-color: nth($palettes-color, $i);
-        }
-        &::-moz-progress-bar {
-          background-color: nth($palettes-color, $i);
-        }
-        &::-webkit-progress-value {
-          background-color: nth($palettes-color, $i);
-        }
+  @keyframes progress-bar-animation {
+    from {
+      background-position: 0 0;
+    }
+    to {
+      background-position: ($progress-height * 3) 0;
     }
   }
 
 //
 // indeterminate
 //
-  .progress-animated,
-  .progress-indeterminate {
+  .progress-bar-indeterminate {
+    background-image: linear-gradient(to right, $progress-bar-mask, $progress-bar-mask);
+    position: relative;
+    width: 100% !important;
+
     &::after,
     &::before {
       animation-duration: 2s;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
-      background-color: $progress-bar-color;
+      width: 0%;
+      @include border-radius($border-radius);
+    }
+
+    &::after {
+      animation-name: progress-bar-indeterminate-after;
+      background-color: inherit;
       content: "";
       display: block;
       position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
-      width: 0%;
-      @include border-radius($border-radius);
-    }
-    &::after {
-      animation-name: progress-indeterminate-after;
     }
+
     &::before {
-      animation-name: progress-indeterminate-before;
+      animation-name: progress-bar-indeterminate-before;
+      background-image: none;
+      // position
+        right: auto;
+      z-index: 0;
     }
   }
 
-  @keyframes progress-indeterminate-after {
+  @keyframes progress-bar-indeterminate-after {
     0% {
       // position
         left: 0%;
@@ -121,7 +125,7 @@
     }
   }
 
-  @keyframes progress-indeterminate-before {
+  @keyframes progress-bar-indeterminate-before {
     0%,
     62.5% {
       // position
@@ -144,31 +148,3 @@
       width: 25%;
     }
   }
-
-  .progress-animated[value],
-  .progress-indeterminate[value] {
-    &::-ms-fill {
-      background-color: transparent;
-    }
-    &::-moz-progress-bar {
-      background-color: transparent;
-    }
-    &::-webkit-progress-value {
-      background-color: transparent;
-    }
-  }
-
-  // colour
-    @each $color in $palettes {
-      $i: index($palettes, $color);
-
-      .progress-animated,
-      .progress-indeterminate {
-        &.progress-#{$color} {
-          &::after,
-          &::before {
-            background-color: nth($palettes-color, $i);
-          }
-        }
-      }
-    }

data/app/assets/stylesheets/material/material/_selection-control.scss

@@ -1,26 +1,23 @@
 .custom-control {
   cursor: pointer;
-  display: inline;
+  display: inline-flex;
   font-size: $font-size-base;
+  margin-right: ($selection-control-spacer-x * 2);
+  min-height: ($font-size-base * $line-height-base);
   padding-left: ($selection-control-indicator-size / $font-size-root + $selection-control-spacer-x);
   position: relative;
-
-  + .custom-control {
-    margin-left: ($selection-control-spacer-x * 2);
-  }
 }
 
 .custom-control-indicator {
   background-position: 50% 50%;
   background-repeat: no-repeat;
-  background-size: $selection-control-indicator-size;
+  background-size: $selection-control-indicator-size $selection-control-indicator-size;
   display: block;
   height: $selection-control-indicator-size;
-  line-height: $selection-control-indicator-size;
+  pointer-events: none;
   position: absolute;
-    top: (($font-size-base - $selection-control-indicator-size / $font-size-root) / 2);
+    top: (($font-size-base * $line-height-base - $selection-control-indicator-size / $font-size-root) / 2);
     left: 0;
-  text-align: center;
   user-select: none;
   width: $selection-control-indicator-size;
 
@@ -71,8 +68,6 @@
       }
 
       .custom-control-indicator {
-        pointer-events: none;
-
         &::before {
           display: none;
         }
@@ -82,24 +77,12 @@
 
 // stacked layout
   .custom-controls-stacked {
-    // .custom-control-indicator {
-    //   // position
-    //     top: (($font-size-base * $line-height-base - ($selection-control-indicator-size) / $font-size-root) / 2);
-    // }
-    .custom-control {
-      &::after {
-        content: "";
-        display: block;
-        margin-bottom: $selection-control-spacer-y;
-      }
-
-      &:last-child::after {
-        display: none;
-      }
+    display: flex;
+    flex-direction: column;
 
-      + .custom-control {
-        margin-left: 0;
-      }
+    .custom-control {
+      margin-right: 0;
+      margin-bottom: $selection-control-spacer-y;
     }
   }
 

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

@@ -3,34 +3,21 @@
 //
 
 .nav-tabs {
-  line-height: 0;
-  position: relative;
-
-  @if $enable-flex {
-    display: flex;
-    flex-wrap: none;
-  } @else {
-    letter-spacing: -0.25em;
-    white-space: nowrap;
-  }
-
-  .nav-item {
-    line-height: 0;
-
-    @if not $enable-flex {
-      display: inline-block;
-      letter-spacing: normal;
-      white-space: normal;
-    }
-  }
+  box-shadow: inset 0 -1px 0 $nav-tab-border-color;
 
   .nav-link {
+    align-items: center;
     color: inherit;
+    display: flex;
     font-size: $nav-tab-link-font-size;
     font-weight: $nav-tab-link-font-weight;
+    height: 100%;
+    justify-content: center;
     line-height: 1;
+    min-height: $nav-tab-link-height;
     opacity: $nav-tab-link-opacity;
     padding: (($nav-tab-link-height - $nav-tab-link-font-size * 2) / 2) $nav-tab-link-padding-x;
+    position: relative;
     text-transform: uppercase;
     @include transition-standard(background-color, opacity);
 
@@ -47,19 +34,6 @@
       @include transition-standard(opacity);
     }
 
-    @if $enable-flex {
-      align-items: center;
-      display: flex;
-      height: 100%;
-      justify-content: center;
-      min-height: $nav-tab-link-height;
-    } @else {
-      display: table-cell;
-      height: $nav-tab-link-height;
-      text-align: center;
-      vertical-align: middle;
-    }
-
     @include media-breakpoint-up(lg) {
       padding-right: $nav-tab-link-padding-x-lg;
       padding-left: $nav-tab-link-padding-x-lg;
@@ -72,12 +46,12 @@
 
       &:active,
       &.active {
-        opacity: 1;
+        opacity: $nav-tab-link-opacity-visible;
       }
 
       &.active {
         &::before {
-          opacity: 1;
+          opacity: $nav-tab-link-opacity-visible;
         }
       }
 
@@ -85,112 +59,73 @@
       &.disabled {
         background-color: transparent;
         color: $nav-link-color-disabled;
-        opacity: 1;
-      }
-  }
-}
-
-.nav-tabs-material {
-  .nav-link {
-    &::before {
-      transition: none;
-    }
-
-    // active, focus, hover
-      &.active::before {
-        transition-delay: $transition-duration;
-        transition-duration: 0s;
-        transition-property: opacity;
+        opacity: $nav-tab-link-opacity-visible;
       }
   }
 }
 
 // variation
-  .nav-tabs-bordered {
-    box-shadow: 0 1px 0 $nav-tab-border-color;
-  }
-
-  .nav-tabs-centered {
-    @if $enable-flex {
-      justify-content: center;
-    } @else {
-      text-align: center;
+  .nav-tabs {
+    &.border-0,
+    &.border-bottom-0 {
+      box-shadow: none;
     }
-  }
 
-  .nav-tabs-fixed {
-    @if $enable-flex {
-      .nav-item {
-        flex-basis: 0;
-        flex-grow: 1;
+    &.nav-justified {
+      .nav-link {
         min-width: $nav-tab-link-min-width;
+
         @include media-breakpoint-up(lg) {
           min-width: $nav-tab-link-min-width-lg;
         }
       }
-    } @else {
-      letter-spacing: normal;
-      width: 100%;
-
-      .nav-item {
-        display: table-cell;
-        min-width: $nav-tab-link-min-width;
-        width: 1%;
-      }
-
-      .nav-link {
-        max-width: 100%;
-        width: 99999px;
-      }
     }
 
-    .nav-link {
-      @include text-truncate;
-    }
-  }
-
-  .nav-tabs-scrollable {
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-
-    .nav-link {
-      max-width: $nav-tab-link-max-width;
-      @include text-truncate;
+    &.nav-scrollable {
+      overflow-x: auto;
+      overflow-y: visible;
+      -webkit-overflow-scrolling: touch;
 
-      @if $enable-flex {
+      .nav-link {
+        max-width: $nav-tab-link-max-width;
         min-width: $nav-tab-link-min-width;
+
         @include media-breakpoint-up(lg) {
           min-width: $nav-tab-link-min-width-lg;
         }
-      } @else {
-        width: $nav-tab-link-min-width;
-        @include media-breakpoint-up(lg) {
-          width: $nav-tab-link-min-width-lg;
-        }
       }
     }
   }
 
-//
-// indicator
-//
-  .nav-tabs-indicator {
-    background-color: $nav-tab-indicator-bg;
-    height: $nav-tab-indicator-height;
-    display: none;
-    position: absolute;
-      bottom: 0;
-
-    &.animate {
-      transition: left ($transition-duration / 2) $transition-timing-function-standard ($transition-duration / 2), right $transition-duration $transition-timing-function-standard;
-
-      &.reverse {
-        transition: left $transition-duration $transition-timing-function-standard, right ($transition-duration / 2) $transition-timing-function-standard ($transition-duration / 2);
-      }
+  .nav-tabs-material {
+    position: relative;
+
+    .nav-link::before {
+      transition: none;
     }
 
-    &.in {
-      display: block;
+    .nav-tabs-indicator {
+      background-color: $nav-tab-indicator-bg;
+      height: $nav-tab-indicator-height;
+      display: none;
+      position: absolute;
+        bottom: 0;
+
+      &.show {
+        display: block;
+      }
     }
+
+    // animation
+      &.animate {
+        .nav-link::before {
+          opacity: 0;
+        }
+
+        .nav-tabs-indicator {
+          transition-duration: $transition-duration;
+          transition-property: left, right;
+          transition-timing-function: $transition-timing-function-standard;
+        }
+      }
   }

data/app/assets/stylesheets/material/material/_text-field-floating-label.scss

@@ -1,6 +1,6 @@
 .floating-label {
   position: relative;
-  @include floating-label-size($floating-label-height, $floating-label-padding-top, $textfield-font-size, $textfield-height, $textfield-line-height, $textfield-margin-bottom, $textfield-padding-top);
+  @include floating-label-size($textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);
 
   > label {
     color: $floating-label-color;
@@ -18,12 +18,17 @@
     @include transition-standard(color, top, transform);
   }
 
+  &.has-value > label,
+  &.is-focused > label {
+    // position
+      top: 0;
+  }
+
   &.is-focused > label {
     color: $floating-label-color-focus;
   }
 
   > .form-control {
-    margin-bottom: 0;
     position: relative;
 
     &::placeholder {
@@ -35,7 +40,7 @@
 
 // size
   .floating-label-lg {
-    @include floating-label-size($floating-label-height-lg, $floating-label-padding-top-lg, $textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-margin-bottom-lg, $textfield-padding-top-lg);
+    @include floating-label-size($textfield-font-size-lg, $textfield-height-lg, $textfield-padding-top-lg, $textfield-padding-bottom-lg);
 
     > .form-control {
       @extend .form-control-lg;
@@ -43,7 +48,7 @@
   }
 
   .floating-label-sm {
-    @include floating-label-size($floating-label-height-sm, $floating-label-padding-top-sm, $textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-margin-bottom-sm, $textfield-padding-top-sm);
+    @include floating-label-size($textfield-font-size-sm, $textfield-height-sm, $textfield-padding-top-sm, $textfield-padding-bottom-sm);
 
     > .form-control {
       @extend .form-control-sm;

data/app/assets/stylesheets/material/material/_text-field-input-group.scss

@@ -1,43 +1,36 @@
 .input-group {
-  margin-bottom: $textfield-margin-bottom;
+  display: flex;
   position: relative;
   width: 100%;
 
-  @if $enable-flex {
-    display: flex;
-  } @else {
-    border-collapse: separate;
-    display: table;
-  }
-
   .form-control {
-    margin-bottom: 0;
-    position: relative;
-
-    @if $enable-flex {
-      flex-grow: 1;
-    } @else {
-      display: table-cell;
-      width: 100%;
-    }
+    align-self: center;
+    flex: 1 1 auto;
+    width: 1%;
   }
 }
 
 .input-group-addon {
+  align-items: center;
   color: inherit;
-  font-size: $textfield-font-size;
-  line-height: $textfield-line-height;
-  margin: 0 $spacer-md-x;
-  min-width: ($textfield-height + $textfield-margin-bottom);
-  padding-top: $textfield-padding-top;
-  text-align: center;
-  vertical-align: top;
+  display: flex;
+  font-size: ($material-icon-size / $font-size-root * 1rem / $textfield-font-size * $textfield-font-size);
+  justify-content: center;
+  line-height: 1;
+  min-width: $textfield-height;
   white-space: nowrap;
 
-  @if not $enable-flex {
-    display: table-cell;
-    width: 1%;
+  + .form-control,
+  .form-control + & {
+    margin-left: $input-group-addon-margin-x;
   }
+}
+
+.input-group-btn {
+  display: flex;
+  justify-content: center;
+  margin-right: $input-group-addon-margin-x;
+  margin-left: $input-group-addon-margin-x;
 
   &:first-child {
     margin-left: 0;
@@ -46,24 +39,33 @@
   &:last-child {
     margin-right: 0;
   }
+
+  .btn {
+    min-width: 0;
+    @include border-radius(0);
+
+    &:first-child {
+      @include border-left-radius($border-radius);
+    }
+
+    &:last-child {
+      @include border-right-radius($border-radius);
+    }
+  }
 }
 
 // size
   .input-group-addon {
     &.form-control-lg,
     .input-group-lg > & {
-      font-size: $textfield-font-size-lg;
-      line-height: $textfield-line-height-lg;
-      min-width: ($textfield-height-lg + $textfield-margin-bottom-lg);
-      padding-top: $textfield-padding-top-lg;
+      font-size: ($material-icon-size / $font-size-root * 1rem / $textfield-font-size * $textfield-font-size-lg);
+      min-width: $textfield-height-lg;
     }
 
     &.form-control-sm,
     .input-group-sm > & {
-      font-size: $textfield-font-size-sm;
-      line-height: $textfield-line-height-sm;
-      min-width: ($textfield-height-sm + $textfield-margin-bottom-sm);
-      padding-top: $textfield-padding-top-sm;
+      font-size: ($material-icon-size / $font-size-root * 1rem / $textfield-font-size * $textfield-font-size-sm);
+      min-width: $textfield-height-sm;
     }
   }