fae-rails 1.2.3 → 1.2.4

data/app/assets/stylesheets/fae/globals/imports/_variables.scss

@@ -0,0 +1,132 @@
+//////////////////////////////
+// Project Specific Variables
+//////////////////////////////
+
+// Project Specific breakpoints
+$breakpoints: (
+  'desktop':                ( min-width:  1100px ),
+  'mobile':                 ( max-width:  520px ),
+  'page_header_save_block': ( max-width:  615px ),
+  'login_container':        ( min-width: 700px ),
+  'login_submit':           ( min-width: 475px ),
+);
+
+// Merge $fine_breakpoints and $breakpoints to use with bp() mixin
+$breakpoints: map-merge($fine-breakpoints, $breakpoints);
+
+$f-headline: $f-sans;
+$f-content: $f-serif;
+
+/* widths, padding, margins, and the like */
+$main_nav_width: 210px;
+
+/* TYPOGRAPHY */
+$f-lato: "Lato", serif;
+
+/* Colors */
+$c-black: #261c16;
+$c-dark_grey: #303030;
+$c-grey: #595959;
+$c-light_grey: #999;
+$c-lighter_grey: #ccc;
+$c-lightest_grey: #eee;
+$c-almost_white: #f7f7f7;
+
+
+/*
+**  Functional name for colors
+*/
+$c-body-bg: $c-almost_white;
+$c-text: $c-grey;
+$c-text-sub: $c-light_grey;
+$c-text-sub-hover: $c-lighter_grey;
+$c-text-heavy: #2b2b2b;
+$c-box_shadow: $c-lighter_grey;
+$c-border: $c-lighter_grey;
+
+/* header area */
+$c-header-bg: $c-black;
+$c-header-logo: $c-white;
+
+/* utility nav area */
+$c-utility-sub-nav-bg: $c-white;
+$c-utility-sub-nav-link-bg: $c-white;
+$c-utility-sub-nav-link-bg-hover: $c-lightest_grey;
+$c-utility-sub-nav-link-color: $c-dark_grey;
+
+/* nav area */
+$c-nav-link: $c-dark_grey;
+$c-nav-bg-hover: #d6d6d6;
+$c-nav-sub-bg-active: #dedede;
+$c-nav-sub-bg-active-highlight: #d6d6d6;
+$c-nav-icons: #999;
+$c-nav-icons-hover: #777;
+
+/* main_content areas */
+$c-content-shadow: $c-lighter_grey;
+$c-content-header-bg: #fdfdfd;
+$c-content-section-title: $c-lightest_grey;
+
+/* tables */
+$c-table-th: #dfdfdf;
+$c-table-th-highlight: #e7e7e7;
+$c-table-tr-even: #f2f2f2;
+$c-table-td: #f9f9f9;
+$c-table-tr-hover: #fefefe;
+$c-table-action_menu-bg: $c-white;
+$c-table-action_menu-link-bg: $c-white;
+$c-tablesorter-icon: $c-light_grey;
+$c-table-filter-header: #222;
+$c-table-filter-input: #333;
+
+/* forms */
+$c-form-submit: $c-white;
+$c-form-submit-gradient-start: #454545;
+$c-form-submit-gradient-end: #252525;
+$c-form-submit-gradient-hover: #252525;
+$c-form-button: #555;
+$c-form-button-gradient-start: #eee;
+$c-form-button-gradient-end: #e1e1e1;
+$c-form-button-gradient-hover: #e1e1e1;
+$c-form-checkbox-bg: $c-white;
+$c-form-file-bg: $c-almost_white;
+$c-form-file-bg-active: $c-white;
+$c-form-file-link-bg: #f7f7f7;
+$c-form-file-link-bg-hover: #ddd;
+$c-form-file-link-text: $c-custom-highlight;
+$c-form-table-bg: #ebebeb;
+$c-chosen-bg: $c-white;
+$c-chosen-gradient-start: #eee;
+$c-chosen-gradient-end: #e1e1e1;
+$c-chosen-gradient-hover:  #e1e1e1;
+$c-chosen-multi-bg: $c-lightest_grey;
+$c-chosen-multi-text: #555;
+$c-chosen-multi-delete: $c-light_grey;
+
+/* Yes / No Sliders */
+$c-slider-option-selector: $c-white;
+$c-slider-yes-color: $c-white;
+$c-slider-yes-bg: $c-custom-highlight;
+$c-slider-no-color: $c-lighter_grey;
+$c-slider-no-bg: $c-light_grey;
+$c-slider-border: #dedede;
+
+/* Notices and Errors */
+$c-notice-bg: #d8f0d0;
+$c-notice-content: #4c884e;
+$c-warning-bg: #f7f2c8;
+$c-warning-content: #ca953a;
+$c-error-bg: #f6cfcf;
+$c-error-content: #b75553;
+
+/* Modal */
+$c-modal-overlay-bg: $c-lighter_grey;
+$c-modal-bg: #333;
+$c-modal-light-bg: #fff;
+$c-modal-text: #999;
+$c-modal-header: $c-white;
+
+/* login page */
+$c-login-bg: $c-white;
+$c-login-footer-all: #aaa;
+$c-login-box_shadow: $c-lighter_grey;

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

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

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

@@ -0,0 +1,295 @@
+// 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: 0;
+      border-top-color: $color;
+      border-width: $size $size 0 0;
+    }
+
+    @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;
+  }
+}
+
+
+// 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;
+}
+
+/**
+ * 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;
+  }
+}
+
+
+// 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;
+}
+
+// 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%);
+}

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;