mtl 1.0.1

data/app/assets/stylesheets/mtl/layouts/_default.scss

@@ -0,0 +1,220 @@
+// default layout: responsive with sidebar
+.mtl-layout-default {
+  background-color: $mtl-layout-default-bg;
+  height: 100%;
+
+  // sidebar logic
+  main {
+    padding-left: $mtl-layout-default-sidenav-width;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    @media #{$medium-and-down} {
+      padding: 0;
+    }
+  }
+}
+
+// header area
+.mtl-layout-default-header {
+  position: relative;
+  z-index: 2;
+  height: auto;
+  background-color: $mtl-layout-default-header-bg;
+  color: $mtl-layout-default-header-text;
+  @include clearafter;
+
+  .btn-more {
+    color: $mtl-layout-default-header-text;
+  }
+
+  .page-title {
+    float: left;
+    margin: 0;
+    line-height: 64px;
+    padding: 0 1.5rem;
+
+    @media #{$medium-and-down} {
+      padding-left: .5rem;
+    }
+    @media #{$small-and-down} {
+      line-height: 56px;
+    }
+  }
+
+  nav {
+    height: auto;
+    background-color: $mtl-layout-default-header-bg;
+    color: $mtl-layout-default-header-text;
+
+    .select-wrapper {
+      margin: 14px 0 0 30px;
+      height: 32px;
+      overflow: visible;
+
+      .caret {
+        top: 0;
+        height: 100%;
+        line-height: 32px;
+      }
+    }
+    .select-dropdown {
+      margin: 0;
+      line-height: 32px;
+      height: 32px;
+    }
+    .dropdown-content {
+      height: auto;
+    }
+  }
+
+  .nav-wrapper {
+    @include clearafter;
+
+    .row {
+      margin: 0;
+    }
+  }
+
+  &.no-padding-bottom {
+    padding-bottom: 0;
+  }
+
+  .fixed-action-btn {
+    position: absolute;
+    right: 34px;
+    bottom: 0;
+    padding: 0;
+    transform: translate(0, 50%);
+  }
+  p {
+    margin: 0;
+  }
+
+  &-toggle {
+    width: 64px;
+    text-align: center;
+
+    i {
+      width: 100%;
+    }
+  }
+  // &-back {}
+
+  // prevent overlap on the right in fixed navbar mode
+  @media #{$large-and-up} {
+    &.navbar-fixed {
+      > nav {
+        width: auto;
+        left: $mtl-layout-default-sidenav-width;
+        right: 0;
+      }
+    }
+  }
+}
+
+// content area
+.mtl-layout-default-content {
+  padding: 1.5rem;
+  box-flex: 1;
+  flex: 1;
+  justify-content: space-between;
+
+  &.half-padding {
+    padding: .75rem;
+  }
+  &.no-padding {
+    padding: 0;
+  }
+  &.no-padding-top {
+    padding-top: 0;
+  }
+  &.no-padding-left {
+    padding-left: 0;
+  }
+  &.no-padding-right {
+    padding-right: 0;
+  }
+  &.no-padding-bottom {
+    padding-bottom: 0;
+  }
+
+  > .row:last-child {
+    margin-bottom: 0;
+  }
+}
+
+
+// container override
+.mtl-layout-default {
+  .container {
+    width: 100%;
+    max-width: 896px;
+  }
+
+  // header nav toggler
+  > nav .button-collapse {
+    padding: 0 1.3rem;
+  }
+
+  // sidebar
+  .side-nav {
+    width: $mtl-layout-default-sidenav-width;
+    background-color: $mtl-layout-default-sidenav-bg;
+    color: $mtl-layout-default-sidenav-text;
+
+    a {
+      font-size: 1rem;
+      height: $sidenav-item-height;
+      line-height: $sidenav-item-height;
+
+      .material-icons {
+        width: auto;
+        height: $sidenav-item-height;
+        line-height: $sidenav-item-height;
+        margin-right: 8px;
+      }
+    }
+
+    // user block
+    &-user {
+      padding: 20px;
+      background-color: $mtl-layout-default-usernav-bg;
+      color: $mtl-layout-default-usernav-text;
+
+      a {
+        display: inline-block;
+        padding: 0;
+      }
+
+      // account info
+      &-infos {
+        margin: 8px 0 0 !important;
+        display: block !important;
+        height: auto !important;
+        line-height: 18px !important;
+      }
+      &-name {
+        display: block;
+        font-weight: bold;
+        line-height: 18px;
+      }
+      &-mail {
+        display: block;
+        line-height: 18px;
+      }
+
+      // toggle icon
+      //&-toggle {}
+    }
+    &-divider {
+      padding: 10px 0;
+    }
+
+
+    .active a {
+      font-weight: 400;
+    }
+  }
+}

data/app/assets/stylesheets/mtl/layouts/_single.scss

@@ -0,0 +1,25 @@
+// single layout: centered content block, e.g.: logins
+.mtl-layout-single {
+  min-height: 100%;
+  background-color: $mtl-layout-single-bg;
+
+  &-header {
+    background-color: $mtl-layout-single-header-bg;
+    padding: 50px 20px;
+
+    img {
+      width: auto;
+      height: auto;
+      display: block;
+      max-width: 100%;
+      margin: 0 auto;
+    }
+  }
+
+  &-content {
+    margin-top: -38px;
+  }
+
+  // &-footer {}
+
+}

data/app/views/mtl/header.html.erb

@@ -0,0 +1,25 @@
+<header class="<%= mtl_class %>">
+  <nav>
+    <div class="nav-wrapper">
+      <%- if mtl_back  %>
+        <%= link_to mtl_back, class: 'mtl-layout-default-header-back left' do %>
+          <i class="material-icons">arrow_back</i>
+        <%- end %>
+      <%- elsif mtl_menu %>
+        <%= link_to "##{mtl_menu}", class: 'mtl-layout-default-header-toggle left hide-on-large-only', 'data-activates': mtl_menu, 'data-mtl-nav': 'side' do %>
+          <i class="material-icons">menu</i>
+        <%- end %>
+      <%- end %>
+
+      <%- if mtl_title %>
+      <h1 class="page-title">
+        <%= mtl_title %>
+      </h1>
+      <%- end %>
+
+      <%- if mtl_content %>
+        <%= mtl_content %>
+      <%- end %>
+    </div>
+  </nav>
+</header>

data/bin/coffeelint.rb

@@ -0,0 +1,16 @@
+#!/usr/bin/env ruby
+#
+# This file was generated by Bundler.
+#
+# The application 'coffeelint.rb' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("coffeelint", "coffeelint.rb")

data/lib/generators/mtl/install_generator.rb

@@ -0,0 +1,20 @@
+require 'rails'
+
+module Mtl
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+      source_root File.join File.dirname(__FILE__), 'templates'
+      class_option :simple_form, type: :boolean, default: true
+
+      # @!visibility private
+      def copy_stylesheets
+        template 'mtl.scss',        'app/assets/stylesheets/mtl.scss'
+        template '_color.scss',     'app/assets/stylesheets/mtl/_color.scss'
+        template '_variables.scss', 'app/assets/stylesheets/mtl/_variables.scss'
+
+        return unless options['simple_form']
+        template 'simple_form.rb', 'config/initializers/simple_form.rb'
+      end
+    end
+  end
+end

data/lib/generators/mtl/templates/_color.scss

@@ -0,0 +1,410 @@
+// Utility Color Classes
+
+//.success {
+//
+//}
+
+// Google Color Palette defined: http://www.google.com/design/spec/style/color.html
+
+
+$materialize-red: (
+  "base":       #e51c23,
+  "lighten-5":  #fdeaeb,
+  "lighten-4":  #f8c1c3,
+  "lighten-3":  #f3989b,
+  "lighten-2":  #ee6e73,
+  "lighten-1":  #ea454b,
+  "darken-1":   #d0181e,
+  "darken-2":   #b9151b,
+  "darken-3":   #a21318,
+  "darken-4":   #8b1014,
+);
+
+$red: (
+  "base":       #f44336,
+  "lighten-5":  #ffebee,
+  "lighten-4":  #ffcdd2,
+  "lighten-3":  #ef9a9a,
+  "lighten-2":  #e57373,
+  "lighten-1":  #ef5350,
+  "darken-1":   #e53935,
+  "darken-2":   #d32f2f,
+  "darken-3":   #c62828,
+  "darken-4":   #b71c1c,
+  "accent-1":    #ff8a80,
+  "accent-2":    #ff5252,
+  "accent-3":    #ff1744,
+  "accent-4":    #d50000
+);
+
+$pink: (
+  "base":       #e91e63,
+  "lighten-5":  #fce4ec,
+  "lighten-4":  #f8bbd0,
+  "lighten-3":  #f48fb1,
+  "lighten-2":  #f06292,
+  "lighten-1":  #ec407a,
+  "darken-1":   #d81b60,
+  "darken-2":   #c2185b,
+  "darken-3":   #ad1457,
+  "darken-4":   #880e4f,
+  "accent-1":    #ff80ab,
+  "accent-2":    #ff4081,
+  "accent-3":    #f50057,
+  "accent-4":    #c51162
+);
+
+$purple: (
+  "base":       #9c27b0,
+  "lighten-5":  #f3e5f5,
+  "lighten-4":  #e1bee7,
+  "lighten-3":  #ce93d8,
+  "lighten-2":  #ba68c8,
+  "lighten-1":  #ab47bc,
+  "darken-1":   #8e24aa,
+  "darken-2":   #7b1fa2,
+  "darken-3":   #6a1b9a,
+  "darken-4":   #4a148c,
+  "accent-1":    #ea80fc,
+  "accent-2":    #e040fb,
+  "accent-3":    #d500f9,
+  "accent-4":    #a0f
+);
+
+$deep-purple: (
+  "base":       #673ab7,
+  "lighten-5":  #ede7f6,
+  "lighten-4":  #d1c4e9,
+  "lighten-3":  #b39ddb,
+  "lighten-2":  #9575cd,
+  "lighten-1":  #7e57c2,
+  "darken-1":   #5e35b1,
+  "darken-2":   #512da8,
+  "darken-3":   #4527a0,
+  "darken-4":   #311b92,
+  "accent-1":    #b388ff,
+  "accent-2":    #7c4dff,
+  "accent-3":    #651fff,
+  "accent-4":    #6200ea
+);
+
+$indigo: (
+  "base":       #3f51b5,
+  "lighten-5":  #e8eaf6,
+  "lighten-4":  #c5cae9,
+  "lighten-3":  #9fa8da,
+  "lighten-2":  #7986cb,
+  "lighten-1":  #5c6bc0,
+  "darken-1":   #3949ab,
+  "darken-2":   #303f9f,
+  "darken-3":   #283593,
+  "darken-4":   #1a237e,
+  "accent-1":    #8c9eff,
+  "accent-2":    #536dfe,
+  "accent-3":    #3d5afe,
+  "accent-4":    #304ffe
+);
+
+$blue: (
+  "base":       #2196f3,
+  "lighten-5":  #e3f2fd,
+  "lighten-4":  #bbdefb,
+  "lighten-3":  #90caf9,
+  "lighten-2":  #64b5f6,
+  "lighten-1":  #42a5f5,
+  "darken-1":   #1e88e5,
+  "darken-2":   #1976d2,
+  "darken-3":   #1565c0,
+  "darken-4":   #0d47a1,
+  "accent-1":    #82b1ff,
+  "accent-2":    #448aff,
+  "accent-3":    #2979ff,
+  "accent-4":    #2962ff
+);
+
+$light-blue: (
+  "base":       #03a9f4,
+  "lighten-5":  #e1f5fe,
+  "lighten-4":  #b3e5fc,
+  "lighten-3":  #81d4fa,
+  "lighten-2":  #4fc3f7,
+  "lighten-1":  #29b6f6,
+  "darken-1":   #039be5,
+  "darken-2":   #0288d1,
+  "darken-3":   #0277bd,
+  "darken-4":   #01579b,
+  "accent-1":    #80d8ff,
+  "accent-2":    #40c4ff,
+  "accent-3":    #00b0ff,
+  "accent-4":    #0091ea
+);
+
+$cyan: (
+  "base":       #00bcd4,
+  "lighten-5":  #e0f7fa,
+  "lighten-4":  #b2ebf2,
+  "lighten-3":  #80deea,
+  "lighten-2":  #4dd0e1,
+  "lighten-1":  #26c6da,
+  "darken-1":   #00acc1,
+  "darken-2":   #0097a7,
+  "darken-3":   #00838f,
+  "darken-4":   #006064,
+  "accent-1":    #84ffff,
+  "accent-2":    #18ffff,
+  "accent-3":    #00e5ff,
+  "accent-4":    #00b8d4
+);
+
+$teal: (
+  "base":       #009688,
+  "lighten-5":  #e0f2f1,
+  "lighten-4":  #b2dfdb,
+  "lighten-3":  #80cbc4,
+  "lighten-2":  #4db6ac,
+  "lighten-1":  #26a69a,
+  "darken-1":   #00897b,
+  "darken-2":   #00796b,
+  "darken-3":   #00695c,
+  "darken-4":   #004d40,
+  "accent-1":    #a7ffeb,
+  "accent-2":    #64ffda,
+  "accent-3":    #1de9b6,
+  "accent-4":    #00bfa5
+);
+
+$green: (
+  "base":       #4caf50,
+  "lighten-5":  #e8f5e9,
+  "lighten-4":  #c8e6c9,
+  "lighten-3":  #a5d6a7,
+  "lighten-2":  #81c784,
+  "lighten-1":  #66bb6a,
+  "darken-1":   #43a047,
+  "darken-2":   #388e3c,
+  "darken-3":   #2e7d32,
+  "darken-4":   #1b5e20,
+  "accent-1":    #b9f6ca,
+  "accent-2":    #69f0ae,
+  "accent-3":    #00e676,
+  "accent-4":    #00c853
+);
+
+$light-green: (
+  "base":       #8bc34a,
+  "lighten-5":  #f1f8e9,
+  "lighten-4":  #dcedc8,
+  "lighten-3":  #c5e1a5,
+  "lighten-2":  #aed581,
+  "lighten-1":  #9ccc65,
+  "darken-1":   #7cb342,
+  "darken-2":   #689f38,
+  "darken-3":   #558b2f,
+  "darken-4":   #33691e,
+  "accent-1":    #ccff90,
+  "accent-2":    #b2ff59,
+  "accent-3":    #76ff03,
+  "accent-4":    #64dd17
+);
+
+$lime: (
+  "base":       #cddc39,
+  "lighten-5":  #f9fbe7,
+  "lighten-4":  #f0f4c3,
+  "lighten-3":  #e6ee9c,
+  "lighten-2":  #dce775,
+  "lighten-1":  #d4e157,
+  "darken-1":   #c0ca33,
+  "darken-2":   #afb42b,
+  "darken-3":   #9e9d24,
+  "darken-4":   #827717,
+  "accent-1":    #f4ff81,
+  "accent-2":    #eeff41,
+  "accent-3":    #c6ff00,
+  "accent-4":    #aeea00
+);
+
+$yellow: (
+  "base":       #ffeb3b,
+  "lighten-5":  #fffde7,
+  "lighten-4":  #fff9c4,
+  "lighten-3":  #fff59d,
+  "lighten-2":  #fff176,
+  "lighten-1":  #ffee58,
+  "darken-1":   #fdd835,
+  "darken-2":   #fbc02d,
+  "darken-3":   #f9a825,
+  "darken-4":   #f57f17,
+  "accent-1":    #ffff8d,
+  "accent-2":    #ff0,
+  "accent-3":    #ffea00,
+  "accent-4":    #ffd600
+);
+
+$amber: (
+  "base":       #ffc107,
+  "lighten-5":  #fff8e1,
+  "lighten-4":  #ffecb3,
+  "lighten-3":  #ffe082,
+  "lighten-2":  #ffd54f,
+  "lighten-1":  #ffca28,
+  "darken-1":   #ffb300,
+  "darken-2":   #ffa000,
+  "darken-3":   #ff8f00,
+  "darken-4":   #ff6f00,
+  "accent-1":    #ffe57f,
+  "accent-2":    #ffd740,
+  "accent-3":    #ffc400,
+  "accent-4":    #ffab00
+);
+
+$orange: (
+  "base":       #ff9800,
+  "lighten-5":  #fff3e0,
+  "lighten-4":  #ffe0b2,
+  "lighten-3":  #ffcc80,
+  "lighten-2":  #ffb74d,
+  "lighten-1":  #ffa726,
+  "darken-1":   #fb8c00,
+  "darken-2":   #f57c00,
+  "darken-3":   #ef6c00,
+  "darken-4":   #e65100,
+  "accent-1":    #ffd180,
+  "accent-2":    #ffab40,
+  "accent-3":    #ff9100,
+  "accent-4":    #ff6d00
+);
+
+$deep-orange: (
+  "base":       #ff5722,
+  "lighten-5":  #fbe9e7,
+  "lighten-4":  #ffccbc,
+  "lighten-3":  #ffab91,
+  "lighten-2":  #ff8a65,
+  "lighten-1":  #ff7043,
+  "darken-1":   #f4511e,
+  "darken-2":   #e64a19,
+  "darken-3":   #d84315,
+  "darken-4":   #bf360c,
+  "accent-1":    #ff9e80,
+  "accent-2":    #ff6e40,
+  "accent-3":    #ff3d00,
+  "accent-4":    #dd2c00
+);
+
+$brown: (
+  "base":       #795548,
+  "lighten-5":  #efebe9,
+  "lighten-4":  #d7ccc8,
+  "lighten-3":  #bcaaa4,
+  "lighten-2":  #a1887f,
+  "lighten-1":  #8d6e63,
+  "darken-1":   #6d4c41,
+  "darken-2":   #5d4037,
+  "darken-3":   #4e342e,
+  "darken-4":   #3e2723
+);
+
+$blue-grey: (
+  "base":       #607d8b,
+  "lighten-5":  #eceff1,
+  "lighten-4":  #cfd8dc,
+  "lighten-3":  #b0bec5,
+  "lighten-2":  #90a4ae,
+  "lighten-1":  #78909c,
+  "darken-1":   #546e7a,
+  "darken-2":   #455a64,
+  "darken-3":   #37474f,
+  "darken-4":   #263238
+);
+
+$grey: (
+  "base":       #9e9e9e,
+  "lighten-5":  #fafafa,
+  "lighten-4":  #f5f5f5,
+  "lighten-3":  #eee,
+  "lighten-2":  #e0e0e0,
+  "lighten-1":  #bdbdbd,
+  "darken-1":   #757575,
+  "darken-2":   #616161,
+  "darken-3":   #424242,
+  "darken-4":   #212121
+);
+
+$shades: (
+  "black":        #000,
+  "white":        #fff,
+  "transparent":  transparent
+);
+
+$colors: (
+  "materialize-red": $materialize-red,
+  "red": $red,
+  "pink": $pink,
+  "purple": $purple,
+  "deep-purple": $deep-purple,
+  "indigo": $indigo,
+  "blue": $blue,
+  "light-blue": $light-blue,
+  "cyan": $cyan,
+  "teal": $teal,
+  "green": $green,
+  "light-green": $light-green,
+  "lime": $lime,
+  "yellow": $yellow,
+  "amber": $amber,
+  "orange": $orange,
+  "deep-orange": $deep-orange,
+  "brown": $brown,
+  "blue-grey": $blue-grey,
+  "grey": $grey,
+  "shades": $shades
+);
+
+
+// Color Classes
+// scss-lint:disable NameFormat
+@each $color_name, $color in $colors {
+  @each $color_type, $color_value in $color {
+    @if $color_type == 'base' {
+      .#{$color_name} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text {
+        color: $color_value !important;
+      }
+    } @else {
+      .#{$color_name}.#{$color_type} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text.text-#{$color_type} {
+        color: $color_value !important;
+      }
+    }
+  }
+}
+
+// Shade classes
+@each $color, $color_value in $shades {
+  .#{$color} {
+    background-color: $color_value !important;
+  }
+  .#{$color}-text {
+    color: $color_value !important;
+  }
+}
+
+
+// usage: color("name_of_color", "type_of_color")
+// to avoid to repeating map-get($colors, ...)
+@function color($color, $type) {
+  @if map-has-key($colors, $color) {
+    $curr_color: map-get($colors, $color);
+    @if map-has-key($curr_color, $type) {
+      @return map-get($curr_color, $type);
+    }
+  }
+  @warn "Unknown `#{name}` in $colors.";
+  @return null;
+}
+// scss-lint:enable NameFormat