modularis 0.0.2 → 0.0.3

data/scss/compagecss/components/_grid.scss

@@ -1,184 +0,0 @@
-//
-// Grid Variables
-//
-$row-width:     emCalc(1000px) !default;
-$column-gutter: emCalc(30px) !default;
-$total-columns: 12 !default;
-
-//
-// Grid Function
-//
-
-@function gridCalc($colNumber, $totalColumns) {
-  @return percentage(($colNumber / $totalColumns));
-}
-
-//
-// Grid Mixins
-//
-
-// For creating container, nested, and collapsed rows.
-@mixin grid-row($behavior: false) {
-
-  // use @include grid-row(nest); to include a nested row
-  @if $behavior == nest {
-    width: auto;
-    margin-#{$default-float}: -($column-gutter/2);
-    margin-#{$opposite-direction}: -($column-gutter/2);
-    margin-top: 0;
-    margin-bottom: 0;
-    max-width: none;
-  }
-
-  // use @include grid-row(collapse); to collapsed a container row margins
-  @else if $behavior == collapse {
-    width: 100%;
-    margin: 0;
-    max-width: $row-width;
-  }
-
-  // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
-  @else if $behavior == nest-collapse {
-    width: auto;
-    margin: 0;
-    max-width: none;
-  }
-
-  // use @include grid-row; to use a container row
-  @else {
-    width: 100%;
-    margin-#{$default-float}: auto;
-    margin-#{$opposite-direction}: auto;
-    margin-top: 0;
-    margin-bottom: 0;
-    max-width: $row-width;
-  }
-
-  // Clearfix for all rows
-  @include clearfix();
-
-}
-
-
-// For creating columns - @include these inside a media query to control small vs. large grid layouts
-@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true) {
-
-  position: relative;
-
-  // If collapsed, get rid of gutter padding
-  @if $collapse {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  // Gutter padding whenever a column isn't set to collapse
-  // (use $collapse:null to do nothing)
-  @else if $collapse == false {
-    padding-left: $column-gutter / 2;
-    padding-right: $column-gutter / 2;
-  }
-
-  // If a column number is given, calculate width
-  @if $columns {
-    width: gridCalc($columns, $total-columns);
-
-    // If last column, float naturally instead of to the right
-    @if $last-column { float: $opposite-direction; }
-  }
-
-  // If offset, calculate appropriate margins
-  @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
-
-  // Source Ordering, adds left/right depending on which you use.
-  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
-  @if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
-
-  // If centered, get rid of float and add appropriate margins
-  @if $center {
-    margin-#{$default-float}: auto;
-    margin-#{$opposite-direction}: auto;
-    float: none !important;
-  }
-
-  @if $float {
-    @if $float == left or $float == true { float: $default-float; }
-    @else if $float == right { float: $opposite-direction; }
-    @else { float: none; }
-  }
-
-}
-
-
-/* Grid HTML Classes */
-@if $include-html-grid-classes != false {
-
-  .row {
-    @include grid-row;
-
-    &.collapse {
-      .column,
-      .columns { @include grid-column($collapse:true); }
-    }
-
-    .row { @include grid-row($behavior:nest);
-      &.collapse { @include grid-row($behavior:nest-collapse); }
-    }
-  }
-
-  .column,
-  .columns { @include grid-column($columns:$total-columns); }
-
-  @media only screen {
-
-    .column,
-    .columns { @include grid-column($columns:false); }
-
-    @for $i from 1 through $total-columns {
-      .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
-    }
-
-    @for $i from 1 through $total-columns - 2 {
-      .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
-    }
-
-    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
-    [class*="column"] + [class*="column"].end { float: $default-float; }
-
-    .column.small-centered,
-    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
-  }
-
-  /* Styles for screens that are atleast 768px; */
-  @media #{$small} {
-
-    @for $i from 1 through $total-columns {
-      .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
-    }
-
-    @for $i from 1 through $total-columns - 1 {
-      .row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
-    }
-
-    @for $i from 1 through $total-columns - 1 {
-      .push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
-      .pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
-    }
-
-    @for $i from 1 through $total-columns - 1 {
-      .small-push#{-$i} { #{$default-float}: inherit; }
-      .small-pull#{-$i} { #{$opposite-direction}: inherit; }
-    }
-
-    .column.small-centered,
-    .columns.small-centered {
-      margin-#{$default-float}: 0;
-      margin-#{$opposite-direction}: 0;
-      float: none !important;
-    }
-
-    .column.large-centered,
-    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
-
-  }
-
-}

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

@@ -1,52 +0,0 @@
-//
-// Inline List Variables
-//
-
-// 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-grid-classes != false {
-
-  /* Inline Lists */
-  .inline-list {
-    @include inline-list();
-  }
-
-}

data/scss/compagecss/components/_joyride.scss

@@ -1,210 +0,0 @@
-//
-// Joyride Variables
-//
-
-// 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.
-
-/* Modularis 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/compagecss/components/_keystrokes.scss

@@ -1,56 +0,0 @@
-//
-// Keystroke Variables
-//
-
-// 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-media-classes != false {
-
-  /* Keystroke Characters */
-  .keystroke,
-  kbd {
-    @include keystroke;
-    @include radius($keystroke-radius);
-  }
-
-}

data/scss/compagecss/components/_labels.scss

@@ -1,84 +0,0 @@
-//
-// Label Variables
-//
-
-// 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/compagecss/components/_magellan.scss

@@ -1,21 +0,0 @@
-//
-// Magellan Variables
-//
-$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/compagecss/components/_off-canvas.scss

@@ -1,86 +0,0 @@
-//
-// Off Canvas Mixins
-//
-@mixin off-canvas($style: false, $main-element: "[role='main']", $complementary-element: "[role='complementary']", $nav-element: "[role='navigation']", $panels: ".page-panel", $main-row: ".row", $nested-rows: ".row", $menu-button: ".menu-button", $sidebar-button: ".sidebar-button", $timing: 0.25s, $main-large-width: 80%, $complementary-large-width: 20%, $panel-count: 5, $use3d: false) {
-
-	padding: 0; 
-	margin: 0;
-
-	#{$main-row} { overflow: hidden; }
-	#{$main-row} #{$nested-rows} { overflow: visible; }
-
-	#{$main-element}:before { content: " "; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; }
-
-	#{$complementary-element}, #{$main-element} { width: 100%; padding: 0 15px; display: block; position: relative; z-index: 1; -webkit-transition: $timing all ease-in; -moz-transition: $timing all ease-in; -o-transition: $timing all ease-in; transition: $timing all ease-in; }
-
-	@if $use3d {
-
-		#{$complementary-element} { margin-left: -100%; width: $main-large-width; float: left; z-index: 2; }
-		#{$main-element} { margin-left: 0; float: right; z-index: 1; position: relative; }
-
-		&.active #{$complementary-element} { 
-			-webkit-transform: translate3d(percentage(1 / ($main-large-width/100%)),0,0);
-		}
-		&.active #{$main-element} { 
-			-webkit-transform: translate3d($main-large-width,0,0); 
-		}
-
-	} @else {
-		
-		#{$complementary-element} { margin-left: -100%; width: $main-large-width; float: left; z-index: 2; }
-		#{$main-element} { margin-left: 0; float: right; z-index: 1; position: relative; }
-
-		&.active #{$complementary-element} { margin-left: 0; }
-		&.active #{$main-element} { margin-right: -$main-large-width; }
-
-	}
-
-	//Global off canvas styles for screens larger than 768px
-	@media #{$small} {
-		#{$menu-button} , #{$sidebar-button}  { display: none; }
-  	#{$complementary-element} { width: $complementary-large-width; margin-left: 0; float: left; padding: 0 15px; }
-  	#{$main-element} { width: $main-large-width; padding: 0 15px; }
-
-  	.hide-extras #{$main-element} { width: 100%; }
-  	.hide-extras #{$complementary-element} { display: none; }
-	}
-
-	//Top Nav Style
-	@if $style == nav-on-top {
-		#{$nav-element} { -webkit-transition: $timing all ease-in; -moz-transition: $timing all ease-in; -o-transition: $timing all ease-in; transition: $timing all ease-in; }
-
-		#{$nav-element} ul { margin-top: 0; }
-
-		&.active-menu #{$nav-element} { margin-top: 0 !important; }
-
-		@media #{$small} {
-			#{$nav-element} { display: none; }
-		}
-	}
-
-	//Paneled Style
-	@else if $style == paneled {
-
-		&> * { overflow: hidden; }
-		#{$main-row} { width: 100%; }
-
-		#{$main-element} { padding: 0; background: #fff; width: percentage($panel-count); overflow: hidden; float: none; position: relative; left: 0; -webkit-transition: 0.15s all ease-in; -moz-transition: 0.15s all ease-in; -o-transition: 0.15s all ease-in; transition: 0.15s all ease-in; }
-
-		#{$panels} { width: 100%; padding: 0 15px; -webkit-transition: $timing margin ease-in-out; -moz-transition: $timing margin ease-in-out; -o-transition: $timing margin ease-in-out; transition: $timing margin ease-in-out; background: #fff; min-height: 400px; float: left; margin: 0; width: percentage(1 / $panel-count ); }
-
-		@media #{$small} {
-			#{$main-element} { width: 100%; padding: 0; background: #f4f4f4; left: 0 !important; }
-  		.page-panel { display: block; min-height: 800px; float: none; margin: 0; width: 100%; background: #f4f4f4; }
-		}
-	}
-}
-
-
-
-//
-// Default CSS Classes
-//
-
-body.off-canvas { @include off-canvas($use3d: true); }
-body.off-canvas.paneled { @include off-canvas($style: paneled); }
-body.off-canvas.nav-on-top { @include off-canvas($style: nav-on-top); }