themepile-abstractio 1.0.2

data/scss/abstractio/components/_sub-nav.scss

@@ -0,0 +1,68 @@
+//
+// Sub Nav Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use these to control margin and padding
+$sub-nav-list-margin:        emCalc(-4px) 0 emCalc(18px) !default;
+$sub-nav-list-padding-top:   emCalc(4px) !default;
+
+// We use this to control the definition
+$sub-nav-font-size:          emCalc(14px) !default;
+$sub-nav-font-color:         #999 !default;
+$sub-nav-font-weight:        normal !default;
+$sub-nav-text-decoration:    none !default;
+$sub-nav-border-radius:      1000px !default;
+
+// We use these to control the active item styles
+$sub-nav-active-font-weight: bold !default;
+$sub-nav-active-bg:          $primary-color !default;
+$sub-nav-active-color:       #fff !default;
+$sub-nav-active-padding:     emCalc(3px) emCalc(9px) !default;
+$sub-nav-active-cursor:      default !default;
+
+//
+// Sub Nav Mixins
+//
+
+@mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
+  display: block;
+  width: auto;
+  overflow: hidden;
+  margin: $sub-nav-list-margin;
+  padding-top: $sub-nav-list-padding-top;
+  margin-#{$opposite-direction}: 0;
+  margin-#{$default-float}: emCalc(-9px);
+
+  dt,
+  dd {
+    float: $default-float;
+    display: inline;
+    margin-#{$default-float}: emCalc(9px);
+    margin-bottom: emCalc(10px);
+    font-weight: $sub-nav-font-weight;
+    font-size: $font-size;
+
+    a {
+      color: $font-color;
+      text-decoration: $sub-nav-text-decoration; }
+
+    &.active a {
+      @include radius($sub-nav-border-radius);
+      font-weight: $sub-nav-active-font-weight;
+      background: $active-bg;
+      padding: $sub-nav-active-padding;
+      cursor: $sub-nav-active-cursor;
+      color: $sub-nav-active-color;
+    }
+  }
+
+}
+
+
+@if $include-html-nav-classes != false {
+
+  /* Side Nav */
+  .sub-nav { @include sub-nav; }
+
+}

data/scss/abstractio/components/_switch.scss

@@ -0,0 +1,251 @@
+//
+// Switch Variables
+//
+$include-html-form-classes: $include-html-classes !default;
+
+// Controlling border styles and background colors for the switch container
+$switch-border-color:             darken(#fff, 20%) !default;
+$switch-border-style:             solid !default;
+$switch-border-width:             1px !default;
+$switch-bg:                       #fff !default;
+
+// We use these to control the switch heights for our default classes
+$switch-height-tny:               22px !default;
+$switch-height-sml:               28px !default;
+$switch-height-med:               36px !default;
+$switch-height-lrg:               44px !default;
+$switch-bottom-margin:            emCalc(20px) !default;
+
+// We use these to control default font sizes for our classes.
+$switch-font-size-tny:            11px !default;
+$switch-font-size-sml:            12px !default;
+$switch-font-size-med:            14px !default;
+$switch-font-size-lrg:            17px !default;
+$switch-label-side-padding:       6px !default;
+
+// We use these to style the switch-paddle
+$switch-paddle-bg:                #fff !default;
+$switch-paddle-fade-to-color:     darken($switch-paddle-bg, 10%) !default;
+$switch-paddle-border-color:      darken($switch-paddle-bg, 35%) !default;
+$switch-paddle-border-width:      1px !default;
+$switch-paddle-border-style:      solid !default;
+$switch-paddle-transition-speed:  .1s !default;
+$switch-paddle-transition-ease:   ease-out !default;
+$switch-positive-color:           lighten($success-color, 50%) !default;
+$switch-negative-color:           #f5f5f5 !default;
+
+// Outline Style for tabbing through switches
+$switch-label-outline:            1px dotted #888 !default;
+
+
+//
+// Switch Mixins
+//
+
+// We use this mixin to create the base styles for our switch element.
+@mixin switch-base($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease) {
+
+  // Default position and structure for switch container.
+  position: relative;
+  width: 100%;
+  padding: 0;
+  display: block;
+  overflow: hidden;
+  border-style: $switch-border-style;
+  border-width: $switch-border-width;
+  margin-bottom: $switch-bottom-margin;
+
+  // Default label styles for type and transition
+  label {
+    position: relative;
+    #{$default-float}: 0;
+    z-index: 2;
+    float: $default-float;
+    width: 50%;
+    height: 100%;
+    margin: 0;
+    font-weight: bold;
+    text-align: $default-float;
+
+    // Transition for the switch label to follow paddle
+    @include single-transition(all, $transition-speed, $transition-ease);
+  }
+
+  // So that we don't need to recreate the form with any JS, we use the
+  // existing radio button, but we cleverly position and hide it.
+  input {
+    position: absolute;
+    z-index: 3;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    -moz-appearance: none;
+    
+    // Hover and focus styles for the paddle
+    &:hover,
+    &:focus {
+      cursor: pointer;
+    }
+  }
+
+  // The toggle area for radio switches. We call is a paddle.
+  & > span {
+    position: absolute;
+    top: -1px;
+    #{$default-float}: -1px;
+    z-index: 1;
+    display: block;
+    padding: 0;
+    border-width: $switch-paddle-border-width;
+    border-style: $switch-paddle-border-style;
+
+    // Transition for the switch paddle
+    @include single-transition(all, $transition-speed, $transition-ease);
+  }
+
+  // When a label isn't :checked, we hide it as it slides away.
+  input:not(:checked) + label { opacity: 0; }
+
+  // Controlling the position of the labels as they are toggled.
+  input:checked { display: none !important; }
+  input { #{$default-float}: 0; display: block !important; }
+
+  // Left Label alignment and position changes, including fixes for while inside a custom form
+  input:first-of-type + label,
+  input:first-of-type + span + label { #{$default-float}: -50%; }
+  input:first-of-type:checked + label,
+  input:first-of-type:checked + span + label { #{$default-float}: 0%; }
+
+  // Right Label alignment and position changes, including fixes for while inside a custom form
+  input:last-of-type + label,
+  input:last-of-type + span + label {#{$opposite-direction}: -50%; #{$default-float}: auto; text-align: $opposite-direction; }
+  input:last-of-type:checked + label,
+  input:last-of-type:checked + span + label { #{$opposite-direction}: 0%; #{$default-float}: auto; }
+
+  // Hiding custom form spans since we auto-create them
+  span.custom { display: none !important; }
+
+  // Bugfix for older Webkit, including mobile Webkit. Adapted from:
+  // http://css-tricks.com/webkit-sibling-bug/
+  -webkit-animation: webkitSiblingBugfix infinite 1s;
+
+}
+
+// We use this mixin to create the size styles for switches.
+@mixin switch-size($height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em) {
+
+  height: $height;
+
+  label {
+    padding: 0 emCalc($switch-label-side-padding);
+    line-height: $line-height;
+    font-size: emCalc($font-size);
+  }
+
+  input {
+    // Move the paddle to the right position
+    &:first-of-type:checked ~ span {
+      #{$default-float}: 100%;
+      margin-#{$default-float}: emCalc(-$height + 1px);
+    }
+  }
+
+  & > span {
+    width: emCalc($height);
+    height: emCalc($height);
+  }
+
+}
+
+// We use this mixin to add color and other fanciness to the switches.
+@mixin switch-style($paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
+
+  @if $base-style {
+    background: $switch-bg;
+    border-color: $switch-border-color;
+
+    & > span {
+      border-color: darken($paddle-bg, 30%);
+      background: $paddle-bg;
+      background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
+      background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
+      background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
+
+      // Building the alternating colored sides of the switch
+      -webkit-box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
+                          1000px 0 0 1000px $positive-color,
+                          -2px 0 10px 0 rgba(0,0,0,0.07),
+                          -1000px 0 0 1000px $negative-color;
+      box-shadow:         2px 0 10px 0 rgba(0,0,0,0.07),
+                          1000px 0 0 980px $positive-color,
+                          -2px 0 10px 0 rgba(0,0,0,0.07),
+                          -1000px 0 0 1000px $negative-color;
+    }
+
+    &:hover,
+    &:focus {
+      & > span {
+        background: $paddle-bg;
+        background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
+        background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
+        background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
+      }
+    }
+
+    &:active { background: transparent; }
+  }
+
+  // Setting up the radius for switches
+  @if $radius == true {
+    @include radius(4px);
+    & > span { @include radius(3px); }
+  }
+  @else if $radius {
+    @include radius($radius);
+    & > span { @include radius($radius - 1px); }
+  }
+
+}
+
+// We use this to quickly create switches with a single mixin
+@mixin switch($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease, $height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em, $paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
+  @include switch-base($transition-speed, $transition-ease);
+  @include switch-size($height, $font-size, $line-height);
+  @include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
+}
+
+@if $include-html-form-classes != false {
+
+  /* Foundation Switches */
+  @media only screen {
+
+    // Containing element for the radio switch
+    div.switch {
+      @include switch;
+
+      // Large radio switches
+      &.large { @include switch-size($switch-height-lrg, $switch-font-size-lrg); }
+
+      // Small radio switches
+      &.small { @include switch-size($switch-height-sml, $switch-font-size-sml, 2.1em); }
+
+      // Tiny radio switches
+      &.tiny { @include switch-size($switch-height-tny, $switch-font-size-tny, 1.9em); }
+
+      // Add a radius to the switch
+      &.radius { @include radius(4px);
+        & > span { @include radius(3px); }
+      }
+
+      // Make the switch completely round, like a pill
+      &.round { @include radius(1000px);
+        & > span { @include radius(999px); }
+        label { padding: 0 emCalc($switch-label-side-padding + 3px); }
+      }
+
+    }
+
+    @-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } }
+
+  }
+}

data/scss/abstractio/components/_tables.scss

@@ -0,0 +1,84 @@
+//
+// Table Variables
+//
+$include-html-table-classes: $include-html-classes !default;
+
+// These control the background color for the table and even rows
+$table-bg:               #fff !default;
+$table-even-row-bg:      #f9f9f9 !default;
+
+// These control the table cell border style
+$table-border-style:     solid !default;
+$table-border-size:      1px !default;
+$table-border-color:     #ddd !default;
+
+// These control the table head styles
+$table-head-bg:          #f5f5f5 !default;
+$table-head-font-size:   emCalc(14px) !default;
+$table-head-font-color:  #222 !default;
+$table-head-font-weight: bold !default;
+$table-head-padding:     emCalc(8px) emCalc(10px) emCalc(10px) !default;
+
+// These control the row padding and font styles
+$table-row-padding:      emCalc(9px) emCalc(10px) !default;
+$table-row-font-size:    emCalc(14px) !default;
+$table-row-font-color:   #222 !default;
+$table-line-height:      emCalc(18px) !default;
+
+// These are for controlling the display and margin of tables
+$table-display:          table-cell !default;
+$table-margin-bottom:    emCalc(20px) !default;
+
+
+//
+// Table Mixin
+//
+@mixin table {
+  background: $table-bg;
+  margin-bottom: $table-margin-bottom;
+  border: $table-border-style $table-border-size $table-border-color;
+
+  thead,
+  tfoot {
+    background: $table-head-bg;
+    font-weight: $table-head-font-weight;
+
+    tr {
+      th,
+      td {
+        padding: $table-head-padding;
+        font-size: $table-head-font-size;
+        color: $table-head-font-color;
+        text-align: $default-float;
+      }
+    }
+  }
+
+  tr {
+    th,
+    td {
+      padding: $table-row-padding;
+      font-size: $table-row-font-size;
+      color: $table-row-font-color;
+    }
+
+    &.even,
+    &.alt,
+    &:nth-of-type(even) { background: $table-even-row-bg; }
+  }
+
+  thead tr th,
+  tfoot tr th,
+  tbody tr td,
+  tr td,
+  tfoot tr td { display: $table-display; line-height: $table-line-height; }
+}
+
+@if $include-html-table-classes {
+
+  /* Tables */
+  table {
+    @include table;
+  }
+
+}

data/scss/abstractio/components/_thumbs.scss

@@ -0,0 +1,48 @@
+//
+// Image Thumbnail Variables
+//
+$include-html-media-classes: $include-html-classes !default;
+
+// We use these to control border styles
+$thumb-border-style:     solid !default;
+$thumb-border-width:     4px !default;
+$thumb-border-color:     #fff !default;
+$thumb-box-shadow:       0 0 0 1px rgba(#000,.2) !default;
+$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
+
+// Radius and transition speed for thumbs
+$thumb-radius:           $global-radius !default;
+$thumb-transition-speed: 200ms !default;
+
+//
+// Image Thumbnail Mixins
+//
+
+// We use this to create image thumbnail styles.
+@mixin thumb($border-width:$thumb-border-width, $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) {
+  line-height: 0;
+  display: inline-block;
+  border: $thumb-border-style $border-width $thumb-border-color;
+  -webkit-box-shadow: $box-shadow;
+  box-shadow: $box-shadow;
+
+  &:hover,
+  &:focus { -webkit-box-shadow: $box-shadow-hover; box-shadow: $box-shadow-hover; }
+}
+
+
+// If html classes are turned on we'll include these classes.
+@if $include-html-media-classes != false {
+
+  /* Image Thumbnails */
+  .th {
+    @include thumb;
+    @include single-transition(all,$thumb-transition-speed,ease-out);
+
+    &.radius { @include radius($thumb-radius); }
+  }
+  a.th { display: block; }
+
+}
+
+