themepile-abstractio 1.0.2

data/scss/abstractio/components/_section.scss

@@ -0,0 +1,318 @@
+//
+// Section Variables
+//
+$include-html-section-classes: $include-html-classes !default;
+
+// We use these to set padding and hover factor
+$section-title-padding:             emCalc(15px) !default;
+$section-content-padding:           emCalc(15px) !default;
+$section-function-factor:           10% !default;
+
+// These style the titles
+$section-title-color:               #333 !default;
+$section-title-bg:                  #efefef !default;
+$section-title-bg-active:           darken($section-title-bg, $section-function-factor) !default;
+$section-title-bg-active-tabs:      #fff !default;
+$section-title-bg-hover:            darken($section-title-bg, $section-function-factor/2) !default;
+
+// Want to control border size, here ya go!
+$section-border-size:               1px !default;
+$section-border-style:              solid !default;
+$section-border-color:              #ccc !default;
+
+// Font controls
+$section-font-size:                 emCalc(14px) !default;
+
+// Control the color of the background and some size options
+$section-content-bg:                #fff !default;
+$section-vertical-nav-min-width:    emCalc(200px) !default;
+$section-vertical-tabs-title-width: emCalc(200px) !default;
+$section-bottom-margin:             emCalc(20px) !default;
+
+
+//
+// Section Mixins
+//
+
+// We use this mixin to create the basic container styles for sections when they act like accordions
+@mixin section-container($base-style:true, $section-type:accordion) {
+
+  /// We can set this to false to not include these styles to avoid repeated CSS on classes.
+  @if $base-style {
+    width: 100%;
+    display: block;
+    margin-bottom: $section-bottom-margin;
+  }
+
+  // Accordion container border styles
+  @if $section-type == accordion {
+    border: $section-border-size $section-border-style $section-border-color;
+    border-top: none;
+  }
+
+  // Tabs container border styles
+  @else if $section-type == tabs {
+    border: 0;
+    position: relative;
+  }
+
+  // Vertical Tabs container border styles
+  @else if $section-type == vertical-tabs {
+    border: $section-border-size $section-border-style $section-border-color;
+    position: relative;
+  }
+
+  // Vertical Nav container border styles
+  @else if $section-type == vertical-nav {
+    border: 0;
+    position: relative;
+  }
+
+  // Horizontal Nav container border styles
+  @else if $section-type == horizontal-nav {
+    position: relative;
+    background: $section-title-bg;
+    border: $section-border-size $section-border-style $section-border-color;
+  }
+
+}
+
+
+@mixin section($section-type:accordion, $title-selector:".title", $content-selector:".content", $title-padding:$section-title-padding, $title-color:$section-title-color, $title-font-size:$section-font-size, $title-bg:$section-title-bg, $title-bg-hover:$section-title-bg-hover, $title-bg-active:$section-title-bg-active, $title-color-active:$section-title-color, $content-bg:$section-content-bg, $content-padding:$section-content-padding, $section-border-size:$section-border-size, $section-border-style:$section-border-style, $section-border-color: $section-border-color) {
+
+  // Default Styles
+  > #{$title-selector} {
+    background-color: $title-bg;
+    cursor: pointer;
+    margin-bottom: 0;
+
+    a {
+      padding: $title-padding;
+      display: inline-block;
+      color: $title-color;
+      font-size: $title-font-size;
+      white-space: nowrap;
+    }
+    &:hover { background-color: $title-bg-hover; }
+  }
+
+  #{$content-selector} {
+    display: none;
+    padding: $content-padding;
+    background-color: $content-bg;
+
+    &>*:last-child { margin-bottom: 0; }
+    &>*:first-child { padding-top: 0; }
+    &>*:last-child { padding-bottom: 0; }
+  }
+
+  &.active {
+    & > #{$content-selector} { display: block; }
+    & > #{$title-selector} { background: $title-bg-active;
+      a { color: $title-color-active; }
+    }
+  }
+
+  // Style for when Accordion
+  @if $section-type == accordion {
+    // border-top: $section-border-size $section-border-style $section-border-color;
+    position: relative;
+
+    > #{$title-selector} {
+      top: 0;
+      width: 100%;
+      margin: 0;
+      border-top: $section-border-style $section-border-size $section-border-color;
+
+      a { width: 100%; }
+    }
+  }
+
+  // Styles for when tabs
+  @else if $section-type == tabs {
+    border: 0;
+    position: static;
+
+    > #{$title-selector} {
+      width: auto;
+      border: $section-border-style $section-border-size $section-border-color;
+      border-#{$opposite-direction}: 0;
+      border-bottom: 0;
+      position: absolute;
+      top: 0;
+      z-index: 1;
+
+      a { width: 100%; }
+    }
+    &:last-child #{$title-selector} { border-#{$opposite-direction}: $section-border-style $section-border-size $section-border-color; }
+
+    #{$content-selector} {
+      border: $section-border-style $section-border-size $section-border-color;
+      position: absolute;
+      z-index: 10;
+      display: none;
+      top: -1px;
+    }
+
+    &.active {
+      & > #{$title-selector} {
+        z-index: 11;
+        border-bottom: 0;
+        background-color: $title-bg-active;
+      }
+      & > #{$content-selector} { position: relative; }
+    }
+  }
+
+  // Styles for when Vertical Tabs
+  @else if $section-type == vertical-tabs {
+    padding-top: 0 !important;
+    border: 0;
+    position: static;
+
+    > #{$title-selector} {
+      position: absolute;
+      border-top: $section-border-style $section-border-size $section-border-color;
+      width: $section-vertical-tabs-title-width;
+    }
+    &:first-child #{$title-selector} { border-top: 0; }
+
+    #{$content-selector} {
+      // Display all content blocks to account for the scrollbar
+      // in the outerWidth measurements. JavaScript will toggle the active tabs.
+      display: block;
+      position: relative;
+      left: $section-vertical-tabs-title-width;
+      border-left: $section-border-style $section-border-size $section-border-color;
+      z-index: 10;
+    }
+
+    &.active {
+      & > #{$title-selector} {
+        background-color: $title-bg-active;
+        width: $section-vertical-tabs-title-width + emCalc(1px); // Cover the content's left border
+        border-right: solid 0 transparent;
+        z-index: 11; // Put active title on top of the content
+      }
+      &:last-child #{$title-selector} { border-bottom: 0; }
+    }
+  }
+
+  // Styles for when Vertical Nav
+  @else if $section-type == vertical-nav {
+    padding-top: 0 !important;
+    position: relative;
+
+    > #{$title-selector} {
+      border-top: none;
+      border: $section-border-style $section-border-size $section-border-color;
+
+      a {
+        display: block;
+        width: 100%;
+      }
+    }
+    #{$content-selector} { display: none; }
+    &:first-child #{$title-selector} { border-bottom: none; }
+
+    &.active {
+      & > #{$content-selector} {
+        display: block;
+        position: absolute;
+        #{$default-float}: 100%;
+        top: 0px;
+        z-index: 999;
+        min-width: $section-vertical-nav-min-width;
+        border: $section-border-style $section-border-size $section-border-color;
+      }
+    }
+  }
+
+  // Styles for when Horizontal Nav
+  @else if $section-type == horizontal-nav {
+    padding-top: 0;
+    border: 0;
+    position: static;
+
+    > #{$title-selector} {
+      width: auto;
+      border: $section-border-style $section-border-size $section-border-color;
+      border-#{$default-float}: 0;
+      top: -1px;
+      position: absolute;
+      z-index: 1;
+
+      a { width: 100%; }
+    }
+
+    #{$content-selector} { display: none; }
+
+    &.active {
+      & > #{$content-selector} {
+        display: block;
+        position: absolute;
+        z-index: 999;
+        #{$default-float}: 0;
+        top: -2px;
+        min-width: $section-vertical-nav-min-width;
+        border: $section-border-style $section-border-size $section-border-color;
+      }
+    }
+  }
+
+}
+
+
+
+@if $include-html-section-classes != false {
+
+  /* Sections */
+  .section-container, .section-container.auto {
+    @include section-container(accordion);
+
+    &>section,
+    &>.section { @include section(accordion); }
+  }
+
+  .section-container.tabs {
+    @include section-container(false, tabs);
+
+    &>section,
+    &>.section { @include section(tabs, $title-bg-active:#fff); }
+  }
+
+  @media #{$small} {
+
+    .section-container.auto {
+      @include section-container(false, tabs);
+
+      &>section,
+      &>.section { @include section(tabs, $title-bg-active:#fff); }
+    }
+    .section-container.accordion .section {
+      padding-top: 0 !important;
+    }
+
+    .section-container.vertical-tabs {
+      @include section-container(false, vertical-tabs);
+
+      section,
+      .section { @include section(vertical-tabs); }
+    }
+
+    .section-container.vertical-nav {
+      @include section-container(false, vertical-nav);
+
+      &>section,
+      &>.section { @include section(vertical-nav); }
+    }
+
+    .section-container.horizontal-nav {
+      @include section-container(false, horizontal-nav);
+
+      &>section,
+      &>.section { @include section(horizontal-nav); }
+    }
+  }
+
+}

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

@@ -0,0 +1,69 @@
+//
+// Side Nav Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use this to control padding.
+$side-nav-padding:           emCalc(14px) 0 !default;
+
+// We use these to control list styles.
+$side-nav-list-type:         none !default;
+$side-nav-list-position:     inside !default;
+$side-nav-list-margin:       0 0 emCalc(7px) 0 !default;
+
+// We use these to control link styles.
+$side-nav-link-color: $primary-color !default;
+$side-nav-link-color-active: lighten(#000, 30%) !default;
+$side-nav-font-size:         emCalc(14px) !default;
+$side-nav-font-weight:       bold !default;
+
+// We use these to control border styles
+$side-nav-divider-size:      1px !default;
+$side-nav-divider-style:     solid !default;
+$side-nav-divider-color:     darken(#fff, 10%) !default;
+
+
+//
+// Side Nav Mixins
+//
+
+
+// We use this to style the side-nav
+@mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
+  display: block;
+  margin: 0;
+  padding: $side-nav-padding;
+  list-style-type: $side-nav-list-type;
+  list-style-position: $side-nav-list-position;
+
+  li {
+    margin: $side-nav-list-margin;
+    font-size: $font-size;
+
+    a {
+      display: block;
+      color: $link-color;
+    }
+
+    &.active > a:first-child {
+      color: $side-nav-link-color-active;
+      font-weight: $side-nav-font-weight;
+    }
+
+    &.divider {
+      border-top: $side-nav-divider-size $side-nav-divider-style;
+      height: 0;
+      padding: 0;
+      list-style: none;
+      border-top-color: $divider-color;
+    }
+  }
+}
+
+
+@if $include-html-nav-classes != false {
+
+  /* Side Nav */
+  .side-nav { @include side-nav; }
+
+}

data/scss/abstractio/components/_split-buttons.scss

@@ -0,0 +1,167 @@
+//
+// Split Button Variables
+//
+$include-html-button-classes: $include-html-classes !default;
+
+// We use these to control different shared styles for Split Buttons
+$split-button-function-factor: 15% !default;
+$split-button-pip-color:       #fff !default;
+$split-button-pip-color-alt:   #333 !default;
+$split-button-active-bg-tint:  rgba(0,0,0,0.1) !default;
+
+// We use these to control tiny split buttons
+$split-button-padding-tny:     $button-tny * 9 !default;
+$split-button-span-width-tny:  $button-tny * 6.5 !default;
+$split-button-pip-size-tny:    $button-tny !default;
+$split-button-pip-top-tny:     $button-tny * 2 !default;
+$split-button-pip-default-float-tny:    emCalc(-5px) !default;
+
+// We use these to control small split buttons
+$split-button-padding-sml:     $button-sml * 7 !default;
+$split-button-span-width-sml:  $button-sml * 5 !default;
+$split-button-pip-size-sml:    $button-sml !default;
+$split-button-pip-top-sml:     $button-sml * 1.5 !default;
+$split-button-pip-default-float-sml:    emCalc(-9px) !default;
+
+// We use these to control medium split buttons
+$split-button-padding-med:     $button-med * 6.4 !default;
+$split-button-span-width-med:  $button-med * 4 !default;
+$split-button-pip-size-med:    $button-med - emCalc(3px) !default;
+$split-button-pip-top-med:     $button-med * 1.5 !default;
+$split-button-pip-default-float-med:    emCalc(-9px) !default;
+
+// We use these to control large split buttons
+$split-button-padding-lrg:     $button-lrg * 6 !default;
+$split-button-span-width-lrg:  $button-lrg * 3.75 !default;
+$split-button-pip-size-lrg:    $button-lrg - emCalc(6px) !default;
+$split-button-pip-top-lrg:     $button-lrg + emCalc(5px) !default;
+$split-button-pip-default-float-lrg:    emCalc(-9px) !default;
+
+
+//
+// Split Button Mixin
+//
+
+// We use this mixin to create split buttons that build upon the button mixins
+@mixin split-button($padding:medium, $pip-color:$split-button-pip-color, $span-border:$primary-color, $base-style:true) {
+
+  // With this, we can control whether or not the base styles come through.
+  @if $base-style {
+    position: relative;
+
+    // Styling for the split arrow clickable area
+    span {
+      display: block;
+      height: 100%;
+      position: absolute;
+      #{$opposite-direction}: 0;
+      top: 0;
+      border-#{$default-float}: solid 1px;
+
+      // Building the triangle pip indicator
+      &:before {
+        position: absolute;
+        content: "";
+        width: 0;
+        height: 0;
+        display: block;
+        border-style: inset;
+
+        #{$default-float}: 50%;
+      }
+
+      &:active { background-color: $split-button-active-bg-tint; }
+    }
+  }
+
+  // Control the border color for the span area of the split button
+  @if $span-border {
+    span {
+      border-#{$default-float}-color: darken($span-border, $split-button-function-factor);
+    }
+  }
+
+  // Style of the button and clickable area for tiny sizes
+  @if $padding == tiny {
+    padding-#{$opposite-direction}: $split-button-padding-tny;
+
+    span { width: $split-button-span-width-tny;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-tny;
+        top: $split-button-pip-top-tny;
+        margin-#{$default-float}: $split-button-pip-default-float-tny;
+      }
+    }
+  }
+
+  // Style of the button and clickable area for small sizes
+  @else if $padding == small {
+    padding-#{$opposite-direction}: $split-button-padding-sml;
+
+    span { width: $split-button-span-width-sml;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-sml;
+        top: $split-button-pip-top-sml;
+        margin-#{$default-float}: $split-button-pip-default-float-sml;
+      }
+    }
+  }
+
+  // Style of the button and clickable area for default (medium) sizes
+  @else if $padding == medium {
+    padding-#{$opposite-direction}: $split-button-padding-med;
+
+    span { width: $split-button-span-width-med;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-med;
+        top: $split-button-pip-top-med;
+        margin-#{$default-float}: $split-button-pip-default-float-med;
+      }
+    }
+  }
+
+  // Style of the button and clickable area for large sizes
+  @else if $padding == large {
+    padding-#{$opposite-direction}: $split-button-padding-lrg;
+
+    span { width: $split-button-span-width-lrg;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-lrg;
+        top: $split-button-pip-top-lrg;
+        margin-#{$default-float}: $split-button-pip-default-float-lrg;
+      }
+    }
+  }
+
+  // Control the color of the triangle pip
+  @if $pip-color {
+    span:before { border-color: $pip-color transparent transparent transparent; }
+  }
+}
+
+
+@if $include-html-button-classes != false {
+
+  /* Split Buttons */
+  .split.button { @include split-button;
+
+    &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); }
+    &.alert { @include split-button(false, false, $alert-color, false); }
+    &.success { @include split-button(false, false, $success-color, false); }
+
+    &.tiny { @include split-button(tiny, false, false, false); }
+    &.small { @include split-button(small, false, false, false); }
+    &.large { @include split-button(large, false, false, false); }
+    &.expand { padding-left: 2em; }
+
+    &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); }
+
+    &.radius span { @include side-radius($opposite-direction, $global-radius); }
+    &.round span { @include side-radius($opposite-direction, 1000px); }
+  }
+
+}