material-sass 1.4.1 → 4.0.0.alpha5

data/app/assets/stylesheets/material/material/_text-field-floating-label.scss

@@ -0,0 +1,51 @@
+.floating-label {
+  position: relative;
+  @include floating-label-size($floating-label-height, $floating-label-padding-top, $textfield-font-size, $textfield-height, $textfield-line-height, $textfield-margin-bottom, $textfield-padding-top);
+
+  > label {
+    color: $floating-label-color;
+    cursor: text;
+    display: block;
+    font-weight: normal;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+      left: 0;
+    text-overflow: ellipsis;
+    transform-origin: 0 0;
+    white-space: nowrap;
+    @include transition-standard(color, top, transform);
+  }
+
+  &.is-focused > label {
+    color: $floating-label-color-focus;
+  }
+
+  > .form-control {
+    margin-bottom: 0;
+    position: relative;
+
+    &::placeholder {
+      color: transparent;
+      opacity: 0;
+    }
+  }
+}
+
+// size
+  .floating-label-lg {
+    @include floating-label-size($floating-label-height-lg, $floating-label-padding-top-lg, $textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-margin-bottom-lg, $textfield-padding-top-lg);
+
+    > .form-control {
+      @extend .form-control-lg;
+    }
+  }
+
+  .floating-label-sm {
+    @include floating-label-size($floating-label-height-sm, $floating-label-padding-top-sm, $textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-margin-bottom-sm, $textfield-padding-top-sm);
+
+    > .form-control {
+      @extend .form-control-sm;
+    }
+  }

data/app/assets/stylesheets/material/material/_text-field-input-group.scss

@@ -0,0 +1,76 @@
+.input-group {
+  margin-bottom: $textfield-margin-bottom;
+  position: relative;
+  width: 100%;
+
+  @if $enable-flex {
+    display: flex;
+  } @else {
+    border-collapse: separate;
+    display: table;
+  }
+
+  .form-control {
+    margin-bottom: 0;
+    position: relative;
+
+    @if $enable-flex {
+      flex-grow: 1;
+    } @else {
+      display: table-cell;
+      width: 100%;
+    }
+  }
+}
+
+.input-group-addon {
+  color: inherit;
+  font-size: $textfield-font-size;
+  line-height: $textfield-line-height;
+  margin: 0 $spacer-md-x;
+  min-width: ($textfield-height + $textfield-margin-bottom);
+  padding-top: $textfield-padding-top;
+  text-align: center;
+  vertical-align: top;
+  white-space: nowrap;
+
+  @if not $enable-flex {
+    display: table-cell;
+    width: 1%;
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+// size
+  .input-group-addon {
+    &.form-control-lg,
+    .input-group-lg > & {
+      font-size: $textfield-font-size-lg;
+      line-height: $textfield-line-height-lg;
+      min-width: ($textfield-height-lg + $textfield-margin-bottom-lg);
+      padding-top: $textfield-padding-top-lg;
+    }
+
+    &.form-control-sm,
+    .input-group-sm > & {
+      font-size: $textfield-font-size-sm;
+      line-height: $textfield-line-height-sm;
+      min-width: ($textfield-height-sm + $textfield-margin-bottom-sm);
+      padding-top: $textfield-padding-top-sm;
+    }
+  }
+
+  .input-group-lg > .form-control {
+    @extend .form-control-lg;
+  }
+
+  .input-group-sm > .form-control {
+    @extend .form-control-sm;
+  }

data/app/assets/stylesheets/material/material/_text-field-textarea.scss

@@ -0,0 +1,31 @@
+.textarea-autosize {
+  height: $textfield-height;
+  min-height: $textfield-height;
+  resize: none;
+
+  .floating-label > & {
+    height: ($floating-label-height - $floating-label-padding-top);
+    min-height: ($floating-label-height - $floating-label-padding-top);
+  }
+}
+
+// size
+  .form-control-lg.textarea-autosize {
+    height: $textfield-height-lg;
+    min-height: $textfield-height-lg;
+
+    .floating-label > & {
+      height: ($floating-label-height-lg - $floating-label-padding-top-lg);
+      min-height: ($floating-label-height-lg - $floating-label-padding-top-lg);
+    }
+  }
+
+  .form-control-sm.textarea-autosize {
+    height: $textfield-height-sm;
+    min-height: $textfield-height-sm;
+
+    .floating-label > & {
+      height: ($floating-label-height-sm - $floating-label-padding-top-sm);
+      min-height: ($floating-label-height-sm - $floating-label-padding-top-sm);
+    }
+  }

data/app/assets/stylesheets/material/material/_text-field.scss

@@ -0,0 +1,179 @@
+.custom-select,
+.form-control {
+  background-clip: padding-box;
+  background-color: transparent;
+  background-image: none;
+  border: 0;
+  border-bottom: $textfield-border-width solid $textfield-border-color;
+  border-radius: 0;
+  box-shadow: none;
+  color: inherit;
+  display: block;
+  font-weight: $font-weight-regular;
+  width: 100%;
+  @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-line-height, $textfield-margin-bottom, $textfield-padding-top);
+  @include transition-standard(border-bottom-color);
+
+  &::-ms-expand {
+    background-color: transparent;
+    border: 0;
+  }
+
+  &::placeholder {
+    color: $textfield-hint-color;
+    opacity: 1;
+  }
+
+  // active, focus, hover
+    &:focus {
+      border-bottom-color: $textfield-border-color-focus;
+      border-bottom-width: ($textfield-border-width + 1);
+      outline: 0;
+    }
+
+  // disbaled
+    &:disabled,
+    &[readonly] {
+      border-bottom-style: dotted;
+      color: $textfield-color-disabled;
+      opacity: 1;
+    }
+
+    &:disabled {
+      cursor: $cursor-disabled;
+    }
+
+  @include media-breakpoint-up(sm) {
+    .form-inline & {
+      display: inline-block;
+      vertical-align: middle;
+      width: auto;
+    }
+  }
+}
+
+.custom-select,
+select.form-control {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+
+  @media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
+    background-image: url($caret-bg);
+    background-position: 100% ($textfield-padding-top + ($textfield-line-height - $material-icon-size / $font-size-root) / 2);
+    background-repeat: no-repeat;
+    background-size: $material-icon-size;
+    padding-right: ($spacer-xs-x + $material-icon-size / $font-size-root);
+
+    &[multiple],
+    &[size] {
+      background-image: none;
+      padding-right: 0;
+    }
+  }
+}
+
+// colour
+  @each $color in $palettes {
+    $i: index($palettes, $color);
+
+    .form-control-#{$color} {
+      &,
+      &:focus {
+        border-bottom-color: nth($palettes-color, $i);
+      }
+    }
+  }
+
+// size
+  .custom-select-lg,
+  .form-control-lg {
+    @include form-control-size($textfield-border-width, $textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-margin-bottom-lg, $textfield-padding-top-lg);
+  }
+
+  .custom-select-lg,
+  select.form-control-lg {
+    @media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
+      background-position: 100% ($textfield-padding-top-lg + ($textfield-line-height-lg - $material-icon-size / $font-size-root) / 2);
+    }
+  }
+
+  .custom-select-sm,
+  .form-control-sm {
+    @include form-control-size($textfield-border-width, $textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-margin-bottom-sm, $textfield-padding-top-sm);
+  }
+
+  .custom-select-sm,
+  select.form-control-sm {
+    @media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
+      background-position: 100% ($textfield-padding-top-sm + ($textfield-line-height-sm - $material-icon-size / $font-size-root) / 2);
+    }
+  }
+
+  input[type="color"],
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"] {
+    &.form-control {
+      height: $textfield-height;
+    }
+
+    &.form-control-lg {
+      height: $textfield-height-lg;
+    }
+
+    &.form-control-sm {
+      height: $textfield-height-sm;
+    }
+  }
+
+  input[type="color"] {
+    &.form-control {
+      min-width: $textfield-font-size;
+    }
+
+    &.form-control-lg {
+      min-width: $textfield-font-size-lg;
+    }
+
+    &.form-control-sm {
+      min-width: $textfield-font-size-sm;
+    }
+  }
+
+//
+// form control state
+//
+  .has-danger {
+    @include form-control-validation($palette-red-500);
+  }
+
+  .has-success {
+    @include form-control-validation($palette-green-500);
+  }
+
+  .has-warning {
+    @include form-control-validation($palette-orange-500);
+  }
+
+//
+// form control static
+//
+  .form-control-static {
+    @include form-control-size(0px, $textfield-font-size, $textfield-height, $textfield-line-height, $textfield-margin-bottom, $textfield-padding-top);
+
+    @include media-breakpoint-up(sm) {
+      .form-inline & {
+        display: inline-block;
+      }
+    }
+
+    &.form-control-lg {
+      @include form-control-size(0px, $textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-margin-bottom-lg, $textfield-padding-top-lg);
+    }
+
+    &.form-control-sm {
+      @include form-control-size(0px, $textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-margin-bottom-sm, $textfield-padding-top-sm);
+    }
+  }

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

@@ -0,0 +1,516 @@
+.navbar,
+.toolbar {
+  min-height: $toolbar-height;
+  padding: $toolbar-padding-y $toolbar-padding-x;
+  position: relative;
+  @include clearfix;
+}
+
+// color
+  .navbar-dark,
+  .toolbar-dark {
+    color: $toolbar-color-dark;
+  }
+
+  .navbar-light,
+  .toolbar-light {
+    color: $toolbar-color-light;
+  }
+
+// variation
+  .navbar-fixed-bottom,
+  .navbar-fixed-top,
+  .toolbar-clipped {
+    box-shadow: map-get($toolbar-elevation-shadow, shadow);
+    position: fixed;
+      right: 0;
+      left: 0;
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+  }
+
+  .navbar-fixed-bottom {
+    // position
+      bottom: 0;
+  }
+
+  .navbar-fixed-top,
+  .toolbar-clipped {
+    // position
+      top: 0;
+  }
+
+  .navbar-full {
+    box-shadow: map-get($toolbar-elevation-shadow, shadow);
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+  }
+
+  .navbar-sticky-top {
+    box-shadow: map-get($toolbar-elevation-shadow, shadow);
+    position: sticky;
+      top: 0;
+    width: 100%;
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+  }
+
+  .toolbar-waterfall {
+    position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+    @include transition-standard(background-color, box-shadow);
+
+    &.waterfall {
+      background-color: $toolbar-waterfall-bg;
+      box-shadow: map-get($toolbar-elevation-shadow, shadow);
+      position: fixed;
+    }
+  }
+
+//
+// misc
+//
+  .navbar-brand,
+  .toolbar-brand {
+    display: block;
+    float: left;
+    height: $toolbar-link-height;
+    margin-top: 0;
+    margin-right: $toolbar-inner-spacer;
+    margin-bottom: 0;
+    padding-top: (($toolbar-link-height - $line-height-title) / 2);
+    padding-bottom: (($toolbar-link-height - $line-height-title) / 2);
+    position: relative;
+    z-index: 1;
+    @include border-radius($border-radius);
+    @include typography-title;
+
+    &::before {
+      background-color: currentColor;
+      content: "";
+      display: block;
+      opacity: 0;
+      position: absolute;
+        top: 0;
+        right: ($toolbar-inner-spacer / -2);
+        bottom: 0;
+        left: ($toolbar-inner-spacer / -2);
+      z-index: -1;
+      @include border-radius($border-radius);
+      @include transition-standard(opacity);
+    }
+
+    // active, focus, hover
+      @include active-focus-hover {
+        @if ($link-decoration-active != "none") {
+          text-decoration: none;
+        }
+
+        &::before {
+          opacity: 0.12;
+        }
+      }
+
+      &:focus {
+        outline: 0;
+      }
+  }
+
+  // colour
+    .navbar-dark,
+    .toolbar-dark {
+      .navbar-brand,
+      .toolbar-brand {
+        @include plain-active-focus-hover {
+          color: $toolbar-color-dark;
+        }
+      }
+    }
+
+    .navbar-light,
+    .toolbar-light {
+      .navbar-brand,
+      .toolbar-brand {
+        @include plain-active-focus-hover {
+          color: $toolbar-color-light;
+        }
+      }
+    }
+
+  .navbar-divider,
+  .toolbar-divider {
+    float: left;
+    margin-right: $toolbar-inner-spacer;
+    margin-left: $toolbar-inner-spacer;
+    overflow: hidden;
+    padding-top: (($toolbar-link-height - $font-size-base * $line-height-base) / 2);
+    padding-bottom: (($toolbar-link-height - $font-size-base * $line-height-base) / 2);
+    width: 1px;
+
+    &::before {
+      content: "\00a0";
+    }
+  }
+
+  // colour
+    .navbar-dark,
+    .toolbar-dark {
+      .navbar-divider,
+      .toolbar-divider {
+        background-color: $white-divider;
+      }
+    }
+
+    .navbar-light,
+    .toolbar-light {
+      .navbar-divider,
+      .toolbar-divider {
+        background-color: $black-divider;
+      }
+    }
+
+  .navbar-text,
+  .toolbar-text {
+    display: inline-block;
+    padding-top: (($toolbar-link-height - $font-size-base * $line-height-base) / 2);
+    padding-bottom: (($toolbar-link-height - $font-size-base * $line-height-base) / 2);
+  }
+
+//
+// nav
+//
+  .navbar-nav,
+  .toolbar-nav {
+    .nav-item {
+      float: left;
+
+      + .nav-item {
+        margin-left: 1px;
+      }
+    }
+
+    .nav-link {
+      display: block;
+      font-size: $toolbar-link-font-size;
+      line-height: 1;
+      padding: $toolbar-link-padding-y $toolbar-link-padding-x;
+      @include border-radius($border-radius);
+      @include transition-standard(background-color);
+
+      &::before {
+        content: "";
+        display: block;
+        opacity: 0;
+        position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        @include border-radius($border-radius);
+        @include transition-standard(opacity);
+      }
+
+      // active, focus, hover
+        @include active-focus-hover {
+          &::before {
+            opacity: 1;
+          }
+        }
+
+        &:focus {
+          outline: 0;
+        }
+
+      // disabled
+        &.disabled {
+          &::before {
+            display: none;
+          }
+        }
+    }
+
+    .nav-link.active,
+    .nav-link.open,
+    .active > .nav-link,
+    .open > .nav-link {
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    .dropdown.open > .nav-link::before {
+      @include border-bottom-radius(0);
+    }
+
+    .dropup.open> .nav-link::before {
+      @include border-top-radius(0);
+    }
+  }
+
+  // colour
+    .navbar-dark,
+    .toolbar-dark {
+      .navbar-nav,
+      .toolbar-nav {
+        .nav-link {
+          @include plain-active-focus-hover {
+            color: $toolbar-color-dark;
+          }
+
+          &::before {
+            background-color: $white-divider;
+          }
+
+          // disabled
+            &.disabled {
+              color: $white-hint;
+            }
+        }
+      }
+    }
+
+    .navbar-light,
+    .toolbar-light {
+      .navbar-nav,
+      .toolbar-nav {
+        .nav-link {
+          @include plain-active-focus-hover {
+            color: $toolbar-color-light;
+          }
+
+          &::before {
+            background-color: $black-divider;
+          }
+
+          // disabled
+            &.disabled {
+              color: $black-hint;
+            }
+        }
+      }
+    }
+
+//
+// toggleable
+//
+  .navbar-toggleable {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+      $next: breakpoint-next($breakpoint);
+
+      &-#{$breakpoint} {
+        @include clearfix;
+
+        @include media-breakpoint-down($breakpoint) {
+          .navbar-brand,
+          .toolbar-brand {
+            float: none;
+            margin-top: $toolbar-padding-y;
+            margin-right: 0;
+            padding-right: $toolbar-link-padding-x;
+            padding-left: $toolbar-link-padding-x;
+
+            &::before {
+              // position
+                right: 0;
+                left: 0;
+            }
+          }
+
+          .navbar-nav,
+          .toolbar-nav {
+            margin-top: $toolbar-padding-y;
+            margin-bottom: $toolbar-padding-y;
+
+            .dropdown-menu {
+              float: none;
+              position: static;
+            }
+
+            .nav-item {
+              float: none;
+
+              + .nav-item {
+                margin-top: 1px;
+                margin-left: 0;
+              }
+            }
+          }
+        }
+
+        @include media-breakpoint-up($next) {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .navbar-toggler,
+  .toolbar-toggler {
+    background-color: transparent;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: $material-icon-size;
+    border: 0;
+    border-radius: 50%;
+    display: block;
+    height: $toolbar-link-height;
+    margin-right: $toolbar-inner-spacer;
+    overflow: hidden;
+    padding-top: (($toolbar-link-height - $material-icon-size / $font-size-root) / 2);
+    padding-bottom: (($toolbar-link-height - $material-icon-size / $font-size-root) / 2);
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: $toolbar-link-height;
+    z-index: 1;
+
+    &::before {
+      border-radius: 50%;
+      content: "";
+      display: block;
+      opacity: 0;
+      position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      z-index: -1;
+      @include transition-standard(opacity);
+    }
+
+    // active, focus, hover
+      @include active-focus-hover {
+        color: inherit;
+
+        @if ($link-decoration-active != "none") {
+          text-decoration: none;
+        }
+
+        &::before {
+          opacity: 1;
+        }
+      }
+
+      &:focus {
+        outline: 0;
+      }
+
+    // disabled
+      &.disabled {
+        cursor: $cursor-disabled;
+
+        &::before {
+          display: none;
+        }
+      }
+
+    // open
+      .open > & {
+        &::before {
+          opacity: 1;
+        }
+      }
+  }
+
+  // colour
+    .navbar-dark,
+    .toolbar-dark {
+      .navbar-toggler,
+      .toolbar-toggler {
+        background-image: $toolbar-toggler-bg-dark;
+
+        &::before {
+          background-color: $white-divider;
+        }
+      }
+    }
+
+    .navbar-light,
+    .toolbar-light {
+      .navbar-toggler,
+      .toolbar-toggler {
+        background-image: $toolbar-toggler-bg-light;
+
+        &::before {
+          background-color: $black-divider;
+        }
+      }
+    }
+
+//
+// vertical align some elements normally placed in `.navbar` or `.toolbar`
+//
+  .navbar,
+  .toolbar {
+    .btn {
+      margin-top: (($btn-height - $toolbar-link-height) / -2);
+      margin-bottom: (($btn-height - $toolbar-link-height) / -2);
+    }
+
+    .btn-lg {
+      margin-top: (($btn-height-lg - $toolbar-link-height) / -2);
+      margin-bottom: (($btn-height-lg - $toolbar-link-height) / -2);
+    }
+
+    .btn-sm {
+      margin-top: (($btn-height-sm - $toolbar-link-height) / -2);
+      margin-bottom: (($btn-height-sm - $toolbar-link-height) / -2);
+    }
+
+    .form-control {
+      margin-top: (($textfield-height - $toolbar-link-height) / -2);
+      @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-line-height, ($textfield-height - $toolbar-link-height) / -2, ($textfield-height - $textfield-line-height) / 2);
+    }
+
+    .form-control-lg {
+      margin-top: (($textfield-height-lg - $toolbar-link-height) / -2);
+      @include form-control-size($textfield-border-width, $textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, ($textfield-height-lg - $toolbar-link-height) / -2, ($textfield-height-lg - $textfield-line-height-lg) / 2);
+    }
+
+    .form-control-sm {
+      margin-top: (($textfield-height-sm - $toolbar-link-height) / -2);
+      @include form-control-size($textfield-border-width, $textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, ($textfield-height-sm - $toolbar-link-height) / -2, ($textfield-height-sm - $textfield-line-height-sm) / 2);
+    }
+
+    .input-group {
+      margin-bottom: 0;
+    }
+
+    .input-group-addon {
+      padding-top: 0;
+      vertical-align: middle;
+    }
+
+    .nav-tabs {
+      margin-top: (($nav-tab-link-height - $toolbar-link-height) / -2);
+      margin-bottom: (($nav-tab-link-height - $toolbar-link-height) / -2);
+
+      .nav-link {
+        height: $toolbar-height;
+      }
+    }
+  }
+
+  .navbar-dark,
+  .toolbar-dark {
+    .form-control {
+      border-bottom-color: $toolbar-color-dark;
+      color: $toolbar-color-dark;
+
+      &::placeholder {
+        color: $white-hint;
+      }
+    }
+  }
+
+  .navbar-light,
+  .toolbar-light {
+    .form-control {
+      border-bottom-color: $toolbar-color-light;
+      color: $toolbar-color-light;
+
+      &::placeholder {
+        color: $black-hint;
+      }
+    }
+  }