studio - footer help ui revamp - animation, structure, styling - WIP

cms/static/js/base.js

@@ -34,11 +34,11 @@ $(document).ready(function () {
         $(this).select();
     });
 
+    $('body').addClass('js');
+
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
 
-    $('body').addClass('js');
-
     // lean/simple modal
     $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
     $('a.action-modal-close').click(function(e){
@@ -86,6 +86,8 @@ $(document).ready(function () {
     // tender feedback window scrolling
     $('a.show-tender').bind('click', smoothScrollTop);
 
+    // toggling footer additional support
+    $('.show-support').bind('click', toggleSupport);
 
     // toggling overview section details
     $(function () {
@@ -456,6 +458,11 @@ function onKeyUp(e) {
     }
 }
 
+function toggleSupport(e) {
+   e.preventDefault();
+   $body.toggleClass('footer-is-expanded');
+}
+
 function toggleSubmodules(e) {
     e.preventDefault();
     $(this).toggleClass('expand').toggleClass('collapse');

cms/static/sass/_base.scss

@@ -56,6 +56,14 @@ h1 {
   min-height: 100%;
 }
 
+.wrapper-main {
+  padding-bottom: $footer-primary-height;
+}
+
+.js.footer-is-expanded .wrapper-main {
+  padding-bottom: ($footer-primary-height*4);
+}
+
 // layout - basic page header
 .wrapper-mast {
   margin: 0;

cms/static/sass/_cms_mixins.scss

@@ -110,6 +110,21 @@
 	}
 }
 
+@mixin gray-button {
+	@include button;
+	border: 1px solid $gray-d1;
+	border-radius: 3px;
+	@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
+	background-color: $gray-d2;
+	@include box-shadow(0 1px 0 $white-t1 inset);
+	color: $gray-l3;
+
+	&:hover {
+		background-color: $gray-d3;
+		color: $white;
+	}
+}
+
 @mixin green-button {
 	@include button;
 	border: 1px solid $darkGreen;

cms/static/sass/_variables.scss

@@ -13,7 +13,7 @@ $fg-max-width: 1280px;
 $fg-min-width: 900px;
 
 // elements
-$footer-primary-height: ($baseline*3);
+$footer-primary-height: (60px);
 
 // type
 $sans-serif: 'Open Sans', $verdana;

cms/static/sass/base-style.scss

@@ -24,7 +24,6 @@
 @import 'elements/typography';
 @import 'elements/icons';
 @import 'elements/header';
-@import 'elements/sock';
 @import 'elements/footer';
 @import 'elements/navigation';
 @import 'elements/forms';

cms/static/sass/elements/_footer.scss

@@ -75,4 +75,125 @@
       }
     }
   }
+
+  // sock - additional help
+  .sock {
+    @include clearfix();
+    @extend .t-copy-sub2;
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto $baseline auto;
+    border-bottom: 1px solid $gray-l2;
+    padding-bottom: $baseline;
+
+    header {
+
+      .title {
+        @extend .t-title-3;
+      }
+
+      .ss-icon {
+        @extend .t-icon;
+        @extend .icon-inline;
+      }
+    }
+
+    // shared elements
+    .support, .feedback {
+      @include box-sizing(border-box);
+
+      .title {
+
+      }
+
+      .copy {
+        margin: 0 0 $baseline 0;
+      }
+
+      .list-actions {
+        @include clearfix();
+
+        .action-item {
+          float: left;
+          margin-right: ($baseline/2);
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          .action {
+            display: block;
+
+            .ss-icon {
+              @include font-size(15);
+              @extend .t-icon;
+              @extend .icon-inline;
+            }
+
+            &:hover, &:active {
+
+              .ss-icon {
+              }
+            }
+          }
+
+          .tip {
+            @extend .sr;
+          }
+        }
+
+        .action-primary {
+          @include gray-button;
+          @include transition(all .15s);
+          @include font-size(13);
+          font-weight: 500;
+          padding: ($baseline/4) ($baseline/2);
+          text-align: center;
+        }
+      }
+    }
+
+    // studio support content
+    .support {
+      width: flex-grid(8,12);
+      float: left;
+      margin-right: flex-gutter();
+
+      .action-item {
+        width: flexgrid(4,8);
+      }
+    }
+
+    // studio feedback content
+    .feedback {
+      width: flex-grid(4,12);
+      float: left;
+
+      .action-item {
+        width: flexgrid(4,4);
+      }
+    }
+  }
+}
+
+
+// js-enabled styling
+.js .wrapper-footer {
+  @include transition(height 2s ease-in-out);
+  height: $footer-primary-height;
+  overflow: hidden;
+
+  .sock {
+    display: none;
+  }
+}
+
+  // expanded view
+.js.footer-is-expanded .wrapper-footer {
+  height: ($footer-primary-height*4);
+
+  .sock {
+    display: block;
+  }
 }

cms/static/sass/elements/_icons.scss

@@ -0,0 +1,16 @@
+// studio - elements - icons
+// ====================
+
+.icon {
+
+}
+
+.ss-icon {
+  
+}
+
+.icon-inline {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: ($baseline/4);
+}

cms/static/sass/elements/_sock.scss

@@ -1,109 +0,0 @@
-// studio - elements - sock
-// ====================
-
-.wrapper-sock {
-  margin: 0;
-  padding: $baseline $baseline $footer-primary-height $baseline;
-  position: relative;
-  width: 100%;
-
-  .sock {
-    @include clearfix();
-    @extend .t-copy-sub2;
-    max-width: $fg-max-width;
-    min-width: $fg-min-width;
-    width: flex-grid(12);
-    margin: 0 auto $baseline auto;
-
-    header {
-
-      .title {
-        @extend .t-title-3;
-      }
-
-      .ss-icon {
-        @extend .t-icon-inline;
-      }
-    }
-
-    // shared elements
-    .support, .feedback {
-      @include box-sizing(border-box);
-
-      .title {
-
-      }
-
-      .copy {
-        margin: 0 0 $baseline 0;
-      }
-
-      .list-actions {
-        @include clearfix();
-
-        .action-item {
-          float: left;
-          margin-right: ($baseline/2);
-
-          &:last-child {
-            margin-right: 0;
-          }
-
-          .action {
-            display: block;
-
-            .ss-icon {
-              @include transition(color .25s ease-in-out);
-              @include font-size(15);
-              @extend .t-icon-inline;
-              @extend .icon-inline;
-              margin-right: ($baseline/4);
-              color: $blue-l2;
-            }
-
-            &:hover, &:active {
-
-              .ss-icon {
-                color: $white;
-              }
-            }
-          }
-
-          .tip {
-            @extend .sr;
-          }
-        }
-
-        .action-primary {
-          @include blue-button;
-          @include transition(all .15s);
-          @include font-size(13);
-          font-weight: 500;
-          padding: ($baseline/4) ($baseline/2);
-          text-align: center;
-        }
-      }
-    }
-
-    // studio support content
-    .support {
-      width: flex-grid(8,12);
-      float: left;
-      margin-right: flex-gutter();
-
-      .action-item {
-        width: flexgrid(4,8);
-      }
-    }
-
-    // studio feedback content
-    .feedback {
-      width: flex-grid(4,12);
-      float: left;
-
-      .action-item {
-        width: flexgrid(4,4);
-      }
-    }
-  }
-}

cms/static/sass/elements/_typography.scss

@@ -0,0 +1,82 @@
+// studio - elements - typography
+// ====================
+
+// headings/titles
+.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5, .t-title-5 {
+  color: $gray-d3;
+}
+
+.t-title-1 {
+  @include font-size(32);
+}
+
+.t-title-2 {
+  @include font-size(24);
+  margin: 0 0 ($baseline/2) 0;
+  font-weight: 600;
+}
+
+.t-title-3 {
+  @include font-size(16);
+  margin: 0 0 ($baseline/2) 0;
+  font-weight: 600;
+}
+
+.t-title-4 {
+
+}
+
+.t-title-5 {
+
+}
+
+// ====================
+
+// copy
+.t-copy-base {
+  @include font-size(16);
+}
+
+.t-copy-lead1 {
+  @include font-size(18);
+}
+
+.t-copy-lead2 {
+  @include font-size(20);
+}
+
+.t-copy-sub1 {
+  @include font-size(14);
+}
+
+.t-copy-sub2 {
+  @include font-size(13);
+}
+
+.t-copy-sub3 {
+  @include font-size(12);
+}
+
+// ====================
+
+// actions/labels
+.t-action {
+  @include font-size(14);
+  font-weight: 600;
+}
+
+.t-action-primary {
+  @include font-size(14);
+  font-weight: 600;
+}
+
+.t-action-primary-s {
+  @include font-size(13);
+}
+
+// ====================
+
+// misc
+.t-icon {
+  line-height: 0;
+}