fae-railsz 2.1.0

data/app/assets/stylesheets/fae/application.css

@@ -0,0 +1,8 @@
+/**
+ *= require fae/vendor/reset
+ *= require fae/vendor/chosen
+ *= require fae/vendor/daterangepicker
+ *= require fae/vendor/simplemde.min
+ *= require fae/vendor/trumbowyg
+ *= require fae/base
+ */

data/app/assets/stylesheets/fae/base.scss

@@ -0,0 +1,82 @@
+// Globals (doesn't output CSS)
+@import
+  'globals/imports/finescss/fine',
+  'globals/imports/variables',
+  'globals/imports/mixins',
+  'globals/imports/extends'
+;
+
+// User defined stuff
+@import 'fae';
+
+// Fonts, vendor, and root HTML tag styles
+@import
+  'globals/fonts',
+  'globals/icons',
+  'globals/plugins',
+  'globals/tags'
+;
+
+// Layout
+@import
+  'globals/layout/base',
+  'globals/layout/content-header',
+  'globals/layout/breadcrumbs'
+;
+
+// Navigation
+@import
+  'globals/navigation/base',
+  'globals/navigation/header',
+  'globals/navigation/footer',
+  'globals/navigation/sidenav',
+  'globals/navigation/mobilenav',
+  'globals/navigation/utility',
+  'globals/navigation/search'
+;
+
+// Tables
+@import
+  'modules/tables/base',
+  'modules/tables/actions',
+  'modules/tables/sorting',
+  'modules/tables/filters',
+  'modules/tables/collapsible',
+  'modules/tables/sticky',
+  'modules/tables/tooltips',
+  'modules/tables/pagination',
+  'modules/tables/image'
+;
+
+// Modules
+@import
+  'modules/buttons',
+  'modules/modal',
+  'modules/toggles',
+  'modules/alerts'
+;
+
+// Forms
+@import
+  'modules/forms/base',
+  'modules/forms/label',
+  'modules/forms/textarea',
+  'modules/forms/text',
+  'modules/forms/checkbox',
+  'modules/forms/radio',
+  'modules/forms/asset-actions',
+  'modules/forms/select',
+  'modules/forms/date',
+  'modules/forms/colorpicker',
+  'modules/forms/hints',
+  'modules/forms/validation',
+  'modules/forms/simple-mde'
+;
+
+// Pages
+@import
+  'pages/error',
+  'pages/login',
+  'pages/help',
+  'pages/home'
+;

data/app/assets/stylesheets/fae/globals/_fonts.scss

@@ -0,0 +1,43 @@
+@font-face {
+    font-family: 'Lato';
+    src:asset_url('fae/lato-regular-webfont.eot');
+    src:asset_url('fae/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
+        asset_url('fae/lato-regular-webfont.woff') format('woff'),
+        asset_url('fae/lato-regular-webfont.ttf') format('truetype'),
+        asset_url('fae/lato-regular-webfont.svg#lato_regular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: asset_url('fae/lato-light-webfont.eot');
+    src: asset_url('fae/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
+         asset_url('fae/lato-light-webfont.woff') format('woff'),
+         asset_url('fae/lato-light-webfont.ttf') format('truetype'),
+         asset_url('fae/lato-light-webfont.svg#lato_light') format('svg');
+    font-weight: 200;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Lato';
+    src: asset_url('fae/lato-bold-webfont.eot');
+    src: asset_url('fae/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         asset_url('fae/lato-bold-webfont.woff') format('woff'),
+         asset_url('fae/lato-bold-webfont.ttf') format('truetype'),
+         asset_url('fae/lato-bold-webfont.svg#lato_bold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'icons';
+    src: asset_url('fae/icons.eot');
+    src: asset_url('fae/icons.eot?#iefix') format('embedded-opentype'),
+         asset_url('fae/icons.woff') format('woff'),
+         asset_url('fae/icons.ttf') format('truetype'),
+         asset_url('fae/icons.svg#icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}

data/app/assets/stylesheets/fae/globals/_icons.scss

@@ -0,0 +1,15 @@
+[class^="icon-"], [class*=" icon-"] {
+  @include icon-stuff;
+}
+
+// Adding more? Use this handy find/replace regex
+// \.icon\-([\w\-]+):before \{\n\s*content:\s\"\\([\w\d]+)\";\n\}
+// '$1': '$2',
+
+.icon {
+  @each $icon in $fae-required-icons {
+    &-#{nth($icon, 1)}:before {
+      content: fae-icon(nth($icon, 1));
+    }
+  }
+}

data/app/assets/stylesheets/fae/globals/_plugins.scss

@@ -0,0 +1,51 @@
+// plugin overrides
+.chosen-container-single .chosen-single abbr,
+.chosen-container-single .chosen-single div b,
+.chosen-container-multi .chosen-choices li.search-choice .search-choice-close
+.chosen-rtl .chosen-search, .chosen-container-single .chosen-search {
+  background: none;
+
+  &:after {
+    @include icon-stuff;
+    content: fae-icon(arrow_down);
+    position: relative;
+    font-size: 4px;
+    top: -4px;
+    left: 2px;
+    color: $c-darker-grey;
+  }
+}
+
+.chosen-container-single .chosen-single {
+  &:hover {
+    div b:after {
+      color: $c-darkest-grey;
+    }
+  }
+}
+
+.chosen-container-active.chosen-with-drop .chosen-single div b {
+  &:after {
+    content: fae-icon(arrow_up);
+    color: $c-darkest-grey;
+  }
+}
+
+.chosen-rtl .chosen-search, .chosen-container-single .chosen-search {
+  &:after {
+    content: fae-icon(search);
+    font-size: 12px;
+    left: auto;
+    right: 17px;
+    top: -1px;
+  }
+}
+
+.chosen-rtl,
+.chosen-container-single {
+  .chosen-search {
+    input[type="text"] {
+      background: none;
+    }
+  }
+}

data/app/assets/stylesheets/fae/globals/_tags.scss

@@ -0,0 +1,68 @@
+* {
+  // -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba($c-black, 0);
+  // scss-lint:disable DuplicateProperty
+  -webkit-tap-highlight-color: transparent;
+
+  &,
+  &:before,
+  &:after {
+    box-sizing: border-box;
+  }
+}
+
+html {
+  // scss-lint:disable DuplicateProperty
+  font-size: 100%;
+  font-size: remCalc(16px);
+  height: 100%;
+}
+
+body {
+  @include transition($mobilenav-transition);
+  height: 100%;
+  font-family: $f-content;
+  font-size: 16px;
+  color: $c-text;
+  background: $c-body-bg;
+
+  @include bp(large-down) {
+    padding-top: 45px;
+  }
+}
+
+a {
+  @include transition(color .2s);
+  color: $c-custom-highlight;
+  text-decoration: none;
+
+  &:hover {
+    color: $c-text;
+  }
+}
+
+h1 {
+  font-size: 24px;
+  color: $c-text-heavy;
+}
+
+h2 {
+  font-size: 18px;
+}
+
+h3 {
+  font-size: 14px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+strong {
+  font-weight: bold;
+}
+
+abbr {
+  text-decoration: none;
+}

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

@@ -0,0 +1,53 @@
+%table-reset {
+  table {
+    table-layout: initial;
+    border-collapse: inherit;
+    border: initial;
+
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  td {
+    border: initial;
+
+    &,
+    &:hover {
+      border-left: initial;
+    }
+  }
+
+  tbody {
+    tr {
+      &,
+      &:nth-child(even) {
+        &:hover {
+          td {
+            &:first-child {
+              border-left: inherit;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+%nav-icon {
+  &:after {
+    @include icon-stuff;
+    @include transition(color .2s);
+    position: absolute;
+    font-size: 15px;
+    color: $c-darker-grey;
+    right: 0;
+  }
+
+  &:hover {
+    &:after {
+      color: darken($c-darker-grey, 5%);
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+//////////////////////////////
+// Project Specific Mixins
+//////////////////////////////
+
+@mixin transition($args...) {
+  -webkit-transition: $args;
+  -moz-transition: $args;
+  -ms-transition: $args;
+  -o-transition: $args;
+  transition: $args;
+}
+
+@mixin right-triangle($size: 15px, $color: $c-black) {
+  width: 0px;
+  height: 0px;
+  border-style: solid;
+  border-width: $size $size 0 0;
+  border-color: $color transparent transparent transparent;
+}
+
+@mixin user-select($val){
+  -webkit-user-select: $val; /* Chrome all / Safari all */
+  -moz-user-select: $val; /* Firefox all */
+  -ms-user-select: $val; /* IE 10+ */
+  user-select: $val;
+}
+
+@mixin transform($value){
+  -webkit-transform: $value;
+  -moz-transform: $value;
+  -ms-transform: $value;
+  -o-transform: $value;
+  transform: $value;
+}
+
+@mixin gradient-vertical($start-color: $c-light-button, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+  background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color));
+  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
+  background-image:  -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);
+  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0);
+}
+
+// quick mixin for using icon font in :before :after
+@mixin icon-stuff {
+  font-family: 'icons';
+  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;
+}

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

@@ -0,0 +1,165 @@
+//////////////////////////////
+// Project Specific Variables
+//////////////////////////////
+
+// Empty variable for user-defined breakpoints
+$custom-breakpoints: () !default;
+
+// Fae-specific breakpoints
+$fae-breakpoints: (
+  'login_container':        ( min-width: 700px ),
+  'login_submit':           ( min-width: 500px ),
+);
+
+// Merge $custom-breakpoints, $fae-breakpoints, and Frob Core's $fine-breakpoints to one variable to use with bp() mixin
+$fae-breakpoints: map-merge($fae-breakpoints, $custom-breakpoints);
+$breakpoints: map-merge($fine-breakpoints, $fae-breakpoints);
+
+// Widths, padding, margins, and the like
+$content-buffer: 30px !default;
+$sidenav-width: 250px !default;
+
+$header-border-width: 4px !default;
+
+// Typography
+$f-content: 'Lato', $f-sans !default;
+
+// Apps should declare $c-custom-highlight in their fae.scss file
+$c-custom-highlight: #9aa142 !default;
+
+// In order from dark to light
+// These are stacked in 10s so new colors can be easily inserted between if/when this list changes
+$grays: (
+  10: #1e1e1e,
+  20: #3b3b3b,
+  30: #595959,
+  40: #999,
+  50: #ccc,
+  60: #dfdfdf,
+  70: #ebebeb,
+  80: #efefef,
+  90: #f7f7f7,
+) !default;
+
+// Functional name for colors
+$c-darkest-grey: gray(10) !default;
+$c-dark-grey: gray(20) !default;
+$c-mid-dark-grey: gray(30) !default;
+$c-darker-grey: gray(40) !default;
+$c-mid-grey: gray(50) !default;
+$c-grey: gray(60) !default;
+$c-light-grey: gray(70) !default;
+$c-lightest-grey: gray(80) !default;
+$c-near-white: gray(90) !default;
+
+// Text
+$c-body-bg: $c-near-white !default;
+$c-text: $c-mid-dark-grey !default;
+$c-text-sub: $c-darker-grey !default;
+$c-text-sub-hover: $c-mid-grey !default;
+$c-text-heavy: $c-darkest-grey !default;
+$c-box_shadow: $c-mid-grey !default;
+$c-border: $c-mid-grey !default;
+
+// Nav
+$c-header-bg: $c-darkest-grey !default;
+
+// Content Headers
+$c-content-header-bg: $c-white !default;
+
+// Tables
+$c-table-th: $c-grey !default;
+$c-table-tr-even: $c-light-grey !default;
+$c-table-td: $c-near-white !default;
+$c-table-tr-hover: $c-white !default;
+$c-table-filter-header: $c-darkest-grey !default;
+
+// Forms
+$c-dark-button: $c-white !default;
+$c-dark-button-gradient-start: $c-dark-grey !default;
+$c-dark-button-gradient-end: $c-darkest-grey !default;
+$c-light-button: $c-dark-grey !default;
+$c-light-button-gradient-start: $c-near-white !default;
+$c-light-button-gradient-end: $c-light-grey !default;
+$c-form-file-link-bg: $c-grey !default;
+$c-form-file-link-bg-hover: $c-grey !default;
+$c-form-table-bg: $c-light-grey !default;
+$c-chosen-gradient-start: $c-near-white !default;
+$c-chosen-gradient-end: $c-light-grey !default;
+$c-chosen-multi-bg: $c-lightest-grey !default;
+$c-chosen-multi-text: $c-dark-grey !default;
+$c-chosen-multi-delete: $c-darker-grey !default;
+
+// Yes / No Sliders
+$c-slider-no-color: $c-light-grey !default;
+$c-slider-no-bg: $c-darker-grey !default;
+
+// Modal
+$c-modal-overlay-bg: $c-mid-grey !default;
+$c-modal-bg: $c-dark-grey !default;
+$c-modal-text: $c-darker-grey !default;
+
+// Notices and Errors
+$c-notice-bg: #d8f0d0 !default;
+$c-notice-content: #4c884e !default;
+$c-warning-bg: #f7f2c8 !default;
+$c-warning-content: #ca953a !default;
+$c-error-bg: #f6cfcf !default;
+$c-error-content: #b75553 !default;
+
+$mobilenav-transition: margin-left .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;
+
+$fae-nav-stack: (
+  '.sidenav',
+  '.content-header',
+  '.sticky-table-header',
+  '.main-header'
+);
+
+$fae-required-icons: (
+  'home': 'e904',
+  'bars': 'e901',
+  'edit': 'e900',
+  'copy': 'e905',
+  'trash': 'e906',
+  'settings': 'e902',
+  'support': 'e903',
+  'heavy_plus': 'e61a',
+  'arrow_down': 'e600',
+  'zoom': 'e601',
+  'users': 'e602',
+  'user': 'e603',
+  'sort': 'e606',
+  'search': 'e608',
+  'plus': 'e609',
+  'offlink': 'e60a',
+  'menu': 'e60b',
+  'logout': 'e60c',
+  'delete_x': 'e60f',
+  'chevron_right': 'e610',
+  'chevron_left': 'e611',
+  'check': 'e612',
+  'calendar': 'e613',
+  'pulldown': 'e614',
+  'arrow_up': 'e615',
+  'handle': 'e616',
+  'alert': 'e617',
+  'chevron_up': 'e618',
+  'chevron_down': 'e619',
+  'fullscreen': 'e61e',
+  'question': 'e61b',
+  'eye': 'e61c',
+  'columns': 'e61d',
+  'image': 'e90d',
+  'save': 'e962',
+  'quote': 'e977',
+  'search2': 'e986',
+  'list-ol': 'e9b9',
+  'list-ul': 'e9ba',
+  'link': 'e9cb',
+  'minus': 'ea0b',
+  'font': 'ea61',
+  'bold': 'ea62',
+  'underline': 'ea63',
+  'italic': 'ea64',
+);