lato_view 1.1

data/app/assets/stylesheets/lato_view/base/_reset.scss

@@ -0,0 +1,424 @@
+/* normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Change font properties to `inherit` in all browsers (opinionated).
+ */
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+/**
+ * Restore the font weight unset by the previous rule.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ * 2. Show the overflow in Edge, Firefox, and IE.
+ */
+
+button,
+input, /* 1 */
+select { /* 2 */
+  overflow: visible;
+}
+
+/**
+ * Remove the margin in Safari.
+ * 1. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+select,
+textarea { /* 1 */
+  margin: 0;
+}
+
+/**
+ * Remove the inheritence of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritence of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Change the cursor in all browsers (opinionated).
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  cursor: pointer;
+}
+
+/**
+ * Restore the default cursor to disabled elements unset by the previous rule.
+ */
+
+[disabled] {
+  cursor: default;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+input:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * Correct the odd appearance of search inputs in Chrome and Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield;
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome on OS X and
+ * Safari on OS X.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}

data/app/assets/stylesheets/lato_view/base/_typography.scss

@@ -0,0 +1,138 @@
+//  Typography
+
+// Font Family declaration
+@font-face {
+    font-family: 'latoregular';
+    src: font-url('lato-regular-webfont.eot');
+    src: font-url('lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         font-url('lato-regular-webfont.woff2') format('woff2'),
+         font-url('lato-regular-webfont.woff') format('woff'),
+         font-url('lato-regular-webfont.ttf') format('truetype'),
+         font-url('lato-regular-webfont.svg#latoregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'latobold';
+    src: font-url('lato-bold-webfont.eot');
+    src: font-url('lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         font-url('lato-bold-webfont.woff2') format('woff2'),
+         font-url('lato-bold-webfont.woff') format('woff'),
+         font-url('lato-bold-webfont.ttf') format('truetype'),
+         font-url('lato-bold-webfont.svg#latobold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+/* Basic Typography */
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: $headings-font-family;
+  color: $headings-color;
+  line-height: $headings-line-height;
+  margin: 0 0 $headings-margin-bottom 0;
+  padding: 0;
+}
+
+h1, .h1 {
+  font-size: $font-size-h1;
+}
+
+h2, .h2 {
+  font-size: $font-size-h2;
+}
+
+h3, .h3 {
+  font-size: $font-size-h3;
+}
+
+h4, .h4 {
+  font-size: $font-size-h4;
+}
+
+h5, .h5 {
+  font-size: $font-size-h5;
+}
+
+h6, .h6 {
+  font-size: $font-size-h6;
+}
+
+small, .small {
+  font-size: $font-size-small;
+}
+
+// Links
+a {
+  color: $link-color;
+  text-decoration: underline;
+  &.link {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+p {
+  margin: 0 0 $paragraphs-margin-bottom 0;
+}
+
+hr {
+  border-bottom: 1px solid $text-color;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  margin: $base-spacing 0;
+  clear: both;
+}
+
+ul, ol {
+  &.list-inline {
+    @include list-inline();
+  }
+}
+
+em {
+  font-style: italic;
+}
+
+strong, b {
+  font-family: $font-bold;
+  &.accent {
+    color: $text-accent-color;
+  }
+}
+
+@if settings('minor-typo') {
+  abbr[title] {
+    border-bottom: 1px dotted;
+  }
+
+  abbr, acronym {
+    cursor: help;
+  }
+
+  // Code
+  tt, code {
+    font-family: $font-family-monospace;
+    font-size: em(12px);
+  }
+
+  pre {
+    font-family: $font-family-monospace;
+    tab-size: 2;
+    margin-bottom: 12px;
+    white-space: nowrap;
+    border: 1px solid #E1E1E1;
+    border-radius: 4px;
+    > code {
+      display: block;
+      padding: 1rem 1.5rem;
+      white-space: pre;
+    }
+  }
+}

data/app/assets/stylesheets/lato_view/config/_config.scss

@@ -0,0 +1,143 @@
+// Project config map
+$_settings: (
+  'use-flex-grid'   :     false,
+  'use-opentype'    :     false,
+  'use-font-smooth' :     true,
+  'minor-typo'      :     true
+);
+
+// Retrieve data from the map
+@function settings($key) {
+  @return map-get($_settings, $key);
+}
+
+// COLORS
+
+// Social-brand colors
+$fb           :  #3b5998;
+$twitter      :  #55acee;
+$gplus        :  #dd4b39;
+$linkedin     :  #007bb6;
+$instagram    :  #517fa4;
+$pinterest    :  #cb2027;
+$flickr-1     :  #ff0084;
+$flickr-2     :  #0063dc;
+$tumblr       :  #32506d;
+$dribble      :  #ea4c89;
+$behance      :  #1769ff;
+$vine         :  #00bf8f;
+$spotify      :  #2ebd59;
+$tripadvisor  :  #589442;
+$yahoo        :  #400191;
+$youtube      :  #cd201f;
+
+// TYPOGRAPHY
+
+$font-family-sans-serif : "latoregular", "Helvetica", "Arial", sans-serif !default;
+$font-family-serif      : "Palatino Linotype", "Times New Roman", Times, serif !default;
+$font-family-monospace  : "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier", monospace !default;
+$font-stack             : $font-family-sans-serif !default;
+$font-size-base         : 1em !default;
+$em-base                : 16px;
+$line-base              : 1.5 !default;
+$font-size-h1           : $font-size-base * 3.60 !default;
+$font-size-h2           : $font-size-base * 3.10 !default;
+$font-size-h3           : $font-size-base * 2.60 !default;
+$font-size-h4           : $font-size-base * 2.35 !default;
+$font-size-h5           : $font-size-base * 1.85 !default;
+$font-size-h6           : $font-size-base !default;
+$font-size-small        : $font-size-base * 0.70 !default;
+
+$font-primary           : $font-stack;
+$font-secondary         : "latobold", "Helvetica", "Arial", sans-serif !default;
+$font-bold              : $font-secondary;
+
+// Icon Fonts
+$icon-font-name: 'lato' !default;
+$icon-font-path: "../fonts/" + $icon-font-name !default;
+
+// Map icon names to font unicode characters
+$icons: (
+  facebook:  "\e600",
+  twitter:   "\e601"
+);
+
+// By default, this inherits from the body.
+$headings-font-family     : $font-bold !default;
+$headings-color           : inherit !default;
+$headings-margin-bottom   : 15px !default;
+$headings-line-height     : 1.25 !default;
+$paragraphs-margin-bottom : 15px !default;
+
+// Grid System
+$flex-row-gap           : -1.5% !default;
+$flex-row-margin-bottom : 45px !default;
+$flex-gap               : 1.5% !default;
+$flex-col-gap           : 0.75% !default;
+
+// VIEWS
+
+$main-max-width       :  1000px !default;
+$main-max-width_large :  1170px !default;
+
+// Breakpoints
+$phone-down    : 319px !default;
+$phone         : 320px !default;
+$mobile-down   : 540px !default;
+$mobile        : 541px !default;
+$tab-down      : 767px !default;
+$tab           : 768px !default;
+$desk-down     : 1023px !default;
+$desk          : 1024px !default;
+$large         : 1200px !default;
+$x-large       : 1600px !default;
+
+// Grid System breakpoints
+$grid-small-break   : $desk-down !default;
+$grid-medium-break  : $desk !default;
+$grid-large-break   : $large !default;
+$grid-x-large-break : $x-large !default;
+
+// UTILS
+
+// CSS cubic-bezier timing functions. Refer to http://cubic-bezier.com/ or http://matthewlein.com/ceaser/ for more.
+// EASE IN
+$ease-in-quad       :  cubic-bezier(0.550,  0.085, 0.680, 0.530) !default;
+$ease-in-cubic      :  cubic-bezier(0.550,  0.055, 0.675, 0.190) !default;
+$ease-in-quart      :  cubic-bezier(0.895,  0.030, 0.685, 0.220) !default;
+$ease-in-quint      :  cubic-bezier(0.755,  0.050, 0.855, 0.060) !default;
+$ease-in-sine       :  cubic-bezier(0.470,  0.000, 0.745, 0.715) !default;
+$ease-in-expo       :  cubic-bezier(0.950,  0.050, 0.795, 0.035) !default;
+$ease-in-circ       :  cubic-bezier(0.600,  0.040, 0.980, 0.335) !default;
+$ease-in-back       :  cubic-bezier(0.600, -0.280, 0.735, 0.045) !default;
+// EASE OUT
+$ease-out-quad      :  cubic-bezier(0.250,  0.460, 0.450, 0.940) !default;
+$ease-out-cubic     :  cubic-bezier(0.215,  0.610, 0.355, 1.000) !default;
+$ease-out-quart     :  cubic-bezier(0.165,  0.840, 0.440, 1.000) !default;
+$ease-out-quint     :  cubic-bezier(0.230,  1.000, 0.320, 1.000) !default;
+$ease-out-sine      :  cubic-bezier(0.390,  0.575, 0.565, 1.000) !default;
+$ease-out-expo      :  cubic-bezier(0.190,  1.000, 0.220, 1.000) !default;
+$ease-out-circ      :  cubic-bezier(0.075,  0.820, 0.165, 1.000) !default;
+$ease-out-back      :  cubic-bezier(0.175,  0.885, 0.320, 1.275) !default;
+// EASE IN OUT
+$ease-in-out-quad   :  cubic-bezier(0.455,  0.030, 0.515, 0.955) !default;
+$ease-in-out-cubic  :  cubic-bezier(0.645,  0.045, 0.355, 1.000) !default;
+$ease-in-out-quart  :  cubic-bezier(0.770,  0.000, 0.175, 1.000) !default;
+$ease-in-out-quint  :  cubic-bezier(0.860,  0.000, 0.070, 1.000) !default;
+$ease-in-out-sine   :  cubic-bezier(0.445,  0.050, 0.550, 0.950) !default;
+$ease-in-out-expo   :  cubic-bezier(1.000,  0.000, 0.000, 1.000) !default;
+$ease-in-out-circ   :  cubic-bezier(0.785,  0.135, 0.150, 0.860) !default;
+$ease-in-out-back   :  cubic-bezier(0.680, -0.550, 0.265, 1.550) !default;
+// CUSTOM
+$elastic            :  cubic-bezier(0.320,  1.259, 0.375, 1.150) !default;
+$snappy             :  cubic-bezier(0.694,  0.048, 0.335, 1.000) !default;
+$cubic-snap         :  cubic-bezier(1.000,  0.000, 0.175, 1.000) !default;
+
+// Z-Layers Map
+$z-layers: (
+  highest   :  50,
+  modal     :  40,
+  menu      :  15,
+  header    :  2,
+  default   :  1
+);