material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -1,70 +1,68 @@
-//
-// todo: landscape picker
-//
+// Todo: landscape picker
 
 .picker {
   position: absolute;
-  z-index: map-get($picker-elevation-shadow, elevation);
   user-select: none;
+  z-index: map-get($picker-elevation-shadow, elevation);
 }
 
-.picker__box {
+.picker-box {
+  @include border-bottom-radius($border-radius);
+
   background-color: $picker-content-bg;
   overflow: hidden;
-  @include border-bottom-radius($border-radius);
 }
 
-.picker__frame {
+.picker-frame {
+  @include transition-standard-complex(opacity);
+
   background-color: $picker-holder-bg;
   opacity: 0;
   position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
-  @include transition-acceleration(opacity);
 
   &::after {
-    content: "";
+    content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
     width: 1px;
   }
 
-  .picker--opened & {
+  .picker-opened & {
     opacity: 1;
-    @include transition-deceleration(opacity);
   }
 }
 
-.picker__holder {
+.picker-holder {
   outline: 0;
   overflow-x: hidden;
   overflow-y: auto;
   position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   transform: translate3d(0, 100%, 0);
-  transition-delay: $transition-duration-sm;
+  transition-delay: $transition-duration-mobile-complex;
   transition-duration: 0;
   transition-property: transform;
-  -webkit-overflow-scrolling: touch;
 
   @include media-breakpoint-up(sm) {
-    transition-delay: $transition-duration-tablet-sm;
+    transition-delay: $transition-duration-tablet-complex;
   }
 
   @include media-breakpoint-up(lg) {
-    transition-delay: $transition-duration-desktop-sm;
+    transition-delay: $transition-duration-desktop-complex;
   }
 
-  .picker--opened & {
+  .picker-opened & {
     opacity: 1;
     overflow-x: hidden;
     overflow-y: auto;
@@ -77,196 +75,200 @@
   }
 }
 
-.picker__input {
+.picker-input {
   &.form-control[readonly] {
     border-bottom-style: solid;
     color: inherit;
     cursor: text;
   }
 
-  &.picker__input--active {
+  &.picker-input-active {
     border-bottom-color: $textfield-border-color-focus;
   }
 }
 
-.picker__wrap {
+.picker-wrap {
+  @include border-radius($border-radius);
+  @include transition-standard-complex(transform);
+
   box-shadow: map-get($picker-elevation-shadow, shadow);
   display: inline-block;
   margin: $picker-margin-y $picker-margin-x;
   max-width: ($picker-cell-size * 7 + $picker-inner-spacer-x * 2);
   outline: 0;
   position: relative;
-  transform: scale(0.87);
+  transform: scale(.87);
   vertical-align: middle;
-  @include border-radius($border-radius);
-  @include transition-acceleration(transform);
 
-  .picker--opened & {
+  .picker-opened & {
     transform: scale(1);
-    @include transition-deceleration(transform);
   }
 }
 
-//
-// footer
-//
-  .picker__footer {
-    padding: $picker-inner-spacer-y $picker-inner-spacer-x;
-    text-align: right;
 
-    button {
-      margin-left: $picker-inner-spacer-x;
-      min-width: 0;
 
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
+// Footer
 
-//
-// header
-//
-  .picker__header {
-    height: $picker-cell-size;
-    line-height: $picker-cell-size;
-    margin-right: $picker-inner-spacer-x;
-    margin-left: $picker-inner-spacer-x;
-    position: relative;
-    vertical-align: middle;
-  } 
+.picker-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: $picker-inner-spacer-y $picker-inner-spacer-x;
 
-  .picker__month,
-  .picker__year {
-    display: inline;
+  button {
+    flex: 0 1 auto;
     margin-left: $picker-inner-spacer-x;
+    min-width: 0;
 
     &:first-child {
       margin-left: 0;
     }
   }
+}
 
-  .picker__nav--next,
-  .picker__nav--prev {
-    cursor: pointer;
-    height: $picker-cell-size;
-    margin-top: ($picker-cell-size / -2);
-    position: absolute;
-      top: 50%;
-    width: $picker-cell-size;
-
-    &,
-    &.material-icons {
-      line-height: $picker-cell-size;
-    }
-  }
 
-  .picker__nav--next {
-    // position
-      right: 0;
 
-    &:before {
-      content: $picker-nav-next-icon;
-    }
-  }
+// Header
 
-  .picker__nav--prev {
-    // position
-      left: 0;
+.picker-header {
+  height: $picker-cell-size;
+  line-height: $picker-cell-size;
+  margin-right: $picker-inner-spacer-x;
+  margin-left: $picker-inner-spacer-x;
+  position: relative;
+  vertical-align: middle;
+}
 
-    &:before {
-      content: $picker-nav-prev-icon;
-    }
-  }
+.picker-month,
+.picker-year {
+  display: inline;
+  margin-left: $picker-inner-spacer-x;
 
-//
-// material date display
-//
-  .picker__date-display {
-    background-color: $picker-header-bg;
-    color: $picker-header-color;
-    padding: $picker-header-padding;
-    text-align: left;
-    @include border-top-radius($border-radius);
+  &:first-child {
+    margin-left: 0;
   }
+}
 
-  .picker__date-display-bottom {
-    @include text-truncate;
-    @include typography-display-1;
-  }
+.picker-nav-next,
+.picker-nav-prev {
+  height: $picker-cell-size;
+  margin-top: ($picker-cell-size / -2);
+  position: absolute;
+  top: 50%;
+  width: $picker-cell-size;
 
-  .picker__day-display {
-    margin-right: $picker-inner-spacer-x;
+  &,
+  &.material-icons {
+    line-height: $picker-cell-size;
   }
+}
 
-  .picker__weekday-display {
-    margin-right: $picker-inner-spacer-x;
+.picker-nav-next {
+  right: 0;
 
-    &:after {
-      content: ",";
-    }
+  &::before {
+    content: $picker-nav-next-icon;
   }
+}
 
-//
-// table
-//
-  .picker__day {
-    border-radius: 50%;
-    cursor: pointer;
-    height: $picker-cell-size;
-    line-height: $picker-cell-size;
-    margin: auto;
-    vertical-align: middle;
-    width: $picker-cell-size;
+.picker-nav-prev {
+  left: 0;
 
-    &.picker__day--selected {
-      background-color: $picker-day-bg-selected;
-      color: $picker-day-color-selected;
-    }
+  &::before {
+    content: $picker-nav-prev-icon;
   }
+}
 
-  .picker__day--disabled {
-    color: $picker-day-color-disabled;
-    cursor: $cursor-disabled;
-  }
 
-  .picker__day--outfocus {
-    display: none;
-  }
 
-  .picker__day--today {
-    color: $picker-day-color-today;
-    font-weight: bolder;
+// Material date display
+
+.picker-date-display {
+  @include border-top-radius($border-radius);
+  @include color-yiq($picker-header-bg);
+  @include text-align(left);
+
+  background-color: $picker-header-bg;
+  padding: $picker-header-padding-y $picker-header-padding-x;
+}
+
+.picker-date-display-bottom {
+  @include text-truncate;
+  @include typography-display-1;
+}
+
+.picker-day-display {
+  margin-right: $picker-inner-spacer-x;
+}
+
+.picker-weekday-display {
+  margin-right: $picker-inner-spacer-x;
+
+  &::after {
+    content: ',';
   }
+}
 
-  .picker__table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    margin: 0 $picker-inner-spacer-x;
-    table-layout: fixed;
-
-    td,
-    th {
-      border: 0;
-      font-weight: normal;
-      padding: 0;
-      text-align: center;
-      vertical-align: middle;
-    }
+
+
+// Table
+
+.picker-day {
+  border-radius: 50%;
+  cursor: default;
+  height: $picker-cell-size;
+  line-height: $picker-cell-size;
+  margin: auto;
+  vertical-align: middle;
+  width: $picker-cell-size;
+
+  &.picker-day-selected {
+    @include color-yiq($picker-day-bg-selected);
+
+    background-color: $picker-day-bg-selected;
   }
+}
+
+.picker-day-disabled {
+  color: $picker-day-color-disabled;
+}
 
-  .picker__weekday {
-    color: $picker-weekday-color;
-    height: $picker-cell-size;
+.picker-day-outfocus {
+  display: none;
+}
+
+.picker-day-today {
+  color: $picker-day-color-today;
+  font-weight: bolder;
+}
+
+.picker-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 0 $picker-inner-spacer-x;
+  table-layout: fixed;
+
+  td,
+  th {
+    border: 0;
+    font-weight: normal;
+    padding: 0;
+    text-align: center;
     vertical-align: middle;
-    width: $picker-cell-size;
   }
+}
+
+.picker-weekday {
+  color: $picker-weekday-color;
+  height: $picker-cell-size;
+  vertical-align: middle;
+  width: $picker-cell-size;
+}
 
-// .picker__select--month,
-// .picker__select--year {
+// .picker-select-month,
+// .picker-select-year {
 //   // @extend .form-control;
 //   // @extend .form-control-sm;
 //   display: inline-block !important;
-//   margin: 0 $spacer-sm-x !important;
+//   margin: 0 $spacer-sm !important;
 //   width: auto !important;
 // }

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

@@ -7,14 +7,14 @@
 .progress-circular-gap {
   border-top: ($progress-circular-spinner-width / 2) solid $progress-circular-bg;
   position: absolute;
-    top: 0;
-    right: ($progress-circular-height / 2 - $progress-circular-spinner-width / 4);
-    bottom: 0;
-    left: ($progress-circular-height / 2 - $progress-circular-spinner-width / 4);
+  top: 0;
+  right: ($progress-circular-height / 2 - $progress-circular-spinner-width / 4);
+  bottom: 0;
+  left: ($progress-circular-height / 2 - $progress-circular-spinner-width / 4);
 }
 
 .progress-circular-inner {
-  animation: progress-circular-inner-rotate 5.332s $transition-timing-function-standard infinite;
+  animation: progress-circular-inner-rotate $progress-circular-animation-duration $transition-timing-function-standard infinite;
   height: $progress-circular-height;
   position: relative;
   width: $progress-circular-height;
@@ -25,18 +25,16 @@
   height: $progress-circular-height;
   overflow: hidden;
   position: absolute;
-    top: 0;
+  top: 0;
   width: ($progress-circular-height / 2);
 }
 
 .progress-circular-left {
-  // position
-    left: 0;
+  left: 0;
 }
 
 .progress-circular-right {
-  // position
-    right: 0;
+  right: 0;
 }
 
 .progress-circular-spinner {
@@ -45,100 +43,102 @@
   border-radius: 50%;
   height: $progress-circular-height;
   position: absolute;
-    top: 0;
+  top: 0;
   width: $progress-circular-height;
 
   .progress-circular-left & {
-    animation: progress-circular-spinner-left 1.333s $transition-timing-function-standard infinite;
+    animation: progress-circular-spinner-left ($progress-circular-animation-duration / 4) $transition-timing-function-standard infinite;
     border-right-color: transparent;
-    // position
-      left: 0;
+    left: 0;
   }
 
   .progress-circular-right & {
-    animation: progress-circular-spinner-right 1.333s $transition-timing-function-standard infinite;
+    animation: progress-circular-spinner-right ($progress-circular-animation-duration / 4) $transition-timing-function-standard infinite;
     border-left-color: transparent;
-    // position
-      right: 0;
+    right: 0;
   }
 }
 
 .progress-circular-wrapper {
-  animation: progress-circular-wrapper-rotate 2.666s linear infinite;
+  animation: progress-circular-wrapper-rotate ($progress-circular-animation-duration / 2) linear infinite;
 }
 
-// colour
-  @each $color in $palettes {
-    $i: index($palettes, $color);
+@keyframes progress-circular-inner-rotate {
+  12.5% {
+    transform: rotate(135deg);
+  }
 
-    .progress-circular-#{$color} {
-      .progress-circular-gap,
-      .progress-circular-spinner {
-        border-top-color: nth($palettes-color, $i);
-      }
+  25% {
+    transform: rotate(270deg);
+  }
 
-      .progress-circular-left .progress-circular-spinner {
-        border-left-color: nth($palettes-color, $i);
-      }
+  37.5% {
+    transform: rotate(405deg);
+  }
 
-      .progress-circular-right .progress-circular-spinner {
-        border-right-color: nth($palettes-color, $i);
-      }
-    }
+  50% {
+    transform: rotate(540deg);
   }
 
-//
-// animation
-//
-  @keyframes progress-circular-inner-rotate {
-    12.5% {
-      transform: rotate(135deg);
-    }
-    25% {
-      transform: rotate(270deg);
-    }
-    37.5% {
-      transform: rotate(405deg);
-    }
-    50% {
-      transform: rotate(540deg);
-    }
-    62.5% {
-      transform: rotate(675deg);
-    }
-    75% {
-      transform: rotate(810deg);
-    }
-    87.5% {
-      transform: rotate(945deg);
-    }
-    100% {
-      transform: rotate(1080deg);
-    }
+  62.5% {
+    transform: rotate(675deg);
   }
 
-  @keyframes progress-circular-spinner-left {
-    0%,
-    100% {
-      transform: rotate(130deg);
-    }
-    50% {
-      transform: rotate(-5deg);
-    }
+  75% {
+    transform: rotate(810deg);
+  }
+
+  87.5% {
+    transform: rotate(945deg);
   }
 
-  @keyframes progress-circular-spinner-right {
-    0%,
-    100% {
-      transform: rotate(-130deg);
+  100% {
+    transform: rotate(1080deg);
+  }
+}
+
+@keyframes progress-circular-spinner-left {
+  0%,
+  100% {
+    transform: rotate(130deg);
+  }
+
+  50% {
+    transform: rotate(-5deg);
+  }
+}
+
+@keyframes progress-circular-spinner-right {
+  0%,
+  100% {
+    transform: rotate(-130deg);
+  }
+
+  50% {
+    transform: rotate(5deg);
+  }
+}
+
+@keyframes progress-circular-wrapper-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// Colour
+@each $color, $values in $theme-colors {
+  .progress-circular-#{$color} {
+    .progress-circular-gap,
+    .progress-circular-spinner {
+      border-top-color: map-get(theme-color($color), color);
     }
-    50% {
-      transform: rotate(5deg);
+
+    .progress-circular-left .progress-circular-spinner {
+      border-left-color: map-get(theme-color($color), color);
     }
-  }
 
-  @keyframes progress-circular-wrapper-rotate {
-    100% {
-      transform: rotate(360deg);
+    .progress-circular-right .progress-circular-spinner {
+      border-right-color: map-get(theme-color($color), color);
     }
-  }
+  }
+}