tungsten 0.1.57 → 0.1.58

data/app/assets/javascripts/tungsten/tungsten.js

@@ -8,17 +8,24 @@ var toggler    = require( 'compose-toggler' )
 var formUp     = require( 'compose-form-up' )
 var dialog     = require( 'compose-dialog' )
 var ajax       = require( 'superagent' )
-var clipboard  = require( './enhancements/clipboard' )
-var notify     = require( './enhancements/notify' )
+var clipboard  = require( './modules/clipboard' )
+var notify     = require( './modules/notify' )
 var event      = toolbox.event
 
 event.scroll.disablePointer()        // disable pointer events on scroll for performance (to avoid extra repaints)
 clipboard();
 
 require( 'compose-slider' )          // Our slider (range input) component
-require( './_form-helpers' )
 require( './enhancements/flash-messages' )
-require( './enhancements/text-helpers' )
+require( './enhancements/form-diff' )
+require( './enhancements/form-reset' )
+require( './enhancements/form-submit-helpers' )
+require( './enhancements/input-change' )
+require( './enhancements/input-number-only' )
+require( './enhancements/input-reset-value' )
+require( './enhancements/input-unit' )
+require( './enhancements/link-here' )
+require( './enhancements/textarea-expand' )
 
 event.change( timeToggle.timeago.setup )
 

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

@@ -121,6 +121,7 @@
 
   // Keep footer (or form if it wraps the footer)
   // nestled up against the card edges
+  &-footer,
   & > &-footer:last-child,
   & > *:last-child > &-footer:last-child,
   & > *:last-child > *:last-child > &-footer:last-child {

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

@@ -1,6 +1,4 @@
 .copy-input {
-  position: relative;
-  display: block;
   &:hover {
     z-index: 2;
   }
@@ -8,18 +6,32 @@
   .copy-button  {
     right: 1px;
     top: 1px;
+    bottom: 1px;
     z-index: 1;
-    padding: 10px 10px 4px 15px;
+    padding: 5px 10px 4px 15px;
+    border-radius: 0;
     svg {
       height: 20px;
     }
 
     &, &:hover, &:active, &:focus {
       transform: translate3d(0,0,0);
+      border-left: 1px solid rgba($gray-11, .2);
       position: absolute;
-      border: none;
       box-shadow: none;
-      background: linear-gradient( 60deg, rgba(#fff, 0), #fff 30%)
+      background: none;
+    }
+  }
+
+  &[data-input-type=textarea]{
+    textarea {
+      padding-right: 42px;
+    }
+    .copy-button {
+      &, &:hover, &:active, &:focus {
+        border: none;
+        bottom: initial;
+      }
     }
   }
 
@@ -27,7 +39,11 @@
   // Magic Number: Push absolute positioned copy-button
   // down to account for label on top
   .standard-label + .button-wrapper .copy-button {
-    top: 1.75em;
+    top: 2.1em;
+  }
+
+  input {
+    padding-right: 55px;
   }
 }
 

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

@@ -1,6 +1,6 @@
 @mixin notice-colors ($text, $bg, $border) {
   color: $text;
-  background: linear-gradient( top, lighten($bg, 2), darken($bg, 2));
+  background: linear-gradient( lighten($bg, 2), darken($bg, 2));
   border: 1px solid $border;
 }
 .notice {

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

@@ -44,9 +44,9 @@ $progress-bar-max-width: 450px;
     border-radius: 10px;
     position: relative;
     overflow: hidden;
-    animation: expand-width 2s $timing;
+    animation: expand-width .75s $timing;
     box-shadow: 0 0 1px 1px rgba(#fff, .2) inset;
-    transition: width 1.5s $timing, background-color .5s $timing;
+    transition: width 1.5s $timing, background-color .25s $timing;
 
     &:before {
       background-size: 50px 50px;

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

@@ -11,7 +11,7 @@
   &-label {
     box-shadow: $input-shadow;
     flex-grow: 0;
-    padding: 4px 10px;
+    padding: 4px 10px 0px;
     background: $white;
     position: relative;
     cursor: pointer;

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

@@ -1,20 +1,35 @@
+.has-tooltip {
+  &:before, &:after {
+    opacity: 0;
+    transition: none;
+  }
+  &:before { content: ""; }
+  &:after { 
+    content: attr(aria-label); 
+    font-size: 0;
+  }
+  &.copied {
+    &:after { 
+      content: "Copied!"; 
+      font-size: 0;
+    }
+  }
+}
 .has-tooltip:focus, .has-tooltip:hover {
   position: relative;
   z-index: 1;
   &:before, &:after {
-    opacity: 0;
+    opacity: 1;
     position: absolute;
     left: 50%;
     transform: translate3d(-50%, 0, 0);
     z-index: 100000;
     pointer-events: none;
-    animation: fade-in .1s ease-in;
+    animation: fade-in .2s ease-in;
     animation-fill-mode: forwards;
-    animation-delay: .4s;
   }
   &:after {
     -webkit-font-smoothing: subpixel-antialiased;
-    content: attr(aria-label);
     top: calc(100% + 6px);
     background-color: rgba(#000, 0.8);
     color: #fff;
@@ -31,15 +46,17 @@
   }
 
   &.copied {
-    &:after { content: "Copied!"; }
+    &:after { 
+      font-size: 10px;
+    }
     &:before, &:after {
-      animation-delay: 0s;
+      animation: none;
     }
     &:after {
       background-color: rgba($green-02, .8);
     }
     &:before {
-      @include triangle(up, rgba($green-02, .8), 6px);
+      border-bottom-color: rgba($green-02, .8);
     }
   }
 }

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

@@ -28,13 +28,18 @@
 
   &-title {
     flex: 1 0 240px;
-    padding: 0 $card-padding 0;
+    padding: 0 $card-padding/2 0;
+    @include at-least($large-width) {
+      padding: 0 $card-padding 0;
+    }
   }
 
   &-heading {
     font-size: 18px;
     @include at-least($medium-width) {
-      padding: $card-padding 0 0;
+      &:first-child {
+        padding: $card-padding 0 0;
+      }
     }
   }
 

data/app/assets/stylesheets/tungsten/form/_base.scss

@@ -1,9 +1,8 @@
 $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password], input[type=search]';
 
-
 @mixin input-active {
   &:focus,
-  &:hover:not([disabled]),
+  //&:hover:not([disabled]),
   &:active {
     @content;
   }
@@ -58,17 +57,18 @@ textarea,
   width: 100%;
   padding: 9px 12px;
   border-radius: $radius;
-  transition: box-shadow $duration;
+  transition: box-shadow, background-color;
+  transition-duration: $duration;
+  transition-timing-function: $timing;
   line-height: 1.8em;
+  background-color: $white;
 
   // Normal state
   box-shadow: $input-shadow;
 
   // Active state
-  @include active {
-    &:not([disabled]) {
-      box-shadow: $focus-shadow;
-    }
+  @include input-active {
+    box-shadow: $focus-shadow;
   }
 
   &:disabled:not([type="submit"]) {
@@ -138,9 +138,21 @@ label {
 
   .label-text {
     transition-property: box-shadow, color;
-    padding-bottom: .2em;
+    transition-duration: $duration;
+    transition-timing-function: $timing;
+    padding-bottom: .4em;
+    font-size: 1.1em;
+    font-weight: 500;
+  }
+
+  .label-description {
+    color: $gray-09;
+    font-size: 12px;
+    line-height: 1.3em;
+    padding-bottom: .8em;
   }
 }
+
 label { *, *:before, *:after {
  transition-duration: $duration;
  transition-timing-function: $timing;
@@ -151,3 +163,31 @@ form.button_to {
   display: inline-flex;
 }
 
+.requires-restart {
+  background-color: transparent;
+  box-shadow: 0 0 0 1px transparent;
+  transition: $duration background-color, $duration box-shadow;
+  padding: 6px;
+  margin: -6px!important;
+  position: relative;
+  vertical-align: top;
+  &-input-message {
+    font-size: .8em;
+    color: mix($red-01, $gray-10, 70);
+    opacity: 0;
+    transition: $duration opacity, $duration height;
+    overflow: hidden;
+    height: 0;
+  }
+}
+
+.requires-restart.input-changed {
+  background-color: rgba($red-01, 0.02);
+  box-shadow: 0 0 0 1px rgba($red-01, 0.3);
+  border-radius: 3px;
+  .requires-restart-input-message {
+    opacity: 1;
+    height: 1.5em;
+    margin-top: .3em;
+  }
+}

data/app/assets/stylesheets/tungsten/form/_defaulted-inputs.scss

@@ -0,0 +1,48 @@
+label.defaulted:not(.remotely-invalid) {
+
+  input:not([type=range]), select:not([tabindex="-1"]), textarea {
+    -webkit-text-fill-color: currentColor;
+    box-shadow: input-shadow( $orange-01 );
+
+    @include input-active {
+      box-shadow: input-focus-shadow( $orange-01 );
+      background-color: rgba($yellow-01, .05);
+    }
+  }
+  input[type=range]:focus {
+    @include slider-thumb {
+      background: $orange-01;
+      box-shadow: 0 0 2px 2px $orange-01, rgba(#000, .4) 0 1px 1px inset;
+    }
+  }
+  .slider-label {
+    box-shadow: $orange-01 0 0 0 1px;
+    background-color: rgba($yellow-01, .05);
+    &:after {
+      border-right-color: mix($yellow-01, $white, 5);
+    }
+    &:before {
+      border-right-color: $orange-01;
+    }
+  }
+}
+
+.restore-default {
+  z-index: 100;
+  position: relative;
+  text-decoration: none;
+  font-size: .9em;
+  padding: .1em .2em 0;
+  display: inline-block;
+  color: $gray-08;
+  transition: none;
+
+  &:hover, &:focus {
+    color: $orange-01;
+    background-color: $gray-02;
+    border-radius: $radius;
+  }
+  span {
+    position: relative;
+  }
+}

data/app/assets/stylesheets/tungsten/form/_form-diff.scss

@@ -0,0 +1,96 @@
+.form-diff {
+  &:not([data-status='diffs']) {
+    overflow: hidden;
+    display: none;
+  }
+
+  &-container {
+    animation: fade-in $timing $duration;
+  }
+
+  &-description, &-restart {
+    line-height: 1.3em;
+    margin: .8em 0;
+  }
+}
+
+.input-diffs {
+  width: 100%;
+  margin: 0;
+}
+
+.input-diff {
+  td { background-color: rgba($gray-01, .5); }
+
+  &-label {
+    font-weight: 500;
+    /*width: 100%;*/
+  }
+
+  &-value, &-initial {
+    padding-left: .2em;
+    padding-right: .2em;
+
+    span {
+      white-space: pre;
+      font-family: $mono-font;
+      display: inline-block;
+      padding: 0 .5em;
+    }
+  }
+
+  &-initial { text-align: right; }
+  &-initial span { background-color: #FCEFF0; }
+  &-value span   { background-color: #EAFEEE; }
+
+  &-undo {
+    width: 1%;
+    button {
+      padding: 0 .5em;
+      color: inherit;
+      opacity: 0.4;
+      transition: opacity $timing $duration;
+      text-decoration: none;
+      border: none;
+      background: transparent;
+
+      &:hover, &:focus { 
+        color: inherit;
+        opacity: 1;
+      }
+    }
+  }
+
+  // Arrows between values
+  &-marker {
+    padding-left: 0;
+    padding-right: 0;
+    width: 1%;
+    span {
+      transform: rotate(45deg);
+      position: relative;
+      display: inline-block;
+      height: 7px;
+      width: 7px;
+      border-top: 2px solid $gray-07;
+      border-right: 2px solid $gray-07;
+      margin: { right: .5em; left: .5em }
+
+      &:before {
+        content: "was changed to";
+        font-size: 0;
+        height: 0;
+        width: 0;
+        position: absolute;
+      }
+      &:after {
+        content: "";
+        position: absolute;
+        border-bottom: 2px solid $gray-07;
+        width: 8px;
+        height: 0px;
+        transform: rotate(-45deg) translateX(-2px);
+      }
+    }
+  }
+}

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

@@ -5,3 +5,6 @@
 @import 'validation';
 @import 'slider';
 @import 'input-row';
+@import 'unit-select';
+@import 'defaulted-inputs';
+@import 'form-diff';