updates to many views and stylesheets

app/assets/javascripts/test_executions.js

@@ -60,7 +60,7 @@ var initializeTestExecutionResults = function() {
   });
 
   // enable each error popover
-  $('.error-popup-btn').popover();
+  //$('.error-popup-btn').popover();
 
   /* change 'view' and 'hide' text for popover buttons */
   $('.error-popup-btn').on('show.bs.popover', function () {

app/assets/stylesheets/_bootstrap.scss

@@ -0,0 +1,52 @@
+@import "bootstrap/mixins/banner";
+@include bsBanner("");
+
+
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/functions";
+@import 'variables';
+@import 'variables-dark';
+@import "bootstrap/maps";
+@import "bootstrap/mixins";
+@import "bootstrap/utilities";
+
+// Layout & components
+@import "bootstrap/root";
+@import "bootstrap/reboot";
+@import "bootstrap/type";
+@import "bootstrap/images";
+@import "bootstrap/containers";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+@import "bootstrap/transitions";
+@import "bootstrap/dropdown";
+@import "bootstrap/button-group";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
+@import "bootstrap/card";
+@import "bootstrap/accordion";
+@import "bootstrap/breadcrumb";
+@import "bootstrap/pagination";
+@import "bootstrap/badge";
+@import "bootstrap/alert";
+@import "bootstrap/progress";
+@import "bootstrap/list-group";
+@import "bootstrap/close";
+@import "bootstrap/toasts";
+@import "bootstrap/modal";
+@import "bootstrap/tooltip";
+@import "bootstrap/popover";
+@import "bootstrap/carousel";
+@import "bootstrap/spinners";
+@import "bootstrap/offcanvas";
+@import "bootstrap/placeholders";
+
+// Helpers
+@import "bootstrap/helpers";
+
+// Utilities
+@import "bootstrap/utilities/api";
+// scss-docs-end import-stack

app/assets/stylesheets/_globals.scss

@@ -11,11 +11,11 @@
 // Mixins
 @mixin hidden-cell() {
   // we want visually reduce the appearance, but it's ok to reveal to screen readers
-  color: $gray-light;
+  color: $gray-300;
   border: 0;
 }
 
 @mixin hidden-header-cell() {
-  color: $gray-light;
+  color: $gray-300;
   border-bottom: 0;
 }

app/assets/stylesheets/_parsley.scss

@@ -1,16 +1,16 @@
 .parsley-success {
-  color: $state-success-text;
-  border: 1px solid $state-success-border;
+  color: $success-text-emphasis;
+  border: 1px solid $success-border-subtle;
 }
 
 .parsley-error {
-  color: $state-danger-text;
-  background-color: $state-danger-bg;
-  border: 1px solid $state-danger-border;
+  color: $danger-text-emphasis;
+  background-color: $danger-bg-subtle;
+  border: 1px solid $danger-border-subtle;
 }
 
 .parsley-errors-list {
-  color: $state-danger-text;
+  color: $danger-text-emphasis;
   margin: 2px 0 3px;
   padding: 0;
   list-style-type: none;

app/assets/stylesheets/application.scss

@@ -20,6 +20,6 @@
 @import 'globals';
 @import './assets_framework/custom-mixins';
 @import './assets_framework/breadcrumb';
-//@import './assets_framework/widgets/_alerts';
-//@import './parsley';
-@import './revamped/**/*';
+@import './assets_framework/widgets/_alerts';
+@import './parsley';
+@import './cypress/**/*';

app/assets/stylesheets/cypress/_alerts.scss

@@ -3,10 +3,10 @@
 }
 
 .alert {
-  &.alert-success { @include alert-border($state-success-text); }
-  &.alert-info { @include alert-border($state-info-text); }
-  &.alert-warning { @include alert-border($state-warning-text); }
-  &.alert-danger { @include alert-border($state-danger-text); }
+  &.alert-success { @include alert-border($success-text-emphasis); }
+  &.alert-info { @include alert-border($info-text-emphasis); }
+  &.alert-warning { @include alert-border($warning-text-emphasis); }
+  &.alert-danger { @include alert-border($danger-text-emphasis); }
 
   .fa-times { font-size: 1.4em; }
 
@@ -16,7 +16,7 @@
   }
 
   .alertContent {
-    border-left: 1px solid $gray-light;
+    border-left: 1px solid $black;
     vertical-align: middle;
 
     p {

app/assets/stylesheets/cypress/_analysis.scss

@@ -4,21 +4,21 @@
 }
 
 .patient-analysis td, .patient-analysis th {
-  border: 1px solid $thumbnail-border;
+  border: 1px solid $thumbnail-border-color;
   padding: 8px;
   min-width: 120px;
 }
 
-.patient-analysis tr:nth-child(even){background-color: $gray-lighter;}
+.patient-analysis tr:nth-child(even){background-color: $gray-200;}
 
-.patient-analysis tr:hover {background-color: $thumbnail-border;}
+.patient-analysis tr:hover {background-color: $thumbnail-border-color;}
 
 .patient-analysis th {
   padding-top: 12px;
   padding-bottom: 12px;
   text-align: left;
-  background-color: $brand-primary;
-  color: $brand-white;
+  background-color: $primary;
+  color: $white;
 }
 
 .collapse-content {
@@ -44,7 +44,7 @@
 .popup .popuptext {
   visibility: hidden;
   width: 160px;
-  background-color: $gray-light;
+  background-color: $gray-300;
   color: $body-bg;
   text-align: center;
   border-radius: 6px;

app/assets/stylesheets/cypress/_buttons.scss

@@ -18,36 +18,28 @@ $background-color: rgba(#000, .00);
     @keyframes pulsate-#{$name} {
       50% { background-color: $border-color; }
     }
-
-    @include animation-name(pulsate-#{$name});
-    @include animation-duration(2s);
-    @include animation-delay(100);
-    @include animation-timing-function(linear);
-    @include animation-iteration-count(infinite);
-    color: $btn-default-bg;
+    color: $btn-color;
     background-color: $darker-border-color;
     border-color: $darker-border-color;
   }
 }
 
 .btn {
-  @include transition-property(color, background-color);
-  @include transition-duration(.3s);
   font-family: 'Ubuntu';
   letter-spacing: .05em;
-  box-shadow: 0 1px 1px $navbar-shadow;
+  box-shadow: 0 1px 1px $box-shadow;
 
-  &.btn-primary { @include darker-hover($btn-primary-border, 'primary'); }
-  &.btn-success { @include darker-hover($btn-success-border, 'success'); }
-  &.btn-info { @include darker-hover($btn-info-border, 'info'); }
-  &.btn-warning { @include darker-hover($btn-warning-border, 'warning'); }
-  &.btn-danger { @include darker-hover($btn-danger-border, 'danger'); }
-  &.btn-default { @include darker-hover($btn-default-border, 'default'); }
+  &.btn-primary { @include darker-hover($primary-border-subtle, 'primary'); }
+  &.btn-success { @include darker-hover($success-border-subtle, 'success'); }
+  &.btn-info { @include darker-hover($info-border-subtle, 'info'); }
+  &.btn-warning { @include darker-hover($warning-border-subtle, 'warning'); }
+  &.btn-danger { @include darker-hover($danger-border-subtle, 'danger'); }
+  &.btn-default { @include darker-hover($primary-border-subtle, 'default'); }
 
   &.btn-pop {
-    color: $btn-pop-color;
-    background: $btn-pop-bg;
-    border-color: $btn-pop-border;
+    color: $btn-color;
+    background: $btn-color;
+    border-color: $btn-color;
     box-shadow: none;
     padding: 0;
     font-size: large;

app/assets/stylesheets/cypress/_panels.scss → app/assets/stylesheets/cypress/_cards.scss

@@ -1,27 +1,27 @@
-.panel-title {
+.card-title {
   letter-spacing: .04em;
 }
 
-// Panels inside of panels should not take full width
-.panel-body .panel {
-  margin: $panel-body-padding;
+// cards inside of cards should not take full width
+.card-body .card {
+  margin: $card-spacer-y;
 }
 
 // Add spacing between a button and adjacent inline text
-.panel-footer .btn + span {
-  margin-left: $padding-xs-horizontal;
+.card-footer .btn + span {
+  margin-left: $border-radius-sm;
 }
 
-.panel.summary h1 {
+.card.summary h1 {
   margin-top: .25em;
 }
 
 .test-steps {
   margin-top: 1em;
   display: flex;
 
-  .panel {
-    flex: 1; // all panels get equal width
+  .card {
+    flex: 1; // all cards get equal width
   }
 
   .filters-list {
@@ -34,10 +34,6 @@
       }
     }
   }
-
-  @media (max-width: $screen-md-min) {
-    display: block;
-  }
 }
 
 .execution-information {
@@ -68,22 +64,9 @@
     @include animation-delay(100);
     @include animation-timing-function(linear);
     @include animation-iteration-count(infinite);
-    color: $panel-inactive-heading-bg;
-    background-color: $panel-inactive-text;
-    border-color: $panel-inactive-border;
+    color: $card-inactive-heading-bg;
+    background-color: $card-inactive-text;
+    border-color: $card-inactive-border;
   }
 }
 
-.panel-inactive .panel-heading {
-  @include transition-property(color, background-color);
-  @include transition-duration(.3s);
-  @include darker-hover($btn-default-border, 'default');
-  font-family: inherit;
-  letter-spacing: .05em;
-  box-shadow: none;
-
-  color: $panel-inactive-text;
-  background: $panel-inactive-heading-bg;
-  border: 1px solid $panel-inactive-border;
-  font-size: large;
-}

app/assets/stylesheets/cypress/_forms.scss

@@ -23,7 +23,7 @@
 }
 
 .panel-title select {
-  color: $text-color;
+  color: $gray-800;
 }
 
 // special btn-checkbox class for checkboxes and radio buttons
@@ -37,7 +37,7 @@
 
   &:hover,
   &:focus {
-    color: $text-color;
+    color: $gray-800;
     background-color: $input-bg;
   }
 }
@@ -50,7 +50,7 @@ legend.control-label {
 }
 
 .ui-autocomplete {
-  @include box-shadow(0 1px 1px $dropdown-border);
+  @include box-shadow(0 1px 1px $dropdown-border-color);
 
   .ui-menu-item {
     &.ui-state-focus {

app/assets/stylesheets/cypress/_markup.scss

@@ -10,16 +10,16 @@
   }
 
   .clause-true {
-    background-color: $state-success-bg;
-    color: $state-success-text;
-    border-bottom-color: $state-success-text;
+    background-color: $success-bg-subtle;
+    color: $success-text-emphasis;
+    border-bottom-color: $success-text-emphasis;
     border-bottom-style: solid;
   }
 
   .clause-false {
-    background-color: $state-danger-bg;
-    color: $state-danger-text;
-    border-bottom-color: $state-danger-text;
+    background-color: $danger-bg-subtle;
+    color: $danger-text-emphasis;
+    border-bottom-color: $danger-text-emphasis;
     border-bottom-style: double;
   }