on-standards-rails 1.5.1.1 → 2.0.0.pre.alpha

data/vendor/assets/stylesheets/on-standards/_off-canvas.scss

@@ -0,0 +1,201 @@
+// .off-canvas-open     - body class for killing the scroll
+// .off-canvas          - full container locked to side of screen including close button space
+// .off-canvas-pane     - actual pane with background 
+// .off-canvas-content  - inner content for off canvas
+
+.off-canvas-open {
+  overflow: hidden;
+  //transform: scale(0.9);
+}
+
+.off-canvas {
+  position: fixed;
+  top: 0; 
+  bottom: 0; 
+  z-index: $zindex-off-canvas;
+  width: 100%;
+  outline: 0;
+  -webkit-overflow-scrolling: touch;
+  overflow: hidden;
+  transition: $transition-all-bezier;
+
+  &.small {
+    @include media-breakpoint-up(sm) {
+      width: $off-canvas-small + 48;
+      &.off-canvas-left {
+        left: (-($off-canvas-small + 48));
+      }
+
+      &.off-canvas-right {
+        right: (-($off-canvas-small  + 48));
+      }
+
+      > .off-canvas-pane {
+        width: $off-canvas-small;
+      }
+    }
+  }
+
+  &.medium {
+    @include media-breakpoint-up(sm) {
+      width: $off-canvas-medium + 48;
+      &.off-canvas-left {
+        left: (-($off-canvas-medium + 48));
+      }
+
+      &.off-canvas-right {
+        right: (-($off-canvas-medium  + 48));
+      }
+
+      > .off-canvas-pane {
+        width: $off-canvas-medium;
+      }
+    }
+  }
+
+  &.large {
+    @include media-breakpoint-up(md) {
+      width: $off-canvas-large + 48;
+      &.off-canvas-left {
+        left: (-($off-canvas-large + 48));
+      }
+
+      &.off-canvas-right {
+        right: (-($off-canvas-large + 48));
+      }
+
+      > .off-canvas-pane {
+        width: $off-canvas-large;
+      }
+    }
+  }
+
+  &.in {
+    &.off-canvas-left {
+      left: 0;
+    }
+
+    &.off-canvas-right {
+      right: 0;
+    }
+  }
+}
+
+.off-canvas-pane {
+  position: relative;
+  background-color: $off-canvas-bg;
+  width: 100%;
+  height: 100%;
+  .off-canvas-right & {
+    float: right;
+    @include clearfix;
+  }
+
+  &[class*="bg"] {
+    .off-canvas-header, .off-canvas-footer {
+      border: 0;
+      background-color: inherit;  
+    }
+  }
+}
+
+.off-canvas-content {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  background-color: inherit;
+
+  @include no-flexbox {
+    display: block;
+    position: static;
+    overflow-x: hidden; 
+    overflow-y: auto;
+    max-height: 100%;
+  }
+}
+
+.off-canvas-header {
+  position: relative;
+  height: auto;
+  top: 0;
+  width: 100%;
+  padding: $off-canvas-inner-padding;
+  background-color: $gray-5;
+  @include clearfix;
+  &[class*="bg"] {
+    border: 0;
+  }
+
+  @include no-flexbox {
+    position: static;
+    height: auto;
+  }
+}
+
+.off-canvas-title {
+  margin: 0;
+  line-height: $line-height;
+}
+
+.off-canvas-body {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: $off-canvas-inner-padding;
+  max-height: 100%;
+  height: 100%;
+  flex:1;
+
+  @include no-flexbox {
+    position: static;
+    overflow: visible;
+    min-height: 100%;
+    height: auto;
+    max-height: none;
+  }
+
+}
+
+.off-canvas-footer {
+  width: 100%;
+  height: auto;
+  padding: $off-canvas-inner-padding;
+  background-color: $gray-5;
+  border-bottom: 1px solid $gray-10;
+  @include clearfix;
+  &[class*="bg"] {
+    border: 0;
+  }
+
+  @include no-flexbox {
+    display: block;
+    position: static;
+    height: auto;
+  }
+}
+
+.off-canvas-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-overlay;
+  background-color: $overlay;
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.in { opacity: 1; }
+}
+
+.off-canvas-left {
+  padding-right: 48px; 
+  left: (-$off-canvas-small);
+}
+
+.off-canvas-right {
+  padding-left: 48px;
+  right: (-$off-canvas-small);
+}

data/vendor/assets/stylesheets/on-standards/_pager.scss

@@ -0,0 +1,57 @@
+.pager {
+  padding-left: 0;
+  margin-top: $spacer-y;
+  margin-bottom: $spacer-y;
+  text-align: center;
+  list-style: none;
+  @include clearfix();
+
+  li {
+    display: inline;
+
+    > a,
+    > span {
+      display: inline-block;
+      padding: 5px 14px;
+      background-color: $pager-bg;
+      border: $pager-border-width solid $pager-border-color;
+      border-radius: $pager-border-radius;
+    }
+
+    > a {
+      @include hover-focus {
+        text-decoration: none;
+        background-color: $pager-hover-bg;
+      }
+    }
+  }
+
+  .disabled {
+    > a {
+      @include plain-hover-focus {
+        color: $pager-disabled-color;
+        cursor: $cursor-disabled;
+        background-color: $pager-bg;
+      }
+    }
+    > span {
+      color: $pager-disabled-color;
+      cursor: $cursor-disabled;
+      background-color: $pager-bg;
+    }
+  }
+}
+
+.pager-next {
+  > a,
+  > span {
+    float: right;
+  }
+}
+
+.pager-prev {
+  > a,
+  > span {
+    float: left;
+  }
+}

data/vendor/assets/stylesheets/on-standards/_pagination.scss

@@ -0,0 +1,73 @@
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin-top: $spacer-y;
+  margin-bottom: $spacer-y;
+  @include border-radius();
+}
+
+.page-item {
+  display: inline; // Remove list-style and block-level defaults
+
+  &:first-child {
+    .page-link {
+      margin-left: 0;
+      @include border-left-radius($border-radius);
+    }
+  }
+  &:last-child {
+    .page-link {
+      @include border-right-radius($border-radius);
+    }
+  }
+
+  &.active .page-link {
+    @include plain-hover-focus {
+      z-index: 2;
+      color: $pagination-active-color;
+      cursor: default;
+      background-color: $pagination-active-bg;
+      border-color: $pagination-active-border;
+    }
+  }
+
+  &.disabled .page-link {
+    @include plain-hover-focus {
+      color: $pagination-disabled-color;
+      cursor: $cursor-disabled;
+      background-color: $pagination-disabled-bg;
+      border-color: $pagination-disabled-border;
+    }
+  }
+}
+
+.page-link {
+  position: relative;
+  float: left; // Collapse white-space
+  padding: $pagination-padding-y $pagination-padding-x;
+  margin-left: -1px;
+  line-height: $line-height;
+  color: $pagination-color;
+  text-decoration: none;
+  background-color: $pagination-bg;
+  border: $pagination-border-width solid $pagination-border-color;
+
+  @include hover-focus {
+    color: $pagination-hover-color;
+    background-color: $pagination-hover-bg;
+    border-color: $pagination-hover-border;
+  }
+}
+
+
+//
+// Sizing
+//
+
+.pagination-lg {
+  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
+}
+
+.pagination-sm {
+  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
+}

data/vendor/assets/stylesheets/on-standards/_popover.scss

@@ -0,0 +1,140 @@
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $zindex-popover;
+  display: block;
+  max-width: $popover-max-width;
+  padding: 1px;
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  font-size: $font-size-sm;
+  background-color: $popover-bg;
+  background-clip: padding-box;
+  border: $popover-border-width solid $popover-border-color;
+  @include border-radius($border-radius-lg);
+  @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+
+  // Popover directions
+
+  &.popover-top,
+  &.bs-tether-element-attached-bottom {
+    margin-top: -$popover-arrow-width;
+
+    .popover-arrow {
+      bottom: -$popover-arrow-outer-width;
+      left: 50%;
+      margin-left: -$popover-arrow-outer-width;
+      border-top-color: $popover-arrow-outer-color;
+      border-bottom-width: 0;
+      &::after {
+        bottom: 1px;
+        margin-left: -$popover-arrow-width;
+        content: "";
+        border-top-color: $popover-arrow-color;
+        border-bottom-width: 0;
+      }
+    }
+  }
+
+  &.popover-right,
+  &.bs-tether-element-attached-left {
+    margin-left: $popover-arrow-width;
+
+    .popover-arrow {
+      top: 50%;
+      left: -$popover-arrow-outer-width;
+      margin-top: -$popover-arrow-outer-width;
+      border-right-color: $popover-arrow-outer-color;
+      border-left-width: 0;
+      &::after {
+        bottom: -$popover-arrow-width;
+        left: 1px;
+        content: "";
+        border-right-color: $popover-arrow-color;
+        border-left-width: 0;
+      }
+    }
+  }
+
+  &.popover-bottom,
+  &.bs-tether-element-attached-top {
+    margin-top: $popover-arrow-width;
+
+    .popover-arrow {
+      top: -$popover-arrow-outer-width;
+      left: 50%;
+      margin-left: -$popover-arrow-outer-width;
+      border-top-width: 0;
+      border-bottom-color: $popover-arrow-outer-color;
+      &::after {
+        top: 1px;
+        margin-left: -$popover-arrow-width;
+        content: "";
+        border-top-width: 0;
+        border-bottom-color: $popover-arrow-color;
+      }
+    }
+  }
+
+  &.popover-left,
+  &.bs-tether-element-attached-right {
+    margin-left: -$popover-arrow-width;
+
+    .popover-arrow {
+      top: 50%;
+      right: -$popover-arrow-outer-width;
+      margin-top: -$popover-arrow-outer-width;
+      border-right-width: 0;
+      border-left-color: $popover-arrow-outer-color;
+      &::after {
+        right: 1px;
+        bottom: -$popover-arrow-width;
+        content: "";
+        border-right-width: 0;
+        border-left-color: $popover-arrow-color;
+      }
+    }
+  }
+}
+
+
+// Offset the popover to account for the popover arrow
+.popover-title {
+  padding: 8px 14px;
+  margin: 0; // reset heading margin
+  font-size: $font-size-base;
+  background-color: $popover-title-bg;
+  border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
+  @include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
+}
+
+.popover-content {
+  padding: 9px 14px;
+}
+
+
+// Arrows
+//
+// .popover-arrow is outer, .popover-arrow::after is inner
+
+.popover-arrow {
+  &,
+  &::after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+.popover-arrow {
+  border-width: $popover-arrow-outer-width;
+}
+.popover-arrow::after {
+  content: "";
+  border-width: $popover-arrow-width;
+}