mtl 1.0.1

data/app/assets/stylesheets/mtl/extend/_avatars.scss

@@ -0,0 +1,37 @@
+// avatars
+.mtl-avatar {
+  display: inline-block;
+  border-radius: 50%;
+  height: $mtl-avatar-size-medium !important;
+  width: $mtl-avatar-size-medium !important;
+  overflow: hidden;
+  text-align: center;
+  line-height: $mtl-avatar-size-medium !important;
+  position: relative;
+  font-size: 11px !important;
+  font-weight: normal;
+
+  @extend .grey, .lighten-2;
+  color: $mtl-layout-default-text;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    border-radius: 50%;
+  }
+}
+
+.mtl-avatar.small {
+  height: $mtl-avatar-size-small !important;
+  width: $mtl-avatar-size-small !important;
+  line-height: $mtl-avatar-size-small !important;
+  font-size: 10px !important;
+}
+.mtl-avatar.large {
+  height: $mtl-avatar-size-large !important;
+  width: $mtl-avatar-size-large !important;
+  line-height: $mtl-avatar-size-large !important;
+  font-size: 15px !important;
+}

data/app/assets/stylesheets/mtl/extend/_buttons.scss

@@ -0,0 +1,31 @@
+.btn-square,
+.btn-more {
+  padding: 0 !important;
+  width: $button-height;
+  text-align: center;
+}
+
+.btn-more {
+  color: $mtl-layout-default-text;
+
+  .material-icons {
+    display: inline;
+    height: $button-height;
+    line-height: $button-height;
+    font-size: 1.6rem;
+  }
+}
+
+.btn-more-wrapper {
+  float: right;
+  margin-right: 1rem;
+}
+
+.card-content .btn-more-wrapper {
+  margin-right: $card-padding * -.5;
+  margin-top: $card-padding * -.5;
+}
+
+.card-action .btn-more-wrapper {
+  margin-right: 0;
+}

data/app/assets/stylesheets/mtl/extend/_cards.scss

@@ -0,0 +1,21 @@
+.card {
+  .card-content .card-title {
+    font-size: $h3-fontsize;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .card-content > .row {
+    margin-left: -.75rem;
+    margin-right: -.75rem;
+  }
+
+  .card-action {
+    padding: $card-padding / 2;
+  }
+
+  .card-action .btn {
+    padding-left: $card-padding / 2;
+    padding-right: $card-padding / 2;
+  }
+}

data/app/assets/stylesheets/mtl/extend/_chips.scss

@@ -0,0 +1,3 @@
+.chip {
+  white-space: nowrap;
+}

data/app/assets/stylesheets/mtl/extend/_collection-files.scss

@@ -0,0 +1,108 @@
+// variables / colors
+$mtl-collection-files-spacing: 11px;
+$mtl-collection-file-width: 193px;
+$mtl-collection-file-height: 93px;
+
+$mtl-collection-file-bg: color('grey', 'lighten-5');
+$mtl-collection-file-text-primary: color('grey', 'darken-4');
+$mtl-collection-file-text-secondary: color('grey', 'base');
+
+// collection of file cards
+.collection-files {
+  margin: (-$mtl-collection-files-spacing) 0 0 (-$mtl-collection-files-spacing);
+  @include clearafter;
+
+  // extending the card panel
+  .card-panel {
+    background-color: $mtl-collection-file-bg;
+    color: $mtl-collection-file-text-primary;
+    margin: $mtl-collection-files-spacing 0 0 $mtl-collection-files-spacing;
+    float: left;
+    width: $mtl-collection-file-width;
+    height: $mtl-collection-file-height;
+    position: relative;
+    overflow: visible;
+    font-size: 13px;
+    line-height: 16px;
+    background-size: cover;
+    background-position: center;
+    padding: 12px 13px 0;
+
+    @media #{$small-and-down} {
+      width: 100%;
+    }
+
+    &:hover {
+      box-shadow: 0 4px 8px rgba(color('shades', 'black'), .26);
+    }
+
+    > strong,
+    > span {
+      display: block;
+      font-size: 13px;
+      line-height: 16px;
+      color: $mtl-collection-file-text-primary;
+    }
+
+    > span {
+      vertical-align: middle;
+
+      // icon override 1
+      .material-icons {
+        line-height: 16px;
+        height: 16px;
+        font-size: 20px;
+        vertical-align: middle;
+      }
+
+      &.secondary {
+        color: $mtl-collection-file-text-secondary;
+      }
+    }
+
+    // image only panel
+    &.card-panel-image {
+      text-indent: -6000px;
+
+      * {
+        display: none;
+      }
+    }
+
+    // remove button for file cards
+    .close {
+      text-indent: 0;
+      display: none;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transform: translate(50%, -50%);
+      width: 20px;
+      height: 20px;
+      background-color: color('shades', 'white');
+      box-shadow: 0 1px 2px rgba(color('shades', 'black'), .26);
+      border-radius: 50%;
+      transition-duration: .2s;
+      transition-property: color, background-color;
+      z-index: 2;
+
+      // icon override 2
+      line-height: 20px;
+      font-size: 14px;
+      text-align: center;
+      color: color('grey', 'darken-3');
+
+      &:hover {
+        color: color('shades', 'white');
+        background-color: color('grey', 'darken-3');
+      }
+      &:active {
+        color: color('shades', 'white');
+        background-color: color('grey', 'darken-4');
+      }
+    }
+    &:hover .close {
+      display: block !important;
+    }
+  }
+}

data/app/assets/stylesheets/mtl/extend/_document-modals.scss

@@ -0,0 +1,95 @@
+// variables / colors
+
+
+// basic modal wrapping
+.document-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+
+  // modal bg dimmer
+  &-dimmer {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(color('shades', 'black'), .7);
+  }
+
+  // header bar
+  &-header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    background-color: rgba(color('shades', 'black'), .6);
+    padding: 9px;
+    z-index: 2;
+
+    .left {
+      padding-right: 10px;
+    }
+    .right:last-of-type {
+      padding-right: 40px;
+    }
+  }
+
+  // modal content
+  &-content {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    overflow: auto;
+    max-width: 100%;
+    max-height: calc(100% - #{(2.4 * $navbar-height)});
+    transform: translate3d(-50%, -50%, 0);
+    background-color: color('shades', 'white');
+    z-index: 1;
+    box-shadow: 0 2px 4px rgba(color('shades', 'black'), .5);
+
+    .pdfobject-container {
+      height: 100%;
+    }
+
+    iframe,
+    embed {
+      height: 100%;
+      border: 0;
+      margin: 0;
+      display: block;
+    }
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    .no-preview {
+      padding: $card-padding;
+    }
+  }
+
+  // left & right controls
+  &-prev,
+  &-next {
+    position: fixed;
+    top: 50%;
+    transform: translate(0, -50%, 0);
+    padding: 0 1.5rem;
+    z-index: 3;
+
+    .material-icons {
+      font-size: 32px;
+    }
+  }
+  &-next {
+    right: 1rem;
+  }
+  &-prev {
+    left: 1rem;
+  }
+}

data/app/assets/stylesheets/mtl/extend/_dropdown.scss

@@ -0,0 +1,12 @@
+.dropdown-content,
+.dropdown-content li > a {
+  font-size: 1rem;
+}
+
+.dropdown-content li > a > .material-icons {
+  float: left;
+  width: auto;
+  color: lighten($dropdown-color, 30%);
+  font-size: 1.4rem;
+  margin-right: 8px;
+}

data/app/assets/stylesheets/mtl/extend/_forms.scss

@@ -0,0 +1,66 @@
+// scss-lint:disable QualifyingElement SelectorFormat
+.simple_form .check_boxes > label,
+.simple_form .radio_buttons > label {
+  display: none;
+}
+.select-wrapper span.caret {
+  color: inherit;
+}
+
+// fix for too long labels
+.input-field label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+.input-field.col label {
+  padding-right: $gutter-width;
+}
+
+// fields with text suffix/unit
+.input-field.has-suffix {
+  input:not([type]),
+  input[type=text],
+  input[type=password],
+  input[type=email],
+  input[type=url],
+  input[type=time],
+  input[type=date],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=tel],
+  input[type=number],
+  input[type=search] {
+    padding-right: 4rem;
+    width: calc(100% - 4rem);
+  }
+
+  label {
+    padding-right: 4rem;
+    width: 100%;
+  }
+
+  .suffix {
+    position: absolute;
+    right: 0;
+    top: 0;
+    line-height: 3rem;
+    color: $input-border-color;
+    font-size: $input-font-size;
+    text-align: right;
+    max-width: 3.8rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &.col {
+    label {
+      padding-right: 5.5rem;
+    }
+    .suffix {
+      right: .75rem;
+    }
+  }
+}

data/app/assets/stylesheets/mtl/extend/_global.scss

@@ -0,0 +1,77 @@
+td,
+th {
+  border-radius: 0;
+}
+
+table {
+  &.responsive-table {
+    th,
+    td {
+      &:first-child {
+        padding-left: 47px;
+      }
+    }
+
+    thead {
+      tr {
+        padding: 0;
+
+        th {
+          padding-right: 10px;
+
+          &:first-child {
+            padding-left: 47px;
+          }
+        }
+      }
+    }
+    td {
+      @media #{$medium-and-down} {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+
+    tbody tr {
+      @media #{$medium-and-down} {
+        border-bottom-width: 0;
+        padding-right: 0;
+      }
+    }
+    tbody tr td {
+      @media #{$medium-and-down} {
+        border-right: 1px solid $table-border-color;
+        padding-right: 10px;
+      }
+    }
+  }
+
+  &.no-side-padding {
+    th,
+    td {
+      &:first-child {
+        padding-left: 0;
+      }
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+
+  &.compressed {
+    th,
+    td {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+  }
+}
+
+// horizontal ruler
+hr {
+  line-height: 0;
+  overflow: hidden;
+  border-color: $table-border-color;
+  border-width: 0 0 1px;
+  border-style: solid;
+}

data/app/assets/stylesheets/mtl/extend/_grid.scss

@@ -0,0 +1,25 @@
+.col {
+  &.no-pad {
+    padding: 0;
+  }
+  &.no-pad-left {
+    padding-left: 0;
+  }
+  &.no-pad-right {
+    padding-right: 0;
+  }
+}
+
+.scroll-y {
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin: 0;
+
+  // fix for iOS rendering
+  -webkit-overflow-scrolling: touch;
+  transform: translate3d(0, 0, 0);
+}
+
+.no-scroll {
+  overflow: hidden;
+}

data/app/assets/stylesheets/mtl/extend/_material-icons.scss

@@ -0,0 +1,37 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       asset-url('material-icons/MaterialIcons-Regular.woff2') format('woff2'),
+       asset-url('material-icons/MaterialIcons-Regular.woff') format('woff'),
+       asset-url('material-icons/MaterialIcons-Regular.ttf') format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  // Preferred icon size
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  // Support for all WebKit browsers.
+  -webkit-font-smoothing: antialiased;
+  // Support for Safari and Chrome.
+  text-rendering: optimizeLegibility;
+
+  // Support for Firefox.
+  -moz-osx-font-smoothing: grayscale;
+
+  // Support for IE.
+  font-feature-settings: 'liga';
+}

data/app/assets/stylesheets/mtl/extend/_mixins.scss

@@ -0,0 +1,10 @@
+@mixin clearafter() {
+  &::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    clear: both;
+  }
+}

data/app/assets/stylesheets/mtl/extend/_roboto-rails.scss

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: 'Roboto';
+  src: local(Roboto Thin), asset-url('roboto/Roboto-Thin.eot');
+  src: asset-url('roboto/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
+    asset-url('roboto/Roboto-Thin.woff2') format('woff2'),
+    asset-url('roboto/Roboto-Thin.woff') format('woff'),
+    asset-url('roboto/Roboto-Thin.ttf') format('truetype');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: local(Roboto Light), asset-url('roboto/Roboto-Light.eot');
+  src: asset-url('roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'),
+    asset-url('roboto/Roboto-Light.woff2') format('woff2'),
+    asset-url('roboto/Roboto-Light.woff') format('woff'),
+    asset-url('roboto/Roboto-Light.ttf') format('truetype');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: local(Roboto Regular), asset-url('roboto/Roboto-Regular.eot');
+  src: asset-url('roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
+    asset-url('roboto/Roboto-Regular.woff2') format('woff2'),
+    asset-url('roboto/Roboto-Regular.woff') format('woff'),
+    asset-url('roboto/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: asset-url('roboto/Roboto-Medium.eot');
+  src: asset-url('roboto/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
+    asset-url('roboto/Roboto-Medium.woff2') format('woff2'),
+    asset-url('roboto/Roboto-Medium.woff') format('woff'),
+    asset-url('roboto/Roboto-Medium.ttf') format('truetype');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: asset-url('roboto/Roboto-Bold.eot');
+  src: asset-url('roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
+    asset-url('roboto/Roboto-Bold.woff2') format('woff2'),
+    asset-url('roboto/Roboto-Bold.woff') format('woff'),
+    asset-url('roboto/Roboto-Bold.ttf') format('truetype');
+  font-weight: 700;
+}

data/app/assets/stylesheets/mtl/extend/_side-nav.scss

@@ -0,0 +1,22 @@
+// sidebar
+.side-nav {
+
+  // scss-lint:disable QualifyingElement
+  li.active > a,
+  li.active > a i.material-icons {
+  // scss-lint:enable QualifyingElement
+    background-color: $mtl-sidenav-bg-active-color;
+    color: $mtl-sidenav-font-active-color;
+  }
+
+  ul {
+    margin: 0;
+  }
+  .divider {
+    margin: 0;
+  }
+}
+
+.side-nav-user {
+  margin: 0;
+}

data/app/assets/stylesheets/mtl/extend/_toc.scss

@@ -0,0 +1,12 @@
+.table-of-contents {
+  a {
+    color: $mtl-toc-text;
+    &:hover {
+      color: lighten($mtl-toc-text, 20%);
+      border-color: $mtl-toc-border;
+    }
+    &.active {
+      border-color: $mtl-toc-border;
+    }
+  }
+}

data/app/assets/stylesheets/mtl/extend/_typography.scss

@@ -0,0 +1,32 @@
+// variables / colors
+$mtl-typography-h5: $input-border-color;
+
+// bold elements
+h1,
+h4,
+strong {
+  font-weight: 500;
+}
+
+// h4
+h4 {
+  line-height: 1.5;
+  margin-top: 0;
+}
+
+// h5 - look like form labels
+h5 {
+  color: $mtl-typography-h5;
+}
+
+// smaller elements
+small {
+  font-size: 85%;
+}
+
+// normalize buttons and tabs
+.btn,
+.tab {
+  letter-spacing: 0;
+  font-weight: 500;
+}

data/app/assets/stylesheets/mtl/extend/forms/_input-fields.scss

@@ -0,0 +1,50 @@
+// invalid input style compatible with simple_form error markup
+.has-error {
+  // scss-lint:disable QualifyingElement
+  input:not([type]),
+  // scss-lint:enable QualifyingElement
+  input[type=text],
+  input[type=password],
+  input[type=email],
+  input[type=url],
+  input[type=time],
+  input[type=date],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=tel],
+  input[type=number],
+  input[type=search],
+  textarea.materialize-textarea {
+    border-bottom: $input-invalid-border;
+    box-shadow: 0 1px 0 0 $input-error-color;
+
+    &:focus {
+      border-bottom: $input-invalid-border;
+      box-shadow: 0 1px 0 0 $input-error-color;
+    }
+  }
+  .error-block {
+    color: $input-error-color;
+    display: block;
+    font-size: .8rem;
+    cursor: text;
+    position: relative;
+    top: -15px;
+    line-height: 2rem;
+  }
+
+  &.boolean {
+    label::before {
+      border-color: $input-error-color !important;
+    }
+    [type="checkbox"]:checked + label::before {
+      // scss-lint:disable Shorthand
+      border-color: transparent $input-error-color $input-error-color transparent !important;
+      // scss-lint:enable Shorthand
+    }
+    .error-block {
+      top: 0;
+      padding-left: 10px;
+    }
+  }
+}