modularis 0.0.2 → 0.0.3

data/scss/compagecss/components/_section.scss

@@ -1,303 +0,0 @@
-//
-// Section Variables
-//
-
-// We use these to set padding and hover factor
-$section-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;
-
-// Want to control border size, here ya go!
-$section-border-size:            1px !default;
-$section-border-style:           solid !default;
-$section-border-color:           #ccc !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 {
-
-  }
-
-  // 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;
-  }
-}
-
-// We use this mixin to create the styles for sections as accordions.
-@mixin section($section-type:accordion) {
-
-  // Accordion styles
-  @if $section-type == accordion {
-
-    border-top: $section-border-size $section-border-style $section-border-color;
-    position: relative;
-
-    .title {
-      top: 0;
-      cursor: pointer;
-      width: 100%;
-      margin: 0;
-      background-color: $section-title-bg;
-
-      a {
-        padding: $section-padding;
-        display: inline-block;
-        color: $section-title-color;
-        font-size: emCalc(14px);
-        white-space: nowrap;
-        width: 100%;
-      }
-      &:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
-    }
-
-    .content {
-      display: none;
-      padding: $section-padding;
-      background-color: $section-content-bg;
-
-      &>*:last-child { margin-bottom: 0; }
-      &>*:first-child { padding-top: 0; }
-      &>*:last-child { padding-bottom: 0; }
-    }
-
-
-    &.active {
-      & > .content { display: block; }
-      & > .title { background: $section-title-bg-active; }
-    }
-
-
-  }
-
-  // Tab Styles
-  @else if $section-type == tabs {
-    padding-top: 0;
-    border: 0;
-    position: static;
-
-    .title {
-      width: auto;
-      border: $section-border-size $section-border-style $section-border-color;
-      border-#{$opposite-direction}: 0;
-      border-bottom: 0;
-      position: absolute;
-      z-index: 1;
-
-      a { width: 100%; }
-    }
-    &:last-child .title { border-#{$opposite-direction}: $section-border-size $section-border-style $section-border-color; }
-
-    .content {
-      border: $section-border-size $section-border-style $section-border-color;
-      position: absolute;
-      z-index: 10;
-      top: -1px;
-    }
-
-    &.active {
-
-      & > .title {
-        background-color: $section-title-bg-active-tabs;
-        z-index: 11;
-        border-bottom: 0;
-      }
-      & > .content { position: relative; }
-    }
-  }
-
-  @else if $section-type == vertical-tabs {
-    padding-top: 0 !important;
-    border: 0;
-    position: static;
-    background-color: $section-title-bg;
-
-    .title {
-      position: absolute;
-      border-top: $section-border-size $section-border-style $section-border-color;
-      width: $section-vertical-tabs-title-width;
-    }
-
-    &:first-child .title { border-top: 0; }
-
-    .content {
-      // 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-size $section-border-style $section-border-color;
-      z-index: 10;
-    }
-
-    &.active {
-
-      & > .title {
-        background-color: $section-title-bg-active-tabs;
-        width: $section-vertical-tabs-title-width + emCalc(2px); // Cover the content's left border
-        border-right: 0;
-        z-index: 11; // Put active title on top of the content
-      }
-
-      &:last-child .title {
-        border-bottom: $section-border-size $section-border-style $section-border-color;
-      }
-    }
-  }
-
-  // Vertical Nav Styles
-  @else if $section-type == vertical-nav {
-
-    padding-top: 0 !important;
-
-    .title a { display: block; width: 100%; }
-
-    .content { display: none; }
-
-    &.active {
-      & > .content {
-        display: block;
-        position: absolute;
-        #{$default-float}: 100%;
-        top: -1px;
-        z-index: 999;
-        min-width: $section-vertical-nav-min-width;
-        border: $section-border-size $section-border-style $section-border-color;
-      }
-    }
-  }
-
-  // Horizontal Nav Styles
-  @else if $section-type == horizontal-nav {
-    padding-top: 0;
-    border: 0;
-    position: static;
-
-    .title {
-      width: auto;
-      border: $section-border-size $section-border-style $section-border-color;
-      border-#{$default-float}: 0;
-      top: -1px;
-      position: absolute;
-      z-index: 1;
-
-      a { width: 100%; }
-    }
-
-    .content { display: none; }
-
-    &.active {
-      & > .content {
-        display: block;
-        position: absolute;
-        z-index: 999;
-        #{$default-float}: 0;
-        top: -2px;
-        min-width: $section-vertical-nav-min-width;
-        border: $section-border-size $section-border-style $section-border-color;
-      }
-    }
-  }
-}
-
-
-@if $include-html-section-classes != false {
-
-  /* Sections */
-  .section-container, .section-container.auto {
-    @include section-container;
-
-    &>section,
-    &>.section {
-      @include section;
-    }
-  }
-
-  .section-container.tabs {
-    @include section-container(false, tabs);
-
-    &>section,
-    &>.section { @include section(tabs); }
-  }
-
-  @media #{$small} {
-
-    .section-container.auto {
-      @include section-container(false, tabs);
-
-      &>section,
-      &>.section { @include section(tabs); }
-    }
-    .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);
-
-      &>section,
-      &>.section { @include section(vertical-nav); }
-    }
-
-    .section-container.horizontal-nav {
-      @include section-container(false, horizontal-nav);
-
-      &>section,
-      &>.section { @include section(horizontal-nav); }
-    }
-  }
-
-}

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

@@ -1,68 +0,0 @@
-//
-// Side Nav Variables
-//
-
-// 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 {
-      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/compagecss/components/_split-buttons.scss

@@ -1,166 +0,0 @@
-//
-// Split Button Variables
-//
-
-// 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); }
-  }
-
-}

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

@@ -1,67 +0,0 @@
-//
-// Sub Nav Variables
-//
-
-// 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; }
-
-}