@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/layout/style.scss

@@ -1,223 +0,0 @@
-// https://material.io/guidelines/layout/responsive-ui.html
-
-
-@import '../common/mixins.scss';
-
-$layout__margin: dp(24);
-$layout__gutter: dp(24);
-
-.mdw-layout {
-  display: flex;
-  grid-auto-flow: row;
-  grid-template-columns: repeat(12, 1fr);
-  -ms-grid-columns: (1fr)[12];
-  grid-auto-rows: auto;
-  -ms-grid-rows: auto;
-  &[mdw-grid] {
-    // IE11 is unsupported due to lack of automatic placement
-    display: grid;
-    display: -ms-grid;
-  }
-  &[mdw-dense] {
-    grid-auto-flow: row dense;
-  }
-  &[mdw-stretch] {
-    > .mdw-layout__item {
-      flex-grow: 1;
-    }
-  }
-
-  &[mdw-center] {
-    justify-content: center;
-  }
-  flex-wrap: wrap;
-
-  border-width: $layout__margin;
-  border-color: transparent;
-  border-style: solid;
-
-  border-top-style: none;
-  border-bottom-style: none;
-
-  margin-left: -$layout__gutter;
-  margin-top: -$layout__gutter;
-
-  &[mdw-margin-bottom] {
-    border-bottom-style: solid;
-  }
-  
-  &[mdw-margin-top] {
-    border-top-style: solid;
-  }
-
-  @each $value in (0, 8, 16, 24, 40) {
-    &[mdw-margin="#{$value}"] {
-      border-width: dp($value);
-    }
-    &[mdw-gutter="#{$value}"] {
-      margin-left: dp(-$value);
-      margin-top: dp(-$value);
-      > .mdw-layout__item {
-        border-width: dp($value);
-      }
-    }
-  }
-
-
-  @include gutter16dp {
-    border-width: dp(16);
-    margin-left: dp(-16);
-    margin-top: dp(-16);
-    & > .mdw-layout__item {
-      border-width: dp(16);
-    }
-  }
-
-  @include allHandsets {
-    @each $value in (0, 8, 16, 24, 40) {
-      &[mdw-margin-mobile][mdw-margin-mobile="#{$value}"] {
-        border-width: dp($value);
-      }
-      &[mdw-gutter-mobile][mdw-gutter-mobile="#{$value}"] {
-        margin-left: dp(-$value);
-        margin-top: dp(-$value);
-        > .mdw-layout__item {
-          border-width: dp($value);
-        }
-      }
-    }
-  }
-    
-  @include allTablets {
-    @each $value in (0, 8, 16, 24, 40) {
-      &[mdw-margin-tablet][mdw-margin-tablet="#{$value}"] {
-        border-width: dp($value);
-      }
-      &[mdw-gutter-tablet][mdw-gutter-tablet="#{$value}"] {
-        margin-left: dp(-$value);
-        margin-top: dp(-$value);
-        > .mdw-layout__item {
-          border-width: dp($value);
-        }
-      }
-    }
-  }
-}
-
-@mixin layoutItem($columnCount) {
-  flex-basis: calc(100% / #{$columnCount});
-    @for $i from 2 to 12 {
-      &[mdw-colspan="#{$i}"] {
-        flex-basis: calc((#{$i} * 100% / #{$columnCount}));
-        @if ($i > #{$columnCount}) {
-          grid-column-end: span #{$columnCount};
-          -ms-grid-column-span: span #{$columnCount};
-        }
-      }
-    }
-    &[mdw-colspan="25%"] {
-      grid-column-end: span (#{1/4 * $columnCount});
-      -ms-grid-column-span: (#{1/4 * $columnCount});
-    }
-    &[mdw-colspan="50%"] {
-      grid-column-end: span (#{2/4 * $columnCount});
-      -ms-grid-column-span: (#{2/4 * $columnCount});
-    }
-    &[mdw-colspan="75%"] {
-      grid-column-end: span (#{3/4 * $columnCount});
-      -ms-grid-column-span: (#{3/4 * $columnCount});
-    }
-    &[mdw-colspan="100%"] {
-      grid-column-end: span (#{4/4 * $columnCount});
-      -ms-grid-column-span: (#{4/4 * $columnCount});
-    }
-}
-
-.mdw-layout__item {
-  flex-grow: 0;
-  flex-shrink: 1;
-  box-sizing: border-box;
-  border-width: $layout__gutter;
-  border-color: transparent;
-  border-style: solid;
-
-  border-bottom-style: none;
-  border-right-style: none;
-
-  @for $i from 2 to 8 {
-    &[mdw-rowspan="#{$i}"] {
-      grid-row-end: span #{$i};
-      -ms-grid-row-span: span #{$i};
-    }
-  }
-  transition-property: flex-basis;
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: $motion-duration-desktop-default;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-default;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-default;
-  }
-
-  @include layoutItem(12);
-
-  &[mdw-colspan="25%"] {
-    flex-basis: 25%;
-  }
-  &[mdw-colspan="50%"] {
-    flex-basis: 50%;
-  }
-  &[mdw-colspan="75%"] {
-    flex-basis: 75%;
-  }
-  &[mdw-colspan="100%"] {
-    flex-basis: 100%;
-  }
-
-  // Stretch children
-  display: flex;
-  & > :first-child {
-    flex: auto;
-    max-height: 100%;
-    max-width: 100%;
-  }
-}
-
-// 8 Columns (Explicit on Desktop + Implicit on Tablet)
-.mdw-layout[mdw-columns="8"] {
-  grid-template-columns: repeat(8, 1fr);
-  -ms-grid-columns: (1fr)[8];
-  .mdw-layout__item {
-    @include layoutItem(8);
-  }
-}
-@media screen and (max-width: dp(840) - 1) {
-  .mdw-layout {
-    grid-template-columns: repeat(8, 1fr);
-    -ms-grid-columns: (1fr)[8];
-  }
-  .mdw-layout__item {
-    @include layoutItem(8);
-  }
-}
-
-// 4 Columns (Explicit on Desktop and Tablet, Implicit on Mobile)
-.mdw-layout[mdw-columns="4"] {
-  grid-template-columns: repeat(4, 1fr);
-  -ms-grid-columns: (1fr)[4];
-  .mdw-layout__item {
-    @include layoutItem(4);
-  }
-}
-@media screen and (max-width: dp(600) - 1) {
-  .mdw-layout[mdw-columns="8"],
-  .mdw-layout {
-    grid-template-columns: repeat(4, 1fr);
-    -ms-grid-columns: (1fr)[4];
-  }
-  .mdw-layout[mdw-columns="8"] .mdw-layout__item,
-  .mdw-layout__item {
-    @include layoutItem(4);
-  }
-}

package/components/list/style.scss

@@ -1,358 +0,0 @@
-// https://material.io/guidelines/components/lists.html
-// https://material.io/guidelines/components/lists-controls.html
-
-@import '../common/variables.scss';
-@import '../ripple/ripple.scss';
-
-$list__divider-height: dp(1);
-
-.mdw-list {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  min-width: 100%;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-.mdw-list__divider {
-  min-width: 100%;
-  border-top-style: solid;
-  border-top-width: 1px;
-  height: 0;
-}
-
-.mdw-list__subheader {
-  @include type-rules('body-2');
-  display: flex;
-  flex-direction: row;
-  min-height: dp(48);
-  align-items: center;
-  justify-content: stretch;
-  padding-left: dp(16);
-  padding-right: dp(16);
-  &:first-child {
-    margin-top: -8px;
-  }
-}
-.mdw-list__item {
-  @include type-rules('subtitle');
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  min-height: dp(48);
-  align-items: center;
-  justify-content: stretch;
-  margin: 0;
-  padding: 0 dp(16);
-  text-transform: none;
-  text-decoration: none;
-
-  text-align: start;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden; // Contain ripple
-  z-index: 0;
-  outline: none;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  &[hidden] {
-    display: none;
-  }
-}
-
-.mdw-list__avatar,
-.mdw-list__icon {
-  display: flex;
-  flex-direction: row;
-  order: -1;
-  min-width: dp(72 - 16);
-  max-width: dp(72 - 16);
-  align-self: flex-start;
-  justify-content: flex-start;
-  margin: dp(16) 0;
-}
-
-
-.mdw-list__avatar {
-  min-height: dp(40);
-}
-
-.mdw-list__expander {
-  position: relative;
-  &::before,
-  &::after {
-    content: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 1px;
-  }
-  &::before {
-    top: -1;
-  }
-  &::after {
-    bottom: 0;
-  }
-  &[mdw-expanded] {
-    &::before,
-    &::after {
-      content: '';
-    }
-  }
-
-  &[mdw-theme-color][mdw-expanded] {
-    .mdw-list__item:first-child {
-      color: inherit;
-    }
-  }
-
-  display: flex;
-  flex-direction: column;
-  & > .mdw-list__item {
-    flex-basis: auto;
-    animation-fill-mode: forwards;
-    animation-timing-function: $motion-easing-acceleration;
-    animation-duration: $motion-duration-desktop-leave;
-    @include allHandsets {
-      animation-duration: $motion-duration-mobile-leave;
-    }
-    @include allTablets {
-      animation-duration: $motion-duration-tablet-leave;
-    }
-    &:not(:first-child) {
-      flex-basis: 0;
-      animation-name: collapseRow;
-      
-    }
-    &:first-child .mdw-list__secondary {
-      pointer-events: none;
-      min-height: dp(48);
-      transform: rotate(0deg);
-      transition-property: transform;
-      transition-timing-function: $motion-easing-standard;
-      transition-duration: $motion-duration-desktop-default;
-      @include allHandsets {
-        transition-duration: $motion-duration-mobile-default;
-      }
-      @include allTablets {
-        transition-duration: $motion-duration-tablet-default;
-      }
-    }
-  }
-
-  &[mdw-expanded] > .mdw-list__item:first-child .mdw-list__secondary {
-    transform: rotate(180deg);
-  }
-  &[mdw-expanded] > .mdw-list__item:not(:first-child) {
-    animation-name: expandRow;
-    animation-timing-function: $motion-easing-deceleration;
-    animation-duration: $motion-duration-desktop-enter;
-    @include allHandsets {
-      animation-duration: $motion-duration-mobile-enter;
-    }
-    @include allTablets {
-      animation-duration: $motion-duration-tablet-enter;
-    }
-  }
-}
-
-@keyframes expandRow {
-  0%     { min-height: 0     ; flex-basis: 0    }
-  99.99% { min-height: dp(48); flex-basis: 0    }
-  100%   { min-height: dp(48); flex-basis: 100% }
-}
-
-@keyframes collapseRow {
-  0%     { min-height: dp(48); flex-basis: 0    }
-  100%   { min-height: 0     ; flex-basis: 0    }
-}
-
-.mdw-list__expand-checkbox {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  max-height: 0;
-  max-width: 0;
-  pointer-events: none;
-  display: none;
-}
-
-.mdw-list__secondary {
-  z-index: 1;
-  order: 1;
-  grid-column: 3;
-  -ms-grid-column: 3;
-  grid-column-end: span 1;
-  -ms-grid-column-span: 1;
-  min-width: dp(24);
-  margin-left: dp(16);
-  margin-right: 0;
-  html[dir=rtl] & {
-    margin-left: 0;
-    margin-right: dp(16);
-  }
-  
-  min-height: dp(56);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.mdw-list__icon,
-.mdw-list__secondary {
-  @include IEOnly() {
-    // Fix IE min-height flexbug
-    &::after {
-      content: '';
-      min-height: inherit;
-      width: 0;
-    }
-  }
-}
-
-// In order to render 48px, 64px, 72px and 88px heights, lines are rendered bottom-up
-
-.mdw-list__text {
-  position: static;
-  pointer-events: none;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-end;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  
-  [mdw-divider] > .mdw-list__item:not(:last-child) &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: $list__divider-height;
-  }
-  
-  [mdw-divider] > .mdw-list__item:not(:last-child) .mdw-list__avatar ~ &::after,
-  [mdw-divider] > .mdw-list__item:not(:last-child) .mdw-list__icon ~ &::after {
-    margin-left: dp(72);
-  }
-}
-.mdw-list__text-line {
-  overflow-y: hidden;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
-
-
-// First line and meta baseline alignment
-.mdw-list__text-line:first-child,
-.mdw-list__meta {
-  @include baseline-top(28);
-}
-
-.mdw-list__meta {
-  @include type-rules('caption');
-  align-self: flex-start;
-  margin-left: dp(28);
-  margin-right: 0;
-  html[dir=rtl] & {
-    margin-left: 0;
-    margin-right: dp(28);
-  }
-}
-
-
-// First line is pushed up 20dp
-.mdw-list__text-line:first-child {
-  @include baseline-bottom(20);
-}
-
-
-// Second and third lines are pushed up 20dp and its above element is pushed 20dp
-.mdw-list__text-line:not(:first-child),
-.mdw-list__text-block:not(:first-child) {
-  margin-top: dp(-20);
-  @include baseline-top(20);
-}
-
-// Second line is pushed up 16dp from baseline
-.mdw-list__text-line:last-child {
-  @include baseline-bottom(16);
-}
-
-
-// When 3-lines, 2nd and 3rd lines are pushed up 20dp
-.mdw-list__text-line:nth-child(3),
-.mdw-list__text-line:not(:first-child):not(:last-child) {
-  @include baseline-bottom(20);
-}
-
-// Second and third line typography
-.mdw-list__text-line:not(:first-child),
-.mdw-list__text-block:not(:first-child) {
-  @include type-rules('body-2');
-}
-
-.mdw-list__text-block {
-  pointer-events: none;
-  text-transform: none;
-  text-align: start;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  white-space: normal;
-  display: block;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-
-  height: dp(20 * 2);
-  max-height: dp(20 * 2);
-  padding-bottom: dp(4);
-  margin-bottom: dp(16);
-}
-
-.mdw-list__item {
-  // Long press color
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    // z-index: -1; // Safari has a negative z-index bug
-    transition-property: background-color;
-    transition-duration: 500ms;
-    transition-delay: 5ms;
-    transition-timing-function: $motion-easing-standard;
-    pointer-events: none;
-  }
-
-  > .mdw-ripple {
-    @include mdw-ripple__container;
-  }
-
-  & > .mdw-ripple > .mdw-ripple__inner,
-  &::after {
-    @include mdw-ripple__inner;
-  }
-
-  & > .mdw-ripple:active > .mdw-ripple__inner,
-  &:active::after {
-    @include mdw-ripple__active;
-  }
-
-  &[mdw-ripple] {
-    overflow-y: visible;
-    &::after {
-      // If using custom ripple, destroy ::after object
-      content: none;
-    }
-  }
-}

package/components/list/theming.scss

@@ -1,83 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$listColors: (
-  text-color:           ((#000, 0.87), (#fff, 1.00)),
-  secondary-text-color: ((#000, 0.54), (#fff, 0.70)),
-  divider-color:        ((#000, 0.12), (#fff, 0.12)),
-  press-color:          ((#999, 0.40), (#CCC, 0.25)),
-  selected-color:       ((#999, 0.40), (#CCC, 0.25)),
-  ripple-color:         ( #000       ,  #fff       ),
-  ripple-opacity:       (         0.12 ,          0.30,           0.20),
-);
-
-@function listThemeValue($key, $type) {
-  @return themeValue('list', $listColors, $key, $type);
-}
-
-@mixin listThemeVariables($color, $lightness) {
-  @include themeVariables('list', $listColors, $color, $lightness);
-}
-
-// Vary by contrast
-@mixin listContrastRules($type: 'var', $theme: null) {
-  .mdw-list__item {
-    &:not([mdw-theme-color]) {
-      color: listThemeValue("text-color", $type)
-    }
-    &[mdw-selected] {
-      background-color: listThemeValue("selected-color", $type);
-    }
-    &[tabindex]:active:focus::before {
-      background-color: listThemeValue("press-color", $type);
-    }
-    &:active:not(:focus-within)::before,
-    &:active[tabindex]:focus:not(:focus-within)::before {
-      background-color: listThemeValue("press-color", $type);
-    }
-
-    // IE and Edge does not support :focus-within
-    @include MSOnly {
-      &:active::before {
-        background-color: listThemeValue("press-color", $type);
-      }
-    }
-    & > .mdw-ripple > .mdw-ripple__inner,
-    &:after {
-      opacity: listThemeValue("ripple-opacity", $type);
-      color: listThemeValue("ripple-color", $type);
-    }
-  }
-  
-  .mdw-list__meta {
-    color: listThemeValue("secondary-text-color", $type);
-  }
-  .mdw-list__text {
-    [mdw-divider] > .mdw-list__item:not(:last-child) &::after {
-      background-color: listThemeValue("divider-color", $type);
-    }
-  }
-  .mdw-list__divider {
-    border-top-color: listThemeValue("divider-color", $type);
-  }
-  .mdw-list__icon {
-    color: listThemeValue("secondary-text-color", $type);
-  }
-  .mdw-list__expander {
-    &::before,
-    &::after {
-      background-color: listThemeValue("divider-color", $type);
-    }
-    > .mdw-list__item:first-child {
-      .mdw-list__secondary {
-        color: listThemeValue("secondary-text-color", $type);
-      }
-    } 
-  }
-  .mdw-list__text-line,
-  .mdw-list__text-block {
-    &:not(:first-child) {
-      color: listThemeValue("secondary-text-color", $type);
-    }
-  }
-}