forever_style_guide 1.2.11 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 547454399250c0222bdc20cb0927dab5a1a4bf2d
-  data.tar.gz: 7925e7cd1f7826a062db35119b18633be954b6d2
+  metadata.gz: 72da45c4176b1266fd0c8137f3e65c934f85f147
+  data.tar.gz: 024f70cc0b648d257295082aadd7cff7c7d6e394
 SHA512:
-  metadata.gz: 77356180b9f2c2fa919b34e9602ffc3d47e86d306a3bda144c06021032d741b5dc34302ed23354327c5c032611dadc5ffbad12ea8cf1ed730b0cf3298f17948e
-  data.tar.gz: 5030856799ed50eeccdb89ee9676fd3f024b34585763a805a2671edc393c7c80bc2a62425ed2264c8295c279305245f9555a30454c260b3fb7d75d6cecf35f78
+  metadata.gz: 5da803df8dadf86ca5b00500602aeb17efacb573a3d3b646a43c89c4a91e34c9d016868ba4ca1dd61130e0bdc74c490809efb88cce7db2d82410ba3277827e3e
+  data.tar.gz: 54f50bd0a5c5a5bbc245310f8e471dde5e59b81bb446629fac139ad26fe5fd14651e23769b173acb623538c256af45455e559c50faf14591a97eb33f97dad3f2

data/app/assets/javascripts/style_guide/application.js

@@ -12,7 +12,4 @@
 //
 //= require jquery
 //= require bootstrap-sprockets
-//= require bootstrap
 //= require style_guide/application
-//= require style_guide/identifiers
-//= require style_guide/prettify

data/app/assets/javascripts/style_guide/bootstrap-sprockets-custom.js

@@ -0,0 +1,11 @@
+//= require /bootstrap/affix
+//= require /bootstrap/alert
+//= require /bootstrap/button
+//= require /bootstrap/carousel
+//= require /bootstrap/collapse
+//= require /bootstrap/modal
+//= require /bootstrap/scrollspy
+//= require /bootstrap/tab
+//= require /bootstrap/transition
+//= require /bootstrap/tooltip
+//= require /bootstrap/popover

data/app/assets/stylesheets/forever_style_guide/base/_bootstrap_reset.scss

@@ -1,6 +1,6 @@
 html, body {
   width: 100%;
-  @extend %font-face-regular;
+  font-family: $font-face-regular;
   background-color: $color-background;
   overflow-y: auto;
 }

data/app/assets/stylesheets/forever_style_guide/base/_forms.scss

@@ -11,20 +11,20 @@
 .input-lg.form-control {
   height: $btn-lg-size;
   border-radius: $border-radius-large;
-  @extend %font-face-light;
-  font-size: font-size('large');
+  font-family: $font-face-light;
+  font-size: $font-size-large;
 }
 
 .input-sm,
 .input-sm.form-control {
   height: $btn-sm-size;
   border-radius: $border-radius-small;
-  font-size: font-size('small');
+  font-size: $font-size-small;
 }
 
 .input-xs,
 .input-xs.form-control {
   height: $btn-xs-size;
   border-radius: $border-radius-small;
-  font-size: font-size('small');
+  font-size: $font-size-small;
 }

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

@@ -1,6 +1,5 @@
-
 * {
-  @extend %font-face-regular;
+  font-family: 'proxima_nova-regular';
 }
 
 /* Headers */
@@ -16,83 +15,81 @@ p {
 }
 
 h1 {
-  @extend %font-face-gotham;
+  font-family: $font-face-gotham;
   font-weight: 500;
-  font-size: font-size(700);
+  font-size: $font-size-700;
 
   @media (max-width: $screen-sm-max) {
-    font-size: font-size(600);
+    font-size: $font-size-600;
   }
   @media (max-width: $screen-xs-max) {
-    font-size: font-size(500);
+    font-size: $font-size-500;
   }
 }
 h2 {
-  @extend %font-face-gotham;
+  font-family: $font-face-gotham;
   font-weight: 500;
-  font-size: font-size(600);
+  font-size: $font-size-600;
 
   @media (max-width: $screen-sm-max) {
-    font-size: font-size(500);
+    font-size: $font-size-500;
   }
   @media (max-width: $screen-xs-max) {
-    font-size: font-size(400);
+    font-size: $font-size-400;
   }
 }
 h3 {
-  @extend %font-face-gotham;
+  font-family: $font-face-gotham;
   font-weight: 500;
-  font-size: font-size(500);
+  font-size: $font-size-500;
 
   @media (max-width: $screen-sm-max) {
-    font-size: font-size(400);
+    font-size: $font-size-400;
   }
   @media (max-width: $screen-xs-max) {
-    font-size: font-size(300);
+    font-size: $font-size-300;
   }
 }
 h4 {
-  @extend %font-face-gotham;
+  font-family: $font-face-gotham;
   font-weight: 400;
-  font-size: font-size(400);
+  font-size: $font-size-400;
   @media (max-width: $screen-sm-max) {
-    font-size: font-size(400);
+    font-size: $font-size-400;
   }
   @media (max-width: $screen-xs-max) {
-    font-size: font-size(300);
+    font-size: $font-size-300;
   }
 }
 h5 {
-  @extend %font-face-gotham;
+  font-family: $font-face-gotham;
   font-weight: 300;
-  font-size: font-size(300);
+  font-size: $font-size-300;
 }
 h6 {
-  @extend %font-face-gotham;
+  font-family: $font-face-gotham;
   font-weight: 200;
-  font-size: font-size(200);
+  font-size: $font-size-200;
 }
 p {
-  @extend %font-face-regular;
-  font-size: font-size('default');
+  font-family: $font-face-regular;
+  font-size: $font-size-default;
   line-height: 1.6;
 }
 small {
-  @extend %font-face-regular;
-  font-size: font-size(100);
+  font-family: $font-face-regular;
+  font-size: $font-size-100;
 }
 b,
 strong {
-  @extend %font-face-bold;
-  color: color('text');
+  font-family: $font-face-bold;
 }
 .page-title {
   margin-top: 0;
 }
 .lead {
-  @extend %font-face-gotham;
+  font-family: $font-face-gotham;
   font-weight: 100;
-  color: color('text');
 }
 a {
   color: color('secondary');

data/app/assets/stylesheets/forever_style_guide/globals/_effects.scss

@@ -1,44 +1,67 @@
-@import "compass/css3/box-shadow";
-@import "compass/css3/text-shadow";
-@import "compass/css3/images";
-@import "compass/css3/transition";
+@mixin box-shadow($color, $top, $left, $blur, $inset: false) {
+  @if $inset {
+    -webkit-box-shadow: inset $top $left $blur $color;
+    -moz-box-shadow: inset $top $left $blur $color;
+    box-shadow: inset $top $left $blur $color;
+  } @else {
+    -webkit-box-shadow: $top $left $blur $color;
+    -moz-box-shadow: $top $left $blur $color;
+    box-shadow: $top $left $blur $color;
+  }
+}
+
+@mixin transition($transition-properties...) {
+  -webkit-transition: $transition-properties;
+  -moz-transition: $transition-properties;
+  -ms-transition: $transition-properties;
+  -o-transition: $transition-properties;
+  transition: $transition-properties;
+}
+
+@mixin hero-gradient($opacity, $distance_as_percent) {
+  &:before {
+    content: " ";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-image: linear-gradient(rgba(0, 0, 0, $opacity), transparent $distance_as_percent);
+  }
+}
 
 $shadow-color: rgba(color('gray-500'), 0.6);
 $color-card-bg: color('white');
 
 %no-shadow {
-  @include box-shadow(none);
-  @include text-shadow(none);
+  @include box-shadow(transparent, 0, 0, 0);
+  text-shadow: none;
 }
 
 %card-shadow {
-  @include box-shadow($shadow-color 0 2px 4px);
+  @include box-shadow($shadow-color, 0, 2px, 4px);
 }
 
 %footer-shadow {
-  @include box-shadow(lighten($shadow-color, 30%) 0 -1px 2px);
+  @include box-shadow(lighten($shadow-color, 30%), 0, -1px, 2px);
 }
 
 %text-shadow {
-  @include text-shadow($shadow-color 0 1px 2px);
+  text-shadow: $shadow-color, 0, 1px, 2px;
 }
 
 %item-shadow {
-  @include box-shadow($shadow-color 1px 1px 1px);
+  @include box-shadow($shadow-color, 1px, 1px, 1px);
 }
 
 %inset-shadow {
-  @include box-shadow(inset 0 2px 3px $shadow-color );
+  @include box-shadow(0, 2px, 3px, $shadow-color, true);
 }
 
 %hero-gradient {
   @include hero-gradient(0.5, 15%);
 }
 
-%gray-gradient {
-  @include background-image(linear-gradient(color('white'), color('gray-300')));
-}
-
 %card-style {
   @extend %card-shadow;
   background-color: $color-card-bg;
@@ -63,11 +86,10 @@ $color-card-bg: color('white');
   line-height: 1.3;
   display: inline-block;
   text-align: center;
-  font-size: font-size(300);
+  font-size: $font-size-300;
   border: 0;
 
-  @include transition-property(background-color, border);
-  @include transition-duration(0.3s);
+  @include transition(background-color 0.3s ease);
 
   &:active:focus {
     @extend %inset-shadow;
@@ -88,11 +110,10 @@ $color-card-bg: color('white');
   height: $btn-xs-size;
   width: $btn-xs-size;
   @extend %item-shadow;
-  font-size: font-size('default');
+  font-size: $font-size-default;
   text-align: center;
 
-  @include transition-property(background-color, color);
-  @include transition-duration(0.3s);
+  @include transition(background-color 0.3s ease, color 0.3s ease);
 }
 
 // creates a sawtooth banner style for each color in core color dictionary
@@ -129,4 +150,3 @@ $color-card-bg: color('white');
     }
   }
 }
-

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

@@ -1,43 +1,46 @@
 /* =fonts
 ---------------------------------------------------------------------------- */
-@import "forever_style_guide/utils/font-utils";
+@mixin fontFace($family, $src) {
+  @font-face {
+    font-family: $family;
+    src: font-url('#{$src}.eot'); // IE9 compat
+    src: font-url('#{$src}.eot?#iefix') format('embedded-opentype'), // IE8 and below
+      font-url('#{$src}.woff') format('woff'), // standards
+      font-url('#{$src}.ttf') format('truetype'), // Safari, Android, iOS
+      font-url('#{$src}.svg##{$family}') format('svg'); // legacy iOS
+  }
+}
+
+@include fontFace('proxima_nova-light', 'ProximaNova-Reg-webfont');
+@include fontFace('proxima_nova-regular', 'ProximaNova-Reg-webfont');
+@include fontFace('proxima_nova-semibold', 'ProximaNova-Sbold-webfont');
+@include fontFace('proxima_nova-bold', 'ProximaNova-Bold-webfont');
+@include fontFace('proxima_nova-regular_italic', 'ProximaNova-RegIt-webfont');
+@include fontFace('proxima_nova-regular_bold_italic', 'ProximaNova-BoldIt-webfont');
 
 /* =font faces
    ---------------------------------------------------------------------------- */
-$font-face-light:           set_fontface('proxima_nova-light', ProximaNova-Light, 'light') !default;
-$font-face-regular:         set_fontface('proxima_nova-regular', ProximaNova-Reg, 'regular') !default;
-$font-face-semibold:        set_fontface('proxima_nova-semibold', ProximaNova-Sbold, 'semibold') !default;
-$font-face-bold:            set_fontface('proxima_nova-bold', ProximaNova-Bold, 'bold') !default;
-$font-face-regular_italic:  set_fontface('proxima_nova-regular_italic', ProximaNova-RegIt, 'italic') !default;
-$font-face-bold_italic:     set_fontface('proxima_nova-bold_italic', ProximaNova-BoldIt, 'bold-italic') !default;
+$font-face-light:           'proxima_nova-light', Helvetica, Arial, sans-serif;
+$font-face-regular:         'proxima_nova-regular', Helvetica, Arial, sans-serif;
+$font-face-semibold:        'proxima_nova-semibold', Helvetica, Arial, sans-serif;
+$font-face-bold:            'proxima_nova-bold', Helvetica, Arial, sans-serif;
+$font-face-regular_italic:  'proxima_nova-regular_italic', Helvetica, Arial, sans-serif;
+$font-face-bold_italic:     'proxima_nova-bold_italic', Helvetica, Arial, sans-serif;;
 
-// font face placeholder selectors (use @extends)
-@each $id, $font-data in $font-faces {
-  $file: nth($font-data, 1);
-  $style: nth($font-data, 2);
-  @include font-face($id, font-files('#{$file}-webfont.woff', '#{$file}-webfont.ttf' ,'#{$file}-webfont.svg'),'#{$file}-webfont.eot');
-  /* @extend %font-#{$id} */
-  %font-face-#{$style} {
-    font-family: #{$id}, Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
-  }
-}
-
-%font-face-gotham {
-  font-family: 'Gotham A', 'Gotham B', Helvetica, Arial, sans-serif;
-}
+$font-face-gotham:          'Gotham A', 'Gotham B', Helvetica, Arial, sans-serif;
 
 /* =font sizes
    ---------------------------------------------------------------------------- */
-$font-size-100: set_fontsize(100, 12px) !default;
-$font-size-200: set_fontsize(200, 14px) !default;
-$font-size-300: set_fontsize(300, 16px) !default;
-$font-size-400: set_fontsize(400, 18px) !default;
-$font-size-500: set_fontsize(500, 24px) !default;
-$font-size-600: set_fontsize(600, 36px) !default;
-$font-size-700: set_fontsize(700, 48px) !default;
-$font-size-800: set_fontsize(800, 64px) !default;
+$font-size-100: 12px;
+$font-size-200: 14px;
+$font-size-300: 16px;
+$font-size-400: 18px;
+$font-size-500: 24px;
+$font-size-600: 36px;
+$font-size-700: 48px;
+$font-size-800: 64px;
 
-$font-size-large: set_fontsize('large', $font-size-400) !global;
-$font-size-default: set_fontsize('default', $font-size-300) !default;
-$font-size-small: set_fontsize('small', $font-size-100) !global;
+$font-size-large: $font-size-400;
+$font-size-default: $font-size-300;
+$font-size-small: $font-size-100;
 

data/app/assets/stylesheets/forever_style_guide/globals/_mixins.scss

@@ -33,18 +33,6 @@
   }
 }
 
-@mixin hero-gradient($opacity, $distance_as_percent) {
-  &:before {
-    content: " ";
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    @include background-image(linear-gradient(rgba(0, 0, 0, $opacity), transparent $distance_as_percent));
-  }
-}
-
 @mixin center_with_flexbox ($flex-align, $justify-content) {
   display: -webkit-box;
   display: -webkit-flex;

data/app/assets/stylesheets/forever_style_guide/globals/_variables.scss

@@ -30,10 +30,10 @@ $btn-padding-large-horizontal: $padding-large-horizontal * 1.5;
 $btn-padding-small-horizontal: $padding-small-horizontal * 1.5;
 $btn-padding-xs-horizontal: $padding-xs-horizontal * 1.5;
 
-$icon-lg-size: font-size(600);
-$icon-size: font-size(400);
-$icon-sm-size: font-size(300);
-$icon-xs-size: font-size(200);
+$icon-lg-size: $font-size-600;
+$icon-size: $font-size-400;
+$icon-sm-size: $font-size-300;
+$icon-xs-size: $font-size-200;
 
 
 /* =Z-Index

data/app/assets/stylesheets/forever_style_guide/modules/_account-popover.scss

@@ -99,7 +99,7 @@ $webapp-popover-background: #333333;
   }
 }
 .account-popover-settings {
-  font-size: font-size('large');
+  font-size: $font-size-large;
   background-color: color('white');
   border-bottom-right-radius: $border-radius-large;
   border-bottom-left-radius: $border-radius-large;

data/app/assets/stylesheets/forever_style_guide/modules/_button.scss

@@ -117,9 +117,9 @@
     }
   }
   &.btn-lg {
-    @extend %font-face-regular;
+    font-family: $font-face-regular;
     height: $btn-lg-size;
-    font-size: font-size(400);
+    font-size: $font-size-400;
     padding: $padding-large-horizontal $btn-padding-large-horizontal;
     border-radius: $border-radius-large;
     line-height: 1.8;
@@ -133,7 +133,7 @@
     }
   }
   &.btn-sm {
-    font-size: font-size('small');
+    font-size: $font-size-small;
     height: $btn-sm-size;
     padding: $padding-small-vertical $btn-padding-small-horizontal;
     line-height: 1.6;
@@ -147,7 +147,7 @@
   &.btn-xs {
     height: $btn-xs-size;
     padding: $padding-xs-vertical $btn-padding-xs-horizontal;
-    font-size: font-size('small');
+    font-size: $font-size-small;
     line-height: 1.8;
 
     .fa {