foundation-rails 5.0.1.0

data/vendor/assets/stylesheets/foundation/components/_orbit.scss

@@ -0,0 +1,353 @@
+@import "global";
+
+// @variables
+//
+$include-html-orbit-classes: $include-html-classes !default;
+
+// We use these to control the caption styles
+$orbit-container-bg: none !default;
+$orbit-caption-bg: rgba(51,51,51, 0.8) !default;
+$orbit-caption-font-color: #fff !default;
+$orbit-caption-font-size: rem-calc(14) !default;
+$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
+$orbit-caption-padding: rem-calc(10,14) !default;
+$orbit-caption-height: auto !default;
+
+// We use these to control the left/right nav styles
+$orbit-nav-bg: none !default;
+$orbit-nav-bg-hover: rgba(0,0,0,0.3) !default;
+$orbit-nav-arrow-color: #fff !default;
+$orbit-nav-arrow-color-hover: #fff !default;
+
+// We use these to control the timer styles
+$orbit-timer-bg: rgba(255,255,255,0.3) !default;
+$orbit-timer-show-progress-bar: true !default;
+
+// We use these to control the bullet nav styles
+$orbit-bullet-nav-color: #ccc !default;
+$orbit-bullet-nav-color-active: #999 !default;
+$orbit-bullet-radius: rem-calc(9) !default;
+
+// We use these to controls the style of slide numbers
+$orbit-slide-number-bg: rgba(0,0,0,0) !default;
+$orbit-slide-number-font-color: #fff !default;
+$orbit-slide-number-padding: rem-calc(5) !default;
+
+// Graceful Loading Wrapper and preloader
+$wrapper-class: "slideshow-wrapper" !default;
+$preloader-class: "preloader" !default;
+
+@include exports("orbit") {
+  @if $include-html-orbit-classes {
+
+    @if $experimental {
+      @-webkit-keyframes rotate {
+        from { -webkit-transform: rotate(0deg); }
+        to { -webkit-transform: rotate(360deg); }
+      }
+      @-moz-keyframes rotate {
+        from { -moz-transform: rotate(0deg); }
+        to { -moz-transform: rotate(360deg); }
+      }
+      @-o-keyframes rotate {
+        from { -o-transform: rotate(0deg); }
+        to { -o-transform: rotate(360deg); }
+      }
+    }
+    @keyframes rotate {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    /* Orbit Graceful Loading */
+    .#{$wrapper-class} {
+      position: relative;
+
+      ul {
+        // Prevent bullets showing before .orbit-container is loaded
+        list-style-type: none;
+        margin: 0;
+
+        // Hide all list items
+        li,
+        li .orbit-caption { display: none; }
+
+        // ...except for the first one
+        li:first-child { display: block; }
+      }
+
+      .orbit-container { background-color: transparent;
+
+        // Show images when .orbit-container is loaded
+        li { display: block;
+
+          .orbit-caption { display: block; }
+        }
+      }
+    }
+
+    // Orbit preloader
+    .#{$preloader-class} {
+      display: block;
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -20px;
+      margin-left: -20px;
+      border: solid 3px;
+      border-color: #555 #fff;
+      @include radius(1000px);
+      @if $experimental {
+        -webkit-animation-name: rotate;
+        -webkit-animation-duration: 1.5s;
+        -webkit-animation-iteration-count: infinite;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-name: rotate;
+        -moz-animation-duration: 1.5s;
+        -moz-animation-iteration-count: infinite;
+        -moz-animation-timing-function: linear;
+        -o-animation-name: rotate;
+        -o-animation-duration: 1.5s;
+        -o-animation-iteration-count: infinite;
+        -o-animation-timing-function: linear;
+      }
+      animation-name: rotate;
+      animation-duration: 1.5s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
+
+    .orbit-container {
+      overflow: hidden;
+      width: 100%;
+      position: relative;
+      background: $orbit-container-bg;
+
+      .orbit-slides-container {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        position: relative;
+
+        img { display: block; max-width: 100%; }
+
+        &>* {
+          position: absolute;
+          top: 0;
+          width: 100%;
+          @if $text-direction == rtl {
+            margin-right: 100%;
+          }
+          @else {
+            margin-left: 100%;
+          }
+
+          &:first-child {
+            @if $text-direction == rtl {
+            margin-right: 0%;
+            }
+            @else {
+            margin-left: 0%;
+            }
+          }
+
+          .orbit-caption {
+            @if $orbit-caption-position == "bottom" {
+              position: absolute;
+              bottom: 0;
+            } @else if $orbit-caption-position == "under" {
+              position: relative;
+            }
+
+            background-color: $orbit-caption-bg;
+            color: $orbit-caption-font-color;
+            width: 100%;
+            padding: 10px 14px;
+            font-size: rem-calc(14);
+          }
+        }
+      }
+
+      .orbit-slide-number {
+        position: absolute;
+        top: 10px;
+        #{$default-float}: 10px;
+        font-size: 12px;
+        span { font-weight: 700; padding: $orbit-slide-number-padding;}
+        color: $orbit-slide-number-font-color;
+        background: $orbit-slide-number-bg;
+        z-index: 10;
+      }
+
+      .orbit-timer {
+        position: absolute;
+        top: 12px;
+        #{$opposite-direction}: 10px;
+        height: 6px;
+        width: 100px;
+        z-index: 10;
+        .orbit-progress {
+          @if $orbit-timer-show-progress-bar {
+            height: 3px;
+            background-color: $orbit-timer-bg;
+            display: block;
+            width: 0%;
+            position: relative;
+            right: 20px;
+            top: 5px;
+          }
+        }
+
+        // Play button
+        & > span {
+          display: none;
+          position: absolute;
+          top: 0px;
+          #{$opposite-direction}: 0;
+          width: 11px;
+          height: 14px;
+          border: solid 4px #fff;
+          border-top: none;
+          border-bottom: none;
+        }
+  	  
+        // Pause button
+        &.paused {
+          & > span {
+            #{$opposite-direction}: -4px;
+            top: 0px;
+            width: 11px;
+            height: 14px;
+            border: inset 8px;
+            border-right-style: solid;
+            border-color: transparent transparent transparent #fff;
+            &.dark { 
+            	border-color: transparent transparent transparent #333;
+            }
+          }
+        }
+      }
+      
+      
+
+      &:hover .orbit-timer > span { display: block; }
+
+      // Let's get those controls to be right in the center on each side
+      .orbit-prev,
+      .orbit-next {
+        position: absolute;
+        top: 45%;
+        margin-top: -25px;
+        width: 36px;
+        height: 60px;
+        line-height: 50px;
+        color: white;
+        text-indent: -9999px !important;
+        z-index: 10;
+
+        &:hover {
+          background-color: $orbit-nav-bg-hover;
+        }
+
+        & > span {
+          position: absolute;
+          top: 50%;
+          margin-top: -10px;
+          display: block;
+          width: 0;
+          height: 0;
+          border: inset 10px;
+        }
+      }
+      .orbit-prev { #{$default-float}: 0;
+        & > span {
+          border-#{$opposite-direction}-style: solid;
+          border-color: transparent;
+          border-#{$opposite-direction}-color: $orbit-nav-arrow-color;
+        }
+        &:hover > span {
+          border-#{$opposite-direction}-color: $orbit-nav-arrow-color-hover;
+        }
+      }
+      .orbit-next { #{$opposite-direction}: 0;
+        & > span {
+          border-color: transparent;
+          border-#{$default-float}-style: solid;
+          border-#{$default-float}-color: $orbit-nav-arrow-color;
+          #{$default-float}: 50%;
+          margin-#{$default-float}: -4px;
+        }
+        &:hover > span {
+          border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
+        }
+      }
+    }
+
+    .orbit-bullets-container { text-align: center; }
+    .orbit-bullets {
+      margin: 0 auto 30px auto;
+      overflow: hidden;
+      position: relative;
+      top: 10px;
+      float: none;
+  	text-align: center;
+  	display: inline-block;
+
+      li {
+        display: block;
+        width: $orbit-bullet-radius;
+        height: $orbit-bullet-radius;
+        background: $orbit-bullet-nav-color;
+        float: $default-float;
+        margin-#{$opposite-direction}: 6px;
+        @include radius(1000px);
+
+        &.active {
+          background: $orbit-bullet-nav-color-active;
+        }
+
+        &:last-child { margin-#{$opposite-direction}: 0; }
+      }
+    }
+
+    .touch {
+      .orbit-container {
+        .orbit-prev,
+        .orbit-next { display: none; }
+      }
+
+      .orbit-bullets { display: none; }
+    }
+
+
+    @media #{$medium-up} {
+
+      .touch {
+        .orbit-container {
+          .orbit-prev,
+          .orbit-next { display: inherit; }
+        }
+
+        .orbit-bullets { display: block; }
+      }
+
+    }
+
+    @media #{$small-only} {
+      .orbit-stack-on-small {
+        .orbit-slides-container {height: auto !important;}
+        .orbit-slides-container > * {
+          position: relative;
+          margin-left: 0% !important;
+        }
+        .orbit-timer,
+        .orbit-next,
+        .orbit-prev,
+        .orbit-bullets {display: none;}
+      }
+    }
+
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_pagination.scss

@@ -0,0 +1,145 @@
+@import "global";
+
+//
+// @variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use these to control the pagination container
+$pagination-height: rem-calc(24) !default;
+$pagination-margin: rem-calc(-5) !default;
+
+// We use these to set the list-item properties
+$pagination-li-float: $default-float;
+$pagination-li-height: rem-calc(24) !default;
+$pagination-li-font-color: #222 !default;
+$pagination-li-font-size: rem-calc(14) !default;
+$pagination-li-margin: rem-calc(5) !default;
+
+// We use these for the pagination anchor links
+$pagination-link-pad: rem-calc(1 10 1) !default;
+$pagination-link-font-color: #999 !default;
+$pagination-link-active-bg: darken(#fff, 10%) !default;
+
+// We use these for disabled anchor links
+$pagination-link-unavailable-cursor: default !default;
+$pagination-link-unavailable-font-color: #999 !default;
+$pagination-link-unavailable-bg-active: transparent !default;
+
+// We use these for currently selected anchor links
+$pagination-link-current-background: $primary-color !default;
+$pagination-link-current-font-color: #fff !default;
+$pagination-link-current-font-weight: bold !default;
+$pagination-link-current-cursor: default !default;
+$pagination-link-current-active-bg: $primary-color !default;
+
+// @mixins
+//
+// Style the pagination container. Currently only used when centering elements.
+// $center - Default: false, Options: true
+@mixin pagination-container($center:false) {
+  @if $center { text-align: center; }
+}
+
+// @mixins
+// Style unavailable list items
+@mixin pagination-unavailable-item {
+  a {
+    cursor: $pagination-link-unavailable-cursor;
+    color: $pagination-link-unavailable-font-color;
+  }
+  &:hover a,
+  & a:focus { background: $pagination-link-unavailable-bg-active; }
+}
+// @mixins
+// Style the current list item. Do not assume that the current item has
+// an anchor <a> element.
+// $has-anchor - Default: true, Options: false
+@mixin pagination-current-item($has-anchor: true) {
+  @if $has-anchor {
+    a {
+      background: $pagination-link-current-background;
+      color: $pagination-link-current-font-color;
+      font-weight: $pagination-link-current-font-weight;
+      cursor: $pagination-link-current-cursor;
+
+      &:hover,
+      &:focus { background: $pagination-link-current-active-bg; }
+    }
+  } @else {
+    height: auto;
+    padding: $pagination-link-pad;
+    background: $pagination-link-current-background;
+    color: $pagination-link-current-font-color;
+    font-weight: $pagination-link-current-font-weight;
+    cursor: $pagination-link-current-cursor;
+
+    &:hover,
+    &:focus { background: $pagination-link-current-active-bg; }
+  }
+}
+
+// @mixins
+//
+// We use this mixin to set the properties for the creating Foundation pagination
+// $center - Left or center align the li elements. Default: false
+// $base-style - Sets base styles for pagination. Default: true, Options: false
+// $use-default-classes - Makes unavailable & current classes available for use. Default: true
+@mixin pagination($center:false, $base-style:true, $use-default-classes:true) {
+
+  @if $base-style {
+    display: block;
+    height: $pagination-height;
+    margin-#{$default-float}: $pagination-margin;
+
+    li {
+      height: $pagination-li-height;
+      color: $pagination-li-font-color;
+      font-size: $pagination-li-font-size;
+      margin-#{$default-float}: $pagination-li-margin;
+
+      a {
+        display: block;
+        padding: $pagination-link-pad;
+        color: $pagination-link-font-color;
+        @include radius($global-radius)
+      }
+
+      &:hover a,
+      a:focus { background: $pagination-link-active-bg; }
+
+      @if $use-default-classes {
+        &.unavailable { @include pagination-unavailable-item(); }
+        &.current { @include pagination-current-item(); }
+      }
+    }
+  }
+
+  // Left or center align the li elements
+  li {
+    @if $center {
+      float: none;
+      display: inline-block;
+    } @else {
+      float: $pagination-li-float;
+      display: block;
+    }
+  }
+}
+
+@include exports("pagination") {
+  @if $include-html-nav-classes {
+    ul.pagination {
+      @include pagination;
+    }
+
+    /* Pagination centred wrapper */
+    .pagination-centered {
+      @include pagination-container(true);
+
+      ul.pagination {
+        @include pagination(true, false);
+      }
+    }
+  }
+}