material-sass 1.4.1 → 4.0.0.alpha5

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

@@ -0,0 +1,25 @@
+.img-fluid {
+  @include img-fluid;
+}
+
+.img-thumbnail {
+  box-shadow: $thumbnail-box-shadow;
+  @include img-fluid;
+}
+
+//
+// figure
+//
+  .figure {
+    display: inline-block;
+  }
+
+  .figure-caption {
+    color: $figure-caption-color;
+    @include typography-caption;
+  }
+
+  .figure-img {
+    line-height: 1;
+    margin-bottom: $figure-img-margin-bottom;
+  }

data/app/assets/stylesheets/material/bootstrap/_jumbotron.scss

@@ -0,0 +1,12 @@
+.jumbotron {
+	background-color: $jumbotron-bg;
+	box-shadow: map-get($card-elevation-shadow, shadow);
+	color: $jumbotron-color;
+	padding: $toolbar-height $card-spacer-inner-x;
+	z-index: map-get($card-elevation-shadow, elevation);
+}
+
+.jumbotron-fluid {
+	padding-right: 0;
+	padding-left: 0;
+}

data/app/assets/stylesheets/material/bootstrap/_media.scss

@@ -0,0 +1,69 @@
+@if $enable-flex {
+  .media {
+    display: flex;
+  }
+
+  .media-body {
+    flex: 1;
+  }
+
+  .media-bottom {
+    align-self: flex-end;
+  }
+
+  .media-middle {
+    align-self: center;
+  }
+} @else {
+  .media,
+  .media-body {
+    overflow: hidden;
+  }
+
+  .media-body {
+    width: 10000px;
+  }
+
+  .media-body,
+  .media-left,
+  .media-right {
+    display: table-cell;
+    vertical-align: top;
+  }
+
+  .media-bottom {
+    vertical-align: bottom;
+  }
+
+  .media-middle {
+    vertical-align: middle;
+  }
+}
+
+//
+// alignment
+//
+  .media-right {
+    padding-left: $media-alignment-padding-x;
+  }
+
+  .media-left {
+    padding-right: $media-alignment-padding-x;
+  }
+
+//
+// misc
+//
+  .media-heading {
+    margin-top: 0;
+    margin-bottom: $media-heading-margin-bottom;
+  }
+
+  .media-list {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  .media-object {
+    display: block;
+  }

data/app/assets/stylesheets/material/bootstrap/_nav.scss

@@ -0,0 +1,118 @@
+.nav {
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.nav-link {
+  display: inline-block;
+  position: relative;
+
+  // active, focus, hover
+    @include active-focus-hover {
+      @if ($link-decoration-active != "none") {
+        text-decoration: none;
+      }
+    }
+
+  // disabled
+    &.disabled {
+      cursor: $cursor-disabled;
+
+      @include plain-active-focus-hover {
+        color: $nav-link-color-disabled;
+      }
+    }
+}
+
+//
+// inline
+//
+  .nav-inline {
+    .nav-item {
+      display: inline-block;
+    }
+
+    .nav-item + .nav-item,
+    .nav-link + .nav-link {
+      margin-left: $nav-inline-item-spacer;
+    }
+  }
+
+//
+// pills
+//
+  .nav-pills {
+    @include clearfix;
+
+    .nav-item {
+      float: left;
+
+      + .nav-item {
+        margin-left: $nav-item-margin;
+      }
+    }
+
+    .nav-link {
+      color: $nav-link-color;
+      display: block;
+      padding: $nav-link-padding;
+      @include border-radius($border-radius);
+      @include transition-standard(background-color, color);
+
+      // active, focus, hover
+        @include active-focus-hover {
+          color: $nav-link-color-active;
+        }
+
+      // disabled
+        &.disabled {
+          color: $nav-link-color-disabled;
+        }
+    }
+
+    .nav-link.active,
+    .nav-item.open .nav-link {
+      cursor: default;
+
+      @include plain-active-focus-hover {
+        background-color: $nav-link-bg-active;
+        color: $nav-link-color-active;
+      }
+    }
+  }
+
+  .nav-stacked {
+    .nav-item {
+      display: block;
+      float: none;
+
+      + .nav-item {
+        margin-top: $nav-item-margin;
+        margin-left: 0;
+      }
+    }
+  }
+
+//
+// tabs are defined in material design guidelines
+// (https://material.google.com/components/tabs.html)
+// therefore, tabs are styled in /assets/sass/material/_tab.scss
+//
+  .tab-content {
+    // hide to start
+      > .tab-pane {
+        display: none;
+      }
+
+    // show when activated
+      > .active {
+        display: block;
+      }
+  }
+
+  .tab-pane {
+    &.fade {
+      transform: none;
+    }
+  }

data/app/assets/stylesheets/material/bootstrap/_pagination.scss

@@ -0,0 +1,68 @@
+.pagination {
+  background-color: $pagination-bg;
+  display: inline-block;
+  padding: $pagination-padding-y $pagination-padding-x;
+  position: relative;
+  vertical-align: middle;
+}
+
+.page-item {
+  display: inline;
+}
+
+.page-link {
+  background-color: transparent;
+  color: $btn-color;
+  display: block;
+  float: left;
+  font-size: $btn-font-size;
+  font-weight: $btn-font-weight;
+  line-height: 1;
+  margin-left: 1px;
+  padding: $btn-padding-y $btn-padding-x;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  @include border-radius($border-radius);
+  @include transition-standard(background-color, color);
+
+  // active, focus, hover
+    @include active-focus-hover {
+      background-color: $btn-bg-active;
+      color: $btn-color;
+
+      @if ($link-decoration-active != "none") {
+        text-decoration: none;
+      }
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+  .page-item:first-child & {
+    margin-left: 0;
+  }
+
+  .page-item.active & {
+    background-color: $btn-bg-active;
+  }
+
+  .page-item.disabled & {
+    background-color: transparent;
+    color: $btn-color-disabled;
+    cursor: $cursor-disabled;
+  }
+}
+
+// size
+  .pagination-lg .page-link {
+    font-size: $btn-font-size-lg;
+    padding: $btn-padding-y-lg $btn-padding-x-lg;
+  }
+
+  .pagination-sm .page-link {
+    font-size: $btn-font-size-sm;
+    padding: $btn-padding-y-sm $btn-padding-x-sm;
+  }

data/app/assets/stylesheets/material/bootstrap/_popover.scss

@@ -0,0 +1,84 @@
+//
+// material design guidelines specifically discouragae the usage of tooltips with rich information
+// (https://material.google.com/components/tooltips.html#tooltips-usage)
+//
+
+.popover {
+  background-clip: padding-box;
+  background-color: $dialog-content-bg;
+  border: 1px solid transparent;
+  box-shadow: map-get($dialog-elevation-shadow, shadow);
+  display: block;
+  font-size: $font-size-base;
+  max-width: $dialog-width-sm;
+  position: absolute;
+    top: 0;
+    left: 0;
+  z-index: map-get($dialog-elevation-shadow, elevation);
+  @include border-radius($border-radius);
+  @include reset-text;
+
+  &.bs-tether-element-attached-bottom,
+  &.popover-top {
+    margin-top: ($tooltip-margin * -1);
+  }
+
+  &.bs-tether-element-attached-left,
+  &.popover-right {
+    margin-left: $tooltip-margin;
+  }
+
+  &.bs-tether-element-attached-right,
+  &.popover-left {
+    margin-left: ($tooltip-margin * -1);
+  }
+
+  &.bs-tether-element-attached-top,
+  &.popover-bottom {
+    margin-top: $tooltip-margin;
+  }
+
+  &.fade,
+  &.fade.in {
+    transition-property: opacity;
+  }
+}
+
+.popover-content {
+  padding: $dialog-inner-padding;
+}
+
+.popover-title {
+  margin: 0;
+  padding: $dialog-inner-padding;
+  padding-bottom: 0;
+  @include typography-title;
+  &:empty {
+    display: none;
+  }
+}
+
+// desktop
+  @include media-breakpoint-up(md) {
+    .popover {
+      &.bs-tether-element-attached-bottom,
+      &.popover-top {
+        margin-top: ($tooltip-margin-md-up * -1);
+      }
+
+      &.bs-tether-element-attached-left,
+      &.popover-right {
+        margin-left: $tooltip-margin-md-up;
+      }
+
+      &.bs-tether-element-attached-right,
+      &.popover-left {
+        margin-left: ($tooltip-margin-md-up * -1);
+      }
+
+      &.bs-tether-element-attached-top,
+      &.popover-bottom {
+        margin-top: $tooltip-margin-md-up;
+      }
+    }
+  }

data/app/assets/stylesheets/material/bootstrap/_responsive-embed.scss

@@ -0,0 +1,37 @@
+.embed-responsive {
+  display: block;
+  height: 0;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+
+  embed,
+  iframe,
+  object,
+  video,
+  .embed-responsive-item {
+    border: 0;
+    height: 100%;
+    position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+    width: 100%;
+  }
+}
+
+.embed-responsive-1by1 {
+  padding-bottom: percentage(1 / 1);
+}
+
+.embed-responsive-4by3 {
+  padding-bottom: percentage(3 / 4);
+}
+
+.embed-responsive-16by9 {
+  padding-bottom: percentage(9 / 16);
+}
+
+.embed-responsive-21by9 {
+  padding-bottom: percentage(9 / 21);
+}

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

@@ -0,0 +1,62 @@
+@import "mixins";
+@import "variables";
+
+//
+// base css
+//
+  @import "base/base";
+  @import "base/grid";
+  @import "base/typography";
+
+//
+// bootstrap components
+// components covered in bootstrap's (v4.0.0-alpha.5) css but not in material design guidelines
+//
+  @import "bootstrap/alert";
+  @import "bootstrap/animation";
+  @import "bootstrap/breadcrumb";
+  @import "bootstrap/button-group";
+  @import "bootstrap/carousel";
+  @import "bootstrap/close";
+  @import "bootstrap/code";
+  @import "bootstrap/custom-form";
+  @import "bootstrap/form";
+  @import "bootstrap/image";
+  @import "bootstrap/jumbotron";
+  @import "bootstrap/media";
+  @import "bootstrap/nav";
+  @import "bootstrap/pagination";
+  @import "bootstrap/popover";
+  @import "bootstrap/responsive-embed";
+
+//
+// material components
+// components covered in material design guidelines https://material.google.com/components
+//
+  @import "material/button";
+  @import "material/button-flat";
+  @import "material/button-float";
+  @import "material/card";
+  @import "material/chip";
+  @import "material/data-table";
+  @import "material/dialog";
+  @import "material/expansion-panel";
+  @import "material/menu";
+  @import "material/navdrawer";
+  @import "material/picker";
+  @import "material/progress";
+  @import "material/progress-circular";
+  @import "material/selection-control";
+  @import "material/stepper";
+  @import "material/tab";
+  @import "material/text-field";
+  @import "material/text-field-floating-label";
+  @import "material/text-field-input-group";
+  @import "material/text-field-textarea";
+  @import "material/toolbar";
+  @import "material/tooltip";
+
+//
+// utilities
+//
+  @import "utilities";