themepile-abstractio 1.0.2

data/scss/abstractio/components/_inline-lists.scss

@@ -0,0 +1,53 @@
+//
+// Inline List Variables
+//
+$include-html-global-classes: $include-html-classes !default;
+
+// We use this to control the margins and padding of the inline list.
+$inline-list-top-margin: 0 !default;
+$inline-list-opposite-margin: 0 !default;
+$inline-list-bottom-margin: emCalc(17px) !default;
+$inline-list-default-float-margin: emCalc(-22px) !default;
+
+$inline-list-padding:          0 !default;
+
+// We use this to control the overflow of the inline list.
+$inline-list-overflow:         hidden !default;
+
+// We use this to control the list items
+$inline-list-display:          block !default;
+
+// We use this to control any elments within list items
+$inline-list-children-display: block !default;
+
+//
+// Inline List Mixins
+//
+
+// We use this mixin to create inline lists
+@mixin inline-list {
+  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto; 
+  margin-#{$default-float}: $inline-list-default-float-margin;
+  margin-#{$opposite-direction}: $inline-list-opposite-margin;
+  padding: $inline-list-padding;
+  list-style: none;
+  overflow: $inline-list-overflow;
+
+  & > li {
+    list-style: none;
+    float: $default-float;
+    margin-#{$default-float}: emCalc(22px);
+    display: $inline-list-display;
+    &>* { display: $inline-list-children-display; }
+  }
+}
+
+
+@if $include-html-global-classes != false {
+
+  /* Inline Lists */
+  .inline-list {
+    @include inline-list();
+  }
+
+}

data/scss/abstractio/components/_joyride.scss

@@ -0,0 +1,215 @@
+//
+// Joyride Variables
+//
+$include-html-joyride-classes: $include-html-classes !default;
+
+// Controlling default Joyride styles
+$joyride-tip-bg:              rgb(0,0,0) !default;
+$joyride-tip-default-width:   300px !default;
+$joyride-tip-padding:         emCalc(18px) emCalc(20px) emCalc(24px) !default;
+$joyride-tip-border:          solid 1px #555 !default;
+$joyride-tip-radius:          4px !default;
+$joyride-tip-position-offset: 22px !default;
+
+// Here, we're setting the tip dont styles
+$joyride-tip-font-color:      #fff !default;
+$joyride-tip-font-size:       emCalc(14px) !default;
+$joyride-tip-header-weight:   bold !default;
+
+// This changes the nub size
+$joyride-tip-nub-size:        14px !default;
+
+// This adjusts the styles for the timer when its enabled
+$joyride-tip-timer-width:     50px !default;
+$joyride-tip-timer-height:    3px !default;
+$joyride-tip-timer-color:     #666 !default;
+
+// This changes up the styles for the close button
+$joyride-tip-close-color:     #777 !default;
+$joyride-tip-close-size:      30px !default;
+$joyride-tip-close-weight:    normal !default;
+
+// When Joyride is filling the screen, we use this style for the bg
+$joyride-screenfill:          rgba(0,0,0,0.5) !default;
+
+
+// We decided not to make a mixin for this because it relies on predefined classes to work properly.
+
+@if $include-html-joyride-classes != false {
+
+  /* Foundation Joyride */
+  .joyride-list { display: none; }
+  
+  /* Default styles for the container */
+  .joyride-tip-guide {
+    display: none;
+    position: absolute;
+    background: $joyride-tip-bg;
+    color: $joyride-tip-font-color;
+    z-index: 101;
+    top: 0;
+    #{$default-float}: 2.5%;
+    font-family: inherit;
+    font-weight: normal;
+    width: 95%;
+  }
+  
+  .lt-ie9 .joyride-tip-guide {
+    max-width:800px;
+    #{$default-float}: 50%;
+    margin-#{$default-float}:-400px;
+  }
+  
+  .joyride-content-wrapper {
+    width: 100%;
+  
+    padding: $joyride-tip-padding;
+  
+    .button { margin-bottom: 0 !important; }
+  }
+  
+  /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
+  .joyride-tip-guide {
+    .joyride-nub {
+      display: block;
+      position: absolute;
+      #{$default-float}: $joyride-tip-position-offset;
+      width: 0;
+      height: 0;
+      border: inset $joyride-tip-nub-size;
+  
+      &.top {
+        border-top-style: solid;
+        border-color: $joyride-tip-bg;
+        border-top-color: transparent !important;
+        border-#{$default-float}-color: transparent !important;
+        border-#{$opposite-direction}-color: transparent !important;
+        top: -($joyride-tip-nub-size*2);
+      }
+      &.bottom {
+        border-bottom-style: solid;
+        border-color: $joyride-tip-bg !important;
+        border-bottom-color: transparent !important;
+        border-#{$default-float}-color: transparent !important;
+        border-#{$opposite-direction}-color: transparent !important;
+        bottom: -($joyride-tip-nub-size*2);
+      }
+  
+      &.right { right: -($joyride-tip-nub-size*2); }
+      &.left { left: -($joyride-tip-nub-size*2); }
+    }
+  }
+  
+  /* Typography */
+  .joyride-tip-guide h1,
+  .joyride-tip-guide h2,
+  .joyride-tip-guide h3,
+  .joyride-tip-guide h4,
+  .joyride-tip-guide h5,
+  .joyride-tip-guide h6 {
+    line-height: 1.25;
+    margin: 0;
+    font-weight: $joyride-tip-header-weight;
+    color: $joyride-tip-font-color;
+  }
+  .joyride-tip-guide p {
+    margin: 0 0 emCalc(18px) 0;
+    font-size: $joyride-tip-font-size;
+    line-height: 1.3;
+  }
+  
+  .joyride-timer-indicator-wrap {
+    width: $joyride-tip-timer-width;
+    height: $joyride-tip-timer-height;
+    border: $joyride-tip-border;
+    position: absolute;
+    #{$opposite-direction}: emCalc(17px);
+    bottom: emCalc(16px);
+  }
+  .joyride-timer-indicator {
+    display: block;
+    width: 0;
+    height: inherit;
+    background: $joyride-tip-timer-color;
+  }
+  
+  .joyride-close-tip {
+    position: absolute;
+    #{$opposite-direction}: 12px;
+    top: 10px;
+    color: $joyride-tip-close-color !important;
+    text-decoration: none;
+    font-size: $joyride-tip-close-size;
+    font-weight: $joyride-tip-close-weight;
+    line-height: .5 !important;
+  
+    &:hover,
+    &:focus { color: #eee !important; }
+  }
+  
+  .joyride-modal-bg {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    background: transparent;
+    background: $joyride-screenfill;
+    z-index: 100;
+    display: none;
+    top: 0;
+    #{$default-float}: 0;
+    cursor: pointer;
+  }
+  
+  .joyride-expose-wrapper {
+    background-color: #ffffff;
+    position: absolute;
+    border-radius: 3px;
+    z-index: 102;
+    -moz-box-shadow: 0px 0px 30px #ffffff;
+    -webkit-box-shadow: 0px 0px 15px #ffffff;
+    box-shadow: 0px 0px 15px #ffffff;
+  }
+  
+  .joyride-expose-cover {
+    background: transparent;
+    border-radius: 3px;
+    position: absolute;
+    z-index: 9999;
+    top: 0px;
+    left: 0px;
+  }
+  
+  
+  /* Styles for screens that are atleast 768px; */
+  @media #{$small} {
+    .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
+      .joyride-nub {
+        &.bottom {
+          border-color: $joyride-tip-bg !important;
+          border-bottom-color: transparent !important;
+          border-#{$default-float}-color: transparent !important;
+          border-#{$opposite-direction}-color: transparent !important;
+          bottom: -($joyride-tip-nub-size*2);
+        }
+        &.right {
+          border-color: $joyride-tip-bg !important;
+          border-top-color: transparent !important;
+          border-right-color: transparent !important; border-bottom-color: transparent !important;
+          top: $joyride-tip-position-offset;
+          left: auto;
+          right: -($joyride-tip-nub-size*2);
+        }
+        &.left {
+          border-color: $joyride-tip-bg !important;
+          border-top-color: transparent !important;
+          border-left-color: transparent !important;
+          border-bottom-color: transparent !important;
+          top: $joyride-tip-position-offset;
+          left: -($joyride-tip-nub-size*2);
+          right: auto;
+        }
+      }
+    }
+  }
+
+}

data/scss/abstractio/components/_keystrokes.scss

@@ -0,0 +1,57 @@
+//
+// Keystroke Variables
+//
+$include-html-type-classes: $include-html-classes !default;
+
+// We use these to control text styles.
+$keystroke-font:            "Consolas", "Menlo", "Courier", monospace !default;
+$keystroke-font-size:       emCalc(15px) !default;
+$keystroke-font-color:      #222 !default;
+$keystroke-font-color-alt:  #fff !default;
+$keystroke-function-factor: 7% !default;
+
+// We use this to control keystroke padding.
+$keystroke-padding:         emCalc(2px) emCalc(4px) emCalc(0px) !default;
+
+// We use these to control background and border styles.
+$keystroke-bg:              darken(#fff, $keystroke-function-factor) !default;
+$keystroke-border-style:    solid !default;
+$keystroke-border-width:    1px !default;
+$keystroke-border-color:    darken($keystroke-bg, $keystroke-function-factor) !default;
+$keystroke-radius:          $global-radius !default;
+
+//
+// Keystroke Mixins
+//
+
+// We use this mixin to create keystroke styles.
+@mixin keystroke($bg:$keystroke-bg) {
+  // This find the lightness percentage of the background color.
+  $bg-lightness: lightness($bg);
+
+  background-color: $bg;
+  border-color: darken($bg, $keystroke-function-factor);
+
+  // We adjust the font color based on the brightness of the background.
+  @if $bg-lightness > 70% { color: $keystroke-font-color; }
+  @else { color: $keystroke-font-color-alt; }
+
+  border-style: $keystroke-border-style;
+  border-width: $keystroke-border-width;
+  margin: 0;
+  font-family: $keystroke-font;
+  font-size: $keystroke-font-size;
+  padding: $keystroke-padding;
+}
+
+
+@if $include-html-type-classes != false {
+
+  /* Keystroke Characters */
+  .keystroke,
+  kbd {
+    @include keystroke;
+    @include radius($keystroke-radius);
+  }
+
+}

data/scss/abstractio/components/_labels.scss

@@ -0,0 +1,85 @@
+//
+// Label Variables
+//
+$include-html-label-classes: $include-html-classes !default;
+
+// We use these to style the labels
+$label-padding:     emCalc(3px) emCalc(10px) emCalc(4px) !default;
+$label-radius:      $global-radius !default;
+
+// We use these to style the label text
+$label-font-sizing:   emCalc(14px) !default;
+$label-font-weight: bold !default;
+$label-font-color: #333 !default;
+$label-font-color-alt: #fff !default;
+
+//
+// Label Mixins
+//
+
+// We use this mixin to create a default label base.
+@mixin label-base {
+  font-weight: $label-font-weight;
+  text-align: center;
+  text-decoration: none;
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-block;
+  position: relative;
+}
+
+// We use this mixin to add label size styles.
+@mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
+  @if $padding { padding: $padding; }
+  @if $text-size { font-size: $text-size; }
+}
+
+// We use this mixin to add label styles.
+@mixin label-style($bg:$primary-color, $radius:false) {
+
+  // We control which background color comes through
+  @if $bg {
+
+    // This find the lightness percentage of the background color.
+    $bg-lightness: lightness($bg);
+
+    background-color: $bg;
+
+    // We control the text color for you based on the background color.
+    @if $bg-lightness < 70% { color: $label-font-color-alt; }
+    @else { color: $label-font-color; }
+  }
+
+  // We use this to control the radius on labels.
+  @if $radius == true { @include radius($label-radius); }
+  @else if $radius { @include radius($radius); }
+
+}
+
+// We use this to add close buttons to alerts
+@mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) {
+
+  @include label-base;
+  @include label-size($padding, $text-size);
+  @include label-style($bg, $radius);
+}
+
+
+@if $include-html-label-classes != false {
+
+  /* Labels */
+  .label {
+    @include label-base;
+    @include label-size;
+    @include label-style;
+
+
+    &.radius { @include label-style(false, true); }
+    &.round { @include label-style(false, $radius:1000px); }
+
+    &.alert     { @include label-style($alert-color); }
+    &.success   { @include label-style($success-color); }
+    &.secondary { @include label-style($secondary-color); }
+  }
+
+}

data/scss/abstractio/components/_magellan.scss

@@ -0,0 +1,23 @@
+//
+// Magellan Variables
+//
+$include-html-magellan-classes: $include-html-classes !default;
+
+$magellan-bg: #fff !default;
+$magellan-padding: 10px !default;
+
+@if $include-html-magellan-classes != false {
+
+  [data-magellan-expedition] {
+    background: $magellan-bg;
+    z-index: 50;
+    min-width: 100%;
+    padding: $magellan-padding;
+
+    .sub-nav {
+      margin-bottom: 0;
+      dd { margin-bottom: 0; }
+    }
+  }
+
+}

data/scss/abstractio/components/_orbit.scss

@@ -0,0 +1,213 @@
+// Orbit Settings
+$include-html-orbit-classes: $include-html-classes !default;
+
+// We use these to control the caption styles
+$orbit-container-bg: #f5f5f5 !default;
+$orbit-caption-bg-old-browser: #000 !default;
+$orbit-caption-bg-old: rgb(0,0,0) !default;
+$orbit-caption-bg: rgba(0,0,0,0.6) !default;
+$orbit-caption-font-color: #fff !default;
+
+// We use these to control the left/right nav styles
+$orbit-nav-bg-old: rgb(0,0,0) !default;
+$orbit-nav-bg: rgba(0,0,0,0.6) !default;
+
+// We use these to control the timer styles
+$orbit-timer-bg-old: rgb(0,0,0) !default;
+$orbit-timer-bg: rgba(0,0,0,0.6) !default;
+
+// We use these to control the bullet nav styles
+$orbit-bullet-nav-color: #999 !default;
+$orbit-bullet-nav-color-active: #222 !default;
+
+// We use thes 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: emCalc(5px) !default;
+
+// Margin for when Orbit is stacked on small screens
+$stack-on-small-margin-bottom: emCalc(20px) !default;
+
+@if $include-html-orbit-classes != false {
+  
+  .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; }
+  
+      &>* {
+        position: relative;
+        float: $default-float;
+        height: 100%;
+  
+        .orbit-caption {
+          position: absolute;
+          bottom: 0;
+          background-color: $orbit-caption-bg-old;
+          background-color: $orbit-caption-bg;
+          color: #fff;
+          width: 100%;
+          padding: 10px 14px;
+          font-size: emCalc(14px);
+  
+          * { color: $orbit-caption-font-color; }
+        }
+      }
+    }
+  
+    .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;
+    }
+  
+    .orbit-timer {
+      position: absolute;
+      top: 10px;
+      #{$opposite-direction}: 10px;
+      height: 6px;
+      width: 100px;
+      .orbit-progress {
+        height: 100%;
+        background-color: $orbit-timer-bg-old;
+        background-color: $orbit-timer-bg;
+        display: block;
+        width: 0%;
+      }
+  
+      & > span {
+        display: none;
+        position: absolute;
+        top: 10px;
+        #{$opposite-direction}: 0px;
+        width: 11px;
+        height: 14px;
+        border: solid 4px #000;
+        border-top: none;
+        border-bottom: none;
+      }
+  
+      &.paused {
+        & > span {
+          #{$opposite-direction}: -6px;
+          top: 9px;
+          width: 11px;
+          height: 14px;
+          border: inset 8px;
+          border-right-style: solid;
+          border-color: transparent transparent transparent #000;
+        }
+      }
+    }
+  
+    &: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: 50%;
+      margin-top: -25px;
+      background-color: $orbit-nav-bg-old;
+      background-color: $orbit-nav-bg;
+      width: 50px;
+      height: 60px;
+      line-height: 50px;
+      color: white;
+      text-indent: -9999px !important;
+  
+      & > span {
+        position: absolute;
+        top: 50%;
+        margin-top: -16px;
+        display: block;
+        width: 0;
+        height: 0;
+        border: inset 16px;
+      }
+    }
+    .orbit-prev { #{$default-float}: 0;
+      & > span {
+        border-#{$opposite-direction}-style: solid;
+        border-color: transparent;
+        border-#{$opposite-direction}-color: #fff;
+      }
+      &:hover > span {
+        border-#{$opposite-direction}-color: #ccc;
+      }
+    }
+    .orbit-next { #{$opposite-direction}: 0;
+      & > span {
+        border-color: transparent;
+        border-#{$default-float}-style: solid;
+        border-#{$default-float}-color: #fff;
+        #{$default-float}: 50%;
+        margin-#{$default-float}: -8px;
+      }
+      &:hover > span {
+        border-#{$default-float}-color: #ccc;
+      }
+    }
+  }
+  
+  .orbit-bullets {
+    margin: 0 auto 30px auto;
+    overflow: hidden;
+    position: relative;
+    top: 10px;
+  
+    li {
+      display: block;
+      width: 18px;
+      height: 18px;
+      background: $orbit-bullet-nav-color;
+      float: $default-float;
+      margin-#{$opposite-direction}: 6px;
+      border: solid 2px $orbit-bullet-nav-color-active;
+      @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 #{$small} {
+  
+    .touch {
+      .orbit-container {
+        .orbit-prev,
+        .orbit-next { display: inherit; }
+      }
+  
+      .orbit-bullets { display: block; }
+    }
+  
+  }
+
+}