tungsten 0.1.38 → 0.1.39

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0c889a46504f589e687415ee49b95ca18e3e9857
-  data.tar.gz: 316da603cd1381f54aa9c260a144fbebdd0b4c45
+  metadata.gz: c59c5d4f0bd8ea5882328580bdddf35537449c87
+  data.tar.gz: 03ee459a81633755b7dfbc7b3ea48788aef51b1d
 SHA512:
-  metadata.gz: 154479d81b243fcedeb2b37c092fe60dd4332dae7015a2e50a3c3b7023fb1d36acd01b29a67e5a08b91d4d8089aaa25311d86e2ea0fbe1f4839cd7607df25023
-  data.tar.gz: c1b98c8d4b3389de5f31c6f4ca5232f42b3880f976840539098ae0ae43157e4cd1ba66c656b23107d922b816030d31a8ba6f815efd47398f1a51b0ab64cfa895
+  metadata.gz: 68a0015da4574e953430b1509f34e17662873dfe7e9dd297559473b3425942ac1d0ff4f224db5abe8cd118b7176e2d04a99dbb8afd9984b97e53ad3c9a93030c
+  data.tar.gz: 26d904dbb793641fecb70b9793d2bd79b4506814de1ea856dbd1510d7493bc9632dcdd46d2902e14a74d88cabb11678d6c88a11b3aca97ef44620d7603640331

data/app/assets/stylesheets/tungsten/components/_cards.scss

@@ -15,13 +15,14 @@
   flex-direction: column;
   position: relative;
   padding: $card-padding;
+  transition: opacity .2s, transform .2s;
   @include collapse-bottom;
+  @include collapse-top;
 
   // Card actions panel
   &-actions {
     display: flex;
     align-items: baseline;
-    margin-bottom: $card-padding;
     flex-direction: row-reverse;
 
     &.centered {
@@ -62,8 +63,9 @@
     margin-bottom: 0;
   }
 
-  &-header { margin-bottom: $vertical-margin; }
-  &-footer { margin-top: $vertical-margin; }
+  &-content {
+    &:first-child *:first-child { margin-top: 0; }
+  }
 
   &-header,
   &-footer {
@@ -104,11 +106,11 @@
     box-shadow: 0 1px rgba($gray-11, .1) inset;
     background-clip: padding-box;
 
-    #{$block-elements} {
-      margin-bottom: 0;
-    }
+    > * { margin: 0; }
   }
 
+  // Keep footer (or form if it wraps the footer)
+  // nestled up against the card edges
   & > &-footer:last-child,
   & > *:last-child > &-footer:last-child,
   & > *:last-child > *:last-child > &-footer:last-child {
@@ -119,3 +121,29 @@
 table.card {
   display: table;
 }
+
+.card-section {
+  transition: max-height .4s $timing;
+
+  &.visible {
+    max-height: 240vh; 
+
+    .card {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  &.hidden {
+    max-height: 0; 
+    transition-duration: .3s;
+    transition-timing-function: $timing;
+    display: initial;
+    
+    .card {
+      opacity: 0;
+      transform: scale(0.99);
+      transition-delay: .1s, .1s;
+    }
+  }
+}

data/app/assets/stylesheets/tungsten/components/_tables.scss

@@ -105,17 +105,16 @@ th.sub-heading {
 
 
 .table-drawer-handle {
-
   .drawer-indicator button {
     transition: transform .2s;
   }
 
   td {
     transition: background-position .35s ease-out;
-    background-image: linear-gradient(#fff, mix(#fff, $blue-01, 88%)); 
+    background-image: linear-gradient(#fff, #fff, mix(#fff, $blue-01, 88%)); 
     background-position: left top;
     background-repeat: no-repeat;
-    background-size: 100% 250%;
+    background-size: 100% 400%;
   }
 
   &.toggle-handle:hover {
@@ -157,6 +156,7 @@ th.sub-heading {
 }
 
 .table-drawer {
+
   td {
     padding: 0;
     border-top: none !important;
@@ -166,6 +166,8 @@ th.sub-heading {
   }
 
   &-content-wrapper {
+    @include collapse-top;
+    @include collapse-bottom;
     overflow: hidden;
     transition: max-height .4s $timing;
     box-shadow: 0 1px 0 0 $gray-04 inset;
@@ -175,9 +177,6 @@ th.sub-heading {
     transition: opacity .2s, transform .2s;
     transition-delay: .16s, .2s;
     padding: 8px;
-    >:last-child {
-      margin-bottom: 0;
-    }
   }
 }
 

data/app/assets/stylesheets/tungsten/components/_toggle-nav.scss

@@ -4,7 +4,6 @@
   position: relative;
   z-index: 1;
   margin-bottom: -35px;
-  margin-top: 20px;
 
   &-label {
     box-shadow: $input-shadow;

data/app/assets/stylesheets/tungsten/core/_banner.scss

@@ -2,6 +2,7 @@
   background-color: $gray-10;
   color: $white;
   display: flex;
+  width: 100%;
   align-items: center;
   padding: $content-padding * .5 $content-padding;
 

data/app/assets/stylesheets/tungsten/core/_globals.scss

@@ -2,6 +2,13 @@
  * Globals module
  * -------------------------------------------------------------------------- */
 
+/* ===================================== *
+ * Responsive Sizes
+ * ------------------------------------- */
+
+$medium-width: 600px;
+$large-width: 1000px;
+
 /* ===================================== *
  * Fonts
  * ------------------------------------- */
@@ -103,6 +110,13 @@ $header-height: 84px;
   }
 }
 
+.collapse, .collpase-top {
+  @include collapse-top;
+}
+.collapse, .collpase-bottom {
+  @include collapse-bottom;
+}
+
 // Modules with max-width and padding
 @mixin padded-module($width: 1100px, $padding: null, $nested: true) {
   padding-left: calc(50vw - #{$width / 2});

data/app/assets/stylesheets/tungsten/core/_grid.scss

@@ -94,8 +94,15 @@ form [class*='columns'] {
   display: flex;
 
   // Add gutter between top level elements
-  > * ~ * {
-    margin-left: 8px;
+  &:not(.no-gutter) {
+    > * ~ * {
+      margin-left: 8px;
+    }
+  }
+  &.medium-gutter {
+    > * ~ * {
+      margin-left: $card-padding;
+    }
   }
 }
 

data/app/assets/stylesheets/tungsten/core/_layout.scss

@@ -29,8 +29,9 @@ body {
 
 main {
   display: flex;
-  flex-direction: column;
-  flex: 1;
+  flex-flow: row wrap;
+  align-items: stretch;
+  justify-content: space-around;
 }
 
 body,
@@ -42,9 +43,9 @@ textarea {
 @mixin block-margin ($margin: $vertical-margin) {
   margin-top: $margin;
   margin-bottom: $margin;
-  &:first-child {
-    margin-top: 0;
-  }
+  //&:first-child {
+    //margin-top: 0;
+  //}
 }
 
 #{$block-elements} {
@@ -56,6 +57,14 @@ textarea {
  * ------------------------------------- */
 
 .application-content {
-  padding: $content-padding;
+  max-width: 1280px;
+  flex: 1 1 auto;
+
+  @include at-least($medium-width) {
+    padding: 0 15px 80px;
+  }
+  @include at-least($large-width) {
+    padding: 10px 30px 80px;
+  }
 }
 

data/app/assets/stylesheets/tungsten/core/_navigation.scss

@@ -2,34 +2,59 @@
  * Navigation module
  * -------------------------------------------------------------------------- */
 
-.horizontal-nav {
+.horizontal-nav, .vertical-nav {
   display: flex;
-  flex-flow: row wrap;
   position: relative;
-  background: $white;
-  box-shadow:
-    0 -1px rgba($gray-11, .1) inset,
-    0 0 0 1px rgba($gray-11, .05) inset,
-    0 1px 3px -1px rgba($gray-11, .1);
+  //background: $white;
+  //box-shadow:
+    //0 -1px rgba($gray-11, .1) inset,
+    //0 0 0 1px rgba($gray-11, .05) inset,
+    //0 1px 3px -1px rgba($gray-11, .1);
 
   a {
     padding: 9px 12px;
     text-decoration: none;
-    transition: background $duration;
+    transition: background-position .4s ease-out;
+    background-image: linear-gradient(to right, $gray-02, $gray-02, #fff, #fff); 
+    background-position: left top;
+    background-size: 400% 100%;
 
     @include normal {
-      color: $blue-03;
-      background: transparent;
+      color: $gray-09;
     }
 
-    &.active {
-      color: $blue-03;
-      background: rgba($blue-03, .1);
+    &.here {
+      color: $gray-10;
+      background-position: right top;
     }
 
     @include active {
-      color: $blue-03;
-      background: rgba($blue-03, .1);
+      color: $gray-10;
+      background-position: right top;
     }
   }
-}
+}
+
+.horizontal-nav {
+  flex-flow: row wrap;
+}
+
+.vertical-nav {
+  flex-flow: column;
+  border-right: 1px solid $gray-04;
+  a {
+    border-bottom: 1px solid $gray-04;
+  }
+}
+
+.card-nav {
+  background: $gray-01;
+  border-top-left-radius: 5px;
+  margin: -$card-padding { right: $card-padding; }
+  a:first-child {
+    border-top-left-radius: $radius - 1;
+  }
+  a:last-child {
+    border-bottom-left-radius: $radius - 1;
+  }
+}

data/app/assets/stylesheets/tungsten/core/_sections.scss

@@ -3,26 +3,32 @@
  * -------------------------------------------------------------------------- */
 
 .app-section {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: $card-padding;
 
-  &-header,
-  &-footer {
-    display: flex;
-    align-items: baseline;
-
-    .section-actions {
-      margin-bottom: 0;
-      margin-left: auto;
-    }
+  ~ .app-section { 
+    border-top: 1px solid $gray-04;
+    padding-top: $card-padding;
   }
 
   &-header {
-    justify-content: space-between;
-    // @include block-margin;
+    flex: 1 0 240px;
+    padding: 0 $card-padding 0;
   }
 
   &-heading {
-    font-size: 20px;
-    margin: 0;
+    font-size: 18px;
+    @include at-least($medium-width) {
+      padding: $card-padding 0 0;
+    }
+  }
+
+  &-content {
+    flex: 2 1 500px;
+    @include at-least($large-width) {
+      padding: 0 $card-padding 0;
+    }
   }
 
   &.narrow {

data/app/assets/stylesheets/tungsten/form/_input-row.scss

@@ -1,6 +1,6 @@
 .input-row {
-  @include block-margin;
   display: flex;
+  margin-bottom: $vertical-margin;
 
   // Input wrappers should be large as possible
   .input-wrapper { flex-grow: 1; }
@@ -11,8 +11,7 @@
   }
 
   // For some reason buttons are 2px too tall
-  > .button-wrapper button { 
-    margin: { top: 1px; }
-    height: 41px;
+  > .button-wrapper { 
+    align-self: center;
   }
 }

data/app/helpers/tungsten/card_helper.rb

@@ -13,14 +13,17 @@ module Tungsten
       end
 
       def display( body )
-        content_tag( :section, @options ) do
+
+        content_tag( :section, id: @options.delete(:id), class: "card-section #{"hidden" if @options.delete(:hidden)}".strip ) do
           @options[:class] = "card #{@options[:class]}".strip
-          concat header( @title ) if @title
-          if first_header = body.scan(/\A<header.+?header>/m).first
-            concat first_header.html_safe
-            body = body.sub(first_header, '').html_safe
+          content_tag( :div, @options ) do
+            concat header( @title ) if @title
+            if first_header = body.scan(/\A<header.+?header>/m).first
+              concat first_header.html_safe
+              body = body.sub(first_header, '').html_safe
+            end
+            concat content_tag(:div, class: 'card-content') { body }
           end
-          concat content_tag(:div, class: 'card-content') { body }
         end
       end
 
@@ -48,7 +51,7 @@ module Tungsten
 
         content_tag( :footer, options ) {
           concat content_tag( :p, text ) unless text.nil?
-          concat capture(&block).html_safe
+          concat capture(&block).html_safe if block_given?
         }
       end
 

data/app/helpers/tungsten/section_helper.rb

@@ -9,7 +9,7 @@ module Tungsten
 
       def display( body )
         content_tag( :section, @options ) do
-          @options[:class] = "app-section #{@options[:class]}".strip
+          @options[:class] = "app-section #{@options[:class]} #{"hidden" if @options.delete(:hidden)}".strip
           concat header( @title ) if @title
           concat body
         end
@@ -20,25 +20,13 @@ module Tungsten
 
         content_tag( :header, options ) {
           concat content_tag( :h2, text, class: 'app-section-heading' ) if text
-          concat capture(&block).html_safe if block_given?
+          concat content_tag( :div, class: 'app-section-heading-description', &block) if block_given?
         }
       end
 
-      def footer( text = nil, options = {}, &block )
-        options[:class] = "app-section-footer #{options[:class]}".strip
-
-        content_tag( :footer, options ) {
-          concat content_tag( :p, text ) unless text.nil?
-          concat capture(&block).html_safe
-        }
-      end
-
-      def actions(  options={}, &block )
-        options[:class] = "app-section-actions #{options[:class]}".strip
-
-        content_tag( :nav, options, &block )
+      def content( options={}, &block )
+        content_tag( :div, class: 'app-section-content', &block )
       end
-
     end
   end
 end

data/lib/tungsten/version.rb

@@ -1,3 +1,3 @@
 module Tungsten
-  VERSION = "0.1.38"
+  VERSION = "0.1.39"
 end

data/public/{code-0.1.38.js → code-0.1.39.js}

@@ -89,4 +89,4 @@ function move(o){document.documentElement.scrollTop=o,document.body.parentNode.s
 });
 
 
-//# sourceMappingURL=/assets/tungsten/code-0.1.38.map.json
+//# sourceMappingURL=/assets/tungsten/code-0.1.39.map.json

data/public/{tungsten-0.1.38.css → tungsten-0.1.39.css}

@@ -230,6 +230,9 @@
 /* ========================================================================== *
  * Globals module
  * -------------------------------------------------------------------------- */
+/* ===================================== *
+ * Responsive Sizes
+ * ------------------------------------- */
 /* ===================================== *
  * Fonts
  * ------------------------------------- */
@@ -245,6 +248,12 @@
 /* ===================================== *
  * Layout
  * ------------------------------------- */
+.collapse > *:first-child, .collapse > *:first-child > *:first-child, .collapse > *:first-child > *:first-child > *:first-child, .collpase-top > *:first-child, .collpase-top > *:first-child > *:first-child, .collpase-top > *:first-child > *:first-child > *:first-child {
+  margin-top: 0; }
+
+.collapse > *:last-child, .collapse > *:last-child > *:last-child, .collapse > *:last-child > *:last-child > *:last-child, .collpase-bottom > *:last-child, .collpase-bottom > *:last-child > *:last-child, .collpase-bottom > *:last-child > *:last-child > *:last-child {
+  margin-bottom: 0; }
+
 /* ===================================== *
  * Context
  * ------------------------------------- */
@@ -420,8 +429,10 @@ form [class*='columns'] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex; }
-.flex-row > * ~ * {
+.flex-row:not(.no-gutter) > * ~ * {
   margin-left: 8px; }
+.flex-row.medium-gutter > * ~ * {
+  margin-left: 20px; }
 
 .one-of-eight, .eight-columns > * {
   -webkit-box-flex: 0;
@@ -677,13 +688,15 @@ main {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
+  -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1; }
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  -ms-flex-pack: distribute;
+      justify-content: space-around; }
 
 body, input, textarea {
   color: #0f212e; }
@@ -691,14 +704,21 @@ body, input, textarea {
 p, ul, ol, h1, h2, h3, h4, h5, h6, pre, table, .card {
   margin-top: 20px;
   margin-bottom: 20px; }
-p:first-child, ul:first-child, ol:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, pre:first-child, table:first-child, .card:first-child {
-  margin-top: 0; }
 
 /* ===================================== *
  * Application
  * ------------------------------------- */
 .application-content {
-  padding: 30px; }
+  max-width: 1280px;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto; }
+@media all and (min-width: 600px) {
+  .application-content {
+    padding: 0 15px 80px; } }
+@media all and (min-width: 1000px) {
+  .application-content {
+    padding: 10px 30px 80px; } }
 
 /* ========================================================================== *
  * Text module
@@ -866,23 +886,33 @@ pre {
 /* ========================================================================== *
  * Sections module
  * -------------------------------------------------------------------------- */
-.app-section-header, .app-section-footer {
+.app-section {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline; }
-.app-section-header .section-actions, .app-section-footer .section-actions {
-  margin-bottom: 0;
-  margin-left: auto; }
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  padding-bottom: 20px; }
+.app-section ~ .app-section {
+  border-top: 1px solid #dfe3e6;
+  padding-top: 20px; }
 .app-section-header {
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between; }
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 240px;
+          flex: 1 0 240px;
+  padding: 0 20px 0; }
 .app-section-heading {
-  font-size: 20px;
-  margin: 0; }
+  font-size: 18px; }
+@media all and (min-width: 600px) {
+  .app-section-heading {
+    padding: 20px 0 0; } }
+.app-section-content {
+  -webkit-box-flex: 2;
+      -ms-flex: 2 1 500px;
+          flex: 2 1 500px; }
+@media all and (min-width: 1000px) {
+  .app-section-content {
+    padding: 0 20px 0; } }
 .app-section.narrow {
   max-width: 600px;
   margin-left: auto;
@@ -891,31 +921,53 @@ pre {
 /* ========================================================================== *
  * Navigation module
  * -------------------------------------------------------------------------- */
-.horizontal-nav {
+.horizontal-nav, .vertical-nav {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  position: relative; }
+.horizontal-nav a, .vertical-nav a {
+  padding: 9px 12px;
+  text-decoration: none;
+  -webkit-transition: background-position .4s ease-out;
+  transition: background-position .4s ease-out;
+  background-image: -webkit-linear-gradient(left, #f5f7fa, #f5f7fa, #fff, #fff);
+  background-image: linear-gradient(to right, #f5f7fa, #f5f7fa, #fff, #fff);
+  background-position: left top;
+  background-size: 400% 100%; }
+.horizontal-nav a, .horizontal-nav a:visited, .vertical-nav a, .vertical-nav a:visited {
+  color: #5a6872; }
+.horizontal-nav a.here, .vertical-nav a.here {
+  color: #152934;
+  background-position: right top; }
+.horizontal-nav a:hover, .horizontal-nav a:focus, .horizontal-nav a:active, .vertical-nav a:hover, .vertical-nav a:focus, .vertical-nav a:active {
+  color: #152934;
+  background-position: right top; }
+
+.horizontal-nav {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-flow: row wrap;
-          flex-flow: row wrap;
-  position: relative;
-  background: #fff;
-  box-shadow: 0 -1px rgba(15, 33, 46, 0.1) inset, 0 0 0 1px rgba(15, 33, 46, 0.05) inset, 0 1px 3px -1px rgba(15, 33, 46, 0.1); }
-.horizontal-nav a {
-  padding: 9px 12px;
-  text-decoration: none;
-  -webkit-transition: background 0.25s;
-  transition: background 0.25s; }
-.horizontal-nav a, .horizontal-nav a:visited {
-  color: #0094fd;
-  background: transparent; }
-.horizontal-nav a.active {
-  color: #0094fd;
-  background: rgba(0, 148, 253, 0.1); }
-.horizontal-nav a:hover, .horizontal-nav a:focus, .horizontal-nav a:active {
-  color: #0094fd;
-  background: rgba(0, 148, 253, 0.1); }
+          flex-flow: row wrap; }
+
+.vertical-nav {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column;
+          flex-flow: column;
+  border-right: 1px solid #dfe3e6; }
+.vertical-nav a {
+  border-bottom: 1px solid #dfe3e6; }
+
+.card-nav {
+  background: #f7fafb;
+  border-top-left-radius: 5px;
+  margin: -20px;
+  margin-right: 20px; }
+.card-nav a:first-child {
+  border-top-left-radius: 2px; }
+.card-nav a:last-child {
+  border-bottom-left-radius: 2px; }
 
 .application-banner {
   background-color: #152934;
@@ -923,6 +975,7 @@ pre {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -2616,22 +2669,20 @@ input::-moz-focus-inner {
   box-shadow: #1f8bf8 0 0 0 1px; }
 
 .input-row {
-  margin-top: 20px;
-  margin-bottom: 20px;
   display: -webkit-box;
   display: -ms-flexbox;
-  display: flex; }
-.input-row:first-child {
-  margin-top: 0; }
+  display: flex;
+  margin-bottom: 20px; }
 .input-row .input-wrapper {
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1; }
 .input-row > * ~ * {
   margin-left: 8px; }
-.input-row > .button-wrapper button {
-  margin-top: 1px;
-  height: 41px; }
+.input-row > .button-wrapper {
+  -ms-flex-item-align: center;
+      -ms-grid-row-align: center;
+      align-self: center; }
 
 /* ========================================================================== *
  * Tables module
@@ -2703,11 +2754,11 @@ th.sub-heading {
 .table-drawer-handle td {
   -webkit-transition: background-position .35s ease-out;
   transition: background-position .35s ease-out;
-  background-image: -webkit-linear-gradient(#fff, #ebf5fe);
-  background-image: linear-gradient(#fff, #ebf5fe);
+  background-image: -webkit-linear-gradient(#fff, #fff, #ebf5fe);
+  background-image: linear-gradient(#fff, #fff, #ebf5fe);
   background-position: left top;
   background-repeat: no-repeat;
-  background-size: 100% 250%; }
+  background-size: 100% 400%; }
 .table-drawer-handle.toggle-handle:hover .drawer-indicator button {
   color: #0094fd; }
 .table-drawer-handle.toggle-handle:hover td {
@@ -2746,6 +2797,10 @@ th.sub-heading {
   -webkit-transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 1px 0 0 #dfe3e6 inset; }
+.table-drawer-content-wrapper > *:first-child, .table-drawer-content-wrapper > *:first-child > *:first-child, .table-drawer-content-wrapper > *:first-child > *:first-child > *:first-child {
+  margin-top: 0; }
+.table-drawer-content-wrapper > *:last-child, .table-drawer-content-wrapper > *:last-child > *:last-child, .table-drawer-content-wrapper > *:last-child > *:last-child > *:last-child {
+  margin-bottom: 0; }
 .table-drawer-content {
   -webkit-transition: opacity .2s, -webkit-transform .2s;
   transition: opacity .2s, -webkit-transform .2s;
@@ -2754,8 +2809,6 @@ th.sub-heading {
   -webkit-transition-delay: .16s, .2s;
           transition-delay: .16s, .2s;
   padding: 8px; }
-.table-drawer-content > :last-child {
-  margin-bottom: 0; }
 
 .rotate-icon svg {
   -webkit-transform: rotate(180deg);
@@ -2938,9 +2991,15 @@ th.sub-heading {
       -ms-flex-direction: column;
           flex-direction: column;
   position: relative;
-  padding: 20px; }
+  padding: 20px;
+  -webkit-transition: opacity .2s, -webkit-transform .2s;
+  transition: opacity .2s, -webkit-transform .2s;
+  transition: opacity .2s, transform .2s;
+  transition: opacity .2s, transform .2s, -webkit-transform .2s; }
 .card > *:last-child, .card > *:last-child > *:last-child, .card > *:last-child > *:last-child > *:last-child {
   margin-bottom: 0; }
+.card > *:first-child, .card > *:first-child > *:first-child, .card > *:first-child > *:first-child > *:first-child {
+  margin-top: 0; }
 .card-actions {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -2948,7 +3007,6 @@ th.sub-heading {
   -webkit-box-align: baseline;
       -ms-flex-align: baseline;
           align-items: baseline;
-  margin-bottom: 20px;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
@@ -2987,10 +3045,8 @@ th.sub-heading {
       -ms-flex-align: top;
           align-items: top;
   margin-bottom: 0; }
-.card-header {
-  margin-bottom: 20px; }
-.card-footer {
-  margin-top: 20px; }
+.card-content:first-child *:first-child {
+  margin-top: 0; }
 .card-header, .card-footer {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -3010,8 +3066,6 @@ th.sub-heading {
   background: rgba(180, 193, 210, 0.05);
   box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.05) inset, 0 1px 1px 0 rgba(15, 33, 46, 0.1) inset;
   border-radius: 3px; }
-.card-well:first-child {
-  margin-top: 0; }
 .card-footer {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -3027,14 +3081,37 @@ th.sub-heading {
   background-clip: padding-box; }
 .card-footer > *:last-child, .card-footer > *:last-child > *:last-child, .card-footer > *:last-child > *:last-child > *:last-child {
   margin-bottom: 0; }
-.card-footer p, .card-footer ul, .card-footer ol, .card-footer h1, .card-footer h2, .card-footer h3, .card-footer h4, .card-footer h5, .card-footer h6, .card-footer pre, .card-footer table, .card-footer .card {
-  margin-bottom: 0; }
+.card-footer > * {
+  margin: 0; }
 .card > .card-footer:last-child, .card > *:last-child > .card-footer:last-child, .card > *:last-child > *:last-child > .card-footer:last-child {
   margin: auto -20px -20px -20px; }
 
 table.card {
   display: table; }
 
+.card-section {
+  -webkit-transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
+.card-section.visible {
+  max-height: 240vh; }
+.card-section.visible .card {
+  opacity: 1;
+  -webkit-transform: scale(1);
+          transform: scale(1); }
+.card-section.hidden {
+  max-height: 0;
+  -webkit-transition-duration: .3s;
+          transition-duration: .3s;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  display: initial; }
+.card-section.hidden .card {
+  opacity: 0;
+  -webkit-transform: scale(0.99);
+          transform: scale(0.99);
+  -webkit-transition-delay: .1s, .1s;
+          transition-delay: .1s, .1s; }
+
 .has-tooltip:focus, .has-tooltip:hover {
   position: relative;
   z-index: 1; }
@@ -3095,15 +3172,11 @@ table.card {
   background: -webkit-linear-gradient(top, white, #fafafa);
   background: linear-gradient(top, white, #fafafa);
   border: 1px solid #dfe3e6; }
-.notice:first-child {
-  margin-top: 0; }
 .notice .notice-header {
   position: relative; }
 .notice .notice-title, .notice p {
   margin-top: 10px;
   margin-bottom: 10px; }
-.notice .notice-title:first-child, .notice p:first-child {
-  margin-top: 0; }
 .notice .dismiss-notice {
   padding: 0;
   position: absolute;
@@ -3259,8 +3332,7 @@ table.card {
           justify-content: center;
   position: relative;
   z-index: 1;
-  margin-bottom: -35px;
-  margin-top: 20px; }
+  margin-bottom: -35px; }
 .toggle-nav-label {
   box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.2) inset, 0 0 0 transparent;
   -webkit-box-flex: 0;
@@ -3345,8 +3417,6 @@ table.card {
   padding: 2px;
   border-radius: 20px;
   box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.2) inset, 0 0 0 transparent; }
-.progress-bar:first-child {
-  margin-top: 0; }
 
 .progress-bar-fill {
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6));
@@ -3406,8 +3476,6 @@ table.card {
 .half-margin {
   margin-top: 10px;
   margin-bottom: 10px; }
-.half-margin:first-child {
-  margin-top: 0; }
 
 .flush-margin {
   margin-bottom: 0; }

data/public/{tungsten-0.1.38.js → tungsten-0.1.39.js}

@@ -96,4 +96,4 @@ function request(e,n,t){return"function"==typeof t?new e("GET",n).end(t):2==argu
 });
 
 
-//# sourceMappingURL=/assets/tungsten/tungsten-0.1.38.map.json
+//# sourceMappingURL=/assets/tungsten/tungsten-0.1.39.map.json

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tungsten
 version: !ruby/object:Gem::Version
-  version: 0.1.38
+  version: 0.1.39
 platform: ruby
 authors:
 - Brandon Mathis
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-10-05 00:00:00.000000000 Z
+date: 2017-10-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -283,14 +283,14 @@ files:
 - lib/tungsten.rb
 - lib/tungsten/helper.rb
 - lib/tungsten/version.rb
-- public/code-0.1.38.js
-- public/code-0.1.38.js.gz
-- public/code-0.1.38.map.json
-- public/tungsten-0.1.38.css
-- public/tungsten-0.1.38.css.gz
-- public/tungsten-0.1.38.js
-- public/tungsten-0.1.38.js.gz
-- public/tungsten-0.1.38.map.json
+- public/code-0.1.39.js
+- public/code-0.1.39.js.gz
+- public/code-0.1.39.map.json
+- public/tungsten-0.1.39.css
+- public/tungsten-0.1.39.css.gz
+- public/tungsten-0.1.39.js
+- public/tungsten-0.1.39.js.gz
+- public/tungsten-0.1.39.map.json
 homepage: 
 licenses:
 - MIT