material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -1,8 +1,6 @@
-//
-// todo: material design guidelines do not have specs for striped progress bars
-// maybe striped progress bars should be the "buffer" variation of linear indicator
+// Material design does not have specs for striped progress bars
+// so striped progress bars have been styled according to the "buffer" variation of linear indicator
 // (https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators)
-//
 
 .progress {
   display: flex;
@@ -11,140 +9,207 @@
 }
 
 .progress-bar {
-  background-color: $progress-bar-bg;
-  height: $progress-height;
+  border-bottom: $progress-bar-height solid $progress-bar-bg;
 
-  &::before {
-    background-color: inherit;
-    background-image: linear-gradient(to right, $progress-bar-mask, $progress-bar-mask);
-    content: "";
+  &::after {
+    background-color: $progress-bg;
+    content: '';
     display: block;
+    height: $progress-bar-height;
     position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: -1;
   }
-}
 
-//
-// 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;
+  // Colour
+  @each $color, $values in $theme-colors {
+    &.bg-#{$color} {
+      background-color: transparent !important;
+      border-bottom-color: map-get(theme-color($color), color);
+
+      &::after {
+        background-color: map-get(theme-color($color), lighter);
+      }
+
+      &::before {
+        background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+        // scss-lint:disable VendorPrefix
+        background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+        // scss-lint:enable VendorPrefix
+      }
     }
   }
+}
 
-  .progress-bar-animated,
-  .progress-bar-striped {
-    border-right: ($progress-height * 3) solid $progress-bar-mask;
-    box-sizing: content-box;
 
-    &[style*="width:100%"],
-    &[style*="width: 100%"] {
-      border-right: 0;
+
+// Animated & striped
+
+.progress-bar-animated {
+  &::before {
+    animation-direction: reverse;
+    animation-duration: $transition-duration-mobile;
+    animation-iteration-count: infinite;
+    animation-name: progress-bar-animation;
+    animation-timing-function: linear;
+
+    @include media-breakpoint-up(sm) {
+      animation-duration: $transition-duration-tablet;
     }
 
-    &::before {
-      background-color: transparent;
-      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);
+    @include media-breakpoint-up(lg) {
+      animation-duration: $transition-duration-desktop;
     }
   }
+}
 
-  @keyframes progress-bar-animation {
-    from {
-      background-position: 0 0;
-    }
-    to {
-      background-position: ($progress-height * 3) 0;
-    }
+.progress-bar-animated,
+.progress-bar-striped {
+  box-sizing: content-box;
+  position: relative;
+
+  &[style*="width:100%"],
+  &[style*="width: 100%"] {
+    border-right: 0;
   }
 
-//
-// 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;
-      width: 0%;
-      @include border-radius($border-radius);
-    }
+  &::after {
+    @include border-right-radius($progress-bar-border-radius);
 
-    &::after {
-      animation-name: progress-bar-indeterminate-after;
-      background-color: inherit;
-      content: "";
-      display: block;
-      position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-    }
+    right: ($progress-bar-height * -6);
+    bottom: ($progress-bar-height * -1);
+  }
 
-    &::before {
-      animation-name: progress-bar-indeterminate-before;
-      background-image: none;
-      // position
-        right: auto;
-      z-index: 0;
-    }
+  &::before {
+    background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+    // scss-lint:disable VendorPrefix
+    background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+    // scss-lint:enable VendorPrefix
+    background-position: 0 0;
+    background-repeat: repeat-x;
+    background-size: ($progress-bar-height * 3) ($progress-bar-height * 3);
+    content: '';
+    display: block;
+    height: $progress-bar-height;
+    position: absolute;
+    right: -100vw;
+    bottom: ($progress-bar-height * -1);
+    left: 0;
+    z-index: -1;
   }
 
-  @keyframes progress-bar-indeterminate-after {
-    0% {
-      // position
-        left: 0%;
-      width: 0%;
-    }
-    50% {
-      // position
-        left: 25%;
-      width: 75%;
-    }
-    75% {
-      // position
-        left: 100%;
-      width: 0%;
+  // Colour
+  @each $color, $values in $theme-colors {
+    &.bg-#{$color}::before {
+      background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+      // scss-lint:disable VendorPrefix
+      background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+      // scss-lint:enable VendorPrefix
     }
   }
+}
 
-  @keyframes progress-bar-indeterminate-before {
-    0%,
-    62.5% {
-      // position
-        left: 0%;
-      width: 0%;
-    }
-    71.875% {
-      // position
-        left: 0%;
-      width: 25%;
-    }
-    81.25% {
-      // position
-        left: 25%;
-      width: 50%;
-    }
-    100% {
-      // position
-        left: 100%;
-      width: 25%;
+@keyframes progress-bar-animation {
+  from {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: ($progress-bar-height * 3) 0;
+  }
+}
+
+
+
+// Indeterminate
+
+.progress-bar-indeterminate {
+  border-bottom-color: $progress-bg;
+  position: relative;
+  width: 100%;
+
+  &::after,
+  &::before {
+    @include border-radius($border-radius);
+
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    background-color: $progress-bar-bg;
+    width: 0%;
+  }
+
+  &::after {
+    animation-name: progress-bar-indeterminate-after;
+    bottom: ($progress-bar-height * -1);
+    z-index: 0;
+  }
+
+  &::before {
+    animation-name: progress-bar-indeterminate-before;
+    content: '';
+    display: block;
+    height: $progress-bar-height;
+    position: absolute;
+    bottom: ($progress-bar-height * -1);
+    z-index: 0;
+  }
+
+  // Colour
+  @each $color, $values in $theme-colors {
+    &.bg-#{$color} {
+      border-bottom-color: map-get(theme-color($color), lighter);
+
+      &::after,
+      &::before {
+        background-color: map-get(theme-color($color), color);
+      }
+
+      &::before {
+        background-image: none;
+      }
     }
   }
+}
+
+@keyframes progress-bar-indeterminate-after {
+  0% {
+    left: 0%;
+    width: 0%;
+  }
+
+  50% {
+    left: 25%;
+    width: 75%;
+  }
+
+  75% {
+    left: 100%;
+    width: 0%;
+  }
+}
+
+@keyframes progress-bar-indeterminate-before {
+  0%,
+  62.5% {
+    left: 0%;
+    width: 0%;
+  }
+
+  71.875% {
+    left: 0%;
+    width: 25%;
+  }
+
+  81.25% {
+    left: 25%;
+    width: 50%;
+  }
+
+  100% {
+    left: 100%;
+    width: 25%;
+  }
+}

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

@@ -1,47 +1,42 @@
 .custom-control {
-  cursor: pointer;
+  color: inherit;
   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);
+  padding-left: ($selection-control-indicator-size + $selection-control-spacer-x);
   position: relative;
 }
 
 .custom-control-indicator {
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: $selection-control-indicator-size $selection-control-indicator-size;
-  display: block;
+  align-items: center;
+  color: $selection-control-color;
+  display: flex;
   height: $selection-control-indicator-size;
   pointer-events: none;
   position: absolute;
-    top: (($font-size-base * $line-height-base - $selection-control-indicator-size / $font-size-root) / 2);
-    left: 0;
+  top: (($font-size-base * $line-height-base - $selection-control-indicator-size) / 2);
+  left: 0;
   user-select: none;
-  width: $selection-control-indicator-size;
+  width: ($selection-control-indicator-size + $selection-control-spacer-x);
 
   &::before {
+    @include transition-standard(background-color, opacity, transform);
+
     background-color: $selection-control-radial-bg;
     border-radius: 50%;
-    content: "";
+    content: '';
     display: block;
     height: ($selection-control-indicator-size * 2);
     margin-top: ($selection-control-indicator-size / -2);
     margin-left: ($selection-control-indicator-size / -2);
     opacity: 0;
     position: absolute;
-      top: 0;
-      left: 0;
+    top: 0;
+    left: 0;
+    transform: scale(.87, .87) translateZ(0);
     width: ($selection-control-indicator-size * 2);
-    z-index: -1;
-    @include transition-standard(background-color, opacity, transform);
   }
-
-  // active, focus, hover
-    &:active::before {
-      opacity: 1;
-    }
 }
 
 .custom-control-input {
@@ -49,156 +44,154 @@
   position: absolute;
   z-index: -1;
 
-  // active, focus, hover
-    &:focus ~ .custom-control-indicator::before {
+  // Active, focus, hover
+  &:active,
+  &.focus {
+    ~ .custom-control-indicator::before {
       opacity: 1;
+      transform: scale(1, 1) translateZ(0);
     }
+  }
 
-  // checked
-    &:checked ~ .custom-control-indicator::before {
-      background-color: hex-to-rgba($selection-control-color-active, 0.12);
-    }
+  // Checked
+  &:checked ~ {
+    .custom-control-indicator {
+      color: $selection-control-color-active;
 
-  // disabled
-    &:disabled ~ {
-      .custom-control-indicator,
-      .custom-control-description {
-        color: $selection-control-color-disabled;
-        cursor: $cursor-disabled;
+      &::before {
+        background-color: hex-to-rgba($selection-control-color-active, .12);
       }
+    }
+  }
 
-      .custom-control-indicator {
-        &::before {
-          display: none;
-        }
-      }
+  // Disabled
+  &:disabled ~ {
+    .custom-control-indicator,
+    .custom-control-description {
+      color: $selection-control-color-disabled;
+    }
+
+    .custom-control-indicator::before {
+      display: none;
     }
+  }
 }
 
-// stacked layout
-  .custom-controls-stacked {
+
+
+// Stacked layout
+.custom-controls-stacked {
+  display: flex;
+  flex-direction: column;
+
+  .custom-control {
     display: flex;
-    flex-direction: column;
+    margin-right: 0;
+    margin-bottom: $selection-control-spacer-y;
+  }
+}
 
-    .custom-control {
-      margin-right: 0;
-      margin-bottom: $selection-control-spacer-y;
-    }
+
+
+// Checkbox
+
+.custom-checkbox {
+  .custom-control-indicator::after {
+    @include set-material-icons;
+
+    content: $selection-control-checkbox-icon;
   }
 
-//
-// checkbox
-//
-  .custom-checkbox {
-    .custom-control-indicator {
-      background-image: $selection-control-checkbox-bg;
+  .custom-control-input {
+    // Checked
+    &:checked ~ .custom-control-indicator::after {
+      content: $selection-control-checkbox-icon-checked;
     }
 
-    .custom-control-input {
-      // checked
-        &:checked ~ .custom-control-indicator {
-          background-image: $selection-control-checkbox-bg-checked;
-        }
-
-      // disabled
-        &:disabled {
-          ~ .custom-control-indicator {
-            background-image: $selection-control-checkbox-bg-disabled;
-          }
-
-          &:checked ~ .custom-control-indicator {
-            background-image: $selection-control-checkbox-bg-disabled-checked;
-          }
-        }
-
-      // indeterminate
-        &:indeterminate ~ .custom-control-indicator {
-          background-image: $selection-control-checkbox-bg-indeterminate;
-        }
+    // Indeterminate
+    &:indeterminate ~ .custom-control-indicator::after {
+      content: $selection-control-checkbox-icon-indeterminate;
     }
   }
+}
 
-//
-// radio button
-//
-  .custom-radio {
-    .custom-control-indicator {
-      background-image: $selection-control-radio-bg;
-    }
 
-    .custom-control-input {
-      // checked
-        &:checked ~ .custom-control-indicator {
-          background-image: $selection-control-radio-bg-checked;
-        }
-
-      // disabled
-        &:disabled {
-          ~ .custom-control-indicator {
-            background-image: $selection-control-radio-bg-disabled;
-          }
-
-          &:checked ~ .custom-control-indicator {
-            background-image: $selection-control-radio-bg-disabled-checked;
-          }
-        }
+
+// Radio button
+
+.custom-radio {
+  .custom-control-indicator::after {
+    @include set-material-icons;
+
+    content: $selection-control-radio-icon;
+  }
+
+  .custom-control-input {
+    // Checked
+    &:checked ~ .custom-control-indicator::after {
+      content: $selection-control-radio-icon-checked;
     }
   }
+}
 
-//
-// switch
-//
-  .custom-switch {
-    padding-left: ($selection-control-track-width / $font-size-root + $selection-control-spacer-x);
 
-    .custom-control-indicator {
-      background-clip: content-box;
-      background-color: $selection-control-track-bg;
-      border: (($selection-control-indicator-size - $selection-control-track-height) / 2) solid transparent;
-      border-radius: $selection-control-track-height;
-      width: $selection-control-track-width;
-      @include transition-standard(background-color);
+
+// Switch
+
+.custom-switch {
+  padding-left: ($selection-control-track-width + $selection-control-spacer-x);
+
+  .custom-control-indicator {
+    @include transition-standard(background-color);
+
+    background-clip: content-box;
+    background-color: $selection-control-track-bg;
+    border: (($selection-control-indicator-size - $selection-control-track-height) / 2) solid transparent;
+    border-radius: $selection-control-track-height;
+    width: $selection-control-track-width;
+
+    &::after,
+    &::before {
+      top: (($selection-control-indicator-size - $selection-control-track-height) / -2);
+      left: (($selection-control-indicator-size - $selection-control-track-height) / -2);
+    }
+
+    &::after {
+      @include transition-standard(background-color, transform);
+
+      background-color: $selection-control-thumb-bg;
+      border-radius: 50%;
+      box-shadow: $selection-control-thumb-shadow;
+      content: '';
+      display: block;
+      height: $selection-control-indicator-size;
+      position: absolute;
+      width: $selection-control-indicator-size;
+    }
+  }
+
+  .custom-control-input {
+    // Checked
+    &:checked ~ .custom-control-indicator {
+      background-color: hex-to-rgba($selection-control-color-active, .5);
 
       &::after,
       &::before {
-        // position
-          top: (($selection-control-indicator-size - $selection-control-track-height) / -2);
-          left: (($selection-control-indicator-size - $selection-control-track-height) / -2);
+        transform: translateX($selection-control-track-width - $selection-control-indicator-size);
       }
+
       &::after {
-        background-color: $selection-control-thumb-bg;
-        border-radius: 50%;
-        box-shadow: $selection-control-thumb-shadow;
-        content: "";
-        display: block;
-        height: $selection-control-indicator-size;
-        position: absolute;
-        width: $selection-control-indicator-size;
-        @include transition-standard(background-color, transform);
+        background-color: $selection-control-color-active;
       }
     }
 
-    .custom-control-input {
-      // checked
-        &:checked ~ .custom-control-indicator {
-          background-color: hex-to-rgba($selection-control-color-active, 0.5);
-
-          &::after,
-          &::before {
-            transform: translateX($selection-control-track-width - $selection-control-indicator-size);
-          }
-          &::after {
-            background-color: $selection-control-color-active;
-          }
-        }
-
-      // disabled
-        &:disabled ~ .custom-control-indicator {
-          background-color: $selection-control-track-bg-disabled;
-
-          &::after {
-            background-color: $selection-control-thumb-bg-disabled;
-          }
-        }
+    // Disabled
+    &:disabled ~ .custom-control-indicator {
+      background-color: $selection-control-track-bg-disabled;
+
+      &::after {
+        background-color: $selection-control-thumb-bg-disabled;
+      }
     }
   }
+}