brevis 0.1.1 → 0.1.2

data/stylesheets/brevis_utilities/_images.scss

@@ -0,0 +1,147 @@
+//////////////////////////////
+// Blueprint theme paths - for use with interpolation syntax:
+// background: url("#{$base-images}/image-name.png")
+$base: "../../blueprint";
+$base-images: "../../blueprint/blueprint_images";
+
+$content-stream-img-sm: 50%;
+$content-stream-img-md: 47.5%;
+
+@mixin img-types {
+  .pane-node-field-cover-photo,
+  .field--name-field-image {
+    @content;
+  }
+}
+
+@mixin img-left {
+  float: left;
+  padding: 0 10px 5px 0;
+}
+
+@mixin img-right {
+  float: right;
+  padding: 0 0 5px 10px;
+}
+
+@mixin img-no-float {
+  float: none;
+  padding: 0;
+}
+
+%img-left {
+  @include img-left;
+}
+
+%img-right {
+  @include img-right;
+}
+
+@mixin img2x($file, $type, $width, $height, $inline: "false") {
+  @if $inline == true {
+    background-image: inline-image($file + "." + $type);
+    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
+      & {
+        background-image: inline-image($file + "@2x." + $type);
+        -webkit-background-size: $width $height;
+      }
+    }
+  }
+  @else {
+    background-image: image-url("#{$file}.#{$type}");
+    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
+      & {
+        background-image: image-url("#{$file}@2x.#{$type}");
+        -webkit-background-size: $width $height;
+      }
+    }
+  }
+}
+
+// EXAMPLE:
+// +img2x('puppies', 'png', 100px, 75px)
+
+@mixin svg-bg($filename, $position: 0, $height: 20px, $width: 20px, $spacing: 10px, $bg-color: transparent, $repeat: no-repeat, $attachment: scroll, $source: #{$base-images}, $no-svg-class: ".no-svg", $pseudo: "before") {
+  &:#{$pseudo} {
+    content: "";
+    display: inline-block;
+    background: $bg-color url($source + "/" + $filename + ".svg") $attachment $repeat $position;
+    background-size: $height $width;
+    height: $height;
+    width: $width;
+    margin-right: $spacing;
+  }
+  #{$no-svg-class} & {
+    &:#{$pseudo} {
+      background-image: url($source + "/" + $filename + ".png");
+    }
+  }
+}
+
+@mixin svg-bg-simple($filename, $source: #{$base-images}, $no-svg-class: ".lt-ie9", $pseudo: "before") {
+  background-image: url($source + "/" + $filename + ".svg");
+  #{$no-svg-class} & {
+    background-image: url($source + "/" + $filename + ".png");
+  }
+}
+
+// https://gist.github.com/darren131/3410875
+// @mixin resize-sprite($map, $sprite, $percent)
+//  $spritePath:    sprite-path($map)
+//  $spriteWidth:   image-width($spritePath)
+//  $spriteHeight:  image-height($spritePath)
+//  $width: image-width(sprite-file($map, $sprite))
+//  $height: image-height(sprite-file($map, $sprite))
+//  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)))
+//  width: ceil($width*($percent/100))
+//  height: ceil($height*($percent/100))
+//  background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) )
+
+////////////////
+// INTERNET EXPLORER FALLBACK IMAGE SIZE SHORTCUTS
+@mixin ie-img {
+  //border: pink solid 1px
+  display: block;
+}
+
+%xxs-thumbnail {
+  @include ie-img;
+  width: 90px;
+  height: 50px;
+}
+
+%xs-thumbnail {
+  @include ie-img;
+  width: 140px;
+  height: 85px;
+}
+
+%sm-thumbnail {
+  @include ie-img;
+  width: 205px;
+  height: 128px;
+}
+
+%md-thumbnail {
+  @include ie-img;
+  width: 226px;
+  height: 136px;
+}
+
+%lg-thumbnail {
+  @include ie-img;
+  width: 290px;
+  height: 170px;
+}
+
+%xl-thumbnail {
+  @include ie-img;
+  width: 373px;
+  height: 224px;
+}
+
+%xxl-thumbnail {
+  @include ie-img;
+  width: 636px;
+  height: 223px;
+}

data/stylesheets/brevis_utilities/_layout.scss

@@ -0,0 +1,190 @@
+
+////////////////////////////////////////////////////
+// FLUID GRID COLUMNS  http://sassmeister.com/gist/710eded4e6a323fdfdb6
+///////////////////////////////////////////////////
+$fluid-grid-cols: 1;
+$fluid-grid-grid-rows: 10;
+$fluid-grid-padding: 20px;
+$fluid-grid-class-name: views-row;
+
+@mixin fluid-grid(
+ $cols: $fluid-grid-cols,
+ $grid-rows: $fluid-grid-grid-rows,
+ $padding: $fluid-grid-padding,
+ $class-name: $fluid-grid-class-name
+){
+  .#{$class-name} {
+    width: calc((100% / #{$cols}) + (#{$padding} / #{$cols}));
+    padding: 0 0 $padding $padding;
+  }
+  @for $x from 1 through $grid-rows {
+    .#{$class-name}-#{$x * $cols - ($cols - 1)} {
+      margin-left: -$padding;
+      clear: both;
+    }
+  }
+}
+
+@mixin grid-mobile(
+ $class-name: $fluid-grid-class-name
+){
+  .#{$class-name} {
+    float: left;
+    clear: both;
+    width: 100%;
+    @include box-sizing("border-box");
+  }
+}
+
+@mixin grid-desktop(
+ $class-name: $fluid-grid-class-name
+ ){
+  .#{$class-name} {
+    float: left;
+    clear: none;
+    @include box-sizing("border-box");
+  }
+}
+
+// When using the fluid grid mixin, plug in the following variables:
+// the number of columns
+// the number of rows (if you are unsure guess and add 1 or 2)
+// the padding for the left & right edge of each row
+// and the name of the class for the rows themselves.
+
+// Use the grid-mobile mixin for mobile, and then add a breakpoint
+// and use the grid-desktop mixin for columns 2 and up.
+
+
+
+//======================================
+
+@mixin width-25($padding: 0) {
+  width: 25%;
+  float: left;
+  padding: $padding;
+}
+
+@mixin width-33($padding: 0) {
+  width: 33.33%;
+  float: left;
+  padding: $padding;
+}
+
+@mixin width-50($padding: 0) {
+  width: 50%;
+  float: left;
+  padding: $padding;
+}
+
+@mixin width-66($padding: 0) {
+  width: 66%;
+  float: left;
+  padding: $padding;
+}
+
+@mixin width-75($padding: 0) {
+  width: 75%;
+  float: left;
+  padding: $padding;
+}
+
+@mixin width-100($padding: 0) {
+  width: 100%;
+}
+
+@mixin width-50-100($padding: 0) {
+  width: 100%;
+  float: left;
+  padding: $padding;
+  @include breakpoint($tablet-portrait) {
+    width: 50%;
+    float: left;
+    padding: $padding;
+  }
+}
+
+
+@mixin vertical-center(
+  $container-height: 300px,
+  $inner-name: ".block-inner",
+  $inner-width: "80%") {
+  height: $container-height;
+  text-align: center;
+  &:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+  #{$inner-name} {
+    display: inline-block;
+    vertical-align: middle;
+    width: $inner-width;
+    padding: (100% - $inner-width)/2;
+  }
+}
+
+// Vertical Alignment with Intrinsic ratio which sets the height of the container
+// http://sassmeister.com/gist/bbdf3b09d856138b3989
+@mixin vertical-center-with-ir (
+  $inner-name: ".block-inner",
+  $inner-width: 90%,
+  $container-height: auto,
+  $inner-inner-name: "#{$inner-name}-inner" ){
+  #{$inner-name} {
+    height: 100%;
+    display: inline-block;
+    vertical-align: middle;
+    width: $inner-width;
+    position: absolute !important;
+    top: 0;
+    left: (100% - $inner-width) / 2;
+    &:before {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      width: 0;
+      font-size: 0;
+      vertical-align: middle;
+    }
+  }
+  #{$inner-name}-inner {
+    display: inline-block;
+    vertical-align: middle;
+    width: 98%;
+    text-align: center;
+  }
+}
+
+//this allows you to change out the container and internal name.
+
+@mixin vertical-center-with-ir-flex (
+  $inner-name: ".block-inner",
+  $inner-inner:".block-inner",
+  $inner-width: 80%,
+  $container-height: auto)
+  {
+  #{$inner-name} {
+    height: 100%;
+    display: inline-block;
+    vertical-align: middle;
+    width: $inner-width;
+    position: absolute;
+    top: 0;
+    left: (100% - $inner-width) / 2;
+    &:before {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      width: 0;
+      font-size: 0;
+      vertical-align: middle;
+    }
+  }
+  #{$inner-inner} {
+    display: inline-block;
+    vertical-align: middle;
+    width: 98%;
+  }
+}

data/stylesheets/brevis_utilities/_mediablock.scss

@@ -0,0 +1,99 @@
+@mixin mediablock {
+  margin: 0 ;
+  @include clearfix;
+}
+
+@mixin media-separator {
+  &::before {
+    content: " ";
+    display: block;
+    height: 8px;
+    width: 100%;
+    border: $cool-gray solid 1px;
+    margin: 0 0 20px 0;
+    background: image-url("bg-diagonal-green.jpg") repeat;
+    opacity: 0.4;
+    @include breakpoint($tablet-portrait) {
+      height: 18px;
+    }
+  }
+}
+
+@mixin mediablock__title {
+  h2, h3, h4 {
+    @include tertiary-font;
+    @include font-size(16px, 1.1);
+    @include caps;
+    margin-top: 0;
+    a {
+      color: $color-two;
+    }
+  }
+}
+
+// Default image, floated to the left
+@mixin mediablock__img {
+  margin-bottom: 10px;
+  float: left;
+  margin-right: 1rem;
+  margin-bottom: 0px;
+  @include breakpoint($tablet-portrait) {
+    margin-right: 45px;
+    margin-bottom: 22px;
+  }
+  &.icon {
+    float: left;
+    margin-right: 1rem;
+  }
+  img {
+    display: block;
+    width: auto;
+  }
+}
+
+// Modifier to keep the text from flowing around the image.
+@mixin mediablock--tight($body: "mediablock__body") {
+  .#{$body} {
+    overflow: auto;
+  }
+}
+
+// Modifier to float media to the right, text on the left
+@mixin mediablock--reversed {
+  .mediablock__img {
+    @include breakpoint($smartphone-landscape) {
+      float: right;
+      margin-right: 0;
+      margin-left: 1em;
+    }
+  }
+}
+
+
+@mixin mediablock-tight-view (
+  $wrapper-name: ".view-content-list",
+  $unit-name: ".views-row",
+  $image-field: ".pane-node-field-shared-image",
+  $title-field: ".pane-node-title, .pane-butler-core-node-title-pane",
+  $body-field: ".pane-node-body") {
+
+  #{$wrapper-name} {
+    clear: both;
+  }
+  #{$unit-name} {
+    @include mediablock;
+  }
+  #{$unit-name} ~ #{$unit-name} {
+   @include media-separator
+  }
+  #{$image-field} {
+    @include mediablock__img;
+  }
+  #{$wrapper-name} #{$title-field}  {
+    @include mediablock__title;
+    overflow: auto;
+  }
+  #{$body-field}  {
+    overflow: auto;
+  }
+}

data/stylesheets/brevis_utilities/_page.scss

@@ -0,0 +1,59 @@
+@mixin page-max-width {
+  @include breakpoint($phone-l-tab-p) {
+    max-width: $tab-p;
+    margin: 0 auto;
+  }
+
+  @include breakpoint($tab-p-tab-l) {
+    max-width: $tab-l;
+    margin: 0 auto;
+  }
+
+  @include breakpoint($tab-l-desk) {
+    max-width: $desk;
+    //max-width: $tab-l + 20px
+    margin: 0 auto;
+  }
+
+  @include breakpoint($desktop) {
+    max-width: $desk;
+    margin: 0 auto;
+  }
+
+  @include breakpoint($print-media) {
+    max-width: 900px;
+    margin: 0 auto;
+  }
+}
+
+@mixin content-area-padding($type: both) {
+  @if $type == left {
+    padding-left: 10px;
+    margin-left: 10px;
+    @include breakpoint($tablet-portrait) {
+      padding-left: 20px;
+      margin-left: 10px;
+    }
+  }
+  @if $type == right {
+    padding-right: 10px;
+    margin-right: 10px;
+    @include breakpoint($tablet-portrait) {
+      padding-right: 20px;
+      margin-right: 10px;
+    }
+  }
+  @if $type == both {
+    padding: 10px;
+    margin: 0 10px;
+    @include breakpoint($tablet-portrait) {
+      padding: 10px 20px;
+      margin: 0 10px;
+    }
+
+    @include breakpoint($desktop) {
+      padding: 20px 20px 0px;
+      margin: 0;
+    }
+  }
+}

data/stylesheets/brevis_utilities/_tooltip.scss

@@ -0,0 +1,49 @@
+@mixin hui_tooltip($content: attr(data-tooltip), $direction: top) {
+  position: relative;
+  &:before, &:after {
+    display: none;
+    z-index: 98;
+  }
+  &:hover {
+    &:after  // for text bubble {
+      content: $content;
+      display: block;
+      position: absolute;
+      height: 12px;
+      // (makes total height including padding 22px)
+      padding: 6px;
+      font-size: 12px;
+      white-space: nowrap;
+      color: white;
+      @include text-shadow(1px 1px black);
+      background-color: #222222;
+    }
+    @if $direction == "top" {
+      &:before {
+        @include triangle(down, 6px, #222222);
+        top: -6px;
+        margin-top: 0;
+        left: 47%;
+      }
+      &:after {
+        top: -28px;
+        left: 47%;
+        margin-left: -20px;
+      }
+    }
+    @else if $direction == "bottom" {
+      &:before {
+        @include triangle(up, 6px, #222222);
+        top: auto;
+        margin-top: 0;
+        bottom: -6px;
+        left: 47%;
+      }
+      &:after {
+        bottom: -28px;
+        left: 47%;
+        margin-left: -20px;
+      }
+    }
+  }
+}

data/stylesheets/brevis_utilities/_typography.scss

@@ -0,0 +1,149 @@
+//*************************************
+// Typography
+
+$base-font-size: 16px;
+$base-line-height: 24px;
+$rhythm-unit: "rem";
+$rem-with-px-fallback: true;
+
+$sans-serif-small: Arial, sans-serif;
+$sans-serif-large: Verdana, Geneva, "DejaVu Sans", Arial, Helvetica, sans-serif;
+$serif-small: Garamond, Perpetua, "Times New Roman", serif;
+$serif-large: Georgia, Baskerville, Palatino, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
+$mono: Consolas, Monaco, "Courier New", Courier, monospace, sans-serif;
+
+//  Custom Font Fallbacks
+$primary-sans: "Arial", sans-serif;
+$primary-serif: "Times New Roman", serif;
+$secondary-font: "Impact", $primary-sans;
+$icon-font: "FontAwesome";
+
+@mixin font-smoothing($value: antialiased) {
+  @if $value == antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  @if $value == subpixel {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
+@mixin primary-font {
+  font-family: $sans-serif-small;
+}
+
+@mixin secondary-font {
+  font-family: $secondary-font;
+}
+
+@mixin icon-font {
+  font-family: $icon-font;
+}
+
+@mixin font-awesome {
+  font-family: $font-awesome;
+}
+
+@mixin thick {
+  font-weight: bold;
+}
+
+@mixin thin {
+  font-weight: normal;
+}
+
+@mixin italic {
+  font-style: italic;
+}
+
+@mixin caps {
+  text-transform: uppercase;
+}
+
+@mixin link($link-color: $link, $link-hover: $link-hover, $underline: no) {
+  text-decoration: none;
+  &:link,
+  &:visited {
+    text-decoration: none;
+    color: $link-color;
+  }
+  @if $underline == no {
+    //&.active,
+    &:hover,
+    &:focus {
+      color: $link-hover;
+    }
+  }
+  @if $underline == yes {
+    //&.active,
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      color: $link-hover;
+    }
+  }
+}
+
+@mixin link-inherit-color-hover {
+  a:hover,
+  a:focus {
+    color: inherit;
+  }
+}
+
+@mixin link-inherit-color($hover: hover) {
+  a,
+  a:link,
+  a:visited {
+    color: inherit;
+  }
+  @if $hover == hover {
+    &:hover {
+      @include link-inherit-color-hover;
+    }
+  }
+}
+
+// Blueprint theme - variables are in order of how likely they are to be overridden
+@mixin font-size($size: 22px, $lh: 1.3) {
+  @if unit($lh) == "px" {
+    $lh: $lh / $base-line-height;
+  }
+  @include adjust-font-size-to($size, $lh);
+}
+
+@mixin text-style($size: 22px, $color: $text-primary, $link-color: inherit, $active-color: inherit, $type: null, $underline: no, $lh: 1.3) {
+  @if unit($lh) == "px" {
+    $lh: $lh / $base-line-height;
+  }
+  @include adjust-font-size-to($size, $lh);
+  @if $type == link {
+    a {
+      @include link($link-color, $active-color, $underline);
+    }
+  }
+  @else {
+    color: $color;
+  }
+}
+
+%offscreen {
+  position: absolute;
+  left: -1000em;
+}
+
+@mixin truncate-text($overflow: ellipsis) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: $overflow;
+}
+
+%list-title {
+  @include thick;
+  @include text-style($size: 16px, $lh: 18px);
+}
+
+%small-text {
+  @include text-style($size: 12px, $lh: 16px);
+}