tungsten 0.2.8 → 0.2.9

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

@@ -163,6 +163,7 @@ a {
 hr {
   border: solid $gray-04;
   border-width: 1px 0 0 0;
+  @include block-margin;
 }
 
 /* ===================================== *

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

@@ -1,30 +1,70 @@
-label.input-defaulted-value:not(.remotely-invalid) {
+$purple-flash: mix($white, $purple-01, 90%);
 
-  input:not([type=range]), select:not([tabindex="-1"]), textarea {
-    -webkit-text-fill-color: currentColor;
-    box-shadow: input-shadow( $orange-01 );
+@keyframes purple-flicker {
+  0% { background-color: $white; }
+  10%   { background-color: $purple-flash; }
+  100% { background-color: $white; }
+}
+@keyframes purple-border-right-flicker {
+  0% { border-right-color: $white; }
+  10%   { border-right-color: $purple-flash; }
+  100% { border-right-color: $white; }
+}
+@keyframes purple-border-left-flicker {
+  0% { border-left-color: $white; }
+  10%   { border-left-color: $purple-flash; }
+  100% { border-left-color: $white; }
+}
+@keyframes purple-box-shadow-flicker {
+  0% { box-shadow: $slider-track-line 0 0 0 1px, transparent 0 0 3px 1px; }
+  10% { box-shadow: $purple-01 0 0 0 1px, $purple-01 0 0 3px 1px; }
+  0% { box-shadow: $slider-track-line 0 0 0 1px, transparent 0 0 3px 1px; }
+}
 
-    @include input-active {
-      box-shadow: input-focus-shadow( $orange-01 );
-      background-color: rgba($yellow-01, .05);
-    }
+label.input-defaulted-value {
+  input:not([type=range]), select, .slider-label {
+    animation: purple-flicker 2s $timing forwards, purple-box-shadow-flicker 2s $timing forwards;
   }
-  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.align-right:after {
+    animation: purple-border-right-flicker 2s $timing forwards;
   }
-  .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;
-    }
+  .slider-label.align-left:after {
+    animation: purple-border-left-flicker 2s $timing forwards;
   }
+
+  &:not([data-input-type=range]) .input-wrapper:after {
+    content: "";
+    position: absolute;
+    box-shadow: $purple-01 0 0 0 1px inset, $purple-01 0 0 3px 1px;
+    border-radius: $radius + 1;
+    top: 1px; left: 1px; right: 1px; bottom: 1px;
+    animation: fade-out 1.4s $timing forwards;
+  }
+  //input:not([type=range]), select:not([tabindex="-1"]), textarea {
+    //-webkit-text-fill-color: currentColor;
+    //box-shadow: input-shadow( $purple-01 );
+
+    //@include input-active {
+      //box-shadow: input-focus-shadow( $purple-01 );
+      //background-color: rgba($purple-02, .05);
+    //}
+  //}
+  //input[type=range]:focus {
+    //@include slider-thumb {
+      //background: $purple-01;
+      //box-shadow: 0 0 2px 2px $purple-01, rgba(#000, .4) 0 1px 1px inset;
+    //}
+  //}
+  //.slider-label {
+    //box-shadow: $purple-01 0 0 0 1px;
+    //background-color: rgba($purple-01, .05);
+    //&:after {
+      //border-right-color: mix($yellow-01, $white, 5);
+    //}
+    //&:before {
+      //border-right-color: $purple-01;
+    //}
+  //}
 }
 
 .restore-default {
@@ -38,7 +78,7 @@ label.input-defaulted-value:not(.remotely-invalid) {
   transition: none;
 
   &:hover, &:focus {
-    color: $orange-01;
+    color: $purple-01;
     background-color: $gray-02;
     border-radius: $radius;
   }

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

@@ -13,10 +13,12 @@
   td {
     background-color: rgba($gray-01, .5);
   }
+  &:hover td {
+    background-color: $white;
+  }
 
   &-label {
     font-weight: 500;
-    /*width: 100%;*/
   }
 
   &-value, &-initial {
@@ -24,8 +26,6 @@
     padding-right: .2em;
 
     code {
-      //white-space: pre;
-      //display: inline-block;
       font-family: $mono-font;
       color: inherit;
       font-size: 1em;
@@ -89,3 +89,17 @@
     }
   }
 }
+
+.diff-note {
+  margin-left: .2em;
+  svg { height: .9em; width: auto;  }
+  .svg-status-failed {
+    opacity: .3;
+  }
+  &:hover { 
+    .svg-status-failed {
+      fill: $red-02;
+      opacity: .8;
+    }
+  }
+}

data/app/assets/stylesheets/tungsten/form/_requires-restart.scss

@@ -16,6 +16,12 @@
   }
 }
 
+.requires-restart-icon {
+  fill: $red-02;
+  height: .95em; width: auto;
+  opacity: .8;
+}
+
 .requires-restart.input-changed-value {
   background-color: rgba($red-01, 0.02);
   box-shadow: 0 0 0 1px rgba($red-01, 0.3);

data/app/helpers/tungsten/form_helper.rb

@@ -348,8 +348,11 @@ module Tungsten
       if requires_restart = options.delete(:requires_restart)
         label_options[:class] += ' requires-restart'
         describe_id = options[:data]['unique-id'] + '-restart-description'
+        options[:data][:diff_class] = 'requires-restart'
+        options[:data][:diff_note] = "<span class='has-tooltip' aria-label='Requires restart'>#{use_svg("status-failed")}</span>"
         (options['aria-describedby'] ||= '') << " #{describe_id}"
         requires_restart = content_tag(:span, id: describe_id, class: 'requires-restart-input-message') {
+          concat "#{use_svg("status-failed", class: 'requires-restart-icon')} ".html_safe
           if requires_restart.is_a?(String)
             concat requires_restart
           else

data/lib/tungsten/version.rb

@@ -1,3 +1,3 @@
 module Tungsten
-  VERSION = "0.2.8"
+  VERSION = "0.2.9"
 end

data/public/{tungsten-0.2.8.css → tungsten-0.2.9.css}

@@ -235,10 +235,10 @@
 /* ===================================== *
  * 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 {
+.collapse > *:first-child, .collapse > *:first-child > *:first-child, .collapse > *:first-child > *:first-child > *:first-child, .collapse-top > *:first-child, .collapse-top > *:first-child > *:first-child, .collapse-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 {
+.collapse > *:last-child, .collapse > *:last-child > *:last-child, .collapse > *:last-child > *:last-child > *:last-child, .collapse-bottom > *:last-child, .collapse-bottom > *:last-child > *:last-child, .collapse-bottom > *:last-child > *:last-child > *:last-child {
   margin-bottom: 0; }
 
 /* ===================================== *
@@ -478,11 +478,17 @@
 [class*='columns'] {
   display: flex;
   flex-flow: row wrap; }
+[class*='columns'] > * > *:last-child, [class*='columns'] > * > *:last-child > *:last-child, [class*='columns'] > * > *:last-child > *:last-child > *:last-child {
+  margin-bottom: 0; }
 
 [class*='rows'] {
   display: flex;
   flex-flow: column;
   align-items: flex-start; }
+[class*='rows'] > * > *:first-child, [class*='rows'] > * > *:first-child > *:first-child, [class*='rows'] > * > *:first-child > *:first-child > *:first-child {
+  margin-top: 0; }
+[class*='rows'] > * > *:last-child, [class*='rows'] > * > *:last-child > *:last-child, [class*='rows'] > * > *:last-child > *:last-child > *:last-child {
+  margin-bottom: 0; }
 
 form [class*='columns'] {
   align-items: flex-start; }
@@ -526,118 +532,201 @@ form [class*='columns'] {
 .grow {
   flex-grow: 1; }
 
-.flex-row {
-  display: flex; }
-.flex-row:not(.no-gutter) > * ~ * {
-  margin-left: 8px; }
-.flex-row.medium-gutter > * ~ * {
-  margin-left: 20px; }
+> .one-of-twelve, .twelve-columns > * {
+  flex-basis: 8.3333333333%; }
+
+.gutter > .one-of-twelve, .twelve-columns.gutter > * {
+  flex-basis: calc(8.3333333333% - 20px); }
+
+.small-gutter > .one-of-twelve, .twelve-columns.small-gutter > * {
+  flex-basis: calc(8.3333333333% - 10px); }
+
+.large-gutter > .one-of-twelve, .twelve-columns.large-gutter > * {
+  flex-basis: calc(8.3333333333% - 30px); }
+
+/* No gutter */
+/* No gutter */
+/* No gutter */
+/* No gutter */
+/* No gutter */
+/* No gutter */
+> .one-of-six, > .two-of-twelve, .six-columns > * {
+  flex-basis: 16.6666666667%; }
+
+.gutter > .one-of-six, .gutter > .two-of-twelve, .six-columns.gutter > * {
+  flex-basis: calc(16.6666666667% - 20px); }
+
+.small-gutter > .one-of-six, .small-gutter > .two-of-twelve, .six-columns.small-gutter > * {
+  flex-basis: calc(16.6666666667% - 10px); }
+
+.large-gutter > .one-of-six, .large-gutter > .two-of-twelve, .six-columns.large-gutter > * {
+  flex-basis: calc(16.6666666667% - 30px); }
+
+/* No gutter */
+/* No gutter */
+/* No gutter */
+/* No gutter */
+/* No gutter */
+> .one-of-four, > .three-of-twelve, .four-columns > * {
+  flex-basis: 25%; }
+
+.gutter > .one-of-four, .gutter > .three-of-twelve, .four-columns.gutter > * {
+  flex-basis: calc(25% - 20px); }
+
+.small-gutter > .one-of-four, .small-gutter > .three-of-twelve, .four-columns.small-gutter > * {
+  flex-basis: calc(25% - 10px); }
+
+.large-gutter > .one-of-four, .large-gutter > .three-of-twelve, .four-columns.large-gutter > * {
+  flex-basis: calc(25% - 30px); }
+
+/* No gutter */
+/* No gutter */
+/* No gutter */
+/* No gutter */
+> .one-of-three, > .two-of-six, .three-columns > *, > .four-of-twelve {
+  flex-basis: 33.3333333333%; }
 
-.one-of-eight, .eight-columns > * {
-  flex: 0 1 12.5%; }
+.gutter > .one-of-three, .gutter > .two-of-six, .three-columns.gutter > *, .gutter > .four-of-twelve {
+  flex-basis: calc(33.3333333333% - 20px); }
 
-.gutter > .one-of-eight, .eight-columns.gutter > * {
-  flex: 0 1 calc(12.5% - 20px); }
+.small-gutter > .one-of-three, .small-gutter > .two-of-six, .three-columns.small-gutter > *, .small-gutter > .four-of-twelve {
+  flex-basis: calc(33.3333333333% - 10px); }
 
-.small-gutter > .one-of-eight, .eight-columns.small-gutter > * {
-  flex: 0 1 calc(12.5% - 10px); }
+.large-gutter > .one-of-three, .large-gutter > .two-of-six, .three-columns.large-gutter > *, .large-gutter > .four-of-twelve {
+  flex-basis: calc(33.3333333333% - 30px); }
 
-.large-gutter > .one-of-eight, .eight-columns.large-gutter > * {
-  flex: 0 1 calc(12.5% - 30px); }
+/* No gutter */
+/* No gutter */
+/* No gutter */
+> .five-of-twelve {
+  flex-basis: 41.6666666667%; }
 
-.one-of-four, .two-of-eight, .four-columns > * {
-  flex: 0 1 25%; }
+.gutter > .five-of-twelve {
+  flex-basis: calc(41.6666666667% - 20px); }
 
-.gutter > .one-of-four, .gutter > .two-of-eight, .four-columns.gutter > * {
-  flex: 0 1 calc(25% - 20px); }
+.small-gutter > .five-of-twelve {
+  flex-basis: calc(41.6666666667% - 10px); }
 
-.small-gutter > .one-of-four, .small-gutter > .two-of-eight, .four-columns.small-gutter > * {
-  flex: 0 1 calc(25% - 10px); }
+.large-gutter > .five-of-twelve {
+  flex-basis: calc(41.6666666667% - 30px); }
 
-.large-gutter > .one-of-four, .large-gutter > .two-of-eight, .four-columns.large-gutter > * {
-  flex: 0 1 calc(25% - 30px); }
+/* No gutter */
+/* No gutter */
+> .one-of-two, .two-columns > *, > .two-of-four, > .three-of-six, > .six-of-twelve {
+  flex-basis: 50%; }
 
-.three-of-eight {
-  flex: 0 1 37.5%; }
+.gutter > .one-of-two, .two-columns.gutter > *, .gutter > .two-of-four, .gutter > .three-of-six, .gutter > .six-of-twelve {
+  flex-basis: calc(50% - 20px); }
 
-.gutter > .three-of-eight {
-  flex: 0 1 calc(37.5% - 20px); }
+.small-gutter > .one-of-two, .two-columns.small-gutter > *, .small-gutter > .two-of-four, .small-gutter > .three-of-six, .small-gutter > .six-of-twelve {
+  flex-basis: calc(50% - 10px); }
 
-.small-gutter > .three-of-eight {
-  flex: 0 1 calc(37.5% - 10px); }
+.large-gutter > .one-of-two, .two-columns.large-gutter > *, .large-gutter > .two-of-four, .large-gutter > .three-of-six, .large-gutter > .six-of-twelve {
+  flex-basis: calc(50% - 30px); }
 
-.large-gutter > .three-of-eight {
-  flex: 0 1 calc(37.5% - 30px); }
+/* No gutter */
+/* No gutter */
+> .seven-of-twelve {
+  flex-basis: 58.3333333333%; }
 
-.one-of-two, .two-columns > *, .two-of-four, .four-of-eight {
-  flex: 0 1 50%; }
+.gutter > .seven-of-twelve {
+  flex-basis: calc(58.3333333333% - 20px); }
 
-.gutter > .one-of-two, .two-columns.gutter > *, .gutter > .two-of-four, .gutter > .four-of-eight {
-  flex: 0 1 calc(50% - 20px); }
+.small-gutter > .seven-of-twelve {
+  flex-basis: calc(58.3333333333% - 10px); }
 
-.small-gutter > .one-of-two, .two-columns.small-gutter > *, .small-gutter > .two-of-four, .small-gutter > .four-of-eight {
-  flex: 0 1 calc(50% - 10px); }
+.large-gutter > .seven-of-twelve {
+  flex-basis: calc(58.3333333333% - 30px); }
 
-.large-gutter > .one-of-two, .two-columns.large-gutter > *, .large-gutter > .two-of-four, .large-gutter > .four-of-eight {
-  flex: 0 1 calc(50% - 30px); }
+/* No gutter */
+> .two-of-three, > .four-of-six, > .eight-of-twelve {
+  flex-basis: 66.6666666667%; }
 
-.five-of-eight {
-  flex: 0 1 62.5%; }
+.gutter > .two-of-three, .gutter > .four-of-six, .gutter > .eight-of-twelve {
+  flex-basis: calc(66.6666666667% - 20px); }
 
-.gutter > .five-of-eight {
-  flex: 0 1 calc(62.5% - 20px); }
+.small-gutter > .two-of-three, .small-gutter > .four-of-six, .small-gutter > .eight-of-twelve {
+  flex-basis: calc(66.6666666667% - 10px); }
 
-.small-gutter > .five-of-eight {
-  flex: 0 1 calc(62.5% - 10px); }
+.large-gutter > .two-of-three, .large-gutter > .four-of-six, .large-gutter > .eight-of-twelve {
+  flex-basis: calc(66.6666666667% - 30px); }
 
-.large-gutter > .five-of-eight {
-  flex: 0 1 calc(62.5% - 30px); }
+/* No gutter */
+> .three-of-four, > .nine-of-twelve {
+  flex-basis: 75%; }
 
-.three-of-four, .six-of-eight {
-  flex: 0 1 75%; }
+.gutter > .three-of-four, .gutter > .nine-of-twelve {
+  flex-basis: calc(75% - 20px); }
 
-.gutter > .three-of-four, .gutter > .six-of-eight {
-  flex: 0 1 calc(75% - 20px); }
+.small-gutter > .three-of-four, .small-gutter > .nine-of-twelve {
+  flex-basis: calc(75% - 10px); }
 
-.small-gutter > .three-of-four, .small-gutter > .six-of-eight {
-  flex: 0 1 calc(75% - 10px); }
+.large-gutter > .three-of-four, .large-gutter > .nine-of-twelve {
+  flex-basis: calc(75% - 30px); }
 
-.large-gutter > .three-of-four, .large-gutter > .six-of-eight {
-  flex: 0 1 calc(75% - 30px); }
+/* No gutter */
+> .five-of-six, > .ten-of-twelve {
+  flex-basis: 83.3333333333%; }
 
-.seven-of-eight {
-  flex: 0 1 87.5%; }
+.gutter > .five-of-six, .gutter > .ten-of-twelve {
+  flex-basis: calc(83.3333333333% - 20px); }
 
-.gutter > .seven-of-eight {
-  flex: 0 1 calc(87.5% - 20px); }
+.small-gutter > .five-of-six, .small-gutter > .ten-of-twelve {
+  flex-basis: calc(83.3333333333% - 10px); }
 
-.small-gutter > .seven-of-eight {
-  flex: 0 1 calc(87.5% - 10px); }
+.large-gutter > .five-of-six, .large-gutter > .ten-of-twelve {
+  flex-basis: calc(83.3333333333% - 30px); }
 
-.large-gutter > .seven-of-eight {
-  flex: 0 1 calc(87.5% - 30px); }
+/* No gutter */
+> .eleven-of-twelve {
+  flex-basis: 91.6666666667%; }
 
-.one-columns > *, .one-of-one, .span, .two-of-two, .four-of-four, .eight-of-eight {
-  flex: 0 1 100%; }
+.gutter > .eleven-of-twelve {
+  flex-basis: calc(91.6666666667% - 20px); }
 
-.one-columns.gutter > *, .gutter > .one-of-one, .gutter > .span, .gutter > .two-of-two, .gutter > .four-of-four, .gutter > .eight-of-eight {
-  flex: 0 1 calc(100% - 20px); }
+.small-gutter > .eleven-of-twelve {
+  flex-basis: calc(91.6666666667% - 10px); }
 
-.one-columns.small-gutter > *, .small-gutter > .one-of-one, .small-gutter > .span, .small-gutter > .two-of-two, .small-gutter > .four-of-four, .small-gutter > .eight-of-eight {
-  flex: 0 1 calc(100% - 10px); }
+.large-gutter > .eleven-of-twelve {
+  flex-basis: calc(91.6666666667% - 30px); }
 
-.one-columns.large-gutter > *, .large-gutter > .one-of-one, .large-gutter > .span, .large-gutter > .two-of-two, .large-gutter > .four-of-four, .large-gutter > .eight-of-eight {
-  flex: 0 1 calc(100% - 30px); }
+/* No gutter */
+.one-columns > *, > .one-of-one, > .two-of-two, > .three-of-three, > .four-of-four, > .six-of-six, > .twelve-of-twelve {
+  flex-basis: 100%; }
+
+.one-columns.gutter > *, .gutter > .one-of-one, .gutter > .two-of-two, .gutter > .three-of-three, .gutter > .four-of-four, .gutter > .six-of-six, .gutter > .twelve-of-twelve {
+  flex-basis: calc(100% - 20px); }
+
+.one-columns.small-gutter > *, .small-gutter > .one-of-one, .small-gutter > .two-of-two, .small-gutter > .three-of-three, .small-gutter > .four-of-four, .small-gutter > .six-of-six, .small-gutter > .twelve-of-twelve {
+  flex-basis: calc(100% - 10px); }
+
+.one-columns.large-gutter > *, .large-gutter > .one-of-one, .large-gutter > .two-of-two, .large-gutter > .three-of-three, .large-gutter > .four-of-four, .large-gutter > .six-of-six, .large-gutter > .twelve-of-twelve {
+  flex-basis: calc(100% - 30px); }
+
+/* No gutter */
+[class*='columns'] {
+  /* No gutter */ }
+[class*='columns'] .span {
+  flex-basis: 100%; }
+[class*='columns'] .gutter > .span {
+  flex-basis: calc(100% - 20px); }
+[class*='columns'] .small-gutter > .span {
+  flex-basis: calc(100% - 10px); }
+[class*='columns'] .large-gutter > .span {
+  flex-basis: calc(100% - 30px); }
+@media all and (max-width: 599px) {
+  [class*='columns'].flex-after-medium > * {
+    flex-basis: 100%; } }
 
 /* ===================================== *
  * Vertical alignment
  * ------------------------------------- */
 .top-aligned {
-  align-items: top;
+  align-items: flex-start;
   vertical-align: top; }
 
 .bottom-aligned {
-  align-items: bottom;
+  align-items: flex-end;
   vertical-align: bottom; }
 
 .baseline-aligned {
@@ -671,13 +760,6 @@ form [class*='columns'] {
 .push-left {
   margin-right: auto; }
 
-/* ===================================== *
- * Breakpoints
- * ------------------------------------- */
-@media (max-width: 950px) {
-  [class*='columns'].medium-breakpoint > * {
-    flex: 0 1 100%; } }
-
 /* ===================================== *
  * Universal
  * ------------------------------------- */
@@ -730,10 +812,15 @@ header .actions.centered {
 body, input, textarea {
   color: #0f212e; }
 
-p, ul, ol, h1, h2, h3, h4, h5, h6, pre, table {
+p, ul, ol, h1, h2, h3, h4, h5, h6, pre, table, .block {
   margin-top: 20px;
   margin-bottom: 20px; }
 
+.force-wrap.force-wrap {
+  white-space: normal;
+  word-wrap: break-word;
+  word-break: break-word; }
+
 /* ===================================== *
  * Application
  * ------------------------------------- */
@@ -877,7 +964,9 @@ a:hover, a:focus, a:active {
  * ------------------------------------- */
 hr {
   border: solid #dfe3e6;
-  border-width: 1px 0 0 0; }
+  border-width: 1px 0 0 0;
+  margin-top: 20px;
+  margin-bottom: 20px; }
 
 /* ===================================== *
  * Preformatted text
@@ -1049,6 +1138,11 @@ pre {
   z-index: 10; }
 .application-banner + .application-content {
   margin-top: 47px; }
+.application-banner.landing-banner {
+  border-bottom: none;
+  color: #fff;
+  padding-top: 20px;
+  padding-bottom: 20px; }
 
 nav.actual-tabs {
   border-bottom: 1px solid #dfe3e6;
@@ -2789,28 +2883,83 @@ input::-moz-focus-inner {
   box-shadow: none;
   color: #5aaafa; }
 
-label.input-defaulted-value:not(.remotely-invalid) input:not([type=range]), label.input-defaulted-value:not(.remotely-invalid) select:not([tabindex="-1"]), label.input-defaulted-value:not(.remotely-invalid) textarea {
-  -webkit-text-fill-color: currentColor;
-  box-shadow: 0 0 0 1px #f69523 inset, 0 0 0 transparent; }
-label.input-defaulted-value:not(.remotely-invalid) input:not([type=range]):focus, label.input-defaulted-value:not(.remotely-invalid) input:not([type=range]):active, label.input-defaulted-value:not(.remotely-invalid) select:not([tabindex="-1"]):focus, label.input-defaulted-value:not(.remotely-invalid) select:not([tabindex="-1"]):active, label.input-defaulted-value:not(.remotely-invalid) textarea:focus, label.input-defaulted-value:not(.remotely-invalid) textarea:active {
-  box-shadow: 0 0 0 1px #f69523 inset, 0 1px 3px rgba(15, 33, 46, 0.3);
-  background-color: rgba(239, 193, 0, 0.05); }
-label.input-defaulted-value:not(.remotely-invalid) input[type=range]:focus::-moz-range-thumb {
-  background: #f69523;
-  box-shadow: 0 0 2px 2px #f69523, rgba(0, 0, 0, 0.4) 0 1px 1px inset; }
-label.input-defaulted-value:not(.remotely-invalid) input[type=range]:focus::-webkit-slider-thumb {
-  background: #f69523;
-  box-shadow: 0 0 2px 2px #f69523, rgba(0, 0, 0, 0.4) 0 1px 1px inset; }
-label.input-defaulted-value:not(.remotely-invalid) input[type=range]:focus::-ms-thumb {
-  background: #f69523;
-  box-shadow: 0 0 2px 2px #f69523, rgba(0, 0, 0, 0.4) 0 1px 1px inset; }
-label.input-defaulted-value:not(.remotely-invalid) .slider-label {
-  box-shadow: #f69523 0 0 0 1px;
-  background-color: rgba(239, 193, 0, 0.05); }
-label.input-defaulted-value:not(.remotely-invalid) .slider-label:after {
-  border-right-color: #fefcf2; }
-label.input-defaulted-value:not(.remotely-invalid) .slider-label:before {
-  border-right-color: #f69523; }
+@-webkit-keyframes purple-flicker {
+  0% {
+    background-color: #fff; }
+  10% {
+    background-color: #f8f4fe; }
+  100% {
+    background-color: #fff; } }
+
+@keyframes purple-flicker {
+  0% {
+    background-color: #fff; }
+  10% {
+    background-color: #f8f4fe; }
+  100% {
+    background-color: #fff; } }
+@-webkit-keyframes purple-border-right-flicker {
+  0% {
+    border-right-color: #fff; }
+  10% {
+    border-right-color: #f8f4fe; }
+  100% {
+    border-right-color: #fff; } }
+@keyframes purple-border-right-flicker {
+  0% {
+    border-right-color: #fff; }
+  10% {
+    border-right-color: #f8f4fe; }
+  100% {
+    border-right-color: #fff; } }
+@-webkit-keyframes purple-border-left-flicker {
+  0% {
+    border-left-color: #fff; }
+  10% {
+    border-left-color: #f8f4fe; }
+  100% {
+    border-left-color: #fff; } }
+@keyframes purple-border-left-flicker {
+  0% {
+    border-left-color: #fff; }
+  10% {
+    border-left-color: #f8f4fe; }
+  100% {
+    border-left-color: #fff; } }
+@-webkit-keyframes purple-box-shadow-flicker {
+  0% {
+    box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px, transparent 0 0 3px 1px; }
+  10% {
+    box-shadow: #ba8ff7 0 0 0 1px, #ba8ff7 0 0 3px 1px; }
+  0% {
+    box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px, transparent 0 0 3px 1px; } }
+@keyframes purple-box-shadow-flicker {
+  0% {
+    box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px, transparent 0 0 3px 1px; }
+  10% {
+    box-shadow: #ba8ff7 0 0 0 1px, #ba8ff7 0 0 3px 1px; }
+  0% {
+    box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px, transparent 0 0 3px 1px; } }
+label.input-defaulted-value input:not([type=range]), label.input-defaulted-value select, label.input-defaulted-value .slider-label {
+  -webkit-animation: purple-flicker 2s cubic-bezier(0.4, 0, 0.2, 1) forwards, purple-box-shadow-flicker 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+          animation: purple-flicker 2s cubic-bezier(0.4, 0, 0.2, 1) forwards, purple-box-shadow-flicker 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
+label.input-defaulted-value .slider-label.align-right:after {
+  -webkit-animation: purple-border-right-flicker 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+          animation: purple-border-right-flicker 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
+label.input-defaulted-value .slider-label.align-left:after {
+  -webkit-animation: purple-border-left-flicker 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+          animation: purple-border-left-flicker 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
+label.input-defaulted-value:not([data-input-type=range]) .input-wrapper:after {
+  content: "";
+  position: absolute;
+  box-shadow: #ba8ff7 0 0 0 1px inset, #ba8ff7 0 0 3px 1px;
+  border-radius: 4px;
+  top: 1px;
+  left: 1px;
+  right: 1px;
+  bottom: 1px;
+  -webkit-animation: fade-out 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+          animation: fade-out 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
 
 .restore-default {
   z-index: 100;
@@ -2822,7 +2971,7 @@ label.input-defaulted-value:not(.remotely-invalid) .slider-label:before {
   color: #8c9ba5;
   transition: none; }
 .restore-default:hover, .restore-default:focus {
-  color: #f69523;
+  color: #ba8ff7;
   background-color: #f5f7fa;
   border-radius: 3px; }
 .restore-default span {
@@ -2838,9 +2987,10 @@ label.input-defaulted-value:not(.remotely-invalid) .slider-label:before {
 
 .input-diff td {
   background-color: rgba(247, 250, 251, 0.5); }
+.input-diff:hover td {
+  background-color: #fff; }
 .input-diff-label {
-  font-weight: 500;
-  /*width: 100%;*/ }
+  font-weight: 500; }
 .input-diff-value, .input-diff-initial {
   padding-left: .2em;
   padding-right: .2em; }
@@ -2899,6 +3049,17 @@ label.input-defaulted-value:not(.remotely-invalid) .slider-label:before {
   -webkit-transform: rotate(-45deg) translateX(-2px);
           transform: rotate(-45deg) translateX(-2px); }
 
+.diff-note {
+  margin-left: .2em; }
+.diff-note svg {
+  height: .9em;
+  width: auto; }
+.diff-note .svg-status-failed {
+  opacity: .3; }
+.diff-note:hover .svg-status-failed {
+  fill: #bd1427;
+  opacity: .8; }
+
 .requires-restart {
   background-color: transparent;
   box-shadow: 0 0 0 1px transparent;
@@ -2915,6 +3076,12 @@ label.input-defaulted-value:not(.remotely-invalid) .slider-label:before {
   overflow: hidden;
   height: 0; }
 
+.requires-restart-icon {
+  fill: #bd1427;
+  height: .95em;
+  width: auto;
+  opacity: .8; }
+
 .requires-restart.input-changed-value {
   background-color: rgba(224, 24, 45, 0.02);
   box-shadow: 0 0 0 1px rgba(224, 24, 45, 0.3);
@@ -2943,6 +3110,9 @@ th.action-panel, td.action-panel {
   text-align: right;
   white-space: nowrap; }
 
+th {
+  vertical-align: top; }
+
 caption {
   display: none; }
 
@@ -3266,6 +3436,8 @@ th.sub-heading {
 table.card {
   display: table; }
 
+.has-tooltip {
+  cursor: pointer; }
 .has-tooltip:before, .has-tooltip:after {
   opacity: 0;
   transition: none; }
@@ -3637,11 +3809,11 @@ table.card {
     padding: 13px 0 10px; } }
 
 .progress-bar[data-status="completed"] .progress-bar-outline {
-  background-color: rgba(90, 167, 0, 0.2); }
+  background-color: rgba(42, 200, 79, 0.2); }
 .progress-bar[data-status="completed"] .progress-bar-fill {
-  background: #5aa700; }
+  background: #2ac84f; }
 .progress-bar[data-status="completed"] .progress-bar-description-status {
-  color: #5aa700; }
+  color: #2ac84f; }
 .progress-bar[data-status="failed"] .progress-bar-outline {
   background-color: rgba(224, 24, 45, 0.2); }
 .progress-bar[data-status="failed"] .progress-bar-fill {