material-sass 1.4.1 → 4.0.0.alpha5

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

@@ -0,0 +1,272 @@
+//
+// todo: landscape picker
+//
+
+.picker {
+  position: absolute;
+  z-index: map-get($picker-elevation-shadow, elevation);
+  user-select: none;
+}
+
+.picker__box {
+  background-color: $picker-content-bg;
+  overflow: hidden;
+  @include border-bottom-radius($border-radius);
+}
+
+.picker__frame {
+  background-color: $picker-holder-bg;
+  opacity: 0;
+  position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  @include transition-acceleration(opacity);
+
+  &::after {
+    content: "";
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    width: 1px;
+  }
+
+  .picker--opened & {
+    opacity: 1;
+    @include transition-deceleration(opacity);
+  }
+}
+
+.picker__holder {
+  outline: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  transform: translate3d(0, 100%, 0);
+  transition-delay: $transition-duration-sm;
+  transition-duration: 0;
+  transition-property: transform;
+  -webkit-overflow-scrolling: touch;
+
+  @include media-breakpoint-up(sm) {
+    transition-delay: $transition-duration-tablet-sm;
+  }
+
+  @include media-breakpoint-up(lg) {
+    transition-delay: $transition-duration-desktop-sm;
+  }
+
+  .picker--opened & {
+    opacity: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    transform: translate3d(0, 0, 0);
+    transition: none;
+
+    &::before {
+      opacity: 1;
+    }
+  }
+}
+
+.picker__input {
+  &.form-control[readonly] {
+    border-bottom-style: solid;
+    color: inherit;
+    cursor: text;
+  }
+
+  &.picker__input--active {
+    border-bottom-color: $textfield-border-color-focus;
+  }
+}
+
+.picker__wrap {
+  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);
+  vertical-align: middle;
+  @include border-radius($border-radius);
+  @include transition-acceleration(transform);
+
+  .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;
+      }
+    }
+  }
+
+//
+// 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__month,
+  .picker__year {
+    display: inline;
+    margin-left: $picker-inner-spacer-x;
+
+    &: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;
+    }
+  }
+
+  .picker__nav--prev {
+    // position
+      left: 0;
+
+    &:before {
+      content: $picker-nav-prev-icon;
+    }
+  }
+
+//
+// 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);
+  }
+
+  .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: ",";
+    }
+  }
+
+//
+// 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__day--selected {
+      background-color: $picker-day-bg-selected;
+      color: $picker-day-color-selected;
+    }
+  }
+
+  .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;
+  }
+
+  .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;
+    }
+  }
+
+  .picker__weekday {
+    color: $picker-weekday-color;
+    height: $picker-cell-size;
+    vertical-align: middle;
+    width: $picker-cell-size;
+  }
+
+// .picker__select--month,
+// .picker__select--year {
+//   // @extend .form-control;
+//   // @extend .form-control-sm;
+//   display: inline-block !important;
+//   margin: 0 $spacer-sm-x !important;
+//   width: auto !important;
+// }

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

@@ -0,0 +1,144 @@
+.progress-circular {
+  height: $progress-circular-height;
+  position: relative;
+  width: $progress-circular-height;
+}
+
+.progress-circular-gap {
+  border-top: ($progress-circular-spinner-width / 2) solid $progress-circular-color;
+  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);
+}
+
+.progress-circular-inner {
+  animation: progress-circular-inner-rotate 5.332s $transition-timing-function-standard infinite;
+  height: $progress-circular-height;
+  position: relative;
+  width: $progress-circular-height;
+}
+
+.progress-circular-left,
+.progress-circular-right {
+  height: $progress-circular-height;
+  overflow: hidden;
+  position: absolute;
+    top: 0;
+  width: ($progress-circular-height / 2);
+}
+
+.progress-circular-left {
+  // position
+    left: 0;
+}
+
+.progress-circular-right {
+  // position
+    right: 0;
+}
+
+.progress-circular-spinner {
+  border: $progress-circular-spinner-width solid $progress-circular-color;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  height: $progress-circular-height;
+  position: absolute;
+    top: 0;
+  width: $progress-circular-height;
+
+  .progress-circular-left & {
+    animation: progress-circular-spinner-left 1.333s $transition-timing-function-standard infinite;
+    border-right-color: transparent;
+    // position
+      left: 0;
+  }
+
+  .progress-circular-right & {
+    animation: progress-circular-spinner-right 1.333s $transition-timing-function-standard infinite;
+    border-left-color: transparent;
+    // position
+      right: 0;
+  }
+}
+
+.progress-circular-wrapper {
+  animation: progress-circular-wrapper-rotate 2.666s linear infinite;
+}
+
+// colour
+  @each $color in $palettes {
+    $i: index($palettes, $color);
+
+    .progress-circular-#{$color} {
+      .progress-circular-gap,
+      .progress-circular-spinner {
+        border-top-color: nth($palettes-color, $i);
+      }
+
+      .progress-circular-left .progress-circular-spinner {
+        border-left-color: nth($palettes-color, $i);
+      }
+
+      .progress-circular-right .progress-circular-spinner {
+        border-right-color: nth($palettes-color, $i);
+      }
+    }
+  }
+
+//
+// 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);
+    }
+  }
+
+  @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);
+    }
+  }

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

@@ -0,0 +1,174 @@
+//
+// todo: material design guidelines do not have specs for striped progress bars
+// maybe striped progress bars should be the "buffer" variation of linear indicator
+// (https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators)
+//
+
+.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;
+  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[value]::-webkit-progress-value {
+    background-color: $progress-bar-color;
+    @include border-right-radius($border-radius);
+  }
+
+  .progress[value="100"]::-moz-progress-bar {
+    border-right-radius: 0;
+  }
+
+  .progress[value="100"]::-webkit-progress-value {
+    border-right-radius: 0;
+  }
+
+// colour
+  @each $color in $palettes {
+    $i: index($palettes, $color);
+
+    .progress-#{$color} {
+      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)});
+      }
+    }
+
+    .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);
+        }
+    }
+  }
+
+//
+// indeterminate
+//
+  .progress-animated,
+  .progress-indeterminate {
+    &::after,
+    &::before {
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+      background-color: $progress-bar-color;
+      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;
+    }
+  }
+
+  @keyframes progress-indeterminate-after {
+    0% {
+      // position
+        left: 0%;
+      width: 0%;
+    }
+    50% {
+      // position
+        left: 25%;
+      width: 75%;
+    }
+    75% {
+      // position
+        left: 100%;
+      width: 0%;
+    }
+  }
+
+  @keyframes progress-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%;
+    }
+  }
+
+  .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);
+          }
+        }
+      }
+    }