fae-railsz 2.1.0

data/app/assets/stylesheets/fae/globals/imports/finescss/_fine.scss

@@ -0,0 +1,7 @@
+// scss-lint:disable Indentation, TrailingSemicolon
+
+@import
+  'fine_variables',
+  'fine_functions',
+  'fine_mixins'
+;

data/app/assets/stylesheets/fae/globals/imports/finescss/_fine_functions.scss

@@ -0,0 +1,88 @@
+//////////////////////////////
+// FINE Functions
+//////////////////////////////
+
+// Return a negative integer of the supplied value
+@function negate($integer) {
+  @if $integer > 0 {
+    @return 0 - $integer;
+  } @else {
+    @return $integer;
+  }
+}
+
+// Z-index function: comma-separated list and item taken
+// http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
+@function z($list, $element) {
+  $z-index: index($list, $element);
+
+  @if $z-index {
+    @return $z-index;
+  }
+
+  @warn "There is no item '#{$element}' in this list; choose one of: #{$list}";
+  @return null;
+}
+
+// Taken from Foundation
+@function emCalc($pxWidth) {
+  @return $pxWidth / $em-base * 1em;
+}
+
+@function remCalc($pxWidth) {
+  @return $pxWidth / $em-base * 1rem;
+}
+
+// Helper for finding value in a faux sass hash -- i.e. a list
+// http://hugogiraudel.com/2013/08/12/sass-functions/
+@function match($collection, $value) {
+  @each $item in $collection {
+    $index: index($item, $value);
+    @if $index {
+      $return: if($index == 1, 2, $index);
+      @return nth($item, $return);
+    }
+  }
+  @return false;
+}
+
+// Grabs a key from $list
+// @param {key} $key - Key to get value from $list map
+// @return - Value of key
+@function mapperize($list, $key) {
+  @if map-has-key($list, $key) {
+    @return map-get($list, $key);
+  } @else {
+    @warn "#{$key} was not found";
+    @return null;
+  }
+}
+
+@function gray($key: 30) {
+  @return mapperize($grays, $key);
+}
+
+@function fae-icon($key: 'home') {
+  $icon-code: mapperize($fae-required-icons, $key);
+  // Unicode chars are escaped; instead of using a slash in the map,
+  //   we add the slash here
+  // https://github.com/sass/sass/issues/659#issuecomment-64818741
+  @return unquote("\"\\#{$icon-code}\"");
+}
+
+// Choose from a light or dark contrasting foreground color given a background
+// Original function: https://medium.com/@mkel23/calculating-color-contrast-with-sass-eff39ef23f96
+@function pickForegroundColor($background, $c-light, $c-dark) {
+  $r: red($background);
+  $g: green($background);
+  $b: blue($background);
+
+  $yiq: (($r*299)+($g*587)+($b*114))/1000;
+
+  @if ($yiq >= 170) {
+    @return $c-dark; // Dark foreground
+  }
+  @else {
+    @return $c-light; // Light foreground
+  }
+}

data/app/assets/stylesheets/fae/globals/imports/finescss/_fine_mixins.scss

@@ -0,0 +1,280 @@
+// scss-lint:disable VendorPrefixes
+
+// Shortcut for text color of hover action
+@mixin hover($color: false) {
+  &:hover {
+    @if $color {
+      color: $color;
+    } @else {
+      @content;
+    }
+  }
+}
+
+// Remove all list properties
+@mixin list--none {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+// Make a triangle (taken from Bourbon)
+@mixin triangle($direction: top, $color: $c-black, $size: 30px, $shadow: false) {
+  position: relative;
+  background: $color;
+
+  &:after {
+    border: solid transparent;
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-color: rgba($c-black, 0);
+    border-width: $size;
+
+    @if ($direction == top) {
+      bottom: 100%;
+      left: 7%;
+      margin-left: $size;
+      border-bottom-color: $color;
+    }
+
+    @if ($direction == bottom) {
+      top: 100%;
+      left: 50%;
+      border-top-color: $color;
+      margin-left: negate($size);
+      // border-width: $size;
+    }
+
+    @if ($direction == left) {
+      top: 20%;
+      left: 0;
+      margin-left: -$size * 2;
+      border-right-color: $color;
+    }
+
+    @if ($direction == right) {
+      top: 20%;
+      left: auto;
+      right: 0;
+      margin-right: -$size * 2;
+      border-left-color: $color;
+    }
+  }
+
+  @if ($shadow) {
+    &:before {
+      border: solid transparent;
+      content: ' ';
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+      border-color: rgba($c-black, 0);
+      border-width: $size;
+      z-index: 2;
+
+      @if ($direction == left) {
+        top: 20%;
+        left: 0;
+        margin-left: -(($size * 2) + 1);
+        border-right-color: $shadow;
+      }
+
+      @if ($direction == top) {
+        bottom: 100%;
+        left: 7%;
+        margin-left: $size;
+        border-bottom-color: $shadow;
+      }
+    }
+
+    &:after {
+      z-index: 3;
+    }
+  }
+}
+
+// Clearfix
+@mixin clearfix {
+  &:before,
+  &:after {
+    content: ' ';
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+// Throw it your list of css classes without periods and it'll return a z-index or nothing at all if the parent selector is not in the list
+// @example
+//   $list: (
+//     '.modal-bg',
+//     '.modal-content'
+//   );
+//
+//   .modal-bg {
+//     @include stack($list);
+//   }
+@mixin stack($list, $element:false) {
+  $z: false;
+
+  @if $element {
+    $z: z($list, $element);
+  } @else {
+    $parents: &;
+    $target: length($parents);
+    $element: nth($parents, $target);
+    $z: z($list, inspect($element));
+  }
+
+  @if $z {
+    z-index: $z;
+  }
+}
+
+// Media Query Fun
+// http://www.sitepoint.com/managing-responsive-breakpoints-sass/
+@mixin bp($name, $breakpoint_list: $breakpoints) {
+  // If the key exists in the map
+  @if map-has-key($breakpoint_list, $name) {
+    // Prints a media query based on the value
+    @media #{inspect(map-get($breakpoint_list, $name))} {
+      @content;
+    }
+  } @else {
+    // If the key doesn't exist in the map
+    @warn "Unfortunately, no value with #{$name} could be retrieved from `$breakpoint`. "
+        + 'Please make sure it is defined in `$breakpoints` map.';
+  }
+}
+
+// Style placeholder text at the root level or on an element
+@mixin placeholder {
+
+  @if & {
+
+    &::-webkit-input-placeholder {
+      @content;
+    }
+
+    &::-moz-placeholder {
+      @content;
+    }
+
+    &:-ms-input-placeholder {
+      @content;
+    }
+
+  } @else {
+
+    // scss-lint:disable QualifyingElement
+    input[placeholder],
+    textarea[placeholder] {
+      @content;
+    }
+
+    ::-moz-placeholder {
+      @content;
+    }
+
+    :-moz-placeholder {
+      @content;
+    }
+
+    ::-webkit-input-placeholder {
+      @content;
+    }
+
+    :-ms-input-placeholder {
+      @content;
+    }
+
+  }
+}
+
+// IE
+@mixin ie($version: '') {
+  @if & {
+    .ie#{unquote($version)} & {
+      @content;
+    }
+  } @else {
+    .ie#{unquote($version)} {
+      @content;
+    }
+  }
+}
+
+// Touch and mobile
+@mixin touch {
+  @if & {
+    .touch & {
+      @content;
+    }
+  } @else {
+    .touch {
+      @content;
+    }
+  }
+}
+
+// Include the icomoon font properties
+@mixin icomoon {
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  // Better Font Rendering
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Vertically center element
+// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
+@mixin vertical-center {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/// Makes an item relatively sized according
+/// to a ratio and the screen size
+/// @param {number} $width
+/// @param {number} $height
+/// @example scss - aspect-ratio mixin
+///  @include aspect-ratio(1, 0.8);
+@mixin aspect-ratio($x, $y) {
+
+  @if (type-of($x) != number) or
+      (type-of($y) != number) {
+    @error 'You need to enter a number as the second and third paramaters.'
+  }
+
+  overflow: hidden;
+
+  &:before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: ($y / $x) * 100%;
+  }
+
+  > *:first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

data/app/assets/stylesheets/fae/globals/imports/finescss/_fine_variables.scss

@@ -0,0 +1,30 @@
+// FINE Standard Breakpoints
+$fine-breakpoints: (
+  'small'           : ( min-width:  420px ),
+  'small-down'      : ( max-width:  420px ),
+  'medium'          : ( min-width:  768px ),
+  'medium-down'     : ( max-width:  768px ),
+  'medium-only'     : unquote('(min-width: 768px) and (max-width: 1024px)'),
+  'medium-portrait' : unquote('(min-width: 768px) and (max-width: 959px)'),
+  'large'           : ( min-width: 1024px ),
+  'large-down'      : ( max-width: 1024px ),
+  'print'           : ( only print ),
+  'screen'          : ( only screen ),
+  'retina'          : unquote('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)'),
+  'portrait'        : unquote('only screen and (orientation: portrait)'),
+  'landscape'       : unquote('only screen and (orientation: landscape)'),
+);
+
+// Project $breakpoints map to guard against deletion in project _variables
+$breakpoints: () !default;
+
+$em-base: 16px !default;
+
+$f-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$f-serif: Times New Roman, Georgia, serif;
+$f-script: Brush Script MT, Trebuchet MS, 'Helvetica Neue', Helvetica, Arial, script;
+$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Monaco, Menlo, 'Andale Mono', monospace;
+$f-international: 'Microsoft YaHei New', 'Microsoft Yahei', '微软雅黑', 宋体, SimSun, STXihei, '华文细黑', 'MS PGothic', $f-sans;
+
+$c-white: #fff;
+$c-black: #000;

data/app/assets/stylesheets/fae/globals/layout/_base.scss

@@ -0,0 +1,48 @@
+.main-content {
+  position: relative;
+  min-height: 100%;
+
+  @include bp(large) {
+    min-height: calc(100% - 90px); // roughly the size of the header
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: $sidenav-width - 10px;
+    top: 0;
+    width: 10px;
+    height: 100%;
+  }
+}
+
+.content {
+  padding: 30px $content-buffer;
+  padding-bottom: 0;
+  display: block; // IE, Safari don't treat <main> as a block element
+
+  &.-bottom-shim {
+    padding-bottom: 150px;
+  }
+
+  h2 {
+    padding: 17px $content-buffer;
+    color: pickForegroundColor($c-custom-highlight, $c-white, $c-black);
+    background: $c-custom-highlight;
+    border-top: 1px solid $c-border;
+    text-transform: uppercase;
+    font-size: 14px;
+    letter-spacing: .2em;
+    // counters the padding from .content
+    margin: 0 negate($content-buffer) 30px;
+  }
+
+  h3 {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: bold;
+    font-size: 15px;
+    color: $c-text-heavy;
+    margin-bottom: 20px;
+  }
+}