@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/appbar/_spec.scss

@@ -1,225 +0,0 @@
-// https://material.io/guidelines/layout/structure.html#structure-app-bar
-// https://material.io/archive/guidelines/components/toolbars.html
-
-@use '../../core/_breakpoint.scss' as breakpoint;
-@use '../../core/_length.scss' as *;
-@use '../../core/_type.scss' as type;
-
-$height: 64 !default;
-$heightDense: 48 !default;
-$heightMobile: 56 !default;
-$heightMobileLandscape: 48 !default;
-$heightProminent: 128 !default;
-$heightProminentDense: 96 !default;
-$iconHeight: 40 !default;
-
-.mdw-appbar {
-  display: flex;
-  flex-direction: column;
-}
-
-.mdw-appbar__action {
-  display: -ms-grid;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  -ms-grid-columns: auto 1fr auto;
-  
-  min-height: dp($height);
-  -ms-grid-rows: minmax(dp($height), 1fr) auto;
-
-  transition-duration: inherit;
-  transition-property: min-height;
-  transition-timing-function: inherit;
-
-  z-index: 1;
-
-  &[mdw-centered] {
-    grid-template-columns: minmax(auto, 1fr) minmax(0, auto) minmax(auto, 1fr);
-    -ms-grid-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
-  }
-
-  .mdw-appbar[mdw-prominent] > & {
-    min-height: dp($heightProminent);
-    -ms-grid-rows: minmax(dp($heightProminent), 1fr) auto;
-  }
-  
-  .mdw-appbar[mdw-dense] > & {
-    min-height: dp($heightDense);
-    -ms-grid-rows: minmax(dp($heightDense), 1fr) auto;
-  }
-  
-  .mdw-appbar[mdw-dense][mdw-prominent] > & {
-    min-height: dp($heightProminentDense);
-    -ms-grid-rows: minmax(dp($heightProminentDense), 1fr) auto;
-    @include breakpoint.maxTabletDevice {
-      min-height: dp($heightProminent);
-      -ms-grid-rows: minmax(dp($heightProminent), 1fr) auto;
-    }
-  }
-
-  &,
-  .mdw-appbar[mdw-dense] > & {
-    @include breakpoint.maxTabletDevice {
-      min-height: dp($heightMobile);
-    }
-    @include breakpoint.isMobileDeviceLandscape {
-      min-height: dp($heightMobileLandscape);
-    }
-  }
-}
-
-.mdw-appbar__content {
-  display: flex;
-  flex-direction: column;
-
-  -ms-grid-column: 1;
-  grid-column: 1;
-  -ms-grid-column-span: 3;
-  grid-column-end: span 3;
-  -ms-grid-row: 2;
-  grid-row: 2;
-
-  margin-right: dp(24);
-  margin-left: dp(80);
-  @include breakpoint.has16DPMargin() {
-    margin-right: dp(16);
-    margin-left: dp(72);
-  }
-}
-
-.mdw-appbar__title {
-  @include type.addRules('h6');
-  @include type.baselineToBottom(24);
-
-  -ms-grid-row-align: end;
-  align-self: flex-end;
-
-  -ms-grid-column: 2;
-  grid-column: 2;
-  -ms-grid-row: 1;
-  grid-row: 1;
-
-  justify-content: space-around;
-  overflow-x: hidden;
-  
-  height: auto;
-  margin: 0 dp(16);
-
-  transition-duration: inherit;
-  transition-property: font, letter-spacing, margin-top;
-  transition-timing-function: inherit;
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-
-  .mdw-appbar[mdw-dense] & {
-    @include type.baselineToBottom(16);
-  }
-
-  .mdw-appbar[mdw-dense] &,
-  & {
-    @include breakpoint.maxTabletDevice {
-      @include type.baselineToBottom(20);
-    }
-    @include breakpoint.isMobileDeviceLandscape {
-      @include type.baselineToBottom(16);
-    }
-  }
-
-  .mdw-appbar[mdw-prominent] & {
-    white-space: normal;
-    @include type.addRules('h5');
-    @include type.baselineToBottom(28);
-  }
-
-  &[mdw-custom] {
-    margin-top: 0;
-
-    &::after {
-      display: none;
-    }
-  }
-}
-
-.mdw-appbar__start {
-  -ms-grid-column: 1;
-  grid-column: 1;
-
-  margin-left: dp(8);
-
-  padding: 0 dp(8);
-  @include breakpoint.has16DPMargin() {
-    margin-left: 0;
-  }
-}
-
-.mdw-appbar__end {
-  -ms-grid-column: 3;
-  grid-column: 3;
-  justify-content: flex-end;
-
-  margin-right: dp(12);
-  margin-left: 0;
-  @include breakpoint.has16DPMargin() {
-    margin-right: dp(4);
-    margin-left: 0;
-  }
-
-  :root[dir="rtl"] & {
-    margin-right: 0;
-    margin-left: dp(12);
-    @include breakpoint.has16DPMargin() {
-      margin-right: 0;
-      margin-left: dp(4);
-    }
-  }
-}
-
-
-.mdw-appbar__start,
-.mdw-appbar__end {
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-
-  transition-property: margin-top;
-}
-
-.mdw-appbar__start,
-.mdw-appbar__end,
-.mdw-appbar__title {
-  margin-top: dp(($height - $iconHeight) * 0.5);
-  
-  .mdw-appbar[mdw-dense] & {
-    margin-top: dp(($heightDense - $iconHeight) * 0.5);
-  }
-
-  &,
-  .mdw-appbar[mdw-dense] & {
-    @include breakpoint.maxTabletDevice {
-      margin-top: dp(($heightMobile - $iconHeight) * 0.5);
-    }
-    @include breakpoint.isMobileDeviceLandscape {
-      margin-top: dp(($heightMobileLandscape - $iconHeight) * 0.5);
-    }
-  }
-}
-
-.mdw-appbar__start .mdw-button {
-  margin: 0;
-}
-
-.mdw-appbar__end .mdw-button {
-  margin: 0 dp(4);
-
-  &[mdw-more-button] {
-    margin-right: dp(-2);
-    margin-left: 0;
-
-    :root[dir="rtl"] & {
-      margin-right: 0;
-      margin-left: dp(-2);
-    }
-  }
-}

package/components/appbar/index.scss

@@ -1,2 +0,0 @@
-@forward './_spec.scss';
-@forward './_theme.scss';

package/components/banner/_spec.scss

@@ -1,118 +0,0 @@
-// https://material.io/design/components/banners.html
-
-@use '../../core/_breakpoint.scss' as breakpoint;
-@use '../../core/_length.scss' as *;
-@use '../../core/_type.scss' as type;
-
-.mdw-banner {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-
-  width: 100%;
-  border-bottom: solid dp(1);
-}
-
-.mdw-banner__container {
-  @include type.addRules('body-2');
-
-  display: flex;
-  position: relative;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  
-  box-sizing: border-box;
-  max-width: dp(960);
-  flex: 1;
-  padding-top: dp(8);
-  padding-bottom: dp(7);
-}
-
-.mdw-banner__icon {
-  position: absolute;
-  top: dp(24);
-  right: auto;
-  left: dp(16);
-
-  :root[dir="rtl"] & {
-    right: dp(16);
-    left: auto;
-  }
-
-  & ~ .mdw-banner__text {
-    margin-right: 0;
-    margin-left: dp(40 + 16);
-
-    :root[dir="rtl"] & {
-      margin-right: dp(40 + 16);
-      margin-left: 0;
-    }
-  }
-}
-
-.mdw-banner__text {
-  @include type.textTopToTop(12);
-  @include type.baselineToBottom(12);
-
-  flex-grow: 1;
-
-  padding-right: 0;
-  padding-left: dp(24);
-
-  white-space: pre-line;
-
-  :root[dir="rtl"] {
-    padding-right: dp(24);
-    padding-left: 0;
-  }
-
-  @include breakpoint.has16DPMargin() {
-    padding-right: 0;
-    padding-left: dp(16);
-
-    :root[dir="rtl"] & {
-      padding-right: dp(16);
-      padding-left: 0;
-    }
-  }
-}
-
-.mdw-banner__buttons {
-  display: flex;
-  flex-direction: row-reverse;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  
-  max-width: 100%;
-  flex: none;
-
-  .mdw-button {
-    margin-right: dp(8);
-    margin-left: 0;
-
-    text-align: end;
-
-    :root[dir="rtl"] & {
-      margin-right: 0;
-      margin-left: dp(8);
-    }
-  }
-}
-
-@include breakpoint.minMediumWindow {
-  .mdw-banner {
-    flex-wrap: nowrap;
-  }
-
-  .mdw-banner__buttons {
-    margin-right: 0;
-    margin-left: dp(90);
-
-    :root[dir="rtl"] & {
-      margin-right: dp(90);
-      margin-left: 0;
-    }
-  }
-}

package/components/banner/index.scss

@@ -1,2 +0,0 @@
-@forward './_spec.scss';
-@forward './_theme.scss';

package/components/bottomnav/README.md

@@ -1,85 +0,0 @@
-# Syntax
-
-
-## Fixed (Primary Color)
-
-```
-form.mdw-bottomnav.mdw-theme(mdw-ink="primary 500")
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="recents")
-    .mdw-bottomnav__icon.material-icons history
-    .mdw-bottomnav__label Recents
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="favorites" checked)
-    .mdw-bottomnav__icon.material-icons favorite
-    .mdw-bottomnav__label Favorites
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="nearby")
-    .mdw-bottomnav__icon.material-icons near_me
-    .mdw-bottomnav__label Nearby
-```
-
-## Fixed (Filled)
-```
-form.mdw-bottomnav.mdw-theme(mdw-surface="primary 700")
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="recents")
-    .mdw-bottomnav__icon.material-icons history
-    .mdw-bottomnav__label Recents
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="favorites" checked)
-    .mdw-bottomnav__icon.material-icons favorite
-    .mdw-bottomnav__label Favorites
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="nearby")
-    .mdw-bottomnav__icon.material-icons near_me
-    .mdw-bottomnav__label Nearby
-```
-
-## Shifting (Primary Color)
-```
-form.mdw-bottomnav.mdw-theme(mdw-ink="primary 500" mdw-shifting)
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="movies" id='value1')
-  label.mdw-bottomnav__item(for='value1')
-    .mdw-bottomnav__icon.material-icons tv
-    .mdw-bottomnav__label Movies & TV
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="music" id='value2' checked )
-  label.mdw-bottomnav__item(for='value2')
-    .mdw-bottomnav__icon.material-icons music_note
-    .mdw-bottomnav__label Music
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="books" id='value3')
-  label.mdw-bottomnav__item(for='value3')
-    .mdw-bottomnav__icon.material-icons book
-    .mdw-bottomnav__label Books
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="newsstand" id='value4')
-  label.mdw-bottomnav__item(for='value4')
-    .mdw-bottomnav__icon.material-icons assignment
-    .mdw-bottomnav__label Newsstand
-```
-
-## Shifting (Filled)
-```
-form.mdw-bottomnav.mdw-theme(mdw-surface="primary 700" mdw-shifting)
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="movies" id='value1')
-  label.mdw-bottomnav__item(for='value1')
-    .mdw-bottomnav__icon.material-icons tv
-    .mdw-bottomnav__label Movies & TV
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="music" id='value2' checked )
-  label.mdw-bottomnav__item(for='value2')
-    .mdw-bottomnav__icon.material-icons music_note
-    .mdw-bottomnav__label Music
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="books" id='value3')
-  label.mdw-bottomnav__item(for='value3')
-    .mdw-bottomnav__icon.material-icons book
-    .mdw-bottomnav__label Books
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="newsstand" id='value4')
-  label.mdw-bottomnav__item(for='value4')
-    .mdw-bottomnav__icon.material-icons assignment
-    .mdw-bottomnav__label Newsstand
-```
-
-# Notes
-
-Shifting items requires use of `input` elements *immediately* preceeding its corresponding the `.mdw-bottomnav__item` element.
-
-See `.mdw-button` documentation for more information regardling ripple origins.

package/components/bottomnav/_spec.scss

@@ -1,157 +0,0 @@
-// https://material.io/design/components/bottom-navigation.html#specs
-
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_type.scss' as type;
-
-.mdw-bottomnav {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  overflow: hidden;
-
-  min-height: dp(56);
-  width: 100%;
-}
-
-.mdw-bottomnav__item {
-  display: flex;
-  position: relative;
-  align-items: center;
-  flex-direction: column;
-  justify-content: flex-start;
-  overflow: visible;
-  
-  min-width: dp(80);
-  flex: dp(168);
-  flex-grow: 0;
-  // flex-shrink: 1;
-  // flex-basis: dp(168);
-  margin: 0;
-  padding: 0;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  z-index: 0;
-  
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.mdw-bottomnav__icon {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  
-  margin: 0;
-  margin-left: dp(-12);
-  padding: 0;
-
-  transition-duration: motion.$shapeChangeDuration, motion.$simpleDuration;
-  transition-property: transform, color;
-  transition-timing-function: motion.$standardEasing;
-
-  pointer-events: none;
-  transform: translateY(dp(8));
-
-  &:last-child {
-    // No label
-    transform: translateY(dp(16));
-  }
-}
-
-.mdw-bottomnav__badge {
-  position: absolute;
-  top: 0;
-  right: auto;
-  left: dp(16);
-
-  
-  box-sizing: border-box;
-  min-height: dp(8);
-  min-width: dp(8);
-  padding: dp(2);
-
-  visibility: hidden;
-
-  z-index: 1;
-
-  border-radius: dp(8);
-
-  font: inherit;
-
-  font-weight: type.$weightRegular;
-  font-size: dp(10);
-  line-height: dp(12);
-  letter-spacing: normal;
-
-  :root[dir="rtl"] & {
-    right: dp(16);
-    left: auto;
-  }
-  
-  &[mdw-badge] {
-    visibility: visible;
-
-    &::before {
-      content: attr(mdw-badge);
-    }
-  }
-
-  &[data-mdw-badge] {
-    visibility: visible;
-
-    &::before {
-      content: attr(data-mdw-badge);
-    }
-  }
-}
-
-.mdw-bottomnav__label {
-  @include type.addRules('caption');
-  @include type.textTopToTop(32);
-  @include type.baselineToBottom(8);
-  
-  // Overriding 12dp for baseline bottom with 8dp for oversized and textwrapped
-  // Baseline top will ensure type.baselineToBottom is 12dp for standard layouts
-
-  box-sizing: border-box;
-  max-width: 100%;
-  padding: 0 dp(12);
-  
-  transition-duration: motion.$shapeChangeDuration;
-  transition-property: transform, opacity, color;
-  transition-timing-function: motion.$standardEasing;
-
-  pointer-events: none;
-
-  text-align: center;
-  word-break: break-all;
-  word-break: break-word;
-}
-
-.mdw-bottomnav[mdw-shifting] {
-  .mdw-bottomnav__icon {
-    transform: translateY(dp(16));
-  }
-
-  .mdw-bottomnav__label {
-    opacity: 0;
-    transform: translateY(dp(8));
-  }
-
-  .mdw-bottomnav__item[aria-selected="true"] > .mdw-bottomnav__label {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .mdw-bottomnav__item[aria-selected="true"] > .mdw-bottomnav__icon {
-    transform: translateY(dp(8));
-  }
-}