modularis 0.0.1

data/scss/compagecss/components/_dropdown.scss

@@ -0,0 +1,149 @@
+//
+// Dropdown Variables
+//
+
+// We use these to controls height and width styles.
+$f-dropdown-max-width:            200px !default;
+$f-dropdown-height:               auto !default;
+$f-dropdown-max-height:           none !default;
+$f-dropdown-margin-top:           2px !default;
+
+// We use this to control the background color
+$f-dropdown-bg:                   #fff !default;
+
+// We use this to set the border styles for dropdowns.
+$f-dropdown-border-style:         solid !default;
+$f-dropdown-border-width:         1px !default;
+$f-dropdown-border-color:         darken(#fff, 20%) !default;
+
+// We use these to style the triangle pip.
+$f-dropdown-triangle-size:        6px !default;
+$f-dropdown-triangle-color:       #fff !default;
+$f-dropdown-triangle-side-offset: 10px !default;
+
+// We use these to control styles for the list elements.
+$f-dropdown-list-style:           none !default;
+$f-dropdown-font-color:           #555 !default;
+$f-dropdown-font-size:            emCalc(14px) !default;
+$f-dropdown-list-padding:         emCalc(5px) emCalc(10px) !default;
+$f-dropdown-line-height:          emCalc(18px) !default;
+$f-dropdown-list-hover-bg:        #eeeeee !default;
+$dropdown-mobile-default-float:            0 !default;
+
+// We use this to control the styles for when the dropdown has custom content.
+$f-dropdown-content-padding:      emCalc(20px) !default;
+
+//
+// Dropdown Mixins
+//
+
+// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
+
+// We use this to style the dropdown container element.
+@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
+  position: absolute;
+  top: -9999px;
+  list-style: $f-dropdown-list-style;
+
+  *:first-child { margin-top: 0; }
+  *:last-child { margin-bottom: 0; }
+
+  @if $content == list {
+    width: 100%;
+    max-height: $f-dropdown-max-height;
+    height: $f-dropdown-height;
+    background: $f-dropdown-bg;
+    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
+    font-size: $em-base;
+    z-index: 99;
+  }
+  @else if $content == content {
+    padding: $f-dropdown-content-padding;
+    width: 100%;
+    height: $f-dropdown-height;
+    max-height: $f-dropdown-max-height;
+    background: $f-dropdown-bg;
+    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
+    font-size: $em-base;
+    z-index: 99;
+  }
+
+  @if $triangle {
+    margin-top: $f-dropdown-margin-top;
+
+    &:before {
+      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
+      position: absolute;
+      top: -($f-dropdown-triangle-size * 2);
+      #{$default-float}: $f-dropdown-triangle-side-offset;
+      z-index: 99;
+    }
+    &:after {
+      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
+      position: absolute;
+      top: -(($f-dropdown-triangle-size + 1) * 2);
+      #{$default-float}: $f-dropdown-triangle-side-offset - 1;
+      z-index: 98;
+    }
+
+    &.right:before {
+      left: auto;
+      right: $f-dropdown-triangle-side-offset;
+    }
+    &.right:after {
+      left: auto;
+      right: $f-dropdown-triangle-side-offset - 1;
+    }
+  }
+
+  @if $max-width { max-width: $max-width; }
+  @else { max-width: $f-dropdown-max-width; }
+
+}
+
+// We use this to style the list elements or content inside the dropdown.
+@mixin dropdown-style {
+  font-size: $f-dropdown-font-size;
+  cursor: pointer;
+  
+  line-height: $f-dropdown-line-height;
+  margin: 0;
+
+  &:hover,
+  &:focus { background: $f-dropdown-list-hover-bg; }
+
+  a {
+    display: block;
+    padding: $f-dropdown-list-padding;
+    color: $f-dropdown-font-color;
+  }
+}
+
+
+@if $include-html-nav-classes != false {
+
+  @media only screen and (max-width: 767px) {
+    .f-dropdown {
+      max-width: 100%;
+      #{$default-float}: $dropdown-mobile-default-float;
+    }
+  }
+
+  /* Modularis Dropdowns */
+  .f-dropdown {
+    @include dropdown-container(content);
+    // max-width: none;
+
+    li { @include dropdown-style; }
+
+    // You can also put custom content in these dropdowns
+    &.content { @include dropdown-container(content, $triangle:false); }
+
+    // Sizes
+    &.tiny    { max-width: 200px; }
+    &.small   { max-width: 300px; }
+    &.medium  { max-width: 500px; }
+    &.large   { max-width: 800px; }
+  }
+
+}

data/scss/compagecss/components/_flex-video.scss

@@ -0,0 +1,45 @@
+//
+// Flex Video Variables
+//
+
+// We use these to control video container padding and margins
+$flex-video-padding-top:               emCalc(25px) !default;
+$flex-video-padding-bottom:            67.5% !default;
+$flex-video-margin-bottom:             emCalc(16px) !default;
+
+// We use this to control widescreen bottom padding
+$flex-video-widescreen-padding-bottom: 57.25% !default;
+
+//
+// Flex Video Mixins
+//
+
+@mixin flex-video-container {
+  position: relative;
+  padding-top: $flex-video-padding-top;
+  padding-bottom: $flex-video-padding-bottom;
+  height: 0;
+  margin-bottom: $flex-video-margin-bottom;
+  overflow: hidden;
+
+  &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
+  &.vimeo { padding-top: 0; }
+
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    #{$default-float}: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@if $include-html-media-classes != false {
+
+  /* Flex Video */
+  .flex-video { @include flex-video-container; }
+
+}

data/scss/compagecss/components/_flexbox-grid.scss

@@ -0,0 +1,225 @@
+//
+// 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, $direction: standard) {
+
+  display: -ms-flexbox;
+  -ms-box-orient: horizontal;
+
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: flex;
+
+  -webkit-flex-flow: row wrap;
+  -moz-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+
+  // use @include grid-row($direction: reverse); to order columns in reverse
+  // use @include grid-row($direction: stack); to order columns  vertically
+  // use @include grid-row($direction: reverse-stack); to order columns vertically in reverse
+  @if $direction == reverse {
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+  } @else if $direction == stack {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  } @else if $direction == reverse-stack {
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+  }
+
+  // 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, jms: NA for flexbox
+    // @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;
+  }
+
+  // jms: NA for flexbox
+  // @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;
+
+    &.flip { @include grid-row($direction:reverse); }
+    &.stack { @include grid-row($direction:stack); 
+      &.flip { @include grid-row($direction:reverse-stack); }
+    }
+
+    &.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 {
+      .row.stack .small#{-$i} { @include grid-column($columns: 12); }
+    }
+
+    @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 {
+      .row.stack .large#{-$i} { @include grid-column($columns: 12); }
+    }
+
+    @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/_flip.scss

@@ -0,0 +1,105 @@
+//
+// Cards Mixin
+//
+
+@mixin flip-object ($perspective: 5000, $ratioX: false, $ratioY: false, $clip-back: false, $flip-axis: y, $container: ".container", $front: ".front", $back: ".back", $flip-target: "a.flip-this") {
+
+	position: relative;
+	padding: 0; margin: 0;
+
+	$y-flip: 1;
+	$x-flip: 0;
+
+	@if $flip-axis == x {
+		$y-flip: 0;
+		$x-flip: 1;
+	}
+
+	-webkit-perspective: $perspective;
+	perspective: $perspective;
+
+	#{$container} {	
+		
+		-webkit-transform-style: preserve-3d;
+		transform-style: preserve-3d;
+		-webkit-transition: 0.6s;
+		transition: 0.6s;
+
+		#{$front}, #{$back} {
+			width: 100%;
+
+			-webkit-backface-visibility: hidden; 
+			backface-visibility: hidden;
+
+			.row, .column, .columns {
+				-webkit-backface-visibility: hidden; 
+				backface-visibility: hidden;
+			}
+		}
+
+		#{$front} {
+			z-index: 2;
+		}
+
+		#{$back} {
+			position: absolute;
+			height: 100%;
+			left: 0; top: 0;
+
+			@if $clip-back {
+				overflow-y: scroll;
+			}
+
+			@if $flip-axis == y {
+				-webkit-transform: rotateY(180deg);
+				transform: rotateY(180deg);
+			} @else if $flip-axis == x {
+				-webkit-transform: rotateX(180deg);
+				transform: rotateX(180deg);
+			}
+		}
+
+		//Ratio detection and settings
+		@if ($ratioX != false) and ($ratioY != false) {
+
+			width: 100%; height: 0;
+			padding-bottom: percentage($ratioY / $ratioX);
+
+		}
+		
+		//Detect a link to flip back and forth, or flip on hover
+		@if $flip-target {
+			&.active {
+				-webkit-transform: rotate3d($x-flip,$y-flip,0,180deg);
+				transform: rotate3d($x-flip,$y-flip,0,180deg);
+			}
+		} @else {
+			&:hover {
+				-webkit-transform: rotate3d($x-flip,$y-flip,0,180deg);
+				transform: rotate3d($x-flip,$y-flip,0,180deg);
+			}
+		}
+
+	}
+}
+
+@mixin flip-card-style($padding: 1em, $border-color: #eee, $border-width: 1px, $container: ".container", $front: ".front", $back: ".back") { 
+	
+	#{$container} {
+
+		border: solid $border-width $border-color;
+
+		#{$front}, #{$back} { padding: $padding; }
+
+	}
+
+}
+
+
+//
+// Default CSS Classes
+//
+
+.flip { @include flip-object(); }
+.card { @include flip-object($flip-target: false, $clip-back: true); @include flip-card-style(); }
+.card.square { @include flip-object($flip-target: false, $clip-back: true, $ratioX: 1, $ratioY: 1); @include flip-card-style(); }