forever_style_guide 3.1.2 → 3.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 08af5b50938257e08aa1a9f700ce4c39612c7ba9
-  data.tar.gz: 9f69edfa1dc8dccd2de917bf8c65e095b8c77088
+  metadata.gz: 7f7af69d9c14f6ac1f0ad6679979fa008ec9a189
+  data.tar.gz: 088b0293fe7b372fe79116026e48778c4cb21b66
 SHA512:
-  metadata.gz: d042318a58c647c6135ec0e337468ecf9de3897eada7847148612695dc2ffb06d3704cefdb1aa7a1d31b8d80ba52cb83138afe12ae599354c0ec46aa58854841
-  data.tar.gz: ca94dad300936e5fdb8c6318790169531f62a0f042fead04271811f8e1fbddf7241ad6dab6874942e7bc4d0956f9198954789b3623e05fdb727cef020a06c98f
+  metadata.gz: dc8ffc0d494b72b48c6f1af572e365709bffdb95cc217d278c8d1e5bd4814733933f5afe08a2c1fe4d30388903fc36efe8722a47821316d967ffc3bb6dcc459f
+  data.tar.gz: b35a4ac22240390fa4f4cb2d304e14eb465ce1a974e62cc29f04efc71011009cacad540dbfa6983e99fd7d1f8be5913939b46554a6bfc19b10e35422e459e9b7

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

@@ -94,9 +94,9 @@ $color-card-bg: color('white');
   vertical-align: middle;
   text-align: center;
   font-size: $font-size-300;
-  border: 0;
+  border: 2px solid color('gray-100');
 
-  @include transition(background-color 0.3s ease);
+  @include transition(background-color 0.3s ease, border 0.3s ease);
 
   &:active:focus {
     @extend %inset-shadow;
@@ -108,7 +108,6 @@ $color-card-bg: color('white');
   &:focus,
   &:active {
     outline: none;
-    border: 0;
   }
 }
 

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

@@ -23,8 +23,8 @@ $padding-xs-horizontal:       6px !global;
 ---------------------------------------------------------------------------- */
 $header-height: 40px;
 
-$footer-height: 455px;
-$footer-height-sm: 340px;
+$footer-height: 486px;
+$footer-height-sm: 365px;
 $footer-height-md: 240px;
 
 $btn-lg-size: 64px;
@@ -37,6 +37,11 @@ $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;
 
+$btn-padding-default-vertical : $padding-default-vertical - 2;
+$btn-padding-large-vertical : $padding-large-horizontal - 2;
+$btn-padding-small-vertical : $padding-small-vertical - 2;
+$btn-padding-xs-vertical : $padding-xs-vertical - 2;
+
 $icon-lg-size: $font-size-600;
 $icon-size: $font-size-400;
 $icon-sm-size: $font-size-300;

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

@@ -14,11 +14,13 @@
   } @else {
     color: color('white');
     background-color: color('#{$color}');
-    border: 0;
+    border: 2px solid color('#{$color}');
+    @extend %no-shadow;
     &:hover,
     &:active,
     &:active:focus {
       background-color: color('#{$color}-dark');
+      border-color: color('#{$color}-dark');
       text-decoration: none;
     }
   }
@@ -26,6 +28,7 @@
 
 .btn {
   @extend %btn-style;
+  padding: $btn-padding-default-vertical $btn-padding-default-horizontal;
 
   &:hover,
   &:active {
@@ -37,13 +40,16 @@
 
   &.btn-default {
     color: $color-gray-600;
+    border: 2px solid color('white');
     &:hover,
     &:active,
     &:focus {
       background-color: color('white');
+      border: 2px solid color('white');
     }
     &.disabled {
       background-color: color('silver');
+      border: 2px solid color('silver');
     }
     &.btn-inverse {
       @include btn-color('gray');
@@ -68,16 +74,16 @@
   &.btn-link {
     @include btn-color('secondary', true);
     background: none;
-    border: 0;
+    border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
     box-shadow: none;
     &:hover,
     &:active,
     &:focus {
-      border: 0;
+      border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
       background: none;
       text-decoration: underline;
       &:focus {
-        border: 0;
+        border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
         background: none;
         box-shadow: none;
       }
@@ -98,13 +104,13 @@
   &.btn-plain {
     color: color('gray-500');
     background: none;
-    border: 0;
+    border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
     box-shadow: none;
     &:hover,
     &:active,
     &:focus {
       background: none;
-      border: 0;
+      border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
       &:focus {
         background: none;
         box-shadow: none;
@@ -125,7 +131,7 @@
     font-family: $font-face-regular;
     height: $btn-lg-size;
     font-size: $font-size-400;
-    padding: $padding-large-horizontal $btn-padding-large-horizontal;
+    padding: $btn-padding-large-vertical $btn-padding-large-horizontal;
     border-radius: $border-radius-large;
     line-height: 1.8;
 
@@ -140,18 +146,18 @@
   &.btn-sm {
     font-size: $font-size-small;
     height: $btn-sm-size;
-    padding: $padding-small-vertical $btn-padding-small-horizontal;
+    padding: $btn-padding-small-vertical $btn-padding-small-horizontal;
     line-height: 1.6;
     border-radius: $border-radius-small;
 
     .fa {
       font-size: $icon-sm-size;
-      padding-top: 4px;
+      padding-top: 2px;
     }
   }
   &.btn-xs {
     height: $btn-xs-size;
-    padding: $padding-xs-vertical $btn-padding-xs-horizontal;
+    padding: $btn-padding-xs-vertical $btn-padding-xs-horizontal;
     font-size: $font-size-small;
     line-height: 1.8;
 
@@ -224,7 +230,7 @@
       }
     }
     &.btn-sm {
-      padding-top: 4px;
+      padding-top: $btn-padding-small-vertical;
       .btn-action-label {
         padding-top: 4px;
       }
@@ -234,7 +240,7 @@
       }
     }
     &.btn-xs {
-      padding-top: 4px;
+      padding-top: $btn-padding-xs-vertical;
       .btn-action-label {
         padding-right: 3px;
       }
@@ -252,6 +258,29 @@
   }
 }
 
+@mixin btn-block() {
+  display: block;
+  width: 100%;
+}
+
+.btn-block-xs {
+  @media (max-width: $screen-xs-max) {
+    @include btn-block();
+  }
+}
+
+.btn-block-sm {
+  @media (max-width: $screen-sm-max) {
+    @include btn-block();
+  }
+}
+
+.btn-block-md {
+  @media (max-width: $screen-md-max) {
+    @include btn-block();
+  }
+}
+
 .btn-group {
   .btn-icon .fa {
     vertical-align: middle;

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

@@ -34,14 +34,20 @@
   margin-bottom: 5px;
   border-top: 1px solid $color-gray-500;
 }
-.footer-copyright { 
+.footer-copyright {
+  margin-bottom: 0;
   @media (max-width: $screen-sm) {
-    margin-bottom: 0;
     margin-top: 5px;
   }
 }
 .footer-policy_links {
+  margin-bottom: 0;
   @media (min-width: $screen-md) {
     text-align: right;
   }
 }
+.footer-location {
+  @media (min-width: $screen-md) {
+    vertical-align: text-top;
+  }
+}

data/app/views/forever_style_guide/sections/components/footer/_footer.erb

@@ -55,16 +55,21 @@
     </div>
 
     <div class="row l-section-close">
-      <div class="col-xs-12 col-sm-6">
-        <p class="footer-link footer-link-dark footer-copyright">&copy; 2013–<%= Time.now.year %> Forever, Inc</p>
+      <div class="col-xs-12 col-sm-6 col-md-4">
+        <p class="footer-link footer-link-dark footer-copyright">&copy; <%= Time.now.year %> Forever, Inc</p>
       </div>
-      <div class="col-xs-12 col-sm-6 footer-policy_links">
-        <p class="small color-gray-400">
+      
+      <div class="col-xs-12 col-sm-6 col-md-4 col-md-push-4">
+        <p class="small color-gray-400 footer-policy_links">
           <%= link_to "Careers", careers_url, title: "Join the Forever Team", class: "footer-link footer-link-dark", target: '_blank' %> |
           <%= link_to "Privacy Policy", privacy_url, class: "footer-link footer-link-dark", title: "Forever Privacy Policy" %> |
           <%= link_to "Terms of Service", tos_url, class: "footer-link footer-link-dark", title: "Forever Terms of Service" %>
         </p>
       </div>
+
+      <div class="col-xs-12 col-md-4 col-md-pull-4">
+        <small class="color-gray-500 footer-location">1 PPG Place 20th Floor • Pittsburgh, PA 15222 USA</small>
+      </div>
     </div>
   </div>
 </footer>

data/lib/forever_style_guide/version.rb

@@ -1,3 +1,3 @@
 module ForeverStyleGuide
-  VERSION = "3.1.2"
+  VERSION = "3.1.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: forever_style_guide
 version: !ruby/object:Gem::Version
-  version: 3.1.2
+  version: 3.1.3
 platform: ruby
 authors:
 - Nicholas McClay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-02-13 00:00:00.000000000 Z
+date: 2017-03-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -315,9 +315,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.6
+rubygems_version: 2.2.2
 signing_key: 
 specification_version: 4
 summary: A live style guide and component API for the Forever brand
 test_files: []
-has_rdoc: