tungsten 0.1.35 → 0.1.36

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e877b0e117c366d5dd3e0081a2cd6dcebfc93d11
-  data.tar.gz: 8d5a525c8c7e125be1047cbb227f4f6a649a4bbb
+  metadata.gz: 254bfdce1180a61d6e09e2940456d5e2863ec4e1
+  data.tar.gz: 4bf409a31b39757c00c258c90ccbce5348399802
 SHA512:
-  metadata.gz: '08c727fb40680f3f7dd1d547b8d7b03291e5019b5b6d9fca3192c79ca197233f752a5c50ef26f76c5de6f18428877b7398997ee54a7b70eb69367f155770a5c0'
-  data.tar.gz: b2001752112666ab9316aaf461c07759f202e92a9c931b842aa7aab9a434e9b9460c9e8c9d14753701eeb5cb4ba7b05025eda54ed46a5c309b0913dc5c857f0a
+  metadata.gz: 5a39f819435ede530efd8e2b17551a1a099f88dcf14b825ff70c6a3c7f8011b0d5784b8ee59683d91db3d760cc8f840be2199f85bd57f3634fa62b937013c02f
+  data.tar.gz: e251ca5d2cc6d0e81dbb2417725fa078458c70dc1d760630c25d6cd876fe7bf797fd822f3e86851a38bb294f85218e493b9384b2724d0e8f19b26a2ff3674450

data/app/assets/stylesheets/tungsten/_index.scss

@@ -5,3 +5,4 @@
 @import 'pages/index';
 @import 'form/index';
 @import 'components/index';
+@import 'overrides';

data/app/assets/stylesheets/tungsten/_overrides.scss

@@ -0,0 +1,18 @@
+.half-margin {
+  @include block-margin( $vertical-margin / 2 );
+}
+
+.flush-margin {
+  margin-bottom: 0;
+  + * { margin-top: 0; }
+}
+
+.hidden {
+  display: none !important;
+  visibility: hidden;
+}
+
+.heading-label {
+  margin-bottom: 0;
+  + * { margin-top: 0; }
+}

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

@@ -11,7 +11,6 @@
 }
 
 .button {
-  display: inline-flex;
   align-self: center;
   align-items: center;
   justify-content: center;
@@ -110,6 +109,33 @@
     }
   }
 
+
+  &.clear {
+    padding: { left: 2px; right: 2px; }
+
+    @include normal {
+      box-shadow: none;
+      background: transparent;
+    }
+    @include active {
+      box-shadow: none;
+      background: transparent;
+    }
+    &.primary {
+      color: $blue-03;
+      &:hover { color: darken($blue-03, 10) } 
+    }
+    &.destructive {
+      color: inherit;
+      &:hover { color: $red-01 } 
+    }
+
+    &.primary-destructive {
+      color: $red-01;
+      &:hover { color: $red-02 } 
+    }
+  }
+
   // Disabled
   &[disabled] {
     color: $gray-05 !important;
@@ -120,7 +146,7 @@
     0 1px 3px rgba($gray-11, .15) !important;
   }
 
-  svg {
+  .inline-icon {
     margin: 0 4px;
     &:first-child { margin-left: 0; }
     &:last-child { margin-right: 0; }
@@ -130,32 +156,6 @@
     vertical-align: bottom;
     padding: 5px;
 
-    &.clear {
-      padding: { left: 2px; right: 2px; }
-
-      @include normal {
-        box-shadow: none;
-        background: transparent;
-      }
-      @include active {
-        box-shadow: none;
-        background: transparent;
-      }
-      &.primary {
-        color: $blue-03;
-        &:hover { color: darken($blue-03, 10) } 
-      }
-      &.destructive {
-        color: inherit;
-        &:hover { color: $red-01 } 
-      }
-
-      &.primary-destructive {
-        color: $red-01;
-        &:hover { color: $red-02 } 
-      }
-    }
-
     svg {
       fill: currentColor;
       height: 20px;

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

@@ -1,11 +1,10 @@
 .inline-icon {
   position: relative;
   height: 1em;
-  width: 1em;
   display: inline-flex;
 
   svg {
-    position: absolute;
+    position: relative;
     bottom: -0.125em;
   }
 }

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

@@ -104,28 +104,76 @@ th.sub-heading {
 }
 
 
-// Validation message animation declaration
-@keyframes open-table-drawer {
-  0% { max-height: 0; }
-  100% { max-height: 40vw; }
+.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-position: left top;
+    background-repeat: no-repeat;
+    background-size: 100% 220%;
+  }
+
+  &.toggle-handle:hover {
+    .drawer-indicator button {
+      color: $blue-03;
+    }
+    td {
+      background-position: left bottom;
+    }
+  }
+
+  &.open {
+    .drawer-indicator button {
+      transform: rotate(180deg);
+    }
+    + .table-drawer {
+      .table-drawer-content-wrapper { max-height: 240vh; } // magic number based on very tall theoretical maximum height
+      .table-drawer-content { 
+        opacity: 1;
+      }
+    }
+  }
+
+  &.closed {
+    + .table-drawer {
+      .table-drawer-content-wrapper { 
+        max-height: 0; 
+        transition-duration: .3s;
+        transition-timing-function: $timing;
+      }
+      .table-drawer-content { 
+        opacity: 0;
+      }
+    }
+  }
 }
 
 .table-drawer {
-  tr:not(.open) + & { display: none; }
-
   td {
     padding: 0;
+    border-top: none !important;
+    transition: border-color .2s ease-in;
+    background-image: linear-gradient(rgba(#000, .03),rgba(#000, .03));
   }
-  .table-drawer-content {
+
+  &-content-wrapper {
+    overflow: hidden;
+    transition: max-height .4s $timing;
+    box-shadow: 0 1px 0 0 $gray-04 inset;
+  }
+
+  &-content {
+    transition: opacity .2s .15s ease-in;
     padding: 8px;
-    background: rgba(#000, .05);
     >:last-child {
       margin-bottom: 0;
     }
   }
-  .open + & .table-drawer-content-wrapper {
-    overflow: hidden;
-    animation: open-table-drawer .4s ease-in; }
 }
 
 .rotate-icon {

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

@@ -39,9 +39,9 @@ textarea {
   color: $gray-11;
 }
 
-@mixin block-margin {
-  margin-top: $vertical-margin;
-  margin-bottom: $vertical-margin;
+@mixin block-margin ($margin: $vertical-margin) {
+  margin-top: $margin;
+  margin-bottom: $margin;
   &:first-child {
     margin-top: 0;
   }
@@ -59,11 +59,3 @@ textarea {
   padding: $content-padding;
 }
 
-/* ===================================== *
- * Visibility
- * ------------------------------------- */
-
-.hidden {
-  display: none !important;
-  visibility: hidden;
-}

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

@@ -161,7 +161,7 @@ a {
  * ------------------------------------- */
 
 hr {
-  border: solid silver;
+  border: solid $gray-04;
   border-width: 1px 0 0 0;
 }
 

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

@@ -1,17 +1,27 @@
+// Expanded items will be large as possible
+.grow { flex-grow: 1; }
+
+.flex-row {
+  display: flex;
+
+  // Add gutter between top level elements
+  > * ~ * {
+    margin-left: 8px;
+  }
+}
+
 .input-row {
   @include block-margin;
   display: flex;
 
   // Input wrappers should be large as possible
-  .input-wrapper {
-    flex-grow: 1;
-  }
-
-  // Add spacing between top level elements
+  .input-wrapper { flex-grow: 1; }
+  
+  // Add gutter between top level elements
   > * ~ * {
     margin-left: 8px;
   }
-  
+
   // For some reason buttons are 2px too tall
   > .button-wrapper button { 
     margin: { top: 1px; }

data/app/helpers/tungsten/button_helper.rb

@@ -40,7 +40,11 @@ module Tungsten
       }
 
       button = content_tag tag_name, button_options do
-        concat use_svg(options.delete(:icon), height: '1em', fill: 'currentColor', desc: options.delete(:desc)) if options[:icon]
+        if options[:icon]
+          concat content_tag(:span, class: 'inline-icon') {
+            use_svg(options.delete(:icon), height: '1em', fill: 'currentColor', desc: options.delete(:desc))
+          }
+        end
         concat content_tag(:span, class: 'button-text') { text } if text
         concat capture(&block).html_safe if block_given?
       end
@@ -129,7 +133,9 @@ module Tungsten
       icon_options[:scale] = true unless icon_options[:width] || icon_options[:height]
 
       button( options ) do
-        use_svg icon, icon_options
+        concat content_tag(:span, class: 'inline-icon') {
+          use_svg icon, icon_options
+        }
       end
     end
 

data/app/helpers/tungsten/table_helper.rb

@@ -15,9 +15,9 @@ module Tungsten
         options[:data] ||= {}
 
         if @options.delete(:toggle)
-          options[:data]['toggle-class'] = 'open'
+          options[:data]['toggle-class'] = 'open closed'
           options[:role] = 'button'
-          options[:class] << ' handle-toggle'
+          options[:class] << ' toggle-handle closed'
         end
         content_tag(:tr, options) { body }
       end
@@ -37,15 +37,20 @@ module Tungsten
       end
 
       def close( &block )
-        trigger_action( 'remove', &block )
+        capture(&block).sub(/>/, " role='button' \
+                            data-remove-class=\"open; ##{@id}\" \
+                            data-add-class=\"closed; ##{@id}\">").html_safe
       end
 
       def toggle( &block )
-        trigger_action( 'toggle', &block )
+        capture(&block).sub(/>/, " role='button' \
+                            data-toggle-class=\"open closed; ##{@id}\">").html_safe
       end
 
       def open( &block )
-        trigger_action( 'add', &block )
+        capture(&block).sub(/>/, " role='button' \
+                            data-add-class=\"open; ##{@id}\" \
+                            data-remove-class=\"closed; ##{@id}\">").html_safe
       end
 
       def id
@@ -53,10 +58,6 @@ module Tungsten
       end
 
       private
-
-      def trigger_action( action, &block )
-        capture(&block).sub(/>/, " role='button' data-#{action}-class=\"open; ##{@id}\">").html_safe
-      end
     end
   end
 end

data/lib/tungsten/version.rb

@@ -1,3 +1,3 @@
 module Tungsten
-  VERSION = "0.1.35"
+  VERSION = "0.1.36"
 end

data/public/{code-0.1.35.js → code-0.1.36.js}

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

data/public/{tungsten-0.1.35.css → tungsten-0.1.36.css}

@@ -688,13 +688,6 @@ p:first-child, ul:first-child, ol:first-child, h1:first-child, h2:first-child, h
 .application-content {
   padding: 30px; }
 
-/* ===================================== *
- * Visibility
- * ------------------------------------- */
-.hidden {
-  display: none !important;
-  visibility: hidden; }
-
 /* ========================================================================== *
  * Text module
  * -------------------------------------------------------------------------- */
@@ -810,7 +803,7 @@ a:hover, a:focus, a:active {
  * Horizontal rule
  * ------------------------------------- */
 hr {
-  border: solid silver;
+  border: solid #dfe3e6;
   border-width: 1px 0 0 0; }
 
 /* ===================================== *
@@ -2610,6 +2603,18 @@ input::-moz-focus-inner {
 .slider-input.fill ~ .slider-track .filled .slider-segment-mark[data-index]:after {
   box-shadow: #1f8bf8 0 0 0 1px; }
 
+.grow {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1; }
+
+.flex-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex; }
+.flex-row > * ~ * {
+  margin-left: 8px; }
+
 .input-row {
   margin-top: 20px;
   margin-bottom: 20px;
@@ -2690,30 +2695,57 @@ th.sub-heading {
   padding-top: 4px;
   padding-bottom: 4px; }
 
-@-webkit-keyframes open-table-drawer {
-  0% {
-    max-height: 0; }
-  100% {
-    max-height: 40vw; } }
+.table-drawer-handle .drawer-indicator button {
+  -webkit-transition: -webkit-transform .2s;
+  transition: -webkit-transform .2s;
+  transition: transform .2s;
+  transition: transform .2s, -webkit-transform .2s; }
+.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-position: left top;
+  background-repeat: no-repeat;
+  background-size: 100% 220%; }
+.table-drawer-handle.toggle-handle:hover .drawer-indicator button {
+  color: #0094fd; }
+.table-drawer-handle.toggle-handle:hover td {
+  background-position: left bottom; }
+.table-drawer-handle.open .drawer-indicator button {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg); }
+.table-drawer-handle.open + .table-drawer .table-drawer-content-wrapper {
+  max-height: 240vh; }
+.table-drawer-handle.open + .table-drawer .table-drawer-content {
+  opacity: 1; }
+.table-drawer-handle.closed + .table-drawer .table-drawer-content-wrapper {
+  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); }
+.table-drawer-handle.closed + .table-drawer .table-drawer-content {
+  opacity: 0; }
 
-@keyframes open-table-drawer {
-  0% {
-    max-height: 0; }
-  100% {
-    max-height: 40vw; } }
-tr:not(.open) + .table-drawer {
-  display: none; }
 .table-drawer td {
-  padding: 0; }
-.table-drawer .table-drawer-content {
-  padding: 8px;
-  background: rgba(0, 0, 0, 0.05); }
-.table-drawer .table-drawer-content > :last-child {
-  margin-bottom: 0; }
-.open + .table-drawer .table-drawer-content-wrapper {
+  padding: 0;
+  border-top: none !important;
+  -webkit-transition: border-color .2s ease-in;
+  transition: border-color .2s ease-in;
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03));
+  background-image: linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)); }
+.table-drawer-content-wrapper {
   overflow: hidden;
-  -webkit-animation: open-table-drawer .4s ease-in;
-          animation: open-table-drawer .4s ease-in; }
+  -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 {
+  -webkit-transition: opacity .2s .15s ease-in;
+  transition: opacity .2s .15s ease-in;
+  padding: 8px; }
+.table-drawer-content > :last-child {
+  margin-bottom: 0; }
 
 .rotate-icon svg {
   -webkit-transform: rotate(180deg);
@@ -2732,10 +2764,8 @@ tr:not(.open) + .table-drawer {
   cursor: pointer; }
 
 .button {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
   -ms-flex-item-align: center;
+      -ms-grid-row-align: center;
       align-self: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
@@ -2784,41 +2814,41 @@ tr:not(.open) + .table-drawer {
   color: #fff;
   background: #A81C27;
   box-shadow: 0 0 0 1px #A81C27, 0 1px 3px rgba(15, 33, 46, 0.15); }
-.button[disabled] {
-  color: #d6dde7 !important;
-  background: #f7fafb !important;
-  cursor: not-allowed !important;
-  box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.1), 0 1px 3px rgba(15, 33, 46, 0.15) !important; }
-.button svg {
-  margin: 0 4px; }
-.button svg:first-child {
-  margin-left: 0; }
-.button svg:last-child {
-  margin-right: 0; }
-.button.icon-button {
-  vertical-align: bottom;
-  padding: 5px; }
-.button.icon-button.clear {
+.button.clear {
   padding-left: 2px;
   padding-right: 2px; }
-.button.icon-button.clear, .button.icon-button.clear:visited {
+.button.clear, .button.clear:visited {
   box-shadow: none;
   background: transparent; }
-.button.icon-button.clear:hover, .button.icon-button.clear:focus, .button.icon-button.clear:active {
+.button.clear:hover, .button.clear:focus, .button.clear:active {
   box-shadow: none;
   background: transparent; }
-.button.icon-button.clear.primary {
+.button.clear.primary {
   color: #0094fd; }
-.button.icon-button.clear.primary:hover {
+.button.clear.primary:hover {
   color: #0076ca; }
-.button.icon-button.clear.destructive {
+.button.clear.destructive {
   color: inherit; }
-.button.icon-button.clear.destructive:hover {
+.button.clear.destructive:hover {
   color: #dd2f41; }
-.button.icon-button.clear.primary-destructive {
+.button.clear.primary-destructive {
   color: #dd2f41; }
-.button.icon-button.clear.primary-destructive:hover {
+.button.clear.primary-destructive:hover {
   color: #A81C27; }
+.button[disabled] {
+  color: #d6dde7 !important;
+  background: #f7fafb !important;
+  cursor: not-allowed !important;
+  box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.1), 0 1px 3px rgba(15, 33, 46, 0.15) !important; }
+.button .inline-icon {
+  margin: 0 4px; }
+.button .inline-icon:first-child {
+  margin-left: 0; }
+.button .inline-icon:last-child {
+  margin-right: 0; }
+.button.icon-button {
+  vertical-align: bottom;
+  padding: 5px; }
 .button.icon-button svg {
   fill: currentColor;
   height: 20px; }
@@ -3335,10 +3365,29 @@ table.card {
 .inline-icon {
   position: relative;
   height: 1em;
-  width: 1em;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex; }
 .inline-icon svg {
-  position: absolute;
+  position: relative;
   bottom: -0.125em; }
+
+.half-margin {
+  margin-top: 10px;
+  margin-bottom: 10px; }
+.half-margin:first-child {
+  margin-top: 0; }
+
+.flush-margin {
+  margin-bottom: 0; }
+.flush-margin + * {
+  margin-top: 0; }
+
+.hidden {
+  display: none !important;
+  visibility: hidden; }
+
+.heading-label {
+  margin-bottom: 0; }
+.heading-label + * {
+  margin-top: 0; }

data/public/{tungsten-0.1.35.js → tungsten-0.1.36.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.35.map.json
+//# sourceMappingURL=/assets/tungsten/tungsten-0.1.36.map.json

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tungsten
 version: !ruby/object:Gem::Version
-  version: 0.1.35
+  version: 0.1.36
 platform: ruby
 authors:
 - Brandon Mathis
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-10-02 00:00:00.000000000 Z
+date: 2017-10-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -176,6 +176,7 @@ files:
 - app/assets/javascripts/tungsten/tungsten.js
 - app/assets/stylesheets/tungsten/_colors.yml
 - app/assets/stylesheets/tungsten/_index.scss
+- app/assets/stylesheets/tungsten/_overrides.scss
 - app/assets/stylesheets/tungsten/code/_codemirror.scss
 - app/assets/stylesheets/tungsten/code/_color.scss
 - app/assets/stylesheets/tungsten/code/_highlighted.scss
@@ -282,14 +283,14 @@ files:
 - lib/tungsten.rb
 - lib/tungsten/helper.rb
 - lib/tungsten/version.rb
-- public/code-0.1.35.js
-- public/code-0.1.35.js.gz
-- public/code-0.1.35.map.json
-- public/tungsten-0.1.35.css
-- public/tungsten-0.1.35.css.gz
-- public/tungsten-0.1.35.js
-- public/tungsten-0.1.35.js.gz
-- public/tungsten-0.1.35.map.json
+- public/code-0.1.36.js
+- public/code-0.1.36.js.gz
+- public/code-0.1.36.map.json
+- public/tungsten-0.1.36.css
+- public/tungsten-0.1.36.css.gz
+- public/tungsten-0.1.36.js
+- public/tungsten-0.1.36.js.gz
+- public/tungsten-0.1.36.map.json
 homepage: 
 licenses:
 - MIT