material-sass 4.0.0.beta2 → 4.0.0.beta3

data/assets/stylesheets/material/material/_dialog.scss

@@ -137,21 +137,21 @@
           color: map-get(theme-color($color), color);
         }
 
-        &:disabled,
-        &.disabled {
+        &.disabled,
+        &:disabled {
           color: $btn-color-disabled;
         }
       }
     }
 
-    &:active,
-    &.active {
+    &.active,
+    &:active {
       background-color: $btn-bg-active;
       box-shadow: none;
     }
 
-    &:disabled,
-    &.disabled {
+    &.disabled,
+    &:disabled {
       background-color: transparent;
     }
   }

data/assets/stylesheets/material/material/_expansion-panel.scss

@@ -62,8 +62,8 @@
     text-decoration: none;
   }
 
-  &:disabled,
-  &.disabled {
+  &.disabled,
+  &:disabled {
     background-color: $expansion-panel-bg;
     color: $expansion-panel-color-disabled;
   }
@@ -208,8 +208,8 @@
     text-decoration: none;
   }
 
-  &:disabled,
-  &.disabled {
+  &.disabled,
+  &:disabled {
     background-color: $expansion-panel-bg;
     color: $expansion-panel-color-disabled;
   }

data/assets/stylesheets/material/material/_menu.scss

@@ -325,8 +325,8 @@
     background-color: $menu-link-bg-hover;
   }
 
-  &:disabled,
-  &.disabled {
+  &.disabled,
+  &:disabled {
     background-color: transparent;
     color: $menu-link-color-disabled;
     pointer-events: none;

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

@@ -7,7 +7,7 @@
 }
 
 .picker-box {
-  @include border-bottom-radius($border-radius);
+  @include border-bottom-radius($picker-border-radius);
 
   background-color: $picker-content-bg;
   overflow: hidden;
@@ -88,7 +88,7 @@
 }
 
 .picker-wrap {
-  @include border-radius($border-radius);
+  @include border-radius($picker-border-radius);
   @include transition-standard-complex(transform);
   @include typography-body-1;
 
@@ -178,7 +178,7 @@
 // Material date display
 
 .picker-date-display {
-  @include border-top-radius($border-radius);
+  @include border-top-radius($picker-border-radius);
   @include text-align(left);
 
   background-color: $picker-header-bg;

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

@@ -6,6 +6,7 @@
   display: flex;
   overflow: hidden;
   position: relative;
+  z-index: 1;
 }
 
 .progress-bar {
@@ -136,7 +137,7 @@
 
   &::after,
   &::before {
-    @include border-radius($border-radius);
+    @include border-radius($progress-bar-border-radius);
 
     animation-duration: 2s;
     animation-iteration-count: infinite;

data/assets/stylesheets/material/material/_selection-control.scss

@@ -1,34 +1,41 @@
 .custom-control {
-  color: inherit;
-  display: inline-flex;
-  font-size: $font-size-base;
-  margin-right: ($selection-control-spacer-x * 2);
+  display: block;
+  margin-bottom: $selection-control-spacer-y;
   min-height: ($font-size-base * $line-height-base);
   padding-left: ($selection-control-indicator-size + $selection-control-spacer-x);
   position: relative;
 }
 
-.custom-control-indicator {
-  align-items: center;
-  color: $selection-control-color;
-  display: flex;
-  height: $selection-control-indicator-size;
-  pointer-events: none;
-  position: absolute;
-  top: (($font-size-base * $line-height-base - $selection-control-indicator-size) / 2);
-  left: 0;
-  user-select: none;
-  width: ($selection-control-indicator-size + $selection-control-spacer-x);
+.custom-control-inline {
+  display: inline-flex;
+  margin-right: ($selection-control-spacer-x * 2);
+}
+
+// Base styles for custom control indicators
+
+.custom-control-label {
+  color: inherit;
+  font-size: $font-size-base;
+  line-height: inherit;
+  margin-bottom: 0;
+
+  &::after {
+    color: $selection-control-color;
+    position: absolute;
+    top: (($font-size-base * $line-height-base - $selection-control-indicator-size) / 2);
+    left: 0;
+  }
 
   &::before {
     @include transition-standard(background-color, opacity, transform);
 
     background-color: currentColor;
     border-radius: 50%;
+    color: $selection-control-color;
     content: '';
     display: block;
     height: ($selection-control-indicator-size * 2);
-    margin-top: ($selection-control-indicator-size / -2);
+    margin-top: (($font-size-base * $line-height-base - $selection-control-indicator-size) / 2 + $selection-control-indicator-size / -2);
     margin-left: ($selection-control-indicator-size / -2);
     opacity: 0;
     position: absolute;
@@ -44,58 +51,58 @@
   position: absolute;
   z-index: -1;
 
-  &:active,
-  &.focus {
-    ~ .custom-control-indicator::before {
+  &.focus,
+  &:active {
+    ~ .custom-control-label::before {
       opacity: $selection-control-radial-opacity;
       transform: scale(1, 1) translateZ(0);
     }
   }
 
   &:checked ~ {
-    .custom-control-indicator {
-      color: $selection-control-color-active;
+    .custom-control-label {
+      &::after {
+        color: $selection-control-color-active;
+      }
+
+      &::before {
+        background-color: $selection-control-color-active;
+      }
     }
   }
 
   &:disabled ~ {
-    .custom-control-indicator,
-    .custom-control-description {
+    .custom-control-label {
       color: $selection-control-color-disabled;
-    }
 
-    .custom-control-indicator::before {
-      display: none;
-    }
-  }
-}
-
-.custom-controls-stacked {
-  display: flex;
-  flex-direction: column;
+      &::after {
+        color: $selection-control-color-disabled;
+      }
 
-  .custom-control {
-    display: flex;
-    margin-right: 0;
-    margin-bottom: $selection-control-spacer-y;
+      &::before {
+        display: none;
+      }
+    }
   }
 }
 
 // Checkbox
 
 .custom-checkbox {
-  .custom-control-indicator::after {
+  .custom-control-label::after {
     @include set-material-icons;
 
     content: $selection-control-checkbox-icon;
+    line-height: 1;
+    vertical-align: middle;
   }
 
   .custom-control-input {
-    &:checked ~ .custom-control-indicator::after {
+    &:checked ~ .custom-control-label::after {
       content: $selection-control-checkbox-icon-checked;
     }
 
-    &:indeterminate ~ .custom-control-indicator::after {
+    &:indeterminate ~ .custom-control-label::after {
       content: $selection-control-checkbox-icon-indeterminate;
     }
   }
@@ -104,14 +111,16 @@
 // Radio button
 
 .custom-radio {
-  .custom-control-indicator::after {
+  .custom-control-label::after {
     @include set-material-icons;
 
     content: $selection-control-radio-icon;
+    line-height: 1;
+    vertical-align: middle;
   }
 
   .custom-control-input {
-    &:checked ~ .custom-control-indicator::after {
+    &:checked ~ .custom-control-label::after {
       content: $selection-control-radio-icon-checked;
     }
   }
@@ -122,21 +131,9 @@
 .custom-switch {
   padding-left: ($selection-control-track-width + $selection-control-spacer-x);
 
-  .custom-control-indicator {
+  .custom-control-label {
     @include transition-standard(background-color);
 
-    background-clip: content-box;
-    background-color: $selection-control-track-bg;
-    border: (($selection-control-indicator-size - $selection-control-track-height) / 2) solid transparent;
-    border-radius: $selection-control-track-height;
-    width: $selection-control-track-width;
-
-    &::after,
-    &::before {
-      top: (($selection-control-indicator-size - $selection-control-track-height) / -2);
-      left: (($selection-control-indicator-size - $selection-control-track-height) / -2);
-    }
-
     &::after {
       @include transition-standard(background-color, transform);
 
@@ -152,25 +149,49 @@
   }
 
   .custom-control-input {
-    &:checked ~ .custom-control-indicator {
-      background-color: hex-to-rgba($selection-control-color-active, 0.5);
-
-      &::after,
-      &::before {
-        transform: translateX($selection-control-track-width - $selection-control-indicator-size);
+    &:checked {
+      ~ .custom-control-label {
+        // scss-lint:disable NestingDepth
+        &::after,
+        &::before {
+          transform: translateX($selection-control-track-width - $selection-control-indicator-size);
+        }
+
+        &::after {
+          background-color: $selection-control-color-active;
+        }
+        // scss-lint:enable
       }
 
-      &::after {
-        background-color: $selection-control-color-active;
+      ~ .custom-control-track {
+        background-color: hex-to-rgba($selection-control-color-active, 0.5);
       }
     }
 
-    &:disabled ~ .custom-control-indicator {
-      background-color: $selection-control-track-bg-disabled;
-
-      &::after {
+    &:disabled {
+      ~ .custom-control-label::after {
         background-color: $selection-control-thumb-bg-disabled;
       }
+
+      ~ .custom-control-track {
+        background-color: $selection-control-track-bg-disabled;
+      }
     }
   }
+
+  .custom-control-track {
+    @include transition-standard(background-color);
+
+    background-clip: content-box;
+    background-color: $selection-control-track-bg;
+    border: (($selection-control-indicator-size - $selection-control-track-height) / 2) solid transparent;
+    border-radius: $selection-control-track-height;
+    content: '';
+    display: block;
+    height: $selection-control-indicator-size;
+    position: absolute;
+    top: (($font-size-base * $line-height-base - $selection-control-indicator-size) / 2);
+    left: 0;
+    width: $selection-control-track-width;
+  }
 }

data/assets/stylesheets/material/material/_text-field-input-group.scss

@@ -1,105 +1,64 @@
 .input-group {
   align-items: center;
   display: flex;
+  flex-wrap: wrap;
   position: relative;
   width: 100%;
 
+  .custom-file,
+  .custom-select,
   .form-control {
     flex: 1 1 auto;
+    margin-bottom: 0;
     width: 1%;
   }
 }
 
-// Addon and button
+// Addons
 
-.input-group .custom-file,
-.input-group .custom-select,
-.input-group .form-control,
-.input-group-addon,
-.input-group-btn {
+.input-group-append,
+.input-group-prepend {
   align-items: center;
   display: flex;
-}
-
-.input-group .custom-file,
-.input-group .custom-select {
-  width: 100%;
-}
-
-.input-group-addon,
-.input-group-btn {
   justify-content: center;
-  margin-right: $input-group-addon-margin-x;
-  margin-left: $input-group-addon-margin-x;
+  min-width: $textfield-height;
 
-  &:first-child {
-    margin-left: 0;
-  }
+  .btn {
+    min-width: 0;
 
-  &:last-child {
-    margin-right: 0;
+    + .btn {
+      margin-left: ($btn-group-inner-spacer-x * -1);
+    }
   }
+}
 
-  + .input-group-addon,
-  + .input-group-btn {
-    margin-left: ($input-group-addon-margin-x * -1);
-  }
+.input-group-append {
+  margin-left: $input-group-addon-margin-x;
+}
+
+.input-group-prepend {
+  margin-right: $input-group-addon-margin-x;
 }
 
-.input-group-addon {
+.input-group-text {
   color: inherit;
   font-size: $textfield-font-size;
   line-height: $textfield-line-height;
-  min-width: $textfield-height;
+  margin-right: ($input-group-addon-margin-x / 2);
+  margin-bottom: 0;
+  margin-left: ($input-group-addon-margin-x / 2);
   white-space: nowrap;
 }
 
-.input-group-btn {
-  @include border-radius($btn-border-radius);
-
-  background-color: $btn-group-bg;
-  box-shadow: map-get($btn-elevation-shadow, shadow);
-
-  @each $color, $values in $theme-colors {
-    > .btn-#{$color} {
-      &:disabled,
-      &.disabled {
-        background-color: map-get(theme-color($color), lighter);
-        color: color-yiq(map-get(theme-color($color), lighter));
-      }
-    }
-  }
-
-  > .btn {
-    box-shadow: none;
-    flex: 0 1 auto;
-    margin-left: ($btn-group-inner-spacer-x * -1);
-    min-width: 0;
-
-    &:active,
-    &.active {
-      box-shadow: none;
-    }
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
-    @include border-right-radius(0);
-  }
+// Border radius
 
-  > .btn:last-child:not(:first-child),
-  > .dropdown-toggle:not(:first-child) {
+.input-group > .input-group-append > .btn,
+.input-group > .input-group-prepend > .btn {
+  &:not(:first-of-type) {
     @include border-left-radius(0);
   }
 
-  > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-    border-radius: 0;
-  }
-
-  > .dropdown-toggle:not(:last-child):not(:nth-last-child(2)) {
+  &:not(:last-of-type) {
     @include border-right-radius(0);
   }
 }
@@ -111,14 +70,18 @@
     @extend %form-control-lg;
   }
 
-  > .input-group-addon {
-    font-size: $textfield-font-size-lg;
-    line-height: $textfield-line-height-lg;
+  > .input-group-append,
+  > .input-group-prepend {
     min-width: $textfield-height-lg;
-  }
 
-  > .input-group-btn > .btn {
-    @extend %btn-lg;
+    > .btn {
+      @extend %btn-lg;
+    }
+
+    > .input-group-text {
+      font-size: $textfield-font-size-lg;
+      line-height: $textfield-line-height-lg;
+    }
   }
 }
 
@@ -127,13 +90,17 @@
     @extend %form-control-sm;
   }
 
-  > .input-group-addon {
-    font-size: $textfield-font-size-sm;
-    line-height: $textfield-line-height-sm;
+  > .input-group-append,
+  > .input-group-prepend {
     min-width: $textfield-height-sm;
-  }
 
-  > .input-group-btn > .btn {
-    @extend %btn-sm;
+    > .btn {
+      @extend %btn-sm;
+    }
+
+    > .input-group-text {
+      font-size: $textfield-font-size-sm;
+      line-height: $textfield-line-height-sm;
+    }
   }
 }