brevis 0.1.1 → 0.1.2

data/stylesheets/brevis_components/content_modules/_flexslider.scss

@@ -0,0 +1,103 @@
+@mixin flexslider-reset {
+  @include box-shadow(transparent 0 0 0);
+  @include border-radius(0);
+  background: transparent;
+  margin: 0;
+  border: 0;
+}
+
+@mixin flexslider {
+  margin: 0;
+  background: white;
+  border: 0px solid white;
+  @include border-radius(0);
+  @include box-shadow(0);
+  width: 100%;
+  .slides {
+    padding-left: 0em;
+    li {
+      float: left;
+      display: block;
+      width: 100%;
+    }
+    .flex-caption {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0px;
+      padding: 10px 16px 0 16px;
+      div[class*="additional-links"] {
+        display: inline-block;
+        float: left;
+        margin-right: 1em;
+        &:after {
+          content: "|";
+          margin-left: 1em;
+        }
+        &:last-child {
+          &:after {
+            content: " ";
+          }
+        }
+      }
+    }
+  }
+}
+
+%flex-control-nav {
+  position: relative;
+  bottom: 30px;
+  right: 0px;
+  text-align: right;
+  z-index: 3;
+  float: right;
+}
+
+%flex-direction-nav {
+  .flex-direction-nav {
+    //position: relative
+    a, .flex-disabled a {
+      margin-top: -20px;
+      line-height: 1;
+      font-size: 0;
+      color: white;
+      @include border-radius(3px);
+      @include breakpoint($desktop) {
+        margin-top: -20px;
+      }
+
+      &:before,
+      &:after {
+        content: "";
+        width: 32px;
+        height: 40px;
+        background-repeat: no-repeat;
+        background-size: 35%;
+        background-color: #333333;
+        background-position: 50%;
+      }
+    }
+    a.flex-prev {
+      left: 5px;
+      &:before {
+        @include svg-bg-simple("arrow-left");
+      }
+    }
+    a.flex-next {
+      right: 5px;
+      &:before {
+        @include svg-bg-simple("arrow-right");
+      }
+    }
+  }
+}
+
+@mixin flexslider-buttons {
+  @include hide-text;
+  display: block;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 10px;
+  z-index: map-get($zindex, content);
+}

data/stylesheets/brevis_components/content_modules/_sticky_menu.scss

@@ -0,0 +1,50 @@
+@mixin sticky-wrapper {
+  z-index: map-get($zindex, header);
+  position: relative;
+  clear: both;
+  @include breakpoint($mobile-device) {
+    z-index: map-get($zindex, content) !important;
+    .panel-region-sticky-menu {
+      position: relative !important;
+      top: inherit !important;
+    }
+  }
+}
+
+@mixin sticky-menu {
+  float: left !important;
+  clear: both !important;
+  clear: both !important;
+  height: 40px;
+  z-index: map-get($zindex, header);
+  width: 100%;
+  max-width: 1020px;
+  margin: 0 0 0 -20px;
+  @include breakpoint($mobile-device) {
+    margin: 20px 0 0 0;
+  }
+
+  .menu .leaf {
+    list-style: none;
+    display: inline-block;
+  }
+  .menu {
+    padding-top: 9px;
+    li {
+      margin: 0 6px;
+      a {
+        padding: 0 5px 4px 7px;
+      }
+    }
+  }
+}
+
+@mixin sticky-menu-anchor {
+  display: block;
+  position: relative;
+  top: -50px;
+  visibility: hidden;
+  @include breakpoint($desktop) {
+    top: -170px;
+  }
+}

data/stylesheets/brevis_utilities/_admin.scss

@@ -0,0 +1,13 @@
+@mixin mobile-admin-menu-positioning($admin-nav: 0) {
+  position: fixed;
+  top: 0 + $admin-nav;
+  .navbar-administration & {
+    top: 40px + $admin-nav;
+  }
+  .navbar-tray-open.navbar-horizontal & {
+    top: 80px + $admin-nav;
+  }
+  .responsive-preview-frame & {
+    top: 0 + $admin-nav !important;
+  }
+}

data/stylesheets/brevis_utilities/_animations.scss

@@ -0,0 +1,39 @@
+//*************************************
+// Animations
+
+@mixin transition {
+  -webkit-transition: 1s;
+  -moz-transition: 1s;
+  -o-transition: 1s;
+  transition: 1s;
+}
+
+// check out https://github.com/at-import/animation-studio
+// for more mixins
+
+@mixin alerted {
+  &:before {
+    content: "";
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    height: 8px;
+    width: 8px;
+    @include border-radius(10px);
+    background-color: gold;
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 20px;
+    width: 20px;
+    @include border-radius(20px);
+    background-color: transparent;
+    border: solid gold;
+    border-width: 2px;
+    @include box-sizing(border-box);
+    @include animation($name: alertMe);
+  }
+}

data/stylesheets/brevis_utilities/_breakpoints.scss

@@ -0,0 +1,60 @@
+// BREAKPOINTS
+$breakpoint-to-ems: true;
+
+$print-media: "print";
+$hidpi: min-resolution 143dppx;
+
+// For use with max-width only:
+// +breakpoint(max-width: $tab-l)
+$phone-p: 319px;
+$phone-l: 479px;
+$tab-p: 639px;
+$tab-l: 769px;
+$desk: 1020px;
+$desk-full: 1079px;
+
+// For use with min-width (default breakpoint mixin)
+// +breakpoint($desktop)
+$smartphone-portrait: "screen" $phone-p + 1px;
+$smartphone-landscape: "screen" $phone-l + 1px;
+$tablet-portrait: "screen" $tab-p + 1px;
+$tablet-landscape: "screen" $tab-l + 1px;
+$desktop: $desk + 1px, "no-query" ".lt-ie9";
+
+$desktop-print: $desk + 1px, $print-media, "no-query" ".lt-ie9";
+
+// use
+//     $breakpoint-no-queries: true
+//     $breakpoint-no-query-fallbacks: '.lt-ie9' !global
+// at the top of a panel layout sass file to
+// re-render everything with .lt-ie9 for desktop media queries.
+
+//////////////////////////////
+// COMBINATIONS
+
+// Phones
+$max-phone-p: "screen" (max-width $phone-p);
+$max-phone-l: "screen" (max-width $phone-l);
+$phone-p-phone-l: "screen" $phone-p + 1px $phone-l;
+
+// Tablets
+$max-tab-p: "screen" (max-width $tab-p);
+$max-tab-l: "screen" (max-width $tab-l);
+$phone-l-tab-p: "screen" $phone-p + 1px $tab-p;
+$phone-l-tab-l: "screen" $phone-l + 1px $tab-l;
+$tab-p-tab-l: "screen" $tab-p + 1px $tab-l;
+$tab-p-desk: "screen" $tab-p + 1px $desk;
+$tab-l-desk: "screen" $tab-l + 1px $desk;
+
+// All Mobile
+$mobile-device: "screen" max-width $desk;
+
+// High Resolution Devices
+$mobile-hi-res: "screen" (max-width $desk) $hidpi;
+$desk-hi-res: "screen" (min-width $desk) $hidpi;
+
+@mixin fallback {
+  .lt-ie9 & {
+    @content;
+  }
+}

data/stylesheets/brevis_utilities/_colors.scss

@@ -0,0 +1,24 @@
+//*************************************//
+// Basic Colors
+$text-primary: #333333;
+$text-secondary: #666666;
+$text-tertiary: #999999;
+$text-quaternary: #cccccc;
+
+$alert: #cc0000;
+$page-bg: white;
+
+//*************************************//
+$contrasted-dark-default: $text-primary;
+$contrasted-light-default: white;
+
+@mixin color-contrasted($background-color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: $contrasted-lightness-threshold) {
+  background-color: $background-color;
+  color: contrast-color($background-color, $dark, $light, $threshold);
+  background: $bg;
+  border: 1px solid $brdr;
+  &:hover,
+  &:focus {
+    background: $bg-hover;
+  }
+}

data/stylesheets/brevis_utilities/_eq.scss

@@ -0,0 +1,364 @@
+////////////////////////////////////////////////
+//      __________
+//     / ____/ __ \
+//    / __/ / / / /
+//   / /___/ /_/ /
+//  /_____/\___\_\
+// Element Queries
+// http://snugug.com/musings/element-queries
+
+// *** See how to use the Element Query mixins! ***
+// ***   http://sassmeister.com/gist/8446194    ***
+
+// for when the data-eq is on the same container
+@mixin eq($state) {
+  &[data-eq-state="#{$state}"] {
+    @content;
+  }
+}
+
+// for when the data-eq is on a nested container
+@mixin eq-container($state) {
+  [data-eq-state="#{$state}"] {
+    @content;
+  }
+}
+
+// for when the data-eq is on a parent container
+@mixin eq-parent($state) {
+  [data-eq-state="#{$state}"] & {
+    @content;
+  }
+}
+
+//data-eq-pts
+//pane: 1
+//pane-xs: 320    $phone-p: 319px
+//pane-sm: 440    $phone-l: 479px
+//pane-md: 600    $tab-p: 639px
+//pane-lg: 720    $tab-l: 769px
+//pane-xl: 840
+//pane-xxl: 960   $desk: 960
+
+// Mixins for the panel pane element queries
+@mixin pane-eq-xs-up {
+  &[data-eq-state="pane-xs"],
+  &[data-eq-state="pane-sm"],
+  &[data-eq-state="pane-md"],
+  &[data-eq-state="pane-lg"],
+  &[data-eq-state="pane-xl"] {
+    @content;
+  }
+}
+
+@mixin pane-eq-sm-up {
+  &[data-eq-state="pane-sm"],
+  &[data-eq-state="pane-md"],
+  &[data-eq-state="pane-lg"],
+  &[data-eq-state="pane-xl"] {
+    @content;
+  }
+}
+
+@mixin pane-eq-md-up {
+  &[data-eq-state="pane-md"],
+  &[data-eq-state="pane-lg"],
+  &[data-eq-state="pane-xl"] {
+    @content;
+  }
+}
+
+@mixin pane-eq-lg-up {
+  &[data-eq-state="pane-lg"],
+  &[data-eq-state="pane-xl"] {
+    @content;
+  }
+}
+
+@mixin pane-eq-xl-up {
+  &[data-eq-state="pane-xl"] {
+    @content;
+  }
+  .lt-ie9 {
+    @content;
+  }
+}
+
+@mixin pane-eq-xs-down {
+  &[data-eq-state="pane-xs"] {
+    @content;
+  }
+}
+
+@mixin pane-eq-sm-down {
+  &[data-eq-state="pane-xs"],
+  &[data-eq-state="pane-sm"] {
+    @content;
+  }
+}
+
+@mixin pane-eq-md-down {
+  &[data-eq-state="pane-xs"],
+  &[data-eq-state="pane-sm"],
+  &[data-eq-state="pane-md"] {
+    @content;
+  }
+}
+
+@mixin pane-eq-lg-down {
+  &[data-eq-state="pane-xs"],
+  &[data-eq-state="pane-sm"],
+  &[data-eq-state="pane-md"],
+  &[data-eq-state="pane-lg"] {
+    @content;
+  }
+}
+
+@mixin pane-eq-xl-down {
+  &[data-eq-state="pane-xs"],
+  &[data-eq-state="pane-sm"],
+  &[data-eq-state="pane-md"],
+  &[data-eq-state="pane-lg"],
+  &[data-eq-state="pane-xl"] {
+    @content;
+  }
+  .lt-ie9 {
+    @content;
+  }
+}
+
+// Mixins for the panel pane element queries
+@mixin pane-container-eq-xs-up {
+  [data-eq-state="pane-xs"],
+  [data-eq-state="pane-sm"],
+  [data-eq-state="pane-md"],
+  [data-eq-state="pane-lg"],
+  [data-eq-state="pane-xl"],
+  [data-eq-state="pane-xxl"] {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-sm-up {
+  [data-eq-state="pane-sm"],
+  [data-eq-state="pane-md"],
+  [data-eq-state="pane-lg"],
+  [data-eq-state="pane-xl"],
+  [data-eq-state="pane-xxl"] {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-md-up {
+  [data-eq-state="pane-md"],
+  [data-eq-state="pane-lg"],
+  [data-eq-state="pane-xl"],
+  [data-eq-state="pane-xxl"] {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-lg-up {
+  [data-eq-state="pane-lg"],
+  [data-eq-state="pane-xl"],
+  [data-eq-state="pane-xxl"] {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-xl-up {
+  [data-eq-state="pane-xl"],
+  [data-eq-state="pane-xxl"] {
+    @content;
+  }
+  .lt-ie9 {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-xxl-up {
+  [data-eq-state="pane-xxl"] {
+    @content;
+  }
+  .lt-ie9 {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-xs-down {
+  [data-eq-state="pane-xs"] {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-sm-down {
+  [data-eq-state="pane-xs"],
+  [data-eq-state="pane-sm"] {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-md-down {
+  [data-eq-state="pane-xs"],
+  [data-eq-state="pane-sm"],
+  [data-eq-state="pane-md"] {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-lg-down {
+  [data-eq-state="pane-xs"],
+  [data-eq-state="pane-sm"],
+  [data-eq-state="pane-md"],
+  [data-eq-state="pane-lg"] {
+    @content;
+  }
+}
+
+@mixin pane-container-eq-xl-down {
+  [data-eq-state="pane-xs"],
+  [data-eq-state="pane-sm"],
+  [data-eq-state="pane-md"],
+  [data-eq-state="pane-lg"],
+  [data-eq-state="pane-xl"] {
+    @content;
+  }
+  .lt-ie9 {
+    @content;
+  }
+}
+
+// Mixins for the panel pane element queries
+@mixin pane-parent-eq-xs-up {
+  [data-eq-state="pane-xs"] &,
+  [data-eq-state="pane-sm"] &,
+  [data-eq-state="pane-md"] &,
+  [data-eq-state="pane-lg"] &,
+  [data-eq-state="pane-xl"] &,
+  [data-eq-state="pane-xxl"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-sm-up {
+  [data-eq-state="pane-sm"] &,
+  [data-eq-state="pane-md"] &,
+  [data-eq-state="pane-lg"] &,
+  [data-eq-state="pane-xl"] &,
+  [data-eq-state="pane-xxl"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-md-up {
+  [data-eq-state="pane-md"] &,
+  [data-eq-state="pane-lg"] &,
+  [data-eq-state="pane-xl"] &,
+  [data-eq-state="pane-xxl"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-lg-up {
+  [data-eq-state="pane-lg"] &,
+  [data-eq-state="pane-xl"] &,
+  [data-eq-state="pane-xxl"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-xl-up {
+  [data-eq-state="pane-xl"] &,
+  [data-eq-state="pane-xxl"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-xxl-up {
+  [data-eq-state="pane-xxl"] & {
+    @content;
+  }
+  .lt-ie9 {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-xs-down {
+  [data-eq-state="pane-xs"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-sm-down {
+  [data-eq-state="pane-xs"] &,
+  [data-eq-state="pane-sm"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-md-down {
+  [data-eq-state="pane-xs"] &,
+  [data-eq-state="pane-sm"] &,
+  [data-eq-state="pane-md"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-lg-down {
+  [data-eq-state="pane-xs"] &,
+  [data-eq-state="pane-sm"] &,
+  [data-eq-state="pane-md"] &,
+  [data-eq-state="pane-lg"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-xl-down {
+  [data-eq-state="pane-xs"] &,
+  [data-eq-state="pane-sm"] &,
+  [data-eq-state="pane-md"] &,
+  [data-eq-state="pane-lg"] &,
+  [data-eq-state="pane-xl"] & {
+    @content;
+  }
+}
+
+@mixin pane-parent-eq-xl-down {
+  [data-eq-state="pane-xs"] &,
+  [data-eq-state="pane-sm"] &,
+  [data-eq-state="pane-md"] &,
+  [data-eq-state="pane-lg"] &,
+  [data-eq-state="pane-xl"] &,
+  [data-eq-state="pane-xxl"] & {
+    @content;
+  }
+  .lt-ie9 {
+    @content;
+  }
+}
+
+@mixin eq-debug {
+  @include eq("xxs") {
+    border: solid 1px purple;
+  }
+
+  @include eq("xs") {
+    border: solid 1px green;
+  }
+
+  @include eq("sm") {
+    border: solid 1px orange;
+  }
+
+  @include eq("md") {
+    border: solid 1px red;
+  }
+
+  @include eq("lg") {
+    border: solid 1px blue;
+  }
+
+  @include eq("xl") {
+    border: solid 1px pink;
+  }
+}

data/stylesheets/brevis_utilities/_forms.scss

@@ -0,0 +1,34 @@
+$form-element-height: 40px;
+
+%input_tiny {
+  width: 50px;
+}
+
+%input_small {
+  width: 100px;
+}
+
+%input_medium {
+  width: 150px;
+}
+
+%input_large {
+  width: 200px;
+}
+
+%input_xlarge {
+  width: 250px;
+}
+
+%input_xxlarge {
+  width: 300px;
+}
+
+%input_full {
+  width: 100%;
+}
+
+%input_full_wrap {
+  display: block;
+  padding-right: 8px;
+}

data/stylesheets/brevis_utilities/_header.scss

@@ -0,0 +1,19 @@
+//////////////////////////////
+// Sizes
+$logo-h: 90px;
+$logo-w: 425px;
+$mobile-logo-h: 42px;
+$mobile-logo-w: 42px;
+$logo-bottom-margin: 10px;
+
+$mobile-branding-size: 50px;
+$header-icon: 40px;
+$header-icon-lg: 50px;
+$admin-nav: 40px;
+
+$navicon-size: 40px;
+$navicon-margin: 7px;
+
+$primary-menu-height: 40px;
+$primary-menu-padding-v: 5px;
+$primary-menu-padding-h: 10px;