tungsten 0.1.46 → 0.1.47

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d1741cb58666c941ea9a9baf7e95e22b61bdc8fb
-  data.tar.gz: 75b2ad918b839d5589ffcbf7751d495b2b9eb7b7
+  metadata.gz: 79baf52fa69ab8f77a4feefd5f2c7efdab76f3c0
+  data.tar.gz: 1b0f8595b5d5dfb25557c7f01c64818997562831
 SHA512:
-  metadata.gz: 9d315dc704543316ccc715ec8359e0c92275249e992bd1436ba3e0c70ba33d336d489bb5b5454a1765d6b54dedf87c765d774086dfc77e4eb17551f8f7d403cf
-  data.tar.gz: 7d9a92fcc9709c25529dba33ba63e61831495dd351b9498d39e3b38ca0ba50300526fe5d31c3205c05f5459040d9582803e52eb527dbe72d24f553dc4578bf34
+  metadata.gz: 1e338023b82003c5e870bca90188dbbfc2bd07d28bd25d386090b1c229691dcdd7cc983151629c4a45580e666b9492c15d2c333888398f8383da52da177865ed
+  data.tar.gz: 56099352589cfc6fada25aa10991d1c6123057dcd7537a4357c8e6cf9fbf8d70b51f921f5bceba7955fbed2cc4b2a1993abc8512aed6be1329b5eb04e07cd454

data/app/assets/stylesheets/tungsten/components/_copy-input.scss

@@ -22,6 +22,12 @@
       background: linear-gradient( 60deg, rgba(#fff, 0), #fff 30%)
     }
   }
+
+  // Magic Number: Push absolute positioned copy-button
+  // down to account for label on top
+  .standard-label + .button-wrapper .copy-button {
+    top: 1.75em;
+  }
 }
 
 .copy-button {

data/app/assets/stylesheets/tungsten/components/_progress-bar.scss

@@ -12,74 +12,82 @@
 
 .progress-bar-wrapper {
   padding: 10px 0;
-  @include at-least(500px){
-    display: table-row;
-  }
-}
-
-.progress-bar-label {
-  padding-bottom: 5px;
-  @include at-least(500px){
-    display: table-cell;
-    white-space: nowrap;
-    word-wrap: break-word;
-    padding: 10px 15px 10px 0;
-  }
 }
 
+// Progress bar
 .progress-bar {
-  @include at-least(500px){
-    display: table-cell;
+  display: flex;
+  width: 100%;
+
+  &-outline {
+    background-color: rgba(#fff, 0);
+    border-radius: 20px;
+    box-shadow: $input-shadow;
+    max-width: 350px;
+    padding: 2px;
+    position: relative;
+    transition: background-color .5s $timing;
     width: 100%;
-  }
-}
+    top: 1px;
 
-.progress-bar-outline {
-  width: 100%;
-  border-radius: 20px;
-  box-shadow: $input-shadow;
-  padding: 2px;
-  background-color: rgba(#fff, 0);
-  transition: background-color .5s $timing;
-  position: relative;
-  top: 1px;
-}
+    &.full-width {
+      max-width: 100%;
+    }
+  }
 
-.progress-bar-fill {
-  background-color: $blue-04;
-  height: .7em;
-  border-radius: 10px;
-  position: relative;
-  overflow: hidden;
-  animation: expand-width 2s $timing;
-  transition: width 1.5s $timing, background-color .5s $timing;
-  box-shadow: 0 0 1px 1px rgba(#fff, .2) inset;
+  &-fill {
+    background-color: $blue-04;
+    height: .7em;
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+    animation: expand-width 2s $timing;
+    transition: width 1.5s $timing;
+    box-shadow: 0 0 1px 1px rgba(#fff, .2) inset;
+    transition: background-color .5s $timing;
 
-  &:before {
-    background-size: 50px 50px;
-    animation: move-background 2s linear infinite;
-    content: "";
-    position: absolute;
-    top: 0; left: 0; bottom: 0; right: 0;
-    background-image: linear-gradient(
-      -45deg, 
-      rgba(#fff, .15) 25%, 
-      transparent 25%, 
-      transparent 50%, 
-      rgba(#fff, .15) 50%, 
-      rgba(#fff, .15) 75%, 
-      transparent 75%, 
-      transparent
-    );
+    &:before {
+      background-size: 50px 50px;
+      animation: move-background 2s linear infinite;
+      content: "";
+      position: absolute;
+      top: 0; left: 0; bottom: 0; right: 0;
+      background-image: linear-gradient(
+        -45deg, 
+        rgba(#fff, .15) 25%, 
+        transparent 25%, 
+        transparent 50%, 
+        rgba(#fff, .15) 50%, 
+        rgba(#fff, .15) 75%, 
+        transparent 75%, 
+        transparent
+      );
+    }
   }
+}
 
-  &:after {
-    background: $blue-04;
-    border-radius: 50%;
-    content: '';
+// Progress bar with label
+.progress-bar-wrapper.with-label {
+  @include at-least(500px){
+    display: table-row;
+  }
+  .progress-bar-label {
+    padding-bottom: 5px;
+    @include at-least(500px){
+      display: table-cell;
+      white-space: nowrap;
+      word-wrap: break-word;
+      padding: 10px 15px 10px 0;
+    }
+  }
+  .progress-bar {
+    @include at-least(500px){
+      display: table-cell;
+    }
   }
 }
 
+// Progress bar status fill color
 @mixin progress-bar-status($color, $opacity: 0.2) {
   .progress-bar-outline{ background-color: rgba($color, $opacity); } 
   .progress-bar-fill { background: $color; }

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

@@ -39,9 +39,7 @@ $mono-font: 'Roboto Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Co
   transition: color $duration;
 
   // Default state
-  @include normal {
-    color: $default;
-  }
+  color: $default;
 
   // Active state
   @include active {

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

@@ -7,6 +7,20 @@
   flex-wrap: wrap;
   padding-bottom: $card-padding;
 
+  &:target {
+    position: relative;
+
+    &:after {
+      content: "";
+      background-color: #FFFFDD;
+      position: absolute;
+      top: 0; bottom: 0; right: 0; left: 0;
+      z-index: -1;
+      box-shadow: 0 0 10px 2px #FFFFDD;
+      animation: fade-out $timing 2.5s forwards;
+    }
+  }
+
   ~ .app-section { 
     border-top: 1px solid $gray-04;
     padding-top: $card-padding;
@@ -24,6 +38,13 @@
     }
   }
 
+  &-title-anchor {
+    &, &:hover {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
   &-content {
     flex: 2 1 500px;
     @include at-least($large-width) {

data/app/helpers/tungsten/form_helper.rb

@@ -392,6 +392,7 @@ module Tungsten
 
       if label_text = options.delete(:label)
         label_text = content_tag(:span, class: 'label-text') { label_text }
+        label_options[:class] += ' standard-label'
       end
 
       

data/app/helpers/tungsten/progress_bar_helper.rb

@@ -12,7 +12,8 @@ module Tungsten
       
       label = block_given? ? capture(&block) : options.delete(:label)
 
-      color = options.delete(:color)
+      outline_class = "progress-bar-outline #{ 'full-width' if options[:full_width] }".strip
+      fill_class = "progress-bar-fill #{options.delete(:color)}".strip
       
       set_aria! options, {
         role:      'progressbar',
@@ -22,13 +23,13 @@ module Tungsten
         valuetext: strip_tags(label)
       }
 
-      content_tag( :div, class: "progress-bar-wrapper" ) {
+      content_tag( :div, class: "progress-bar-wrapper #{ 'with-label' if label }" ) {
         concat content_tag( :div, class: 'progress-bar-label') {
-          concat content_tag( :div, class: 'progress-bar-label-content' ) { label } if label
-        }
+          concat content_tag( :div, class: 'progress-bar-label-content' ) { label }
+        } if label
         concat content_tag( :div, options ) {
-          concat content_tag( :div, class: "progress-bar-outline" ) {
-            tag.div class: "progress-bar-fill #{color}".strip, style: "width: #{completion}%"
+          concat content_tag( :div, class: outline_class ) {
+            tag.div class: fill_class, style: "width: #{completion}%"
           }
           concat content_tag( :div, class: 'progress-bar-percentage') { "#{completion}%" } if options[:show_percentage]
         }

data/app/helpers/tungsten/section_helper.rb

@@ -3,8 +3,15 @@ module Tungsten
     class Section < Tungsten::Helper
 
       def initialize( title = nil, options = {} )
-        @options = options
-        @title = title
+        if title.is_a? Hash
+          @options = title
+          @title = nil
+        else
+          @options = options
+          @title = title
+        end
+
+        @id = @options[:id]
       end
 
       def display( body )
@@ -18,8 +25,13 @@ module Tungsten
       def title( text = nil, options = {}, &block )
         options[:class] = "app-section-title #{options[:class]}".strip
 
-        content_tag( :div, options ) {
-          concat content_tag( :h2, text, class: 'app-section-heading' ) if text
+        if text
+          text = content_tag( :a, text, href: "##{@id}", class: 'app-section-title-anchor' ) unless @id.nil?
+          text = content_tag( :h2, text, class: 'app-section-heading' )
+        end
+
+        tag = content_tag( :div, options ) {
+          concat text
           concat content_tag( :div, class: 'app-section-description', &block) if block_given?
         }
       end

data/lib/tungsten/version.rb

@@ -1,3 +1,3 @@
 module Tungsten
-  VERSION = "0.1.46"
+  VERSION = "0.1.47"
 end

data/public/{code-0.1.46.js → code-0.1.47.js}

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

data/public/{tungsten-0.1.46.css → tungsten-0.1.47.css}

@@ -1017,8 +1017,7 @@ a {
   -webkit-text-decoration-color: rgba(0, 148, 253, 0.5);
           text-decoration-color: rgba(0, 148, 253, 0.5);
   -webkit-transition: color 0.25s;
-  transition: color 0.25s; }
-a, a:visited {
+  transition: color 0.25s;
   color: #0094fd; }
 a:hover, a:focus, a:active {
   color: #006dff; }
@@ -1085,6 +1084,20 @@ pre {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   padding-bottom: 20px; }
+.app-section:target {
+  position: relative; }
+.app-section:target:after {
+  content: "";
+  background-color: #FFFFDD;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: -1;
+  box-shadow: 0 0 10px 2px #FFFFDD;
+  -webkit-animation: fade-out cubic-bezier(0.4, 0, 0.2, 1) 2.5s forwards;
+          animation: fade-out cubic-bezier(0.4, 0, 0.2, 1) 2.5s forwards; }
 .app-section ~ .app-section {
   border-top: 1px solid #dfe3e6;
   padding-top: 20px; }
@@ -1098,6 +1111,9 @@ pre {
 @media all and (min-width: 600px) {
   .app-section-heading {
     padding: 20px 0 0; } }
+.app-section-title-anchor, .app-section-title-anchor:hover {
+  color: inherit;
+  text-decoration: none; }
 .app-section-content {
   -webkit-box-flex: 2;
       -ms-flex: 2 1 500px;
@@ -3530,6 +3546,8 @@ table.card {
   box-shadow: none;
   background: -webkit-linear-gradient(30deg, rgba(255, 255, 255, 0), #fff 30%);
   background: linear-gradient(60deg, rgba(255, 255, 255, 0), #fff 30%); }
+.copy-input .standard-label + .button-wrapper .copy-button {
+  top: 1.75em; }
 
 .copy-button.copied svg {
   fill: #5aa700; }
@@ -3562,35 +3580,25 @@ table.card {
     width: 0; } }
 .progress-bar-wrapper {
   padding: 10px 0; }
-@media all and (min-width: 500px) {
-  .progress-bar-wrapper {
-    display: table-row; } }
-
-.progress-bar-label {
-  padding-bottom: 5px; }
-@media all and (min-width: 500px) {
-  .progress-bar-label {
-    display: table-cell;
-    white-space: nowrap;
-    word-wrap: break-word;
-    padding: 10px 15px 10px 0; } }
-
-@media all and (min-width: 500px) {
-  .progress-bar {
-    display: table-cell;
-    width: 100%; } }
 
+.progress-bar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%; }
 .progress-bar-outline {
-  width: 100%;
+  background-color: rgba(255, 255, 255, 0);
   border-radius: 20px;
   box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.2) inset, 0 0 0 transparent;
+  max-width: 350px;
   padding: 2px;
-  background-color: rgba(255, 255, 255, 0);
+  position: relative;
   -webkit-transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
+  width: 100%;
   top: 1px; }
-
+.progress-bar-outline.full-width {
+  max-width: 100%; }
 .progress-bar-fill {
   background-color: #006dff;
   height: .7em;
@@ -3599,9 +3607,11 @@ table.card {
   overflow: hidden;
   -webkit-animation: expand-width 2s cubic-bezier(0.4, 0, 0.2, 1);
           animation: expand-width 2s cubic-bezier(0.4, 0, 0.2, 1);
-  -webkit-transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.2) inset; }
+  -webkit-transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.2) inset;
+  -webkit-transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
 .progress-bar-fill:before {
   background-size: 50px 50px;
   -webkit-animation: move-background 2s linear infinite;
@@ -3614,10 +3624,21 @@ table.card {
   right: 0;
   background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
-.progress-bar-fill:after {
-  background: #006dff;
-  border-radius: 50%;
-  content: ''; }
+
+@media all and (min-width: 500px) {
+  .progress-bar-wrapper.with-label {
+    display: table-row; } }
+.progress-bar-wrapper.with-label .progress-bar-label {
+  padding-bottom: 5px; }
+@media all and (min-width: 500px) {
+  .progress-bar-wrapper.with-label .progress-bar-label {
+    display: table-cell;
+    white-space: nowrap;
+    word-wrap: break-word;
+    padding: 10px 15px 10px 0; } }
+@media all and (min-width: 500px) {
+  .progress-bar-wrapper.with-label .progress-bar {
+    display: table-cell; } }
 
 .progress-bar[data-status="complete"] .progress-bar-outline {
   background-color: rgba(90, 167, 0, 0.2); }

data/public/{tungsten-0.1.46.js → tungsten-0.1.47.js}

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