material-sass 1.4.1 → 4.0.0.alpha5

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

@@ -0,0 +1,4 @@
+@mixin img-fluid {
+  height: auto;
+  max-width: 100%;
+}

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

@@ -0,0 +1,4 @@
+@mixin list-unstyled {
+  list-style: none;
+  padding-left: 0;
+}

data/app/assets/stylesheets/material/mixins/_nav-divider.scss

@@ -0,0 +1,6 @@
+@mixin nav-divider($bg: $black-divider) {
+  background-color: $bg;
+  height: 1px;
+  margin: $spacer-sm-y 0;
+  overflow: hidden;
+}

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

@@ -0,0 +1,7 @@
+@mixin pull-left {
+  float: left !important;
+}
+
+@mixin pull-right {
+  float: right !important;
+}

data/app/assets/stylesheets/material/mixins/_reset-text.scss

@@ -0,0 +1,35 @@
+@mixin reset-text {
+  font-family: $font-family-base;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: $line-height-base;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+}
+
+@mixin reset-to-material-icons($base: $font-size-base) {
+  direction: ltr;
+  display: inline-block;
+  font-family: "Material Icons";
+  font-feature-settings: "liga";
+  font-size: #{($material-icon-size / $font-size-root) / strip-unit($base)}em;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: #{strip-unit($base) / (($material-icon-size / $font-size-root) / strip-unit($base))}em;;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  word-wrap: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

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

@@ -0,0 +1,23 @@
+@mixin sr-only {
+  border: 0;
+  clip: rect(0,0,0,0);
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+@mixin sr-only-focusable {
+  // active, focus, hover
+    &:active,
+    &:focus {
+      clip: auto;
+      height: auto;
+      margin: 0;
+      overflow: visible;
+      position: static;
+      width: auto;
+    }
+}

data/app/assets/stylesheets/material/mixins/_strip-unit.scss

@@ -0,0 +1,3 @@
+@function strip-unit($val) {
+  @return $val / ($val * 0 + 1);
+}

data/app/assets/stylesheets/material/mixins/_tab-focus.scss

@@ -0,0 +1,5 @@
+@mixin tab-focus {
+  outline: thin dotted;
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 0;
+}

data/app/assets/stylesheets/material/mixins/_text-emphasis.scss

@@ -0,0 +1,14 @@
+@mixin text-emphasis-variant($class, $color, $color-dark: "") {
+  #{$class} {
+    color: $color !important;
+  }
+
+  @if $color-dark != "" {
+    a#{$class} {
+      // active, focus, hover
+        @include active-focus-hover {
+          color: $color-dark !important;
+        }
+    }
+  }
+}

data/app/assets/stylesheets/material/mixins/_text-hide.scss

@@ -0,0 +1,7 @@
+@mixin text-hide {
+  background-color: transparent;
+  border: 0;
+  color: transparent;
+  font: 0/0 a;
+  text-shadow: none;
+}

data/app/assets/stylesheets/material/mixins/_text-truncate.scss

@@ -0,0 +1,5 @@
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,55 @@
+@mixin transition-acceleration($property...) {
+  transition-duration: $transition-duration-sm;
+  transition-property: $property;
+  transition-timing-function: $transition-timing-function-acceleration;
+
+  @include media-breakpoint-up(sm) {
+    transition-duration: $transition-duration-tablet-sm;
+  }
+
+  @include media-breakpoint-up(lg) {
+    transition-duration: $transition-duration-desktop-sm;
+  }
+}
+
+@mixin transition-deceleration($property...) {
+  transition-duration: $transition-duration-lg;
+  transition-property: $property;
+  transition-timing-function: $transition-timing-function-deceleration;
+
+  @include media-breakpoint-up(sm) {
+    transition-duration: $transition-duration-tablet-lg;
+  }
+
+  @include media-breakpoint-up(lg) {
+    transition-duration: $transition-duration-desktop-lg;
+  }
+}
+
+@mixin transition-sharp($property...) {
+  transition-duration: $transition-duration-sm;
+  transition-property: $property;
+  transition-timing-function: $transition-timing-function-sharp;
+
+  @include media-breakpoint-up(sm) {
+    transition-duration: $transition-duration-tablet-sm;
+  }
+
+  @include media-breakpoint-up(lg) {
+    transition-duration: $transition-duration-desktop-sm;
+  }
+}
+
+@mixin transition-standard($property...) {
+  transition-duration: $transition-duration;
+  transition-property: $property;
+  transition-timing-function: $transition-timing-function-standard;
+
+  @include media-breakpoint-up(sm) {
+    transition-duration: $transition-duration-tablet;
+  }
+
+  @include media-breakpoint-up(lg) {
+    transition-duration: $transition-duration-desktop;
+  }
+}

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

@@ -0,0 +1,69 @@
+@mixin typography-display-4 {
+  font-size: $font-size-display-4;
+  font-weight: $font-weight-display-4;
+  letter-spacing: $letter-spacing-display-4;
+  line-height: $line-height-display-4;
+}
+
+@mixin typography-display-3 {
+  font-size: $font-size-display-3;
+  font-weight: $font-weight-display-3;
+  letter-spacing: $letter-spacing-display-3;
+  line-height: $line-height-display-3;
+}
+
+@mixin typography-display-2 {
+  font-size: $font-size-display-2;
+  font-weight: $font-weight-display-2;
+  letter-spacing: $letter-spacing-display-2;
+  line-height: $line-height-display-2;
+}
+
+@mixin typography-display-1 {
+  font-size: $font-size-display-1;
+  font-weight: $font-weight-display-1;
+  letter-spacing: $letter-spacing-display-1;
+  line-height: $line-height-display-1;
+}
+
+@mixin typography-headline {
+  font-size: $font-size-headline;
+  font-weight: $font-weight-headline;
+  letter-spacing: $letter-spacing-headline;
+  line-height: $line-height-headline;
+}
+
+@mixin typography-title {
+  font-size: $font-size-title;
+  font-weight: $font-weight-title;
+  letter-spacing: $letter-spacing-title;
+  line-height: $line-height-title;
+}
+
+@mixin typography-subheading {
+  font-size: $font-size-subheading;
+  font-weight: $font-weight-subheading;
+  letter-spacing: $letter-spacing-subheading;
+  line-height: $line-height-subheading;
+}
+
+@mixin typography-body-2 {
+  font-size: $font-size-body-2;
+  font-weight: $font-weight-body-2;
+  letter-spacing: $letter-spacing-body-2;
+  line-height: $line-height-body-2;
+}
+
+@mixin typography-body-1 {
+  font-size: $font-size-body-1;
+  font-weight: $font-weight-body-1;
+  letter-spacing: $letter-spacing-body-1;
+  line-height: $line-height-body-1;
+}
+
+@mixin typography-caption {
+  font-size: $font-size-caption;
+  font-weight: $font-weight-caption;
+  letter-spacing: $letter-spacing-caption;
+  line-height: $line-height-caption;
+}

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

@@ -0,0 +1,23 @@
+.align-top {
+  vertical-align: top !important;
+}
+
+.align-text-top {
+  vertical-align: text-top !important;
+}
+
+.align-middle {
+  vertical-align: middle !important;
+}
+
+.align-baseline {
+  vertical-align: baseline !important;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.align-bottom {
+  vertical-align: bottom !important;
+}

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

@@ -0,0 +1,23 @@
+// dark and light theme
+// based on https://material.google.com/style/color.html#color-themes
+  @include bg-variant('.bg-dark-1', $dark-theme-1);
+  @include bg-variant('.bg-dark-2', $dark-theme-2);
+  @include bg-variant('.bg-dark-3', $dark-theme-3);
+  @include bg-variant('.bg-dark-4', $dark-theme-4);
+
+  @include bg-variant('.bg-light-1', $light-theme-1);
+  @include bg-variant('.bg-light-2', $light-theme-2);
+  @include bg-variant('.bg-light-3', $light-theme-3);
+  @include bg-variant('.bg-light-4', $light-theme-4);
+
+// offwhite
+  @include bg-variant('.bg-faded', $offwhite, $offwhite-dark);
+
+// palette
+  @each $color in $palettes {
+    $i: index($palettes, $color);
+
+    @include bg-variant('.bg-#{$color}', nth($palettes-color, $i), nth($palettes-color-dark, $i));
+  }
+
+  @include bg-variant('.bg-inverse', $dark-theme-4, $dark-theme-3);

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

@@ -0,0 +1,27 @@
+//
+// border radius
+//
+  .rounded {
+    @include border-radius($border-radius);
+  }
+
+  .rounded-top {
+    @include border-top-radius($border-radius);
+  }
+
+  .rounded-right {
+    @include border-right-radius($border-radius);
+  }
+
+  .rounded-bottom {
+    @include border-bottom-radius($border-radius);
+  }
+
+  .rounded-left {
+    @include border-left-radius($border-radius);
+  }
+
+// circle
+  .rounded-circle {
+    border-radius: 50%;
+  }

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

@@ -0,0 +1,3 @@
+.clearfix {
+  @include clearfix;
+}

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

@@ -0,0 +1,11 @@
+.d-block {
+  display: block !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}

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

@@ -0,0 +1,15 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .float-#{$breakpoint}-left {
+      @include pull-left;
+    }
+
+    .float-#{$breakpoint}-none {
+      float: none !important;
+    }
+
+    .float-#{$breakpoint}-right {
+      @include pull-right;
+    }
+  }
+}

data/app/assets/stylesheets/material/utilities/_material-icons.scss

@@ -0,0 +1,10 @@
+.material-icons {
+  font-size: #{($material-icon-size / $font-size-root) / strip-unit($font-size-base)}em;
+  line-height: #{strip-unit($font-size-base) / (($material-icon-size / $font-size-root) / strip-unit($font-size-base))}em;
+  vertical-align: middle;
+}
+
+.material-icons-inline {
+	font-size: inherit;
+	line-height: 1;
+}

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

@@ -0,0 +1,7 @@
+.sr-only {
+  @include sr-only;
+}
+
+.sr-only-focusable {
+  @include sr-only-focusable;
+}

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

@@ -0,0 +1,65 @@
+//
+// height and width
+//
+  .h-100 {
+    height: 100% !important;
+  }
+
+  .w-100 {
+    width: 100% !important;
+  }
+
+//
+// margin and padding
+//
+  .mx-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  @each $prop, $prop-abbr in (margin: m, padding: p) {
+    @each $size, $values in $spacers {
+      $length-x: map-get($values, x);
+      $length-y: map-get($values, y);
+
+      .#{$prop-abbr}-#{$size} {
+        #{$prop}: $length-y $length-x !important;
+      }
+
+      .#{$prop-abbr}t-#{$size} {
+        #{$prop}-top: $length-y !important;
+      }
+
+      .#{$prop-abbr}r-#{$size} {
+        #{$prop}-right: $length-x !important;
+      }
+
+      .#{$prop-abbr}b-#{$size} {
+        #{$prop}-bottom: $length-y !important;
+      }
+
+      .#{$prop-abbr}l-#{$size} {
+        #{$prop}-left: $length-x !important;
+      }
+
+      .#{$prop-abbr}x-#{$size} {
+        #{$prop}-right: $length-x !important;
+        #{$prop}-left: $length-x !important;
+      }
+      .#{$prop-abbr}y-#{$size} {
+        #{$prop}-top: $length-y !important;
+        #{$prop}-bottom: $length-y !important;
+      }
+    }
+  }
+
+//
+// positioning
+//
+  .pos-f-t {
+    position: fixed;
+      top: 0;
+      right: 0;
+      left: 0;
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+  }