material-sass 4.0.0.alpha5 → 4.0.0.alpha6

data/app/assets/stylesheets/material/bootstrap/_carousel.scss

@@ -6,116 +6,54 @@
   overflow: hidden;
   position: relative;
   width: 100%;
+}
 
-  > .carousel-item {
-    display: none;
-    position: relative;
-    @include transition-standard(left);
-
-    > img,
-    > a > img {
-      @include img-fluid;
-      line-height: 1;
-    }
-  }
+.carousel-item {
+  display: none;
+  position: relative;
+  width: 100%;
 
-  @media all and (transform-3d), (-webkit-transform-3d) {
+  @include if-supports-3d-transforms() {
     backface-visibility: hidden;
     perspective: 1000px;
     @include transition-standard(transform);
-
-    &.active {
-      // position
-        left: 0;
-      transform: translate3d(0, 0, 0);
-    }
-
-    &.active.left {
-      // position
-        left: 0;
-      transform: translate3d(-100%, 0, 0);
-    }
-
-    &.active.right {
-      // position
-        left: 0;
-      transform: translate3d(100%, 0, 0);
-    }
-
-    &.next {
-      // position
-        left: 0;
-      transform: translate3d(100%, 0, 0);
-    }
-
-    &.next.left {
-      // position
-        left: 0;
-      transform: translate3d(0, 0, 0);
-    }
-
-    &.prev {
-      // position
-        left: 0;
-      transform: translate3d(-100%, 0, 0);
-    }
-
-    &.prev.right {
-      // position
-        left: 0;
-      transform: translate3d(0, 0, 0);
-    }
-  }
-
-  > .active,
-  > .next,
-  > .prev {
-    display: block;
-  }
-
-  > .active {
-    // position
-      left: 0;
-  }
-
-  > .active.left {
-    // position
-      left: -100%;
   }
+}
 
-  > .active.right {
-    // position
-      left: 100%;
-  }
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: flex;
+}
 
-  > .next,
-  > .prev {
-    position: absolute;
-      top: 0;
-    width: 100%;
-  }
+.carousel-item-next,
+.carousel-item-prev {
+  position: absolute;
+    top: 0;
+}
 
-  > .next {
-    // position
-      left: 100%;
+@include if-supports-3d-transforms() {
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    transform: translate3d(0, 0, 0);
   }
 
-  > .prev {
-    // position
-      left: -100%;
+  .carousel-item-next,
+  .active.carousel-item-right {
+    transform: translate3d(100%, 0, 0);
   }
 
-  > .next.left,
-  > .prev.right {
-    // position
-      left: 0;
+  .carousel-item-prev,
+  .active.carousel-item-left {
+    transform: translate3d(-100%, 0, 0);
   }
 }
 
 //
 // left/right controls
 //
-  .carousel-control {
+  .carousel-control-next,
+  .carousel-control-prev {
     background-color: $btn-bg;
     border-radius: 50%;
     box-shadow: map-get($btn-float-elevation-shadow, shadow);
@@ -126,6 +64,7 @@
     height: $btn-float-size-sm;
     line-height: $btn-float-size-sm;
     margin-top: ($btn-float-size-sm / -2);
+    opacity: 0;
     position: absolute;
       top: 50%;
     text-align: center;
@@ -134,26 +73,12 @@
     vertical-align: middle;
     white-space: nowrap;
     width: $btn-float-size-sm;
-    z-index: map-get($btn-elevation-shadow, elevation);
-
-    &.left {
-      // position
-        left: ($btn-float-size-sm / 2);
-    }
-
-    &.right {
-      // position
-        right: ($btn-float-size-sm / 2);
-    }
 
     // active, focus, hover
       @include active-focus-hover {
         background-color: $btn-bg-active;
         color: $btn-color;
-
-        @if ($link-decoration-active != "none") {
-          text-decoration: none;
-        }
+        text-decoration: none;
       }
 
       &:active {
@@ -163,28 +88,57 @@
       &:focus {
         outline: 0;
       }
+  }
 
-    .icon-next,
-    .icon-prev {
-      display: inline-block;
-      font-size: $material-icon-size;
+  // active, focus, hover
+    .carousel {
+      @include hover {
+        .carousel-control-next,
+        .carousel-control-prev {
+          opacity: 1;
+        }
+      }
     }
 
-    .icon-next::before {
-      content: "\203a";
-    }
+  .carousel-control-next {
+    // position
+      right: ($btn-float-size-sm / 2);
+  }
 
-    .icon-prev::before {
-      content: "\2039";
-    }
+  .carousel-control-prev {
+    // position
+      left: ($btn-float-size-sm / 2);
+  }
+
+  .carousel-control-next-icon,
+  .carousel-control-prev-icon {
+    background-color: transparent;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: $material-icon-size $material-icon-size;
+    display: block;
+    height: $btn-float-size-sm;
+    opacity: $carousel-control-icon-opacity;
+    width: $btn-float-size-sm;
   }
 
-  .carousel {
-    @include hover {
-      .carousel-control {
-        opacity: 1;
+  // active, focus, hover
+    .carousel-control-next,
+    .carousel-control-prev {
+      @include active-focus-hover {
+        .carousel-control-next-icon,
+        .carousel-control-prev-icon {
+          opacity: 1;
+        }
       }
-    };
+    }
+
+  .carousel-control-next-icon {
+    background-image: $carousel-control-next-icon-bg;
+  }
+
+  .carousel-control-prev-icon {
+    background-image: $carousel-control-prev-icon-bg;
   }
 
 //
@@ -194,7 +148,7 @@
     color: $carousel-caption-color;
     position: absolute;
       right: ((100% - $carousel-caption-width) / 2);
-      bottom: ($carousel-indicator-size * 2);
+      bottom: ($carousel-indicator-size * 3);
       left: ((100% - $carousel-caption-width) / 2);
     text-align: center;
     z-index: 1;
@@ -204,14 +158,15 @@
 // optional indicators
 //
   .carousel-indicators {
+    display: flex;
+    justify-content: center;
     list-style: none;
     margin-bottom: 0;
     padding-left: 0;
     position: absolute;
-      right: ($btn-float-size-sm / -2);
+      right: ($btn-float-size-sm * 2);
       bottom: $carousel-indicator-size;
-      left: ($btn-float-size-sm / -2);
-    text-align: center;
+      left: ($btn-float-size-sm * 2);
     z-index: 1;
 
     li {
@@ -219,7 +174,7 @@
       border: 1px solid $carousel-indicator-color;
       border-radius: $carousel-indicator-size;
       cursor: pointer;
-      display: inline-block;
+      flex: 0 0 auto;
       height: $carousel-indicator-size;
       margin-right: 1px;
       margin-left: 1px;

data/app/assets/stylesheets/material/bootstrap/_close.scss

@@ -10,10 +10,7 @@
   // active, focus, hover
     @include active-focus-hover {
       color: $close-color-active;
-
-      @if ($link-decoration-active != "none") {
-        text-decoration: none;
-      }
+      text-decoration: none;
     }
 
     &:focus {

data/app/assets/stylesheets/material/bootstrap/_custom-form.scss

@@ -9,7 +9,7 @@
 //
   .custom-file {
     cursor: pointer;
-    display: block;
+    display: inline-block;
     height: $textfield-height;
     max-width: 100%;
     position: relative;
@@ -25,38 +25,36 @@
       left: 0;
     user-select: none;
     z-index: 1;
-    @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-line-height, $textfield-margin-bottom, $textfield-padding-top);
+    @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);
     @include transition-standard(border-bottom-color);
 
-    @each $lang, $text in map-get($custom-file-text, placeholder) {
+    @each $lang, $text in $custom-file-text {
       &:lang(#{$lang})::after {
         content: $text;
       }
     }
 
     &::before {
-      @include reset-to-material-icons($textfield-font-size);
-      color: $textfield-hint-color;
-      height: $textfield-height;
-      padding-top: $textfield-padding-top;
+      background-color: transparent;
+      background-image: $custom-file-button-bg;
+      background-position: 50% 50%;
+      background-repeat: no-repeat;
+      background-size: $material-icon-size $material-icon-size;
+      content: "";
+      opacity: $custom-file-button-opacity;
       position: absolute;
-        top: 0;
+        top: $textfield-padding-top;
         right: 0;
         bottom: 0;
+      width: $material-icon-size;
       z-index: 2;
-      @include transition-standard(color);
-    }
-
-    @each $lang, $text in map-get($custom-file-text, button-label) {
-      &:lang(#{$lang})::before {
-        content: $text;
-      }
+      @include transition-standard(opacity);
     }
 
     // active, focus, hover
       @include active-focus-hover {
         &::before {
-          color: $textfield-color;
+          opacity: $custom-file-button-opacity-visible;
         }
       }
   }

data/app/assets/stylesheets/material/bootstrap/_form.scss

@@ -4,7 +4,6 @@
   .form-check {
     display: block;
     margin-bottom: $textfield-margin-bottom;
-    position: relative;
 
     // disabled
       &.disabled {
@@ -13,62 +12,27 @@
           cursor: $cursor-disabled;
         }
       }
-
-    @include media-breakpoint-up(sm) {
-      .form-inline & {
-        display: inline-block;
-        margin-top: 0;
-        margin-bottom: 0;
-        vertical-align: middle;
-      }
-    }
   }
 
   .form-check-input {
-    margin-top: 0.25rem;
-    margin-left: -1.25rem;
-    position: absolute;
-    // &:only-child {
-    //   position: static;
-    // }
-
-    @include media-breakpoint-up(sm) {
-      .form-inline & {
-        margin-left: 0;
-        position: relative;
-      }
-    }
+    margin-right: $form-check-input-margin-x;
   }
 
   .form-check-label {
+    align-items: center;
     cursor: pointer;
+    display: inline-flex;
     margin-bottom: 0;
-    min-height: $font-size-base;
-    padding-left: 1.25rem;
-
-    @include media-breakpoint-up(sm) {
-      .form-inline & {
-        padding-left: 0;
-      }
-    }
   }
 
   // inline
     .form-check-inline {
-      cursor: pointer;
       display: inline-block;
       margin-bottom: 0;
-      padding-left: 1.25rem;
-      position: relative;
       vertical-align: middle;
 
-      // disabled
-        &.disabled {
-          cursor: $cursor-disabled;
-        }
-
       + .form-check-inline {
-        margin-left: (1.25rem - 0.75rem);
+        margin-left: $form-check-inline-margin-x;
       }
     }
 
@@ -78,39 +42,118 @@
   .form-group {
     margin-bottom: $form-group-margin-bottom;
 
+    &:not(.floating-label) label:not(.form-check-label) {
+      font-size: $form-group-label-font-size;
+      margin-bottom: 0;
+    }
+  }
+
+//
+// inline
+//
+  .form-inline {
+    align-items: center;
+    display: flex;
+    flex-flow: row wrap;
+
+    .form-check {
+      width: 100%;
+    }
+
     @include media-breakpoint-up(sm) {
-      .form-inline & {
-        display: inline-block;
+      label {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        margin-bottom: 0;
+      }
+
+      .form-check {
         margin-bottom: 0;
+        width: auto;
+      }
+
+      .form-control {
+        display: inline-block;
         vertical-align: middle;
+        width: auto;
+      }
+
+      .form-control-static {
+        display: inline-block;
+      }
+
+      .form-group {
+        align-items: center;
+        display: flex;
+        flex: 0 0 auto;
+        flex-flow: row wrap;
+        margin-bottom: 0;
+      }
+
+      .input-group {
+        width: auto;
       }
     }
   }
 
 //
-// misc
+// label
 //
-  .form-control-file,
-  .form-control-range {
-    display: block;
+  .col-form-label {
+    line-height: ($textfield-height - $textfield-padding-top - $textfield-padding-bottom);
+    padding-top: $textfield-padding-top;
+    padding-bottom: $textfield-padding-bottom;
   }
 
-  .form-control-file {
-    margin-top: $textfield-margin-bottom;
-    margin-bottom: $textfield-margin-bottom;
+  .col-form-label-lg {
+    line-height: ($textfield-height-lg - $textfield-padding-top-lg - $textfield-padding-bottom-lg);
+    padding-top: $textfield-padding-top-lg;
+    padding-bottom: $textfield-padding-bottom-lg;
+  }
+
+  .col-form-label-sm {
+    line-height: ($textfield-height-sm - $textfield-padding-top-sm - $textfield-padding-bottom-sm);
+    padding-top: $textfield-padding-top-sm;
+    padding-bottom: $textfield-padding-bottom-sm;
   }
 
+  .col-form-legend {
+    font-size: $font-size-base;
+    margin-bottom: 0;
+    padding-top: $textfield-padding-top;
+    padding-bottom: $textfield-padding-bottom;
+
+    .form-group & {
+      font-size: $form-group-label-font-size;
+    }
+  }
+
+//
+// misc
+//
+  .form-control-feedback,
   .form-text {
     display: block;
     margin-top: $textfield-margin-bottom;
 
     .form-control-lg + &,
-    .textfield-lg + & {
+    .form-control-static-lg + & {
       margin-top: $textfield-margin-bottom-lg;
     }
 
-    .form-control-sm + &,
-    .textfield-sm + & {
+    .form-control-sm + &,,
+    .form-control-static-sm + & {
       margin-top: $textfield-margin-bottom-sm;
     }
   }
+
+  .form-control-file,
+  .form-control-range {
+    display: block;
+  }
+
+  .form-control-file {
+    margin-top: $textfield-padding-top;
+    margin-bottom: $textfield-margin-bottom;
+  }

data/app/assets/stylesheets/material/bootstrap/_media.scss

@@ -1,69 +1,8 @@
-@if $enable-flex {
-  .media {
-    display: flex;
-  }
-
-  .media-body {
-    flex: 1;
-  }
-
-  .media-bottom {
-    align-self: flex-end;
-  }
-
-  .media-middle {
-    align-self: center;
-  }
-} @else {
-  .media,
-  .media-body {
-    overflow: hidden;
-  }
-
-  .media-body {
-    width: 10000px;
-  }
-
-  .media-body,
-  .media-left,
-  .media-right {
-    display: table-cell;
-    vertical-align: top;
-  }
-
-  .media-bottom {
-    vertical-align: bottom;
-  }
-
-  .media-middle {
-    vertical-align: middle;
-  }
+.media {
+  align-items: flex-start;
+  display: flex;
 }
 
-//
-// alignment
-//
-  .media-right {
-    padding-left: $media-alignment-padding-x;
-  }
-
-  .media-left {
-    padding-right: $media-alignment-padding-x;
-  }
-
-//
-// misc
-//
-  .media-heading {
-    margin-top: 0;
-    margin-bottom: $media-heading-margin-bottom;
-  }
-
-  .media-list {
-    list-style: none;
-    padding-left: 0;
-  }
-
-  .media-object {
-    display: block;
-  }
+.media-body {
+  flex: 1;
+}