material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -6,30 +6,32 @@
   }
 }
 
-// specific cases for .collapse.show
-  tbody.collapse.show {
+tbody {
+  &.collapse.show {
     display: table-row-group;
   }
+}
 
-  tr.collapse.show {
+tr {
+  &.collapse.show {
     display: table-row;
   }
+}
 
 .collapsing {
+  @include transition-standard(height);
+
   height: 0;
   overflow: hidden;
   position: relative;
-  @include transition-standard(height);
 }
 
 .fade {
+  @include transition-standard(opacity);
+
   opacity: 0;
-  transform: scale(0.87);
-  @include transition-acceleration(opacity, transform);
 
   &.show {
     opacity: 1;
-    transform: scale(1);
-    @include transition-deceleration(opacity, transform);
   }
 }

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

@@ -1,62 +1,75 @@
-@import "mixins";
-@import "variables";
-
-//
-// base css
-//
-  @import "base/base";
-  @import "base/grid";
-  @import "base/typography";
-
-//
-// bootstrap components
-// components covered in bootstrap's (v4.0.0-alpha.6) css but not in material design guidelines
-//
-  @import "bootstrap/alert";
-  @import "bootstrap/breadcrumb";
-  @import "bootstrap/button-group";
-  @import "bootstrap/carousel";
-  @import "bootstrap/close";
-  @import "bootstrap/code";
-  @import "bootstrap/custom-form";
-  @import "bootstrap/form";
-  @import "bootstrap/image";
-  @import "bootstrap/jumbotron";
-  @import "bootstrap/media";
-  @import "bootstrap/nav";
-  @import "bootstrap/pagination";
-  @import "bootstrap/popover";
-  @import "bootstrap/responsive-embed";
-  @import "bootstrap/transition";
-
-//
-// material components
-// components covered in material design guidelines https://material.google.com/components
-//
-  @import "material/button";
-  @import "material/button-flat";
-  @import "material/button-float";
-  @import "material/card";
-  @import "material/chip";
-  @import "material/data-table";
-  @import "material/dialog";
-  @import "material/expansion-panel";
-  @import "material/menu";
-  @import "material/navdrawer";
-  @import "material/picker";
-  @import "material/progress";
-  @import "material/progress-circular";
-  @import "material/selection-control";
-  @import "material/stepper";
-  @import "material/tab";
-  @import "material/text-field";
-  @import "material/text-field-floating-label";
-  @import "material/text-field-input-group";
-  @import "material/text-field-textarea";
-  @import "material/toolbar";
-  @import "material/tooltip";
-
-//
-// utilities
-//
-  @import "utilities";
+@import 'colours';
+@import 'functions';
+@import 'mixins';
+@import 'variables';
+
+
+
+// Base CSS
+
+@import 'base/base';
+@import 'base/grid';
+@import 'base/typography';
+
+
+
+// Bootstrap components
+// Components covered in Bootstrap's css but not in Material design
+
+@import 'bootstrap/alert';
+@import 'bootstrap/badge';
+@import 'bootstrap/breadcrumb';
+@import 'bootstrap/carousel';
+@import 'bootstrap/close';
+@import 'bootstrap/code';
+@import 'bootstrap/custom-form';
+@import 'bootstrap/form';
+@import 'bootstrap/image';
+@import 'bootstrap/jumbotron';
+@import 'bootstrap/media';
+@import 'bootstrap/nav';
+@import 'bootstrap/pagination';
+@import 'bootstrap/popover';
+@import 'bootstrap/responsive-embed';
+@import 'bootstrap/transition';
+
+
+
+// Material components
+// Components covered in Material design (https://material.google.com/components)
+
+@import 'material/button';
+@import 'material/button-flat';
+@import 'material/button-float';
+@import 'material/button-group';
+@import 'material/card';
+@import 'material/chip';
+@import 'material/data-table';
+@import 'material/dialog';
+@import 'material/expansion-panel';
+@import 'material/menu';
+@import 'material/navdrawer';
+@import 'material/picker';
+@import 'material/progress';
+@import 'material/progress-circular';
+@import 'material/selection-control';
+@import 'material/stepper';
+@import 'material/tab';
+@import 'material/text-field';
+@import 'material/text-field-floating-label';
+@import 'material/text-field-input-group';
+@import 'material/text-field-textarea';
+@import 'material/toolbar';
+@import 'material/tooltip';
+
+
+
+// Utilities
+
+@import 'utilities';
+
+
+
+// Very basic print styles
+
+@import 'print';

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

@@ -1,53 +1,40 @@
-[class*="btn-flat"],
-[class*="btn-outline"] {
+[class*='btn-outline'] {
   background-color: transparent;
   box-shadow: none;
 
-  // active, focus, hover
-    &:active,
-    &.active {
-      background-color: $btn-bg-active;
-      box-shadow: none;
-    }
+  &:active,
+  &.active {
+    box-shadow: none;
+  }
 
-  // disabled
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-    }
+  &:disabled,
+  &.disabled {
+    background-color: transparent;
+  }
 }
 
-// colour
-  .btn-flat-inverse,
-  .btn-outline-inverse {
+// Colour
+@each $color, $values in $theme-colors {
+  .btn-outline-#{$color} {
     @include plain-active-focus-hover {
-      color: $btn-color-inverse;
+      color: map-get(theme-color($color), color);
     }
 
-    &::before {
-      background-color: $btn-flat-focus-overlay-inverse;
+    &:disabled,
+    &.disabled {
+      color: $btn-color-disabled;
     }
-
-    // active, focus, hover
-      &:active,
-      &.active {
-        background-color: $btn-bg-inverse-active;
-      }
-
-    // disabled
-      &:disabled,
-      &.disabled {
-        color: $btn-color-inverse-disabled;
-      }
   }
+}
 
-  @each $color in $palettes {
-    $i: index($palettes, $color);
+[class*='bg-dark'] [class*='btn-outline'],
+.btn-outline-light {
+  @include focus-hover {
+    background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse);
+  }
 
-    .btn-flat-#{$color},
-    .btn-outline-#{$color} {
-      @include plain-active-focus-hover {
-        color: nth($palettes-color, $i);
-      }
-    }
+  &:active,
+  &.active {
+    background-color: $btn-bg-active-inverse;
   }
+}

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

@@ -3,27 +3,23 @@
   box-shadow: map-get($btn-float-elevation-shadow, shadow);
   height: $btn-float-size;
   line-height: $btn-float-size;
-  padding: 0;
-  position: relative;
   min-width: 0;
+  padding: 0;
   width: $btn-float-size;
-  z-index: map-get($btn-float-elevation-shadow, elevation);
 
-  &::before {
-    border-radius: 50%;
+  &:active,
+  &.active {
+    box-shadow: map-get($btn-float-elevation-shadow-active, shadow);
   }
 
-  // active, focus, hover
-    &:active,
-    &.active {
-      box-shadow: map-get($btn-float-elevation-shadow-active, shadow);
-      z-index: map-get($btn-float-elevation-shadow-active, elevation);
-    }
-}
+  &:disabled,
+  &.disabled {
+    box-shadow: none;
+  }
 
-// size
-  .btn-float.btn-sm {
+  &.btn-sm {
     height: $btn-float-size-sm;
     line-height: $btn-float-size-sm;
     width: $btn-float-size-sm;
   }
+}

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

@@ -0,0 +1,268 @@
+.btn-group,
+.btn-group-vertical {
+  @include border-radius($btn-border-radius);
+
+  background-color: $btn-group-bg;
+  box-shadow: map-get($btn-elevation-shadow, shadow);
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+
+  > .btn {
+    @include transition-standard(border-color, opacity);
+
+    box-shadow: none;
+    flex: 0 1 auto;
+    min-width: 0;
+
+    &:active,
+    &.active {
+      box-shadow: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity: $btn-group-toggle-opacity;
+    }
+
+    &[class*='btn-outline'] {
+      opacity: $btn-group-toggle-opacity;
+
+      &:active,
+      &.active {
+        opacity: 1;
+      }
+
+      &:disabled,
+      &.disabled {
+        opacity: 1;
+      }
+    }
+  }
+
+  // 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 {
+    box-shadow: none;
+  }
+}
+
+.btn-group {
+  &.show > .btn.dropdown-toggle {
+    box-shadow: none;
+  }
+
+  // Border colour
+  > .btn {
+    border-left: $btn-group-inner-spacer-x solid transparent;
+    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;
+    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);
+  }
+
+  > .btn:last-child:not(:first-child),
+  > .dropdown-toggle:not(:first-child) {
+    @include border-left-radius(0);
+  }
+
+  > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+    border-radius: 0;
+  }
+
+  > .btn-group:first-child:not(:last-child) {
+    > .btn:last-child,
+    > .dropdown-toggle {
+      @include border-right-radius(0);
+    }
+  }
+
+  > .btn-group:last-child:not(:first-child) > .btn:first-child {
+    @include border-left-radius(0);
+  }
+
+  > .btn-group:not(:first-child):not(:last-child) > .btn {
+    border-radius: 0;
+  }
+}
+
+.btn-group-vertical {
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+
+  > .btn,
+  > .btn-group {
+    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;
+    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);
+  }
+
+  > .btn:last-child:not(:first-child) {
+    @include border-top-radius(0);
+  }
+
+  > .btn:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  > .btn-group:first-child:not(:last-child) {
+    > .btn:last-child,
+    > .dropdown-toggle {
+      @include border-bottom-radius(0);
+    }
+  }
+
+  > .btn-group:last-child:not(:first-child) > .btn:first-child {
+    @include border-top-radius(0);
+  }
+
+  > .btn-group:not(:first-child):not(:last-child) > .btn {
+    border-radius: 0;
+  }
+}
+
+// Fluid
+.btn-group-fluid {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+// Size
+.btn-group-lg > .btn {
+  @extend %btn-lg;
+}
+
+.btn-group-sm > .btn {
+  @extend %btn-sm;
+}
+
+
+
+// Checkbox and radio options
+
+[data-toggle='buttons'] {
+  > .btn,
+  > .btn-group > .btn {
+    [type='checkbox'],
+    [type='radio'] {
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+      position: absolute;
+    }
+  }
+}
+
+
+
+// Split button dropdown
+
+.btn + .dropdown-toggle-split {
+  padding-right: ($btn-padding-x / 2);
+  padding-left: ($btn-padding-x / 2);
+
+  &::after {
+    margin-left: ($caret-spacer-x * -1);
+  }
+}
+
+// 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);
+}
+
+
+
+// Toolbar
+
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}