material-sass 4.0.0.beta3 → 4.0.0

data/assets/stylesheets/material/_functions.scss

@@ -34,9 +34,9 @@
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
   @if ($yiq >= $yiq-contrasted-threshold) {
-    @return $black-primary;
+    @return $yiq-text-dark;
   } @else {
-    @return $white-primary;
+    @return $yiq-text-light;
   }
 }
 
@@ -52,8 +52,20 @@
   }
 }
 
-// Return a theme colour palette
+// Retrieve a colour
 
-@function theme-color($key: 'primary') {
-  @return map-get($theme-colors, $key);
+@function color($key: amber) {
+  @return map-get($colors, $key);
+}
+
+@function theme-color($key: primary) {
+  @return map-get(map-get($theme-colors, $key), color);
+}
+
+@function theme-color-dark($key: primary) {
+  @return map-get(map-get($theme-colors, $key), dark);
+}
+
+@function theme-color-light($key: primary) {
+  @return map-get(map-get($theme-colors, $key), light);
 }

data/assets/stylesheets/material/base/_base.scss

@@ -1,3 +1,27 @@
+:root {
+  @each $bp, $value in $grid-breakpoints {
+    --breakpoint-#{$bp}: #{$value};
+  }
+
+  @each $color, $value in $colors {
+    --#{$color}: #{$value};
+  }
+
+  @each $color, $values in $theme-colors {
+    @each $level, $value in $values {
+      @if $level == 'color' {
+        --#{$color}: #{$value};
+      } @else {
+        --#{$color}-#{$level}: #{$value};
+      }
+    }
+  }
+
+  --font-family-monospace: #{inspect($font-family-monospace)};
+  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
+  --font-family-serif: #{inspect($font-family-serif)};
+}
+
 // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
 // Box sizing

data/assets/stylesheets/material/bootstrap/_alert.scss

@@ -10,8 +10,8 @@
 
 @each $color, $values in $theme-colors {
   .alert-#{$color} {
-    background-color: map-get(theme-color($color), lighter);
-    color: color-yiq(map-get(theme-color($color), lighter));
+    background-color: theme-color-light($color);
+    color: color-yiq(theme-color-light($color));
   }
 }
 

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

@@ -26,13 +26,13 @@
 
 @each $color, $values in $theme-colors {
   .badge-#{$color} {
-    background-color: map-get(theme-color($color), color);
-    color: color-yiq(map-get(theme-color($color), color));
+    background-color: theme-color($color);
+    color: color-yiq(theme-color($color));
 
     &[href] {
       @include active-focus-hover {
-        background-color: map-get(theme-color($color), darker);
-        color: color-yiq(map-get(theme-color($color), darker));
+        background-color: theme-color-dark($color);
+        color: color-yiq(theme-color-dark($color));
         text-decoration: none;
       }
     }

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

@@ -65,6 +65,39 @@
   top: 0;
 }
 
+// Fade
+
+.carousel-fade {
+  .carousel-item {
+    @include transition-standard-complex(opacity);
+
+    opacity: 0;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    opacity: 1;
+  }
+
+  .carousel-item.active,
+  .carousel-item-left.active,
+  .carousel-item-next,
+  .carousel-item-prev,
+  .carousel-item-prev.active {
+    transform: translateX(0);
+
+    @supports (transform-style: preserve-3d) {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .carousel-item-left.active,
+  .carousel-item-right.active {
+    opacity: 0;
+  }
+}
+
 // Left/right controls
 
 .carousel-control-next,
@@ -74,6 +107,7 @@
   border-radius: 50%;
   box-shadow: map-get($carousel-control-elevation-shadow, shadow);
   color: $carousel-control-color;
+  cursor: pointer;
   display: flex;
   font-size: $carousel-control-font-size;
   height: $carousel-control-size;
@@ -97,6 +131,7 @@
   }
 
   &:focus {
+    opacity: 1;
     outline: 0;
   }
 }
@@ -152,6 +187,7 @@
     background-color: transparent;
     border: $carousel-indicator-border-width solid $carousel-indicator-border-color;
     border-radius: $carousel-indicator-size;
+    cursor: pointer;
     flex: 0 0 auto;
     height: $carousel-indicator-size;
     margin-right: $carousel-indicator-border-width;

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

@@ -21,7 +21,7 @@
     outline: 0;
   }
 
-  &:not([disabled]):not(.disabled) {
+  &:not(:disabled):not(.disabled) {
     cursor: pointer;
   }
 }

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

@@ -3,35 +3,28 @@
 .form-check {
   display: block;
   margin-bottom: $textfield-margin-y;
-
-  &.disabled {
-    .form-check-label {
-      color: $textfield-color-disabled;
-    }
-  }
+  padding-left: $form-check-input-gutter;
+  position: relative;
 }
 
 .form-check-inline {
   display: inline-block;
+  margin-right: $form-check-inline-margin-x;
   margin-bottom: 0;
-  vertical-align: middle;
-
-  + .form-check-inline {
-    margin-left: $form-check-inline-margin-x;
-  }
 }
 
 .form-check-input {
-  flex-shrink: 0;
-  margin-right: $form-check-input-margin-x;
-  position: relative;
-  top: (($font-size-base * $line-height-base - $font-size-base) / 3 * 2);
+  margin-top: (($font-size-base * $line-height-base - $font-size-base) / 3 * 2);
+  margin-left: ($form-check-input-gutter * -1);
+  position: absolute;
+
+  &:disabled ~ .form-check-label {
+    color: $textfield-color-disabled;
+  }
 }
 
 .form-check-label {
-  align-items: flex-start;
   color: inherit;
-  display: inline-flex;
   font-size: inherit;
   line-height: inherit;
 }
@@ -62,16 +55,12 @@
   display: flex;
   flex-flow: row wrap;
 
-  label {
-    align-items: center;
-    display: flex;
-    justify-content: center;
+  .custom-file,
+  .custom-select {
+    width: auto;
   }
 
   .form-check {
-    align-items: center;
-    display: flex;
-    justify-content: center;
     margin-bottom: 0;
     width: auto;
   }
@@ -105,7 +94,6 @@
   color: inherit;
   font-size: $font-size-base;
   line-height: ($textfield-font-size * $textfield-line-height / $font-size-base);
-  margin-bottom: 0;
   padding-top: $textfield-padding-y;
   padding-bottom: $textfield-padding-y;
 }
@@ -146,3 +134,16 @@
 .form-control-range {
   display: block;
 }
+
+.form-control-file {
+  @extend %form-control;
+
+  &::-webkit-file-upload-button {
+    background-color: transparent;
+    background-image: none;
+    border: 0;
+    color: $textfield-hint-color;
+    height: auto;
+    padding: 0;
+  }
+}

data/assets/stylesheets/material/bootstrap/_pagination.scss

@@ -39,7 +39,7 @@
     outline: 0;
   }
 
-  &:not([disabled]):not(.disabled) {
+  &:not(:disabled):not(.disabled) {
     cursor: pointer;
   }
 

data/assets/stylesheets/material/material.scss

@@ -1,4 +1,4 @@
-@import 'colours';
+@import 'colors';
 @import 'functions';
 @import 'mixins';
 @import 'variables';

data/assets/stylesheets/material/material/_button-flat.scss

@@ -18,7 +18,7 @@
   .btn-flat-#{$color},
   .btn-outline-#{$color} {
     @include plain-active-focus-hover {
-      color: map-get(theme-color($color), color);
+      color: theme-color($color);
     }
 
     &.disabled,

data/assets/stylesheets/material/material/_button-float.scss

@@ -23,3 +23,25 @@
     width: $btn-float-size-sm;
   }
 }
+
+.btn-float-dropdown {
+  .dropdown-menu {
+    border-radius: 0;
+    margin-top: $btn-float-dropdown-inner-spacer-y;
+    min-width: $btn-float-size;
+    padding-top: 0;
+    padding-bottom: 0;
+    text-align: center;
+
+    &::before {
+      display: none;
+    }
+
+    .btn-float {
+      display: block;
+      margin-right: auto;
+      margin-bottom: $btn-float-dropdown-inner-spacer-y;
+      margin-left: auto;
+    }
+  }
+}

data/assets/stylesheets/material/material/_button-group.scss

@@ -12,8 +12,8 @@
     > .btn-#{$color} {
       &.disabled,
       &:disabled {
-        background-color: map-get(theme-color($color), lighter);
-        color: color-yiq(map-get(theme-color($color), lighter));
+        background-color: theme-color-light($color);
+        color: color-yiq(theme-color-light($color));
       }
     }
   }

data/assets/stylesheets/material/material/_button.scss

@@ -51,7 +51,7 @@
     outline: 0;
   }
 
-  &:not([disabled]):not(.disabled) {
+  &:not(:disabled):not(.disabled) {
     cursor: pointer;
   }
 
@@ -62,23 +62,23 @@
 
 // stylelint-disable selector-no-qualifying-type
 a.btn.disabled,
-fieldset[disabled] a.btn {
+fieldset:disabled a.btn {
   pointer-events: none;
 }
 // stylelint-enable
 
 @each $color, $values in $theme-colors {
   .btn-#{$color} {
-    background-color: map-get(theme-color($color), color);
-    color: color-yiq(map-get(theme-color($color), color));
+    background-color: theme-color($color);
+    color: color-yiq(theme-color($color));
 
     @include active-focus-hover {
-      color: color-yiq(map-get(theme-color($color), color));
+      color: color-yiq(theme-color($color));
     }
 
     &.active,
     &:active {
-      background-color: map-get(theme-color($color), darker);
+      background-color: theme-color-dark($color);
     }
 
     &.disabled,

data/assets/stylesheets/material/material/_card.scss

@@ -12,12 +12,12 @@
 
   @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);
+      box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 1px theme-color($color);
 
       &[href],
       &[tabindex] {
         @include active-focus-hover {
-          box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 1px map-get(theme-color($color), color);
+          box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 1px theme-color($color);
         }
       }
     }
@@ -107,7 +107,7 @@
 
   @each $color, $values in $theme-colors {
     &.border-#{$color} {
-      border-top: $card-border-width solid map-get(theme-color($color), color);
+      border-top: $card-border-width solid theme-color($color);
     }
   }
 
@@ -151,7 +151,7 @@
 
   @each $color, $values in $theme-colors {
     &.border-#{$color} {
-      border-bottom: $card-border-width solid map-get(theme-color($color), color);
+      border-bottom: $card-border-width solid theme-color($color);
     }
   }
 

data/assets/stylesheets/material/material/_chip.scss

@@ -33,8 +33,8 @@
 
 @each $color, $values in $theme-colors {
   .chip-#{$color} {
-    background-color: map-get(theme-color($color), color);
-    color: color-yiq(map-get(theme-color($color), color));
+    background-color: theme-color($color);
+    color: color-yiq(theme-color($color));
   }
 }
 

data/assets/stylesheets/material/material/_data-table.scss

@@ -23,9 +23,10 @@
   }
 
   tbody {
+    color: $table-tbody-color;
+
     td,
     th {
-      color: $table-tbody-color;
       font-size: $table-tbody-font-size;
       font-weight: $table-tbody-font-weight;
       height: $table-tbody-cell-height;
@@ -35,9 +36,10 @@
   }
 
   tfoot {
+    color: $table-tfoot-color;
+
     td,
     th {
-      color: $table-tfoot-color;
       font-size: $table-tfoot-font-size;
       font-weight: $table-tfoot-font-weight;
       height: $table-tfoot-cell-height;
@@ -47,9 +49,10 @@
   }
 
   thead {
+    color: $table-thead-color;
+
     td,
     th {
-      color: $table-thead-color;
       font-size: $table-thead-font-size;
       font-weight: $table-thead-font-weight;
       height: $table-thead-cell-height;
@@ -62,34 +65,24 @@
     border-top: $table-border-width solid $table-border-color;
   }
 
-  > :first-child {
-    > tr:first-child,
-    > tr:first-child,
-    > tr:first-child {
-      td,
-      th {
-        border-top: 0;
-      }
+  > :first-child > tr:first-child {
+    td,
+    th {
+      border-top: 0;
     }
   }
 }
 
-.table-bordered {
-  box-shadow: map-get($table-elevation-shadow, shadow);
-}
-
-.table-striped {
-  tbody tr:nth-of-type(odd) {
-    background-color: $table-bg-accent;
+.table-borderless {
+  td,
+  th,
+  .table {
+    border: 0;
   }
 }
 
-.table-hover {
-  tbody tr {
-    @include hover {
-      background-color: $table-bg-hover;
-    }
-  }
+.table-bordered {
+  box-shadow: map-get($table-elevation-shadow, shadow);
 }
 
 .table-sm {
@@ -134,25 +127,61 @@
   }
 }
 
+.table-striped {
+  tbody tr:nth-of-type(#{$table-striped-order}) {
+    background-color: $table-bg-accent;
+  }
+}
+
+// Placed here because it has to come after the striping styles
+
+.table-hover {
+  tbody tr {
+    @include hover {
+      background-color: $table-bg-hover;
+    }
+  }
+}
+
 // Table background
 
 @each $color, $values in $theme-colors {
-  .table .table-#{$color} {
+  .table-#{$color} {
     &,
     > td,
     > th {
-      background-color: map-get(theme-color($color), color);
-      color: color-yiq(map-get(theme-color($color), color));
+      background-color: theme-color-light($color);
+      color: color-yiq(theme-color-light($color));
     }
+
+    .table-hover & {
+      @include hover {
+        &,
+        > td,
+        > th {
+          background-color: theme-color($color);
+          color: color-yiq(theme-color($color));
+        }
+      }
+    }
+  }
+}
+
+.table-active {
+  &,
+  > td,
+  > th {
+    background-color: $table-bg-active;
+    color: color-yiq($table-bg-active);
   }
 
-  .table-hover .table-#{$color} {
+  .table-hover & {
     @include hover {
       &,
       > td,
       > th {
-        background-color: map-get(theme-color($color), darker);
-        color: color-yiq(map-get(theme-color($color), darker));
+        background-color: $table-bg-active-hover;
+        color: color-yiq($table-bg-active-hover);
       }
     }
   }
@@ -198,14 +227,12 @@
   tbody,
   tfoot,
   thead {
-    td,
-    th {
-      color: inherit;
-    }
+    color: inherit;
   }
 
   td,
-  th {
+  th,
+  .table {
     border-color: $table-dark-border-color;
   }
 }