material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -0,0 +1,34 @@
+.badge {
+  @include border-radius($badge-border-radius);
+
+  background-color: $badge-bg;
+  color: $badge-color;
+  display: inline-block;
+  font-size: inherit;
+  font-weight: $badge-font-weight;
+  line-height: inherit;
+  padding: $badge-padding-y $badge-padding-x;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+
+  &:empty {
+    display: none;
+  }
+
+  .btn & {
+    margin-top: -1px;
+    margin-bottom: -1px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+}
+
+// Colour
+@each $color, $values in $theme-colors {
+  .badge-#{$color} {
+    @include color-yiq(map-get(theme-color($color), color));
+
+    background-color: map-get(theme-color($color), color);
+  }
+}

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

@@ -1,30 +1,31 @@
 .breadcrumb {
+  @include border-radius($breadcrumb-border-radius);
+
   align-items: center;
   background-color: $breadcrumb-bg;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
+  margin-bottom: $breadcrumb-margin-y;
   min-height: $breadcrumb-height;
-  margin-bottom: $breadcrumb-margin-bottom;
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-  @include clearfix;
 }
 
 .breadcrumb-item {
+  @include transition-standard(color);
+
   align-items: center;
   color: $breadcrumb-item-color;
   display: flex;
-  @include transition-standard(color);
 
-  // active, focus, hover
-    @include active-focus-hover {
-      color: $breadcrumb-item-color-active;
-    }
+  @include active-focus-hover {
+    color: $breadcrumb-item-color-hover;
+  }
 
-    &.active {
-      color: $breadcrumb-item-color-active;
-      font-weight: bolder;
-    }
+  &.active {
+    color: $breadcrumb-item-color-hover;
+    font-weight: bolder;
+  }
 
   a {
     color: inherit;
@@ -32,13 +33,12 @@
   }
 
   + .breadcrumb-item::before {
-    background-image: $breadcrumb-divider;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: ($material-icon-size / $font-size-root * 1rem) ($material-icon-size / $font-size-root * 1rem);
-    content: "";
+    @include set-material-icons;
+
+    color: $breadcrumb-item-color;
+    content: $breadcrumb-item-icon;
     display: inline-block;
-    height: ($material-icon-size / $font-size-root * 1rem);
-    width: ($breadcrumb-item-padding * 2 + $material-icon-size / $font-size-root * 1rem);
+    margin-right: $breadcrumb-inner-spacer-x;
+    margin-left: $breadcrumb-inner-spacer-x;
   }
 }

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

@@ -1,5 +1,12 @@
 .carousel {
   position: relative;
+
+  @include hover {
+    .carousel-control-next,
+    .carousel-control-prev {
+      opacity: 1;
+    }
+  }
 }
 
 .carousel-inner {
@@ -9,15 +16,14 @@
 }
 
 .carousel-item {
+  @include transition-standard-complex(transform);
+
+  align-items: center;
+  backface-visibility: hidden;
   display: none;
+  perspective: 1000px;
   position: relative;
   width: 100%;
-
-  @include if-supports-3d-transforms() {
-    backface-visibility: hidden;
-    perspective: 1000px;
-    @include transition-standard(transform);
-  }
 }
 
 .carousel-item.active,
@@ -26,164 +32,143 @@
   display: flex;
 }
 
-.carousel-item-next,
+.carousel-item-left.active,
 .carousel-item-prev {
-  position: absolute;
-    top: 0;
+  transform: translateX(-100%);
+
+  @supports (transform-style: preserve-3d) {
+    transform: translate3d(-100%, 0, 0);
+  }
 }
 
-@include if-supports-3d-transforms() {
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
+.carousel-item-left.carousel-item-next,
+.carousel-item-prev.carousel-item-right {
+  transform: translateX(0);
+
+  @supports (transform-style: preserve-3d) {
     transform: translate3d(0, 0, 0);
   }
+}
 
-  .carousel-item-next,
-  .active.carousel-item-right {
+.carousel-item-next,
+.carousel-item-right.active {
+  transform: translateX(100%);
+
+  @supports (transform-style: preserve-3d) {
     transform: translate3d(100%, 0, 0);
   }
+}
 
-  .carousel-item-prev,
-  .active.carousel-item-left {
-    transform: translate3d(-100%, 0, 0);
-  }
+.carousel-item-next,
+.carousel-item-prev {
+  position: absolute;
+  top: 0;
 }
 
-//
-// left/right controls
-//
-  .carousel-control-next,
-  .carousel-control-prev {
-    background-color: $btn-bg;
-    border-radius: 50%;
-    box-shadow: map-get($btn-float-elevation-shadow, shadow);
-    color: $btn-color;
-    display: block;
-    font-size: $btn-font-size;
-    font-weight: $btn-font-weight;
-    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;
-    text-transform: uppercase;
-    user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
-    width: $btn-float-size-sm;
-
-    // active, focus, hover
-      @include active-focus-hover {
-        background-color: $btn-bg-active;
-        color: $btn-color;
-        text-decoration: none;
-      }
-
-      &:active {
-        box-shadow: map-get($btn-elevation-shadow-active, shadow);
-      }
-
-      &:focus {
-        outline: 0;
-      }
-  }
 
-  // active, focus, hover
-    .carousel {
-      @include hover {
-        .carousel-control-next,
-        .carousel-control-prev {
-          opacity: 1;
-        }
-      }
-    }
 
-  .carousel-control-next {
-    // position
-      right: ($btn-float-size-sm / 2);
+// Left/right controls
+
+.carousel-control-next,
+.carousel-control-prev {
+  align-items: center;
+  background-color: $carousel-control-bg;
+  border-radius: 50%;
+  box-shadow: map-get($carousel-control-elevation-shadow, shadow);
+  color: $carousel-control-color;
+  display: flex;
+  font-size: $carousel-control-font-size;
+  height: $carousel-control-size;
+  justify-content: center;
+  line-height: 1;
+  margin-top: ($carousel-control-size / -2);
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  user-select: none;
+  width: $carousel-control-size;
+
+  @include active-focus-hover {
+    background-color: $carousel-control-bg-hover;
+    color: $carousel-control-color;
+    text-decoration: none;
   }
 
-  .carousel-control-prev {
-    // position
-      left: ($btn-float-size-sm / 2);
+  &:active {
+    box-shadow: map-get($carousel-control-elevation-shadow-active, shadow);
   }
 
-  .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;
+  &:focus {
+    outline: 0;
   }
+}
 
-  // 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 {
+  right: ($carousel-control-size / 2);
+}
 
-  .carousel-control-next-icon {
-    background-image: $carousel-control-next-icon-bg;
-  }
+.carousel-control-prev {
+  left: ($carousel-control-size / 2);
+}
 
-  .carousel-control-prev-icon {
-    background-image: $carousel-control-prev-icon-bg;
-  }
+.carousel-control-next-icon,
+.carousel-control-prev-icon {
+  @include set-material-icons;
+}
 
-//
-// optional captions
-//
-  .carousel-caption {
-    color: $carousel-caption-color;
-    position: absolute;
-      right: ((100% - $carousel-caption-width) / 2);
-      bottom: ($carousel-indicator-size * 3);
-      left: ((100% - $carousel-caption-width) / 2);
-    text-align: center;
-    z-index: 1;
-  }
+.carousel-control-next-icon::before {
+  content: $carousel-control-next-icon;
+}
 
-//
-// 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);
-      bottom: $carousel-indicator-size;
-      left: ($btn-float-size-sm * 2);
-    z-index: 1;
-
-    li {
-      background-color: rgba(0, 0, 0, 0);
-      border: 1px solid $carousel-indicator-color;
-      border-radius: $carousel-indicator-size;
-      cursor: pointer;
-      flex: 0 0 auto;
-      height: $carousel-indicator-size;
-      margin-right: 1px;
-      margin-left: 1px;
-      overflow: hidden;
-      text-indent: 100%;
-      width: $carousel-indicator-size;
-    }
+.carousel-control-prev-icon::before {
+  content: $carousel-control-prev-icon;
+}
 
-    .active {
-      background-color: $carousel-indicator-color;
-    }
+
+
+// Optional captions
+
+.carousel-caption {
+  color: $carousel-caption-color;
+  position: absolute;
+  right: ((100% - $carousel-caption-width) / 2);
+  bottom: ($carousel-indicator-size * 3);
+  left: ((100% - $carousel-caption-width) / 2);
+  text-align: center;
+  z-index: 1;
+}
+
+
+
+// Optional indicators
+
+.carousel-indicators {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 0;
+  position: absolute;
+  right: ($carousel-control-size * 2);
+  bottom: $carousel-indicator-size;
+  left: ($carousel-control-size * 2);
+  z-index: 1;
+
+  li {
+    background-color: transparent;
+    border: $carousel-indicator-border-width solid $carousel-indicator-border-color;
+    border-radius: $carousel-indicator-size;
+    flex: 0 0 auto;
+    height: $carousel-indicator-size;
+    margin-right: $carousel-indicator-border-width;
+    margin-left: $carousel-indicator-border-width;
+    overflow: hidden;
+    text-indent: 100%;
+    white-space: nowrap;
+    width: $carousel-indicator-size;
   }
+
+  .active {
+    background-color: $carousel-indicator-bg;
+  }
+}

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

@@ -1,28 +1,27 @@
 .close {
-  color: $close-color;
-  cursor: pointer;
-  float: right;
-  font-size: $close-font-size;
-  font-weight: normal;
-  line-height: 1;
   @include transition-standard(color);
 
-  // active, focus, hover
-    @include active-focus-hover {
-      color: $close-color-active;
-      text-decoration: none;
-    }
-
-    &:focus {
-      outline: 0;
-    }
-}
-
-button.close {
   appearance: none;
   background-color: transparent;
   background-image: none;
   border: 0;
-  cursor: pointer;
+  color: $close-color;
+  float: right;
+  font-size: $close-font-size;
+  font-weight: $close-font-weight;
+  line-height: 1;
   padding: 0;
+
+  @include active-focus-hover {
+    color: $close-color-hover;
+    text-decoration: none;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  span {
+    vertical-align: text-top;
+  }
 }