material-sass 4.0.0.beta → 4.0.0.beta2

data/{app/assets → assets}/stylesheets/material/material/_button-flat.scss

@@ -1,3 +1,4 @@
+[class*='btn-flat'],
 [class*='btn-outline'] {
   background-color: transparent;
   box-shadow: none;
@@ -13,8 +14,8 @@
   }
 }
 
-// Colour
 @each $color, $values in $theme-colors {
+  .btn-flat-#{$color},
   .btn-outline-#{$color} {
     @include plain-active-focus-hover {
       color: map-get(theme-color($color), color);
@@ -27,7 +28,7 @@
   }
 }
 
-[class*='bg-dark'] [class*='btn-outline'],
+.btn-flat-light,
 .btn-outline-light {
   @include focus-hover {
     background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse);

data/{app/assets → assets}/stylesheets/material/material/_button-float.scss

@@ -7,13 +7,13 @@
   padding: 0;
   width: $btn-float-size;
 
-  &:active,
-  &.active {
+  &.active,
+  &:active {
     box-shadow: map-get($btn-float-elevation-shadow-active, shadow);
   }
 
-  &:disabled,
-  &.disabled {
+  &.disabled,
+  &:disabled {
     box-shadow: none;
   }
 

data/{app/assets → assets}/stylesheets/material/material/_button-group.scss

@@ -15,13 +15,23 @@
     flex: 0 1 auto;
     min-width: 0;
 
-    &:active,
-    &.active {
+    @each $color, $values in $theme-colors {
+      &-#{$color} {
+        &:disabled,
+        &.disabled {
+          background-color: map-get(theme-color($color), lighter);
+          color: color-yiq(map-get(theme-color($color), lighter));
+        }
+      }
+    }
+
+    &.active,
+    &:active {
       box-shadow: none;
     }
 
-    &:disabled,
-    &.disabled {
+    &.disabled,
+    &:disabled {
       opacity: $btn-group-toggle-opacity;
     }
 
@@ -40,20 +50,11 @@
     }
   }
 
-  // Colour
-  @each $color, $values in $theme-colors {
-    > .btn-#{$color} {
-      &:disabled,
-      &.disabled {
-        @include color-yiq(map-get(theme-color($color), lighter));
-
-        background-color: map-get(theme-color($color), lighter);
-      }
-    }
-  }
-
   > .btn-group,
   > .btn-group-vertical {
+    @include border-radius(0);
+
+    background-color: transparent;
     box-shadow: none;
   }
 }
@@ -63,40 +64,18 @@
     box-shadow: none;
   }
 
-  // Border colour
-  > .btn {
-    border-left: $btn-group-inner-spacer-x solid transparent;
+  > .btn,
+  > .btn-group {
     margin-left: ($btn-group-inner-spacer-x * -1);
-
-    &:disabled,
-    &.disabled {
-      + .btn:disabled,
-      + .btn.disabled,
-      + .btn-group > .btn:disabled:first-child,
-      + .btn-group > .btn.disabled:first-child {
-        border-left-color: $btn-group-divider-bg;
-      }
-    }
-
-    &.active {
-      + .btn.active,
-      + .btn-group > .btn.active:first-child {
-        border-left-color: $btn-group-divider-bg;
-      }
-    }
   }
 
-  > .btn:first-child {
-    border-left-width: 0;
+  > .btn:first-child,
+  > .btn-group:first-child {
     margin-left: 0;
   }
 
-  > .btn-group > .btn:first-child {
-    border-left-width: $btn-group-inner-spacer-x;
-    margin-left: ($btn-group-inner-spacer-x * -1);
-  }
-
   // Border radius
+
   > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
     @include border-right-radius(0);
   }
@@ -133,43 +112,18 @@
 
   > .btn,
   > .btn-group {
+    margin-top: ($btn-group-inner-spacer-y * -1);
+    margin-left: 0;
     width: 100%;
   }
 
-  // Border colour
-  > .btn {
-    border-top: $btn-group-inner-spacer-x solid transparent;
-    margin-top: ($btn-group-inner-spacer-x * -1);
-
-    &:disabled,
-    &.disabled {
-      + .btn:disabled,
-      + .btn.disabled,
-      + .btn-group > .btn:disabled:first-child,
-      + .btn-group > .btn.disabled:first-child {
-        border-top-color: $btn-group-divider-bg;
-      }
-    }
-
-    &.active {
-      + .btn.active,
-      + .btn-group > .btn.active:first-child {
-        border-top-color: $btn-group-divider-bg;
-      }
-    }
-  }
-
-  > .btn:first-child {
-    border-top-width: 0;
+  > .btn:first-child,
+  > .btn-group:first-child {
     margin-top: 0;
   }
 
-  > .btn-group-vertical > .btn:first-child {
-    border-top-width: $btn-group-inner-spacer-x;
-    margin-top: ($btn-group-inner-spacer-x * -1);
-  }
-
   // Border radius
+
   > .btn:first-child:not(:last-child) {
     @include border-bottom-radius(0);
   }
@@ -198,13 +152,11 @@
   }
 }
 
-// Fluid
 .btn-group-fluid {
   background-color: transparent;
   box-shadow: none;
 }
 
-// Size
 .btn-group-lg > .btn {
   @extend %btn-lg;
 }
@@ -213,13 +165,13 @@
   @extend %btn-sm;
 }
 
-
-
 // Checkbox and radio options
 
 [data-toggle='buttons'] {
   > .btn,
   > .btn-group > .btn {
+    margin-bottom: 0;
+
     [type='checkbox'],
     [type='radio'] {
       clip: rect(0, 0, 0, 0);
@@ -229,32 +181,25 @@
   }
 }
 
-
-
 // Split button dropdown
 
-.btn + .dropdown-toggle-split {
-  padding-right: ($btn-padding-x / 2);
-  padding-left: ($btn-padding-x / 2);
+.dropdown-toggle.dropdown-toggle-split {
+  padding-right: $caret-spacer-x;
+  padding-left: $caret-spacer-x;
 
   &::after {
-    margin-left: ($caret-spacer-x * -1);
+    margin-right: 0;
+    margin-left: 0;
   }
-}
 
-// Size
-.btn-lg + .dropdown-toggle-split {
-  padding-right: ($btn-padding-x-lg / 2);
-  padding-left: ($btn-padding-x-lg / 2);
-}
-
-.btn-sm + .dropdown-toggle-split {
-  padding-right: ($btn-padding-x-sm / 2);
-  padding-left: ($btn-padding-x-sm / 2);
+  .dropleft & {
+    &::before {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
 }
 
-
-
 // Toolbar
 
 .btn-toolbar {

data/{app/assets → assets}/stylesheets/material/material/_button.scss

@@ -60,29 +60,20 @@
   }
 }
 
-a {
-  &.btn.disabled {
-    pointer-events: none;
-  }
-}
-
-fieldset {
-  &[disabled] a {
-    &.btn {
-      pointer-events: none;
-    }
-  }
+// stylelint-disable selector-no-qualifying-type
+a.btn.disabled,
+fieldset[disabled] a.btn {
+  pointer-events: none;
 }
+// stylelint-enable
 
-// Colour
 @each $color, $values in $theme-colors {
   .btn-#{$color} {
-    @include color-yiq(map-get(theme-color($color), color));
-
     background-color: map-get(theme-color($color), color);
+    color: color-yiq(map-get(theme-color($color), color));
 
     @include active-focus-hover {
-      @include color-yiq(map-get(theme-color($color), color));
+      color: color-yiq(map-get(theme-color($color), color));
     }
 
     &:active,
@@ -106,7 +97,6 @@ fieldset {
   }
 }
 
-// Size
 .btn-lg,
 %btn-lg {
   font-size: $btn-font-size-lg;
@@ -119,8 +109,6 @@ fieldset {
   padding: $btn-padding-y-sm $btn-padding-x-sm;
 }
 
-
-
 // Block button
 
 .btn-block {
@@ -140,8 +128,6 @@ fieldset {
   }
 }
 
-
-
 // Link button
 
 .btn-link {
@@ -149,7 +135,7 @@ fieldset {
   border-radius: 0;
   box-shadow: none;
   color: $link-color;
-  font-weight: normal;
+  font-weight: $font-weight-regular;
   text-decoration: $link-decoration;
   text-transform: none;
 
@@ -176,8 +162,6 @@ fieldset {
   }
 }
 
-
-
 // No minimum width
 
 .btn-fluid {

data/{app/assets → assets}/stylesheets/material/material/_card.scss

@@ -10,22 +10,7 @@
   position: relative;
   word-wrap: break-word;
 
-  &[href],
-  &[tabindex] {
-    @include active-focus-hover {
-      box-shadow: map-get($card-elevation-shadow-hover, shadow);
-      text-decoration: none;
-    }
-
-    &:focus {
-      outline: 0;
-    }
-  }
-}
-
-// Colour
-@each $color, $values in $theme-colors {
-  .card {
+  @each $color, $values in $theme-colors {
     &.border-#{$color} {
       box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 1px map-get(theme-color($color), color);
 
@@ -37,16 +22,26 @@
       }
     }
   }
-}
 
+  &[href],
+  &[tabindex] {
+    @include active-focus-hover {
+      box-shadow: map-get($card-elevation-shadow-hover, shadow);
+      text-decoration: none;
+    }
 
+    &:focus {
+      outline: 0;
+    }
+  }
+}
 
 // Action
 
 .card-actions {
   align-items: flex-start;
   display: flex;
-  padding: ($card-action-padding-y - $card-action-inner-spacer-y / 2) ($card-action-padding-x - $card-action-inner-spacer-x / 2);
+  padding: $card-action-padding-y ($card-action-padding-x - $card-action-inner-spacer-x) ($card-action-padding-y - $card-action-inner-spacer-y) $card-action-padding-x;
 
   &:first-child {
     @include border-top-radius($card-border-radius);
@@ -60,15 +55,14 @@
     @include text-truncate;
 
     flex: 0 1 auto;
-    margin: ($card-action-inner-spacer-y / 2) ($card-action-inner-spacer-x / 2);
+    margin-right: $card-action-inner-spacer-x;
+    margin-bottom: $card-action-inner-spacer-y;
     min-width: 0;
     padding-right: $card-action-inner-spacer-x;
     padding-left: $card-action-inner-spacer-x;
   }
 }
 
-
-
 // Body
 
 .card-body {
@@ -106,8 +100,6 @@
   }
 }
 
-
-
 // Footer
 
 .card-footer {
@@ -131,13 +123,13 @@
 
   .card-body + &,
   .card-header + & {
-    &:not[class*='border-'] {
-      padding-top: 0;
-    }
-
     &[class*='border-'] {
       margin-top: ($card-padding-y - $card-inner-spacer-y);
     }
+
+    &:not[class*='border-'] {
+      padding-top: 0;
+    }
   }
 
   .card-header[class*='border-'] + & {
@@ -151,8 +143,6 @@
   }
 }
 
-
-
 // Header
 
 .card-header {
@@ -165,6 +155,11 @@
     }
   }
 
+  &[class*='border-'] {
+    padding-top: $card-padding-y;
+    padding-bottom: $card-padding-y;
+  }
+
   &:first-child,
   .card-img-top + &,
   .list-group + & {
@@ -188,16 +183,11 @@
       margin-top: ($card-padding-y - $card-inner-spacer-y);
     }
   }
-
-  &[class*='border-'] {
-    padding-top: $card-padding-y;
-    padding-bottom: $card-padding-y;
-  }
 }
 
 .card-header-pills {
   margin: ($card-inner-spacer-y * -1) ($card-inner-spacer-x * -1) 0;
-  padding: ($card-action-padding-y - $card-action-inner-spacer-y / 2) ($card-action-padding-x - $card-action-inner-spacer-x / 2);
+  padding: $card-action-padding-y ($card-action-padding-x - $card-action-inner-spacer-x) ($card-action-padding-y - $card-action-inner-spacer-y) $card-action-padding-x;
 
   .card-header:first-child &,
   .card-header[class*='border-'] &,
@@ -211,17 +201,15 @@
   }
 
   .nav-link {
-    margin: ($card-action-inner-spacer-y / 2) ($card-action-inner-spacer-x / 2);
+    margin-right: $card-action-inner-spacer-x;
+    margin-bottom: $card-action-inner-spacer-y;
     padding-right: $card-action-inner-spacer-x;
     padding-left: $card-action-inner-spacer-x;
   }
 }
 
 .card-header-tabs {
-  margin-top: ($card-inner-spacer-y * -1);
-  margin-right: ($card-inner-spacer-x * -1);
-  margin-bottom: ($card-padding-y - $card-inner-spacer-y);
-  margin-left: ($card-inner-spacer-x * -1);
+  margin: ($card-inner-spacer-y * -1) ($card-inner-spacer-x * -1) ($card-padding-y - $card-inner-spacer-y);
 
   .card-header:first-child &,
   .card-header[class*='border-'] &,
@@ -236,8 +224,6 @@
   }
 }
 
-
-
 // Image
 
 .card-img {
@@ -252,8 +238,6 @@
   @include border-top-radius($card-border-radius);
 }
 
-
-
 // Image overlay
 
 .card-img-overlay {
@@ -265,8 +249,6 @@
   left: 0;
 }
 
-
-
 // Set
 
 .card-columns {
@@ -364,8 +346,6 @@
   }
 }
 
-
-
 // Text and title
 
 .card-link {