material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -1,10 +1,3 @@
-//
-// todo: bootstrap accordion (i.e. material expansion panel)
-// since bootstrap accordion now relies on `.card`
-// some tweaks are needed for the default accordion example to work correctly
-// we probably need a wrapper to add additional styles in line with material design guidelines
-//
-
 .list-group {
   display: flex;
   flex-direction: column;
@@ -12,140 +5,114 @@
   padding-left: 0;
 }
 
-//
-// item
-//
-  .list-group-item {
-    align-items: center;
-    background-color: $expansion-panel-bg;
-    border: 0;
-    border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
-    box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
+.list-group-item {
+  @include transition-standard(background-color, color);
+
+  background-color: $expansion-panel-bg;
+  border: 0;
+  box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
+  color: $expansion-panel-color;
+  display: block;
+  font-size: $expansion-panel-font-size;
+  line-height: $expansion-panel-line-height;
+  min-height: $expansion-panel-height;
+  padding: $expansion-panel-padding-y $expansion-panel-padding-x;
+  position: relative;
+
+  @include active-focus-hover {
     color: $expansion-panel-color;
-    display: flex;
-    flex-flow: row wrap;
-    font-size: $expansion-panel-font-size;
-    min-height: $expansion-panel-height;
-    padding: $expansion-panel-inner-spacer-y $expansion-panel-inner-spacer-x;
-    position: relative;
-    @include transition-standard(background-color, color);
-
-    &:first-child {
-      @include border-top-radius($border-radius);
-    }
-
-    &:last-child {
-      border-bottom: 0;
-      @include border-bottom-radius($border-radius);
-    }
+    text-decoration: none;
+  }
 
-    // active, focus, hover
-      @include active-focus-hover {
-        color: $expansion-panel-color;
-        text-decoration: none;
-      }
+  &:disabled,
+  &.disabled {
+    background-color: $expansion-panel-bg;
+    color: $expansion-panel-color-disabled;
+  }
 
-      &.active {
-        background-color: $expansion-panel-bg-active;
-      }
+  &:first-child {
+    @include border-top-radius($expansion-panel-border-radius);
+  }
 
-    // disabled
-      &.disabled {
-        background-color: $expansion-panel-bg-disabled;
-        color: $expansion-panel-color-disabled;
-        cursor: $cursor-disabled;
-      }
+  &:last-child {
+    @include border-bottom-radius($expansion-panel-border-radius);
   }
 
-  .list-group-item-action {
+  &.active {
+    background-color: $expansion-panel-bg-active;
     color: $expansion-panel-color;
-    text-align: inherit;
-    width: 100%;
+  }
 
-    // active, focus, hover
-      @include active-focus-hover {
-        background-color: $expansion-panel-bg-active;
-      }
+  .card & {
+    padding-right: $card-padding-x;
+    padding-left: $card-padding-x;
+  }
+}
 
-      &:focus {
-        outline: 0;
-      }
+.list-group-item-action {
+  color: $expansion-panel-color;
+  text-align: inherit;
+  width: 100%;
 
-    // disabled
-      &.disabled {
-        background-color: $expansion-panel-bg-disabled;
-      }
+  @include active-focus-hover {
+    background-color: $expansion-panel-bg-active;
+    color: $expansion-panel-color;
   }
 
-  // colour
-    @each $color in $palettes {
-      $i: index($palettes, $color);
-
-      .list-group-item-#{$color} {
-        background-color: nth($palettes-color, $i);
-        color: nth($palettes-text-color, $i);
-
-        // active, focus, hover
-          @include active-focus-hover {
-            color: nth($palettes-text-color, $i);
-          }
-
-          &.active {
-            background-color: nth($palettes-color-dark, $i);
-            color: nth($palettes-text-color-dark, $i);
-          }
-
-        &.list-group-item-action {
-          // active, focus, hover
-            @include active-focus-hover {
-              background-color: nth($palettes-color-dark, $i);
-              color: nth($palettes-text-color-dark, $i);
-            }
-        }
-      }
-    }
+  &:disabled,
+  &.disabled {
+    background-color: $expansion-panel-bg;
+    color: $expansion-panel-color-disabled;
+  }
 
-//
-// flush
-//
-  .list-group-flush {
-    .list-group-item {
-      border-radius: 0;
-      box-shadow: none;
+  &:focus {
+    outline: 0;
+  }
+}
 
-      &:first-child {
-        border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
-      }
+// Colour
+@each $color, $values in $theme-colors {
+  .list-group-item-#{$color} {
+    @include color-yiq(map-get(theme-color($color), lighter));
 
-      &:last-child {
-        border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
-      }
+    background-color: map-get(theme-color($color), lighter);
+
+    &.active {
+      @include color-yiq(map-get(theme-color($color), color));
+
+      background-color: map-get(theme-color($color), color);
     }
 
-    &:first-child .list-group-item:first-child {
-      border-top: 0;
+    &.list-group-item-action {
+      @include active-focus-hover {
+        @include color-yiq(map-get(theme-color($color), color));
+
+        background-color: map-get(theme-color($color), color);
+      }
     }
+  }
+}
+
+
 
-    &:last-child .list-group-item:last-child {
-      border-bottom: 0;
+// Flush
+
+.list-group-flush {
+  .list-group-item {
+    border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
+    border-radius: 0;
+    box-shadow: none;
+
+    &:last-child {
+      border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
     }
   }
 
-//
-// misc
-//
-  .list-group-item-heading {
-    color: inherit;
-    font-size: $expansion-panel-font-size;
-    line-height: $line-height-base;
-    margin-top: 0;
-    margin-bottom: 0;
+  &:first-child .list-group-item:first-child {
+    border-top: 0;
   }
 
-  .list-group-item-text {
-    color: inherit;
-    font-size: $expansion-panel-font-size-secondary;
-    line-height: $line-height-base;
-    margin-top: 0;
-    margin-bottom: 0;
+  &:last-child .list-group-item:last-child {
+    border-bottom: 0;
   }
+}

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

@@ -3,12 +3,11 @@
   position: relative;
 }
 
-.dropdown-menu,
-.menu {
-  background-clip: padding-box;
-  background-color: $menu-bg;
-  border: 0;
-  box-shadow: map-get($menu-elevation-shadow, shadow);
+.dropdown-menu {
+  @include border-bottom-radius($menu-border-radius);
+  @include text-align(left);
+
+  background-color: transparent;
   color: inherit;
   display: none;
   float: left;
@@ -19,278 +18,359 @@
   min-width: $menu-min-width;
   padding: $menu-padding-y 0;
   position: absolute;
-    left: 0;
-  text-align: left;
   z-index: map-get($menu-elevation-shadow, elevation);
-}
-
-.dropdown-menu {
-  // position
-    top: 100%;
-  transform-origin: 0 0;
-  @include border-bottom-radius($border-radius);
-}
 
-.menu {
-  // position
-    top: calc(50% - #{$menu-link-height / 2 + $menu-padding-y});
-  transform-origin: 0 ($menu-link-height / 2 + $menu-padding-y);
-  @include border-radius($border-radius);
-}
-
-.dropup {
-  .dropdown-menu,
-  .menu {
-    // position
-      top: auto;
-  }
+  &::before {
+    @include border-bottom-radius($menu-border-radius);
 
-  .dropdown-menu {
-    // position
-      bottom: 100%;
-    transform-origin: 0 100%;
-    @include border-top-radius($border-radius);
-    @include border-bottom-radius(0);
-  }
-
-  .menu {
-    // position
-      bottom: calc(50% - #{$menu-link-height / 2 + $menu-padding-y});
-    transform-origin: 0 calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
+    background-clip: padding-box;
+    background-color: $menu-bg;
+    box-shadow: map-get($menu-elevation-shadow, shadow);
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform-origin: 0 0;
+    z-index: -1;
   }
-}
 
-// open
-  .show {
-    > a {
-      outline: 0;
-    }
+  &.show {
+    display: block;
 
-    > .dropdown-menu,
-    > .menu {
-      animation-duration: $transition-duration-lg;
-      animation-timing-function: $transition-timing-function-deceleration;
-      display: block;
+    &::before,
+    > * {
+      animation-duration: $transition-duration-mobile;
+      animation-timing-function: $transition-timing-function-standard;
 
       @include media-breakpoint-up(sm) {
-        transition-duration: $transition-duration-tablet-lg;
+        animation-duration: $transition-duration-tablet;
       }
 
       @include media-breakpoint-up(lg) {
-        transition-duration: $transition-duration-desktop-lg;
+        animation-duration: $transition-duration-desktop;
       }
     }
 
-    > .dropdown-menu {
-      animation-name: dropdown-open;
+    &::before {
+      animation-name: dropdown-menu-show;
     }
 
-    > .menu {
-      animation-name: menu-open;
+    > * {
+      animation-name: dropdown-item-show;
     }
-  }
 
-  @keyframes dropdown-open {
-    0% {
-      opacity: 0;
-      // position
-        top: 50%;
-      transform: scale(0.87, 0.54);
+    > :nth-child(1) {
+      animation-name: dropdown-item-show-1;
     }
-    50% {
-      opacity: 1;
+
+    > :nth-child(2) {
+      animation-name: dropdown-item-show-2;
     }
-    100% {
-      opacity: 1;
-      // position
-        top: 100%;
-      transform: scale(1, 1);
+
+    > :nth-child(3) {
+      animation-name: dropdown-item-show-3;
     }
   }
 
-  @keyframes menu-open {
-    0% {
-      opacity: 0;
-      transform: scale(0.87, 0.54);
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1, 1);
-    }
+  .nav:not(.flex-column):not(.flex-column-reverse) & {
+    min-width: 100%;
+  }
+}
+
+.menu {
+  @include border-radius($menu-border-radius);
+
+  margin-top: (($menu-link-height - ($menu-link-height - $menu-line-height) / 2) * -1 + $menu-padding-y * -1);
+
+  &::before {
+    @include border-radius($menu-border-radius);
+
+    transform-origin: 0 ($menu-link-height / 2 + $menu-padding-y);
   }
+}
 
-  .dropup.show {
-    > .dropdown-menu {
-      animation-name: dropup-open;
-    }
+.show > a {
+  outline: 0;
+}
+
+@keyframes dropdown-item-show {
+  0% {
+    opacity: 0;
   }
 
-  @keyframes dropup-open {
-    0% {
-      opacity: 0;
-      // position
-        bottom: 50%;
-      transform: scale(0.87, 0.54);
+  99% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes dropdown-item-show-1 {
+  0% {
+    opacity: 0;
+  }
+
+  40% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes dropdown-item-show-2 {
+  0% {
+    opacity: 0;
+  }
+
+  60% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes dropdown-item-show-3 {
+  0% {
+    opacity: 0;
+  }
+
+  80% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes dropdown-menu-show {
+  0% {
+    transform: scale(0, 0);
+  }
+
+  20% {
+    transform: scale((1 / 3), 0);
+  }
+
+  40% {
+    transform: scale((2 / 3), .25);
+  }
+
+  60% {
+    transform: scale(1, .5);
+  }
+
+  80% {
+    transform: scale(1, .75);
+  }
+
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes menu-animation {
+  0% {
+    margin-top: (($menu-link-height + $menu-padding-y) * -1);
+  }
+
+  100% {
+    margin-top: 0;
+  }
+}
+
+// Positioning
+.dropdown-menu[x-placement="bottom-end"]::before {
+  transform-origin: 100% 0;
+}
+
+.dropdown-menu[x-placement="top-end"],
+.dropdown-menu[x-placement="top-start"] {
+  &,
+  &::before {
+    @include border-top-radius($menu-border-radius);
+    @include border-bottom-radius(0);
+  }
+
+  &.show {
+    > :nth-child(1),
+    > :nth-child(2),
+    > :nth-child(3) {
+      animation-name: dropdown-item-show;
+    }
+
+    > :nth-last-child(1) {
+      animation-name: dropdown-item-show-1;
     }
-    50% {
-      opacity: 1;
+
+    > :nth-last-child(2) {
+      animation-name: dropdown-item-show-2;
     }
-    100% {
-      opacity: 1;
-      // position
-        bottom: 100%;
-      transform: scale(1, 1);
+
+    > :nth-last-child(3) {
+      animation-name: dropdown-item-show-3;
     }
   }
+}
+
+.dropdown-menu[x-placement="top-end"]::before {
+  transform-origin: 100% 100%;
+}
+
+.dropdown-menu[x-placement="top-start"]::before {
+  transform-origin: 0 100%;
+}
+
+.menu[x-placement="bottom-end"]::before {
+  transform-origin: 100% ($menu-link-height / 2 + $menu-padding-y);
+}
 
-// positioning
-  .dropdown-menu-left,
-  .menu-left {
-    // position
-      right: auto;
-      left: 0;
+.menu[x-placement="top-end"],
+.menu[x-placement="top-start"] {
+  margin-top: 0;
+  margin-bottom: (($menu-link-height - ($menu-link-height - $menu-line-height) / 2) * -1 + $menu-padding-y * -1);
+}
+
+.menu[x-placement="top-end"]::before {
+  transform-origin: 100% calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
+}
+
+.menu[x-placement="top-start"]::before {
+  transform-origin: 0 calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
+}
+
+// Size
+.dropdown-menu-sm,
+.menu-cascading {
+  font-size: $menu-font-size-cascading;
+  line-height: $menu-line-height-cascading;
+  padding-top: $menu-padding-y-cascading;
+  padding-bottom: $menu-padding-y-cascading;
+
+  @include media-breakpoint-up(sm) {
+    min-width: $menu-min-width-cascading;
   }
+}
 
-  .dropdown-menu-right,
-  .menu-right {
-    // position
-      right: 0;
-      left: auto;
-    transform-origin: 100% 0;
+.menu-cascading {
+  margin-top: (($menu-link-height-cascading - ($menu-link-height-cascading - $menu-line-height-cascading) / 2) * -1 + $menu-padding-y-cascading * -1);
 
-    .dropup & {
-      transform-origin: 100% 100%;
-    }
+  &[x-placement="top-end"],
+  &[x-placement="top-start"] {
+    margin-top: 0;
+    margin-bottom: (($menu-link-height-cascading - ($menu-link-height-cascading - $menu-line-height-cascading) / 2) * -1 + $menu-padding-y-cascading * -1);
   }
 
-// size
-  .dropdown-menu-sm,
-  .menu-cascading {
-    font-size: $menu-font-size-cascading;
-    line-height: $menu-line-height-cascading;
-    padding: $menu-padding-y-cascading 0;
+  &[x-placement="top-end"]::before {
+    transform-origin: 100% calc(100% - #{$menu-link-height-cascading / 2 + $menu-padding-y-cascading});
+  }
 
-    @include media-breakpoint-up(sm) {
-      min-width: $menu-min-width-cascading;
-    }
+  &[x-placement="top-start"]::before {
+    transform-origin: 0 calc(100% - #{$menu-link-height-cascading / 2 + $menu-padding-y-cascading});
   }
+}
 
-//
-// backdrop to catch body clicks on mobile
-//
-  .dropdown-backdrop {
-    position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    z-index: (map-get($menu-elevation-shadow, elevation) - 1);
-  }
-
-//
-// button, link and more within the dropdown menu
-//
-  .dropdown-item,
-  .menu-item {
-    background: none;
-    border: 0;
-    clear: both;
-    color: $menu-link-color;
-    display: block;
-    font-weight: normal;
-    padding: $menu-link-padding;
-    position: relative;
-    text-align: inherit;
-    white-space: nowrap;
-    width: 100%;
-    @include transition-standard(background-color, color);
-
-    // active, focus, hover
-      @include active-focus-hover {
-        background-color: $menu-link-bg-active;
-        color: $menu-link-color;
-
-        @if ($link-decoration-active != "none") {
-          text-decoration: none;
-        }
-      }
 
-    // disabled
-      &.disabled {
-        background-color: transparent;
-        color: $menu-link-color-disabled;
-        cursor: $cursor-disabled;
-      }
 
-    // size
-      .dropdown-menu-sm &,
-      .menu-cascading & {
-        padding: $menu-link-padding-cascading;
-      }
+// Button, link and more within the dropdown menu
+
+.dropdown-item {
+  @include transition-standard(background-color, color);
+
+  background: none;
+  border: 0;
+  clear: both;
+  color: $menu-link-color;
+  display: block;
+  font-weight: normal;
+  padding: $menu-link-padding-y $menu-link-padding-x;
+  position: relative;
+  text-align: inherit;
+  transform-origin: 0 0;
+  white-space: nowrap;
+  width: 100%;
+
+  @include active-focus-hover {
+    background-color: $menu-link-bg-hover;
+    color: $menu-link-color;
+    text-decoration: none;
   }
 
-//
-// divider
-//
-  .dropdown-divider,
-  .menu-divider {
-    @include nav-divider($menu-divider-bg);
+  &.active {
+    background-color: $menu-link-bg-hover;
   }
 
-//
-// header
-//
-  .dropdown-header,
-  .menu-header {
-    color: $menu-link-color;
-    display: block;
-    font-size: $menu-font-size;
-    font-weight: bolder;
-    line-height: $menu-line-height;
-    margin: 0;
-    padding: $menu-link-padding;
-    white-space: nowrap;
-
-    .dropdown-menu-sm &,
-    .menu-cascading & {
-      padding: $menu-link-padding-cascading;
-    }
+  &:disabled,
+  &.disabled {
+    background-color: transparent;
+    color: $menu-link-color-disabled;
+    pointer-events: none;
   }
 
-//
-// toggle
-//
-  .dropdown-toggle,
-  .menu-toggle {
-    &::after {
-      border-top: $caret-width solid;
-      border-right: $caret-width solid transparent;
-      border-left: $caret-width solid transparent;
-      content: "";
-      display: inline-block;
-      height: 0;
-      margin-left: $caret-width;
-      position: relative;
-        top: -1px;
-      vertical-align: middle;
-      width: 0;
-    }
+  .dropdown-menu-sm &,
+  .menu-cascading & {
+    padding: $menu-link-padding-y-cascading $menu-link-padding-x-cascading;
+  }
+}
 
-    // active. focus, hover
-      &:focus {
-        outline: 0;
-      }
+
+
+// Divider
+
+.dropdown-divider {
+  @include nav-divider($menu-divider-bg);
+}
+
+
+
+// Header
+
+.dropdown-header {
+  color: $menu-header-color;
+  display: block;
+  font-size: $menu-font-size;
+  font-weight: bolder;
+  line-height: $menu-line-height;
+  margin: 0;
+  padding: $menu-link-padding-y $menu-link-padding-x;
+  white-space: nowrap;
+
+  .dropdown-menu-sm &,
+  .menu-cascading & {
+    font-size: $menu-font-size-cascading;
+    line-height: $menu-line-height-cascading;
+    padding: $menu-link-padding-y-cascading $menu-link-padding-x-cascading;
   }
+}
 
-  .dropup {
-    .dropdown-toggle,
-    .menu-toggle {
-      &::after {
-        border-top: 0;
-        border-bottom: $caret-width solid;
-      }
+
+
+// Toggle
+
+.dropdown-toggle {
+  &::after {
+    @include set-material-icons;
+
+    content: $caret-icon;
+    display: inline-block;
+    margin-right: ($caret-spacer-x * -1);
+    margin-left: $caret-spacer-x;
+
+    .dropup & {
+      content: $caret-icon-dropup;
     }
   }
+
+  &:empty::after {
+    margin-left: ($caret-spacer-x * -1);
+  }
+}