leather 0.2.29 → 3.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7f6cb28935a1291cc46756cd8cfa1441b2b8a730
-  data.tar.gz: e71e8c8b383baaeacf94e310075dd57479bdb383
+  metadata.gz: f3ed6090e33c123c3d73fd085a642cf953e4a7a7
+  data.tar.gz: d302399a8ea2ee0ac4238f0b411412009c17b5c7
 SHA512:
-  metadata.gz: dd3af400e12b10998330621e4d418e9aa6ec9e1703e9a533915451b84aed3c5317f304c624142bbd07cb01d5bdadd01f837d1709073f1095ca6c632cb75d30d1
-  data.tar.gz: 90f3d9e4b0fde5b2ed02922593b92b0523f1fa826e75ae7e1b83d04efde253ac69b4aaddf07b22a131fa1613a3924f659a6c0b9640abd7a0aa66d6d7fb08d8c5
+  metadata.gz: 9ff415597494cf86f56268640a8f5cce58740f7dbc167212c25377adbb5922af1ffd9e4f9c5d2cd5c12fa2df9baf6470efb14fbf03c2eb81a766fc566ce36e40
+  data.tar.gz: 0859751f6033519b59bfcba01bc71551e58c2cdadeefb7c9977b26b8984ad0b066bceb89897b7e21efa16e310ed88f8708f5e3903ceaab72aa35eca1944fbf5a

data/app/assets/javascripts/leather/off_canvas.js.coffee

@@ -1,47 +1,16 @@
 $ ->
-  if $(".off-canvas").length > 0
-    offCanvas.init()
-
-offCanvas =
-  init: ->
-    @setupDocument()
-    @bindEvents()
-
-  setupDocument: ->
-    $('body').wrapInner("<div id='off-canvas-wrapper' />")
-    $(".off-canvas, .fixed").each ->
-      $("#off-canvas-wrapper").before(this)
-
-  bindEvents: ->
-    $(document).on 'click', '[data-toggle="off-canvas"]', (e) ->
-      if !e.handled
-        e.handled = offCanvas.toggle($(this), e)
-
-    $(document).on 'click touchstart', '.off-canvas-show-left, .off-canvas-show-right', (e) ->
-      clicked = $(e.target)
-      if !e.handled && (offCanvas.isBody(clicked)|| offCanvas.isClose(clicked))
-        e.handled = offCanvas.close(e)
-
-  isBody: (clicked) ->
-    (!clicked.hasClass("off-canvas") && clicked.parents(".off-canvas").length == 0)
-
-  isClose: (clicked) ->
-    (clicked.parents(".off-canvas").length && clicked.hasClass("close"))
+  $("body").on "click", "[data-toggle='off-canvas']", (e) ->
+    e.preventDefault()
+    if $("#off-canvas-overlay").length == 0
+      $("#main").before("<div id='off-canvas-overlay'></div>")
+    target = $(this).data("target")
+    $(target).toggleClass("in")
 
-  toggle: (target, e) ->
-    e.stopPropagation()
+  $("body").on "click", "#off-canvas-overlay", (e) ->
     e.preventDefault()
-    side = target.data('side')
-    if side == "left"
-      $('body').removeClass "off-canvas-show-right"
-    if side == "right"
-      $('body').removeClass "off-canvas-show-left"
-    $('body').toggleClass("off-canvas-show-#{side}")
-    true
+    $(".off-canvas.in").removeClass("in")
 
-  close: (e) ->
+  $("body").on "click", "[data-toggle='columns']", (e) ->
     e.preventDefault()
-    e.stopPropagation()
-    $('body').removeClass("off-canvas-show-right")
-    $('body').removeClass("off-canvas-show-left")
-    true
+    $('#left').toggleClass('hidden-xs')
+    $('#right').toggleClass('hidden-xs')

data/app/assets/stylesheets/docs.css.scss

@@ -0,0 +1,3 @@
+.hero24 {
+  background: image-url('leather/hero24.jpg') 50% 50%;
+}

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

@@ -1,4 +1,22 @@
 @import "leather/variables.css.scss";
+@import "leather/buttons";
 @import "leather/devise";
-@import "leather/nav";
-@import "leather/off_canvas";
+@import "leather/grid";
+@import "leather/list_groups";
+@import "leather/nav_menus";
+@import "leather/off_canvas";
+@import "leather/scroll_panels";
+@import "leather/toggle_columns";
+@import "leather/typography";
+@import "leather/utilities";
+
+@import "leather/components/cta";
+@import "leather/components/features";
+@import "leather/components/flex_boxes";
+@import "leather/components/image_block";
+
+@import "docs";
+
+html, body {
+  height: 100%;
+}

data/app/assets/stylesheets/leather/_buttons.css.scss

@@ -0,0 +1,31 @@
+@mixin btn-outline-variant($color, $bg) {
+  color: $bg;
+
+  &:hover {
+    color: $color;
+  }
+}
+
+.btn-outline {
+  background-color: transparent;
+
+  &.btn-primary {
+    @include btn-outline-variant($btn-primary-color, $btn-primary-bg);
+  }
+
+  &.btn-info {
+    @include btn-outline-variant($btn-info-color, $btn-info-bg);
+  }
+
+  &.btn-success {
+    @include btn-outline-variant($btn-success-color, $btn-success-bg);
+  }
+
+  &.btn-warning {
+    @include btn-outline-variant($btn-warning-color, $btn-warning-bg);
+  }
+
+  &.btn-danger {
+    @include btn-outline-variant($btn-danger-color, $btn-danger-bg);
+  }
+}

data/app/assets/stylesheets/leather/_grid.css.scss

@@ -0,0 +1,19 @@
+.container-lg {
+  max-width: 1580px;
+  margin: 0 auto;
+  position: relative;
+}
+
+section {
+  padding: 80px 0 80px 0;
+}
+
+.row.no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+}
+.row.no-gutters > [class^="col-"],
+.row.no-gutters > [class*=" col-"] {
+  padding-right: 0;
+  padding-left: 0;
+}

data/app/assets/stylesheets/leather/_list_groups.css.scss

@@ -0,0 +1,33 @@
+.list-group-button-links {
+
+  .list-group-item {
+    padding: 0;
+
+    .list-group-actions {
+      display: none;
+      position: absolute; 
+      top: 50%; 
+      right: 15px; 
+      margin-top: -11px;
+    }
+
+    &:hover {
+      .list-group-actions {
+        display: block;
+      }
+    }
+
+    .list-group-link {
+      display: block; 
+      padding: 10px 15px;
+      color: $list-group-link-color;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        color: $list-group-link-hover-color;
+        background-color: $list-group-hover-bg;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/leather/_nav_menus.css.scss

@@ -0,0 +1,125 @@
+.navbar-static-top ~ #main {
+  top: $navbar-height !important;
+}
+
+.navbar-static-top ~ .nav-menu {
+  top: $navbar-height;
+}
+
+.nav-menu {
+  width: $navbar-fixed-width;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  ~ #main {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .nav-menu-header {
+
+    .nav-menu-brand {
+      display: block;
+      padding: 10px 15px;
+      text-decoration: none;
+      font-size: 18px;
+    }
+  }
+
+  &.nav-menu-fixed-left {
+    right: auto;
+    left: 0;
+
+    ~ #main {
+      right: 0;
+      left: $navbar-fixed-width;
+    }
+  }
+
+  &.nav-menu-fixed-right {
+    left: auto;
+    right: 0;
+
+    ~ #main {
+      left: 0;
+      right: $navbar-fixed-width;
+    }
+  }
+
+  &.nav-menu-default {
+    background: $navbar-default-bg;
+    color: $navbar-default-color;
+
+    .nav-menu-header {
+      .nav-menu-brand {
+        color: $navbar-default-brand-color;
+
+        &:hover {
+          color: $navbar-default-brand-hover-color;
+          background-color: $navbar-default-brand-hover-bg;
+        }
+      }
+    }
+
+    .nav-menu-nav {
+      li {
+        a {
+          color: $navbar-default-link-color;
+
+          &:hover {
+            color: $navbar-default-link-hover-color;
+            background-color: $navbar-default-link-hover-bg;
+          }
+        }
+
+        &.active {
+          a {
+            color: $navbar-default-link-active-color;
+            background-color: $navbar-default-link-active-bg;
+          }
+        }
+      }
+    }
+  }
+
+  &.nav-menu-inverse {
+    background: $navbar-inverse-bg;
+    color: $navbar-inverse-color;
+
+    .nav-menu-header {
+      .nav-menu-brand {
+        color: $navbar-inverse-brand-color;
+
+        &:hover {
+          color: $navbar-inverse-brand-hover-color;
+          background-color: $navbar-inverse-brand-hover-bg;
+        }
+      }
+    }
+
+    .nav-menu-nav {
+      li {
+        a {
+          color: $navbar-inverse-link-color;
+
+          &:hover {
+            color: $navbar-inverse-link-hover-color;
+            background-color: $navbar-inverse-link-hover-bg;
+          }
+        }
+
+        &.active {
+          a {
+            color: $navbar-inverse-link-active-color;
+            background-color: $navbar-inverse-link-active-bg;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/leather/_off_canvas.css.scss

@@ -1,76 +1,109 @@
-.off-canvas {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 10000;
-  width: $off-canvas-width;
-  background: $off-canvas-bg-color;
-  color: $off-canvas-color;
-  &.off-canvas-right {
-    right: -$off-canvas-width;
-    border-left: 1px solid $off-canvas-border;
-  }
-  &.off-canvas-left {
-    left: -$off-canvas-width;
-    border-right: 1px solid $off-canvas-border;
+@mixin off-canvas {
+  top: 0 !important;
+  @include transition(all 0.3s);
+  z-index: $zindex-modal;
+
+  ~ #off-canvas-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    visibility: hidden;
+    background-color: $modal-backdrop-bg;
+    z-index: $zindex-modal - 1;
+    @include opacity(0);
+    @include transition(all 0.3s);
   }
-  &.off-canvas-inverse {
-    background: $off-canvas-inverse-bg;
-    color: $off-canvas-inverse-color;
-    &.off-canvas-right {
-      border-color: $off-canvas-inverse-border;
-    }
-    &.off-canvas-left {
-      border-color: $off-canvas-inverse-border;
-    }
 
-    .brand {
-      color: $off-canvas-inverse-brand-color;
+  &.in {
+    ~ #off-canvas-overlay {
+      visibility: visible;
+      @include opacity($modal-backdrop-opacity);
     }
+  }
+}
 
-    .close {
-      color: $off-canvas-inverse-brand-color;
-      opacity: 0.8;
-    }
+@mixin off-canvas-left {
+  left: -100% !important;
+  right: auto !important;
+
+  ~ #main {
+    left: 0 !important;
+    right: 0 !important;
+  }
+
+  &.in {
+    left: 0 !important;
   }
+}
 
-  .brand {
-    padding: 15px;
-    font-size: 18px;
-    line-height: 20px;
-    color: $navbar-default-brand-color;
+@mixin off-canvas-right {
+  right: -100% !important;
+  left: auto !important;
 
-    .close {
-      position: relative;
-      top: -3px;
-    }
+  ~ #main {
+    left: 0 !important;
+    right: 0 !important;
+  }
+
+  &.in {
+    right: 0 !important;
   }
 }
 
-.off-canvas, .fixed, #off-canvas-wrapper {
-  transition: all .2s ease;
+.off-canvas-left {
+  @include off-canvas;
+  @include off-canvas-left;
 }
 
-.fixed, #off-canvas-wrapper {
-  transform: translate3d(0,0,0);
+@media (max-width: $screen-xs-max) {
+  .off-canvas-left-xs {
+    @include off-canvas;
+    @include off-canvas-left;
+  }
 }
-  
-.off-canvas-show-right {
-  overflow: hidden;
-  .off-canvas-right {
-    right: 0px;
+@media (max-width: $screen-sm-max) {
+  .off-canvas-left-sm {
+    @include off-canvas;
+    @include off-canvas-left;
   }
-  .fixed, #off-canvas-wrapper {
-    transform: translate3d(-$off-canvas-width, 0, 0);
+}
+@media (max-width: $screen-md-max) {
+  .off-canvas-left-md {
+    @include off-canvas;
+    @include off-canvas-left;
   }
 }
+.off-canvas-left-lg {
+  @include off-canvas;
+  @include off-canvas-left;
+}
 
-.off-canvas-show-left {
-  overflow: hidden;
-  .off-canvas-left {
-    left: 0px;
+.off-canvas-right {
+  @include off-canvas;
+  @include off-canvas-right;
+}
+
+@media (max-width: $screen-xs-max) {
+  .off-canvas-right-xs {
+    @include off-canvas;
+    @include off-canvas-right;
   }
-  .fixed, #off-canvas-wrapper {
-    transform: translate3d($off-canvas-width, 0, 0);
+}
+@media (max-width: $screen-sm-max) {
+  .off-canvas-right-sm {
+    @include off-canvas;
+    @include off-canvas-right;
   }
+}
+@media (max-width: $screen-md-max) {
+  .off-canvas-right-md {
+    @include off-canvas;
+    @include off-canvas-right;
+  }
+}
+.off-canvas-right-lg {
+  @include off-canvas;
+  @include off-canvas-right;
 }