material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -1,6 +1,4 @@
-//
-// todo: only non-clickable stepper is supported for now
-//
+// Todo: only non-clickable stepper is supported for now
 
 .stepper {
   align-items: center;
@@ -14,7 +12,7 @@
   &::after,
   &::before {
     border-top: $stepper-border-width solid $stepper-border-color;
-    content: "";
+    content: '';
     display: block;
     position: absolute;
   }
@@ -28,108 +26,111 @@
   }
 }
 
-// variation
-  .stepper-horiz {
-    background-color: $stepper-bg;
-    display: flex;
-    justify-content: space-between;
-    overflow-x: auto;
-    overflow-y: hidden;
-    position: relative;
-    -webkit-overflow-scrolling: touch;
-
-    &:before {
+// Horizontal and vertical stepper
+.stepper-horiz {
+  background-color: $stepper-bg;
+  display: flex;
+  justify-content: space-between;
+  overflow-x: auto;
+  overflow-y: hidden;
+  position: relative;
+
+  &::before {
+    border-top: $stepper-border-width solid $stepper-border-color;
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: $stepper-padding-x;
+    left: $stepper-padding-x;
+  }
+
+  .stepper {
+    &::after,
+    &::before {
       border-top: $stepper-border-width solid $stepper-border-color;
-      content: "";
-      display: block;
-      position: absolute;
-        top: 50%;
-        right: $stepper-padding-x;
-        left: $stepper-padding-x;
+      top: 50%;
+      width: ($stepper-padding-x - $stepper-inner-spacer);
     }
 
-    .stepper {
-      &::after,
-      &::before {
-        border-top: $stepper-border-width solid $stepper-border-color;
-        // position
-          top: 50%;
-        width: ($stepper-padding-x - $stepper-inner-spacer);
-      }
-      &::after {
-        // position
-          right: 0;
-      }
-      &::before {
-        // position
-          left: 0;
-      }
+    &::after {
+      right: 0;
     }
-  }
 
-  .stepper-vert {
-    background-color: $stepper-bg;
-    position: relative;
-
-    .stepper {
-      &::after,
-      &::before {
-        border-left: $stepper-border-width solid $stepper-border-color;
-        height: ($stepper-padding-y - $stepper-inner-spacer);
-        // position
-          left: ($stepper-icon-height / 2 + $stepper-padding-x);
-      }
-      &::after {
-        // position
-          bottom: 0;
-      }
-      &::before {
-        // position
-          top: 0;
-      }
+    &::before {
+      left: 0;
     }
   }
+}
 
-//
-// misc
-//
-  .stepper-icon {
-    background-color: $stepper-icon-bg;
-    border-radius: 50%;
-    color: $stepper-icon-color;
-    font-size: $stepper-icon-font-size;
-    font-weight: $stepper-icon-font-weight;
-    height: $stepper-icon-height;
-    line-height: $stepper-icon-height;
-    margin-right: $stepper-inner-spacer;
-    position: relative;
-    text-align: center;
-    vertical-align: middle;
-    width: $stepper-icon-height;
-
-    .stepper.active &,
-    .stepper.done & {
-      background-color: $stepper-icon-bg-active;
-      color: $stepper-icon-color-active;
-    }
-  }
+.stepper-vert {
+  background-color: $stepper-bg;
+  position: relative;
 
-  .stepper-text {
-    color: $stepper-text-color;
-    font-size: $stepper-text-font-size;
-    font-weight: $stepper-text-font-weight;
-    position: relative;
+  .stepper {
+    &::after,
+    &::before {
+      border-left: $stepper-border-width solid $stepper-border-color;
+      height: ($stepper-padding-y - $stepper-inner-spacer);
+      left: ($stepper-icon-height / 2 + $stepper-padding-x);
+    }
 
-    .stepper.active &,
-    .stepper.done & {
-      color: $stepper-text-color-active;
+    &::after {
+      bottom: 0;
     }
 
-    .stepper.active & {
-      font-weight: bolder;
+    &::before {
+      top: 0;
     }
   }
+}
+
+
+
+// Misc
+
+.stepper-icon {
+  background-color: $stepper-icon-bg;
+  border-radius: 50%;
+  color: $stepper-icon-color;
+  font-size: $stepper-icon-font-size;
+  font-weight: $stepper-icon-font-weight;
+  height: $stepper-icon-height;
+  line-height: $stepper-icon-height;
+  margin-right: $stepper-inner-spacer;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  width: $stepper-icon-height;
+
+  .stepper.active &,
+  .stepper.done & {
+    @include color-yiq($stepper-icon-bg-active);
+
+    background-color: $stepper-icon-bg-active;
+  }
+
+  .material-icons {
+    font-size: 1.333em;
+  }
+}
 
-  .stepper-text-sub {
-    font-weight: $font-weight-regular;
+.stepper-text {
+  color: $stepper-text-color;
+  font-size: $stepper-text-font-size;
+  font-weight: $stepper-text-font-weight;
+  position: relative;
+
+  .stepper.active &,
+  .stepper.done & {
+    color: $stepper-text-color-active;
   }
+
+  .stepper.active & {
+    font-weight: bolder;
+  }
+}
+
+.stepper-text-sub {
+  font-weight: $font-weight-regular;
+}

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

@@ -1,131 +1,112 @@
-//
-// todo: tabs with icons
-//
-
 .nav-tabs {
-  box-shadow: inset 0 -1px 0 $nav-tab-border-color;
+  box-shadow: inset 0 ($nav-tab-border-width * -2) 0 ($nav-tab-border-width * -1) $nav-tab-border-color;
+
+  &.border-0,
+  &.border-bottom-0 {
+    box-shadow: none;
+  }
 
   .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;
+    @include transition-standard(background-color, color, opacity);
+
+    color: $nav-tab-color;
+    font-size: $nav-tab-font-size;
+    font-weight: $nav-tab-font-weight;
+    line-height: $nav-tab-line-height;
+    min-height: $nav-tab-height;
     opacity: $nav-tab-link-opacity;
-    padding: (($nav-tab-link-height - $nav-tab-link-font-size * 2) / 2) $nav-tab-link-padding-x;
+    padding: $nav-tab-link-padding-y $nav-tab-link-padding-x;
     position: relative;
     text-transform: uppercase;
-    @include transition-standard(background-color, opacity);
+
+    @include active-focus-hover {
+      background-color: $nav-tab-bg-hover;
+    }
 
     &::before {
+      @include transition-standard(opacity);
+
       background-color: $nav-tab-indicator-bg;
-      content: "";
+      content: '';
       display: block;
       height: $nav-tab-indicator-height;
       opacity: 0;
       position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      @include transition-standard(opacity);
+      right: 0;
+      bottom: 0;
+      left: 0;
     }
 
-    @include media-breakpoint-up(lg) {
-      padding-right: $nav-tab-link-padding-x-lg;
-      padding-left: $nav-tab-link-padding-x-lg;
+    &:active,
+    &.active {
+      opacity: 1;
     }
 
-    // active, focus, hover
-      @include active-focus-hover {
-        background-color: $nav-link-bg-active;
-      }
+    &.active {
+      color: $nav-tab-color-active;
 
-      &:active,
-      &.active {
-        opacity: $nav-tab-link-opacity-visible;
+      &::before {
+        opacity: 1;
       }
+    }
 
-      &.active {
-        &::before {
-          opacity: $nav-tab-link-opacity-visible;
-        }
-      }
+    &.disabled {
+      background-color: transparent;
+      color: $nav-tab-color-disabled;
+      opacity: 1;
+    }
+  }
 
-    // disabled
-      &.disabled {
-        background-color: transparent;
-        color: $nav-link-color-disabled;
-        opacity: $nav-tab-link-opacity-visible;
-      }
+  .nav-item.show .nav-link {
+    background-color: $nav-tab-bg-hover;
+    opacity: 1;
   }
 }
 
-// variation
-  .nav-tabs {
-    &.border-0,
-    &.border-bottom-0 {
-      box-shadow: none;
-    }
+.nav-tabs-material {
+  position: relative;
 
-    &.nav-justified {
-      .nav-link {
-        min-width: $nav-tab-link-min-width;
+  &.animate {
+    .nav-link::before {
+      opacity: 0;
+    }
 
-        @include media-breakpoint-up(lg) {
-          min-width: $nav-tab-link-min-width-lg;
-        }
-      }
+    .nav-tabs-indicator {
+      @include transition-standard(left, right);
     }
+  }
 
-    &.nav-scrollable {
-      overflow-x: auto;
-      overflow-y: visible;
-      -webkit-overflow-scrolling: touch;
+  .nav-link::before {
+    transition: none;
+  }
 
-      .nav-link {
-        max-width: $nav-tab-link-max-width;
-        min-width: $nav-tab-link-min-width;
+  .nav-tabs-indicator {
+    background-color: $nav-tab-indicator-bg;
+    display: none;
+    height: $nav-tab-indicator-height;
+    position: absolute;
+    bottom: 0;
 
-        @include media-breakpoint-up(lg) {
-          min-width: $nav-tab-link-min-width-lg;
-        }
-      }
+    &.show {
+      display: block;
     }
   }
+}
 
-  .nav-tabs-material {
-    position: relative;
+.nav-tabs-scrollable {
+  box-shadow: inset 0 ($nav-tab-border-width * -2) 0 ($nav-tab-border-width * -1) $nav-tab-border-color;
+  height: $nav-tab-height;
+  overflow: hidden;
 
-    .nav-link::before {
-      transition: none;
-    }
+  .nav-tabs {
+    box-shadow: none;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: $nav-tab-height;
 
-    .nav-tabs-indicator {
-      background-color: $nav-tab-indicator-bg;
-      height: $nav-tab-indicator-height;
+    &::-webkit-scrollbar {
       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,27 +1,27 @@
 .floating-label {
+  @include floating-label-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-y);
+
+  padding-top: $floating-label-font-size-focus;
   position: relative;
-  @include floating-label-size($textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);
 
   > label {
+    @include text-truncate;
+    @include transition-standard(color, line-height, top, transform);
+
     color: $floating-label-color;
-    cursor: text;
     display: block;
     font-weight: normal;
     margin: 0;
-    overflow: hidden;
     padding: 0;
     position: absolute;
-      left: 0;
-    text-overflow: ellipsis;
+    left: 0;
     transform-origin: 0 0;
-    white-space: nowrap;
-    @include transition-standard(color, top, transform);
   }
 
   &.has-value > label,
   &.is-focused > label {
-    // position
-      top: 0;
+    line-height: 1;
+    top: 0;
   }
 
   &.is-focused > label {
@@ -31,26 +31,35 @@
   > .form-control {
     position: relative;
 
+    &:focus {
+      &::placeholder {
+        color: $textfield-hint-color;
+        opacity: 1;
+      }
+    }
+
     &::placeholder {
+      @include transition-standard(opacity);
+
       color: transparent;
       opacity: 0;
     }
   }
 }
 
-// size
-  .floating-label-lg {
-    @include floating-label-size($textfield-font-size-lg, $textfield-height-lg, $textfield-padding-top-lg, $textfield-padding-bottom-lg);
+// Size
+.floating-label-lg {
+  @include floating-label-size($textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-padding-y-lg);
 
-    > .form-control {
-      @extend .form-control-lg;
-    }
+  > .form-control {
+    @extend %form-control-lg;
   }
+}
 
-  .floating-label-sm {
-    @include floating-label-size($textfield-font-size-sm, $textfield-height-sm, $textfield-padding-top-sm, $textfield-padding-bottom-sm);
+.floating-label-sm {
+  @include floating-label-size($textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-padding-y-sm);
 
-    > .form-control {
-      @extend .form-control-sm;
-    }
+  > .form-control {
+    @extend %form-control-sm;
   }
+}