leather2 3.5.3

data/app/assets/stylesheets/leather/_scroll_panels.scss

@@ -0,0 +1,85 @@
+.scroll-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  .scroll-panel-header {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: $scroll-panel-header-height;
+    padding: 10px 20px;
+    background: #FFF;
+    border-bottom: 1px solid #F1F1F1;
+
+    .scroll-panel-title {
+      margin-top: 0;
+      margin-bottom: 0;
+      font-size: 18px;
+      line-height: 30px;
+    }
+
+    .btn.pull-left ~ .scroll-panel-title {
+      margin-left: 15px;
+      float: left;
+    }
+    
+    @media (max-width: $screen-xs-max) {
+      .btn.pull-left.visible-xs ~ .scroll-panel-title {
+        margin-left: 15px;
+      }
+    }
+    
+    @media (max-width: $screen-sm-max) {
+      .btn.pull-left.visible-xs.visible-sm ~ .scroll-panel-title {
+        margin-left: 15px;
+      }
+    }
+    
+    @media (min-width: $screen-sm-min) {
+      .btn.pull-left.visible-xs ~ .scroll-panel-title {
+        margin-left: 0;
+      }
+    }
+    
+    @media (min-width: $screen-md-min) {
+      .btn.pull-left.visible-xs.visible-sm ~ .scroll-panel-title {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .scroll-panel-body {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 20px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .scroll-panel-header ~ .scroll-panel-body {
+    top: $scroll-panel-header-height;
+  }
+
+  .scroll-panel-header.visible-xs ~ .scroll-panel-body,
+  .scroll-panel-header.visible-sm ~ .scroll-panel-body  {
+    top: 0;
+  }
+  
+  @media (max-width: $screen-xs-max) {
+    .scroll-panel-header.visible-xs ~ .scroll-panel-body {
+      top: $scroll-panel-header-height;
+    }
+  }
+  
+  @media (max-width: $screen-sm-max) {
+    .scroll-panel-header.visible-sm ~ .scroll-panel-body {
+      top: $scroll-panel-header-height;
+    }
+  }
+}

data/app/assets/stylesheets/leather/_toggle_columns.scss

@@ -0,0 +1,23 @@
+#left {
+  width: 40%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+#right {
+  width: 60%;
+  position: absolute;
+  top: 0;
+  left: 40%;
+  bottom: 0;
+}
+
+@media (max-width: $screen-xs-max) {
+  .full-width-xs {
+    width: 100% !important;
+    left: 0 !important;
+    right: 0 !important;
+  }
+}

data/app/assets/stylesheets/leather/_typography.scss

@@ -0,0 +1,12 @@
+.text-shadowed {
+  text-shadow: 1px 1px 2px $gray-dark;
+}
+.text-light {
+  font-weight: 200;
+}
+.text-lighter {
+  font-weight: lighter;
+}
+.blog-heading {
+  margin: 30px 0;
+}

data/app/assets/stylesheets/leather/_utilities.scss

@@ -0,0 +1,54 @@
+.abs-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover !important;
+}
+
+.vertical-center {
+  position: relative; 
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.bg-white { background:#FFF; }
+.bg-gray-light { background: $gray-light; }
+.bg-gray-lighter { background: $gray-lighter; }
+.bg-gray-lightest { background: $navbar-default-bg; }
+.bg-gray-radial-light {
+  background: #eeeeee;
+  background: -moz-radial-gradient(center, ellipse cover, #eeeeee 0%, #dddddd 100%) !important;
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)) !important;
+  background: -webkit-radial-gradient(center, ellipse cover, #eeeeee 0%, #dddddd 100%) !important;
+  background: -o-radial-gradient(center, ellipse cover, #eeeeee 0%, #dddddd 100%) !important;
+  background: -ms-radial-gradient(center, ellipse cover, #eeeeee 0%, #dddddd 100%) !important;
+  background: radial-gradient(ellipse at center, #eeeeee 0%, #dddddd 100%) !important;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=1);
+}
+.bg-gray-radial-dark {
+  background: #333333;
+  background: -moz-radial-gradient(center, ellipse cover, #3b3b3b 0%, #222222 100%) !important;
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #3b3b3b), color-stop(100%, #222222)) !important;
+  background: -webkit-radial-gradient(center, ellipse cover, #3b3b3b 0%, #222222 100%) !important;
+  background: -o-radial-gradient(center, ellipse cover, #3b3b3b 0%, #222222 100%) !important;
+  background: -ms-radial-gradient(center, ellipse cover, #3b3b3b 0%, #222222 100%) !important;
+  background: radial-gradient(ellipse at center, #3b3b3b 0%, #222222 100%) !important;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b3b3b', endColorstr='#222222', GradientType=1) !important;
+}
+
+.no-margin { margin: 0; }
+.no-padding { padding: 0; }
+.no-overflow { overflow: hidden; }
+.no-radius {
+  @include border-top-radius(0);
+  @include border-bottom-radius(0);
+}
+
+.absolute { position: absolute; }
+.relative {  position: relative; }
+.block { display: block; }
+.inline-block { display: inline-block; }

data/app/assets/stylesheets/leather/_variables.scss

@@ -0,0 +1,8 @@
+$devise-bg-gradient-start:        #5D76A5 !default;
+$devise-bg-gradient-end:          #425472 !default;
+$devise-box-border-color:         #006699 !default;
+
+$navbar-fixed-width:              300px !default;
+$navbar-fixed-collapsed-width:    75px !default;
+$scroll-panel-header-height:      $navbar-height !default;
+$navbar-tranparent-link-color:    #FFFFFF !default;

data/app/assets/stylesheets/leather/components/_cta.scss

@@ -0,0 +1,13 @@
+.cta {
+  padding: 40px 0;
+
+  h2 {
+    margin-bottom: 20px;
+  }
+
+  &.cta-inline {
+    h2 {
+      margin: 6px 0 0 0;
+    }
+  }
+}

data/app/assets/stylesheets/leather/components/_features.scss

@@ -0,0 +1,87 @@
+@mixin feature-block-variant($color, $bg) {
+  background: lighten($bg, 7%);
+  border-right: 1px solid lighten($bg, 10%);
+  color: $color;
+
+  &:first-child {
+    background: $bg;
+  }
+
+  &:last-child {
+    background: lighten($bg, 12%);
+  }
+
+  &:hover, &:focus {
+    color: $color;
+  }
+
+  .detail-line:before {
+    border-color: $color;
+  }
+}
+
+.features {
+  padding-bottom: 40px;
+
+  .feature {
+    margin-bottom: 40px;
+  }
+}
+
+.detail-line {
+  margin: 0 0 24px 0;
+  
+  &:before {
+    content: "";
+    width: 30px;
+    border-bottom: 1px solid #333;
+    margin-bottom: 24px;
+    display: block;
+  }
+}
+
+.feature-block {
+  padding: 60px 30px;
+  transition: all 0.6s ease;
+  -webkit-transition: all 0.6s ease;
+  -moz-transition: all 0.6s ease;
+
+  p {
+    display: none;
+  }
+
+  .detail-line:before {
+    display: inline-block;
+    margin: 10px 0 0 0;
+  }
+
+  &:hover {
+    p {
+      display: block;
+    }
+  }
+  
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+
+  &.feature-block-primary {
+    @include feature-block-variant($btn-primary-color, $btn-primary-bg);
+  }
+
+  &.feature-block-info {
+    @include feature-block-variant($btn-info-color, $btn-info-bg);
+  }
+
+  &.feature-block-success {
+    @include feature-block-variant($btn-success-color, $btn-success-bg);
+  }
+
+  &.feature-block-warning {
+    @include feature-block-variant($btn-warning-color, $btn-warning-bg);
+  }
+
+  &.feature-block-danger {
+    @include feature-block-variant($btn-danger-color, $btn-danger-bg);
+  }
+}

data/app/assets/stylesheets/leather/components/_flex_boxes.scss

@@ -0,0 +1,37 @@
+.flex-grid {
+  .flex-row {
+    display: flex;
+
+    .flex-cell {
+      flex: 1;
+    }
+
+    .flex-cell-wide {
+      flex: 0 0 percentage(2/3);
+    }
+  }
+
+  &.flex-grid-bordered {
+    .flex-row {
+      border-bottom: 1px solid #ccc;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .flex-cell {
+        border-left: 1px solid #ccc;
+
+        &:first-child {
+          border-left: none;
+        }
+      }
+    }
+  }
+
+  &.flex-grid-padded {
+    .flex-cell {
+      padding: 20px;
+    }
+  }
+}

data/app/assets/stylesheets/leather/components/_image_block.scss

@@ -0,0 +1,55 @@
+.image-block {
+  padding: 0;
+
+  .image-block-copy {
+    padding: 80px 0;
+    min-height: 400px;
+
+    p {
+      margin: 30px 0;
+    }
+  }
+
+  .image {
+    position: absolute; 
+    top: 0; 
+    height: 100%; 
+  }
+
+  .image-right {
+    right: 0;
+  }
+
+  .image-left {
+    left: 0;
+  }
+
+  &.image-block-bottom {
+    .image {
+      bottom: 0;
+      top: 80px;
+    }
+  }
+}
+
+@media(max-width: $screen-xs-max) {
+  .image-block {
+
+    .image-block-copy {
+      padding: 40px 0;
+      min-height: 300px;
+    }
+
+    .image {
+      position: relative;
+      height: 300px;
+      width: 100%;
+    }
+
+    &.image-block-bottom {
+      .image {
+        top: 0;
+      }
+    }
+  }
+}

data/app/controllers/leather/application_controller.rb

@@ -0,0 +1,13 @@
+module Leather
+  class ApplicationController < ::ApplicationController
+    layout 'application'
+
+    def ui_kit
+      set_tab :ui_kit
+    end
+
+    def components
+      set_tab :components
+    end
+  end
+end

data/app/controllers/leather/layouts_controller.rb

@@ -0,0 +1,15 @@
+module Leather
+  class LayoutsController < ApplicationController
+    def admin
+      set_tab :layouts
+    end
+
+    def two_column
+      set_tab :layouts
+    end
+
+    def three_column
+      set_tab :layouts
+    end
+  end
+end

data/app/helpers/leather/application_helper.rb

@@ -0,0 +1,28 @@
+module Leather
+  module ApplicationHelper
+    def method_missing method, *args, &block
+      puts "LOOKING FOR ROUTES #{method}"
+      if method.to_s.end_with?('_path') or method.to_s.end_with?('_url')
+        if main_app.respond_to?(method)
+          main_app.send(method, *args)
+        else
+          super
+        end
+      else
+        super
+      end
+    end
+
+    def respond_to?(method)
+      if method.to_s.end_with?('_path') or method.to_s.end_with?('_url')
+        if main_app.respond_to?(method)
+          true
+        else
+          super
+        end
+      else
+        super
+      end
+    end
+  end
+end