modularis 0.0.1

data/scss/compagecss/components/_grid.scss

@@ -0,0 +1,184 @@
+//
+// 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

@@ -0,0 +1,52 @@
+//
+// 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

@@ -0,0 +1,210 @@
+//
+// 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

@@ -0,0 +1,56 @@
+//
+// 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

@@ -0,0 +1,84 @@
+//
+// 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

@@ -0,0 +1,21 @@
+//
+// 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

@@ -0,0 +1,86 @@
+//
+// 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); }