Adds expand-content component, update various UI measurements

src/sass/components/action-minor.scss

@@ -3,10 +3,10 @@
   font-size: 14px;
 
   &.mt-negative {
-    margin-top: -10px;
+    margin-top: 0;
   }
 
-  &.right {
+  &.text-right {
     text-align: right;
   }
 
@@ -19,5 +19,6 @@
 
   > .action-text {
     vertical-align: middle;
+    color: #444444;
   }
 }

src/sass/components/card.scss

@@ -0,0 +1,5 @@
+.card {
+  &.card-gutter-compact {
+    margin: 10px 12px;
+  }
+}

src/sass/components/components.scss

@@ -1,6 +1,9 @@
-@import "header";
-@import "content-frame";
 @import "item";
 @import "ion-content";
+@import "card";
+
+@import "header";
+@import "content-frame";
 @import "address";
 @import "action-minor";
+@import "expand-content";

src/sass/components/content-frame.scss

@@ -1,6 +1,6 @@
 .content-frame {
   &.negative-top {
-    margin-top: -20px;
+    margin-top: -40px;
 
     .card {
       &:first-child {

src/sass/components/expand-content.scss

@@ -0,0 +1,26 @@
+.expand-content-frame {
+  position: relative;
+
+  .expand-content-trigger {
+    position: absolute;
+    top: 0;
+    transition: opacity 0.3s ease;
+    right: 0;
+
+    &.expand-content-revealed {
+      opacity: 0;
+    }
+  }
+
+  .expand-content {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scale(0,0);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+
+    &.expand-content-revealed {
+      opacity: 1;
+      transform: scale(1,1);
+    }
+  }
+}

src/sass/components/header.scss

@@ -1,5 +1,5 @@
 .header {
-  padding: 29px 12px 65px;
+  padding: 29px 12px 61px;
   background-color: #FAB915;
   color: #FFFFFF;
 

src/sass/directives/directives.scss

@@ -1 +1,2 @@
 @import "gravatar";
+@import "elastic";

src/sass/directives/elastic.scss

@@ -0,0 +1,4 @@
+.elastic {
+  width: 100%;
+  font-size: 14px;
+}