modularis 0.0.2 → 0.0.3

data/scss/compagecss/components/_dropdown-buttons.scss

@@ -1,114 +0,0 @@
-//
-// Dropdown Button Variables
-//
-
-// We use these to set the color of the pip in dropdown buttons
-$dropdown-button-pip-color:     #fff !default;
-$dropdown-button-pip-color-alt: #333 !default;
-
-// We use these to style tiny dropdown buttons
-$dropdown-button-padding-tny:   $button-tny * 5 !default;
-$dropdown-button-pip-size-tny:  $button-tny !default;
-$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
-$dropdown-button-pip-top-tny:   -$button-tny / 2 + emCalc(1px) !default;
-
-// We use these to style small dropdown buttons
-$dropdown-button-padding-sml:   $button-sml * 5 !default;
-$dropdown-button-pip-size-sml:  $button-sml !default;
-$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
-$dropdown-button-pip-top-sml:   -$button-sml / 2 + emCalc(1px) !default;
-
-// We use these to style medium dropdown buttons
-$dropdown-button-padding-med:   $button-med * 4 + emCalc(3px) !default;
-$dropdown-button-pip-size-med:  $button-med - emCalc(3px) !default;
-$dropdown-button-pip-opposite-med: $button-med * 2 !default;
-$dropdown-button-pip-top-med:   -$button-med / 2 + emCalc(2px) !default;
-
-// We use these to style large dropdown buttons
-$dropdown-button-padding-lrg:   $button-lrg * 4 !default;
-$dropdown-button-pip-size-lrg:  $button-lrg - emCalc(6px) !default;
-$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12px) !default;
-$dropdown-button-pip-top-lrg:   -$button-lrg / 2 + emCalc(3px) !default;
-
-//
-// Dropdown Button Mixin
-//
-
-// We use this mixin to build off of the button mixin and add dropdown button styles
-@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
-
-  // We add in base styles, but they can be negated by setting to 'false'.
-  @if $base-style {
-    position: relative;
-
-    // This creates the base styles for the triangle pip
-    &:before {
-      position: absolute;
-      content: "";
-      width: 0;
-      height: 0;
-      display: block;
-      border-style: solid;
-      border-color: $dropdown-button-pip-color transparent transparent transparent;
-      top: 50%;
-    }
-  }
-
-  // If we're dealing with tiny buttons, use these styles
-  @if $padding == tiny {
-    padding-#{$opposite-direction}: $dropdown-button-padding-tny;
-    &:before {
-      border-width: $dropdown-button-pip-size-tny;
-      #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
-      margin-top: $dropdown-button-pip-top-tny;
-    }
-  }
-
-  // If we're dealing with small buttons, use these styles
-  @if $padding == small {
-    padding-#{$opposite-direction}: $dropdown-button-padding-sml;
-    &:before {
-      border-width: $dropdown-button-pip-size-sml;
-      #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
-      margin-top: $dropdown-button-pip-top-sml;
-    }
-  }
-
-  // If we're dealing with default (medium) buttons, use these styles
-  @if $padding == medium {
-    padding-#{$opposite-direction}: $dropdown-button-padding-med;
-    &:before {
-      border-width: $dropdown-button-pip-size-med;
-      #{$opposite-direction}: $dropdown-button-pip-opposite-med;
-      margin-top: $dropdown-button-pip-top-med;
-    }
-  }
-
-  // If we're dealing with large buttons, use these styles
-  @if $padding == large {
-    padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
-    &:before {
-      border-width: $dropdown-button-pip-size-lrg;
-      #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
-      margin-top: $dropdown-button-pip-top-lrg;
-    }
-  }
-
-  // We can control the pip color. We didn't use logic in this case, just set it and forget it.
-  @if $pip-color {
-    &:before { border-color: $pip-color transparent transparent transparent; }
-  }
-}
-
-
-@if $include-html-button-classes != false {
-
-  /* Dropdown Button */
-  .dropdown.button { @include dropdown-button;
-    &.tiny { @include dropdown-button(tiny,$base-style:false); }
-    &.small { @include dropdown-button(small,$base-style:false); }
-    &.large { @include dropdown-button(large,$base-style:false); }
-    &.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
-  }
-
-}

data/scss/compagecss/components/_dropdown.scss

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

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

@@ -1,225 +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, $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

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