nfg_ui 0.11.18 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6053e7ce382a6a56938868c918b2f1330e1ea2aa0663ab45c817d663991e2e3e
-  data.tar.gz: 89fd65aa48a96901523009489bc83b26b91c7204fcfd8005364802632af63d99
+  metadata.gz: 127b92a6cde34aa088a78559d148bde669ca0854dc2e1296c55fc3a7e3894a20
+  data.tar.gz: 4eabadc256b09bea511fee7ca6da77b4ed686739945b162d05e1dcdd07c29183
 SHA512:
-  metadata.gz: 80a4075a1a0ae9932e546467704a0214636dc95366453e7fd8437ce6b3876b89716e665fb4eb7104c2cbf5e681ceab0ba3bdbfa4250fb5e1047d160189b90a0c
-  data.tar.gz: 2fcd9b6d7669e68dd979650e3faa1d2dbb2d7687af1a277b3a3cff50fa3226f82a6caf82644844632bb59f5749c38450b3b116f7c52b2da8d9c902bb50c7e5f3
+  metadata.gz: 0ef3f757c8f01c7811a393916c3620aa9e4861c3188905d457cbe7702512442acd8ae0f50c54b09438e695d4dca26653c72ef2edd36945c11a8b561beed3e721
+  data.tar.gz: a797b99c5065414a80577b33b14308c92048730c00934cf43fda7240306f94431491ac4ee8113cc0a44741fad56a8683a2942f6b00006aa6db0e2274f67eced9

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_badge.scss

@@ -1,8 +1,8 @@
 @each $color, $value in $colors {
   .#{$color} {
     .badge-primary {
-      @include badge-variant($value);
-      color: $white !important;
+      background: scale-color($value, $lightness: 80%);
+      border-color: $value;
     }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_buttons.scss

@@ -3,11 +3,34 @@
     .btn-primary {
       @include button-variant($value, $value);
       color: $white !important;
+      &:focus,
+      &.focus {
+        box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8);
+      }
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8);
+        &:focus { box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8); }
+      }
+    }
+    .btn-link {
+      &:focus,
+      &.focus {
+        box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8);
+      }
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8);
+        &:focus { box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8); }
+      }
     }
     .show > .btn-primary.dropdown-toggle {
       background-color: darken($value, 10%);
       border-color: darken($value, 10%);
+      &:focus { box-shadow: 0 0 0 $input-btn-focus-width transparentize($value, 0.8); }
     }
-    .btn-outline-secondary, .btn-link { color: $value; }
+    .btn-secondary, .btn-outline-secondary, .btn-link { color: $value; }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_custom-forms.scss

@@ -7,9 +7,13 @@
           ~ .custom-control-label::before {
             border-color: $value;
             background-color: $value;
+            box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
           }
         }
       }
+      &.custom-control-block {
+        .custom-control-input:checked ~ .custom-control-label { box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8); }
+      }
     }
     .custom-switch {
       .custom-control-input:checked ~ .custom-control-label {
@@ -21,8 +25,10 @@
       }
     }
     .custom-select {
-      color: $value;
-      &:focus { border-color: $value; }
+      &:active, &:focus {
+        border-color: $value;
+        box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
+      }
     }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_forms.scss

@@ -1,7 +1,10 @@
 @each $color, $value in $colors {
   .#{$color} {
     .form-control {
-      &:focus { border-color: $value; }
+      &:focus {
+        border-color: $value;
+        box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
+      }
     }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_nav.scss

@@ -2,7 +2,9 @@
   .#{$color} {
     .nav-tabs {
       .nav-link {
-        &:hover, &.active { border-color: $value; }
+        &:hover, &.active {
+          &:after { background: $value; }
+        }
       }
     }
   }
@@ -11,7 +13,9 @@
   .site-nav {
     .nav-item.#{$color} {
       .nav-link {
-        &:hover, &.active, &[aria-expanded="true"] { border-color: $value; }
+        &:hover, &.active, &[aria-expanded="true"] {
+          &:after { background-color: $value; }
+        }
       }
     }
   }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/custom/_nav_step.scss

@@ -11,11 +11,11 @@
         }
         &.active ~ .visited {
           .step-indicator {
-            &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.5); };
+            &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.8); };
           }
         }
         .step-indicator {
-          &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.5); }
+          &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.8); }
         }
       }
     }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/plugins/_select2.scss

@@ -1,49 +1,27 @@
 @each $color, $value in $colors {
   .#{$color} {
     .select2-container--default {
-      .select2-search--dropdown {
-        .select2-search__field:focus {
-          border-color: $value;
-        }
-      }
-      &.select2-container--focus .select2-selection--multiple { border-color: $value; }
-      &.select2-container--open {
-        .select2-selection--single {
-          border-color: $value !important;
-          .select2-selection__rendered { color: $body-color; }
-        }
-      }
-      .select2-selection--single {
-        &:hover .select2-selection__rendered { color: $body-color; }
-        .select2-selection__rendered, .select2-selection__placeholder { color: $value !important; }
+      .select2-search--dropdown .select2-search__field:focus,
+      &.select2-container--focus .select2-selection--multiple,
+      &.select2-container--open .select2-selection--single {
+        border-color: $value;
+        box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
       }
       .select2-selection--multiple {
         .select2-selection__rendered {
           .select2-selection__choice {
-            color: $value;
             &:hover, &:active { color: $body-color; }
           }
         }
         .select2-selection__choice__remove { color: $value;  }
       }
     }
-    .has-danger {
-      .select2-container--default {
-        .select2-selection--single .select2-selection__rendered,
-        .select2-selection--multiple .select2-selection__rendered {
-          color: $danger;
-        }
-      }
-    }
-    .select2-selection__rendered .select2-selection__clear:before { color: $value; }
   }
   .#{$color} ~ .select2-container--default { // ~ is needed to style containers and elements outside of .container-main and still adhere to the page's specifc resource_color
     .select2-search--dropdown {
-      .select2-search__field:focus { border-color: $value; }
-    }
-    .select2-results__option {
-      &[aria-selected='true'] {
-        &:after { color: $value; }
+      .select2-search__field:focus {
+        border-color: $value;
+        box-shadow: 0 0 0 ($spacer * .125) transparentize($value, 0.8);
       }
     }
   }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/{_backgrounds.scss → _background.scss}

@@ -1,3 +1,9 @@
+// Overrides text-muted default color to account for better contrast for accessibility (also used in _builder_layout.scss for .builder-header)
+.bg-dark {
+  background-color: $blue-700 !important;
+  .text-muted { color: $blue-200 !important; }
+}
+
 // Clouds
 .bg-clouds {
   padding-bottom: 20%;

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_grid.scss

@@ -10,7 +10,7 @@
     }
   }
   @include media-breakpoint-up(xl) {
-    padding-top: ($spacer * 2);
+    padding-top: ($spacer * 1.75);
     padding-left: 200px;
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_nav.scss

@@ -1,10 +1,10 @@
-// Top navigation bar in DMS
+// Side navigation bar in DMS
 .site-nav {
   position: fixed;
   top: 0;
   width: 200px;
   height: 100%;
-  background-color: #006D9D;
+  background-color: $blue-700;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   @include transition(all .2s ease-in-out);
@@ -30,40 +30,45 @@
     }
   }
   .nav-pills {
-    .nav-item {
-      font-weight: $font-weight-bold;
-      line-height: $line-height-sm;
-    }
     .nav-link {
+      position: relative;
       padding: ($spacer * .75) ($spacer * .5);
-      @include border-radius($nav-pills-border-radius);
+      border-radius: $nav-pills-border-radius;
       color: $white;
       vertical-align: middle;
       background-color: transparent;
-      border-left: 4px solid transparent;
       @include clearfix();
-      @include transition($btn-transition);
+      transition: $btn-transition;
       &:hover, &.active, &[aria-expanded="true"] {
         color: $nav-pills-link-active-color;
         cursor: pointer;
         background-color: $nav-pills-link-active-bg;
+        &:after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          width: $nav-tabs-border-width;
+          border-radius: ($nav-tabs-border-width / 2);
+          background: transparent;
+          transition: $btn-transition;
+          content: '';
+        }
       }
       .fa {
         width: 1em;
         min-width: 14px;
-        line-height: 18px;
+        &.float-right { line-height: 24px; }
       }
     }
     &.nav-sub-menu {
       .nav-link {
         padding-top: ($spacer * .5);
         padding-bottom: ($spacer * .5);
-        font-size: ($font-size-base * .75);
-        line-height: $line-height-base;
-        background-color: darken(#006D9D, 13%);
-        &:hover, &:focus, &.active {
-          background-color: darken(#006D9D, 17%);
-        }
+        font-size: $font-size-sm;
+        line-height: $line-height-sm;
+        background-color: $blue-900;
+        &:hover, &:focus, &.active { background-color: $blue-1000; }
       }
     }
   }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_navbar.scss

@@ -1,111 +1,67 @@
 // Styles that replicate the legacy top navs in EVO
+#admin-toolbar {
+  font-size: $font-size-sm;
+  line-height: 1.714; // specific to achieve height of 56px to match with quick-add button :lg height
+  background-color: $white !important;
+  .navbar {
+    background-color: transparent !important;
+    .navbar-brand {
+      padding-top: ($spacer * .25);
+      padding-bottom: ($spacer * .25);
+      font-size: $font-size-sm;
+      color: $text-muted;
+    }
+    .nav-item {
+      position: relative;
+      text-align: center;
+      border-left: $border-width solid $nav-divider-color;
+      > .nav-link {
+        padding: ($spacer * .5);
+        color: $text-muted;
+        transition: $transition-base;
+        @include hover-focus() {
+          color: $body-color;
+          background-color: $body-bg;
+        }
+        @include media-breakpoint-down(sm) { padding: ($spacer * .5); }
+        @include media-breakpoint-up(md) { padding: ($spacer * .5) $spacer; }
+      }
+      #sysadmin_dropdown {
+        .dropdown-item { padding: 0; }
+        .nav-link {
+          padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+          color: inherit;
+        }
+      }
+    }
+  }
+}
+
 #admin-nav {
-  background-color: #444444;
+  background-color: $blue-700;
   .navbar {
-    background: transparent !important;
+    background-color: transparent !important;
     .navbar-nav {
       .nav-item {
-        @include media-breakpoint-up(lg) {
-          + .nav-item { border-left: $border-width solid #4d4d4d; }
-        }
         > .nav-link {
-          padding: $spacer ($spacer * .5);
-          font-size: $font-size-sm;
-          font-weight: $font-weight-bold;
-          &:hover {
-            color: $navbar-dark-hover-color;
-            background-color: #414141;
-          }
-          > .fa {
-            color: #626262;
-            &:first-child { margin-right: ($spacer * .25); }
-          }
-        }
-        &.active {
-          > .nav-link {
-            color: $navbar-dark-active-color;
-            background-color: #4b4b4b;
-            > .fa { color: $navbar-dark-active-color; }
-          }
+          padding-top: $spacer;
+          padding-bottom: $spacer;
+          color: $white;
+          transition: $transition-base;
+          @include hover-focus() { background-color: $blue-800; }
         }
+        &.active > .nav-link { background-color: $blue-800; }
       }
       .dropdown-menu {
-        margin-top: 0;
-        border-radius: 0 0 $border-radius $border-radius;
-        background-color: #525252;
         .dropdown-item {
           padding: 0;
-          + .dropdown-item { border-top: none; }
-          &.active {
-            background-color: transparent;
-            .nav-link {
-              color: #cccccc;
-              border-left-color: $teal;
-            }
-          }
-        }
-        .nav-link {
-          padding: ($spacer * .5);
-          color: #989797;
-          border-left: 5px solid transparent;
-          &:hover {
-            color: #cccccc;
-            background-color: #575757;
-            border-left-color: #616161;
-          }
+          &.active .nav-link, .nav-link { color: inherit; }
         }
       }
     }
   }
 }
 
-#admin-toolbar {
-  padding-top: 2px;
-  font-size: 12px;
-  font-weight: $font-weight-bold;
-  line-height: 1;
-  background-color: #2b2b2b;
-  &:before {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background-color: $teal;
-    z-index: 5;
-    content: '';
-  }
-  .navbar { background: transparent !important; }
-  .navbar-brand {
-    font-size: 11px;
-    font-weight: $font-weight-bold;
-    line-height: 1;
-    text-transform: uppercase;
-  }
-  .nav-item {
-    > .nav-link {
-      padding: ($spacer * .5);
-      text-transform: uppercase;
-      color: $teal;
-      transition: $transition-base;
-      &:hover { background-color: #515151; }
-      @include media-breakpoint-down(sm) { font-size: 14px; }
-    }
-    &.show {
-      > .nav-link {
-        background-color: #fff;
-        color: $teal;
-      }
-    }
-    .dropdown-menu {
-      margin-top: 0;
-      border-radius: 0 0 $border-radius $border-radius;
-      .dropdown-item, .nav-link { color: $teal; }
-      .nav-link { padding: 0; }
-    }
-  }
-}
-
 #cross_product_nav {
   > .dropdown-menu {
     > .dropdown-item {
@@ -118,26 +74,23 @@
 }
 
 #p2p-nav {
-  background-color: $gray-800;
+  background-color: $blue-800;
   .navbar-nav {
     .nav-link {
       padding-right: ($nav-link-padding-x * .5);
       padding-left: ($nav-link-padding-x * .5);
-      color: $teal;
-      &:hover {
-        background-color: $gray-900;
-      }
+      &:hover { background-color: $gray-900; }
     }
   }
 }
 
-// Main navigation bar (left) in DMS
+// Main navigation bar (top) in DMS
 .site-navbar {
   position: fixed;
   right: 0;
   left: 0;
-  z-index: $zindex-fixed;
   @include transition(left .2s ease-in-out);
+  z-index: $zindex-fixed;
   @include media-breakpoint-down(lg) {
     bottom: 0;
     width: 100%;
@@ -148,19 +101,24 @@
     left: 200px;
     border-bottom: $border-width solid $nav-divider-color;
   }
+}
+#site_navbar {
+  font-size: $font-size-sm;
+  line-height: 1.714; // specific to achieve height of 56px to match with quick-add button :lg height
+  background-color: $white !important;
   .navbar-brand {
-    font-size: ($font-size-base * .75);
+    padding-top: ($spacer * .25);
+    padding-bottom: ($spacer * .25);
+    font-size: $font-size-sm;
+    color: $text-muted;
     @include media-breakpoint-down(lg) { display: none !important; }
   }
   .nav {
     @include media-breakpoint-down(lg) { width: 100%; }
     .nav-item {
       position: relative;
-      font-size: ($font-size-base * .75);
-      font-weight: $font-weight-bold;
-      line-height: 1;
       text-align: center;
-      border-left: $border-width solid $border-color;
+      border-left: $border-width solid $nav-divider-color;
       @include media-breakpoint-down(lg) {
         width: 20%;
         &:first-child { border-left: none; }
@@ -177,12 +135,16 @@
         &.nav-alert-danger { background-color: $danger; }
       }
       .nav-link {
+        padding: ($spacer * .5);
         color: $text-muted;
+        transition: $transition-base;
+        @include hover-focus() {
+          color: $body-color;
+          background-color: $body-bg;
+        }
         outline: none !important;
-        @include transition(background-color .2s ease-in-out);
         @include media-breakpoint-down(sm) { padding: ($spacer * .5); }
-        @include media-breakpoint-up(md) { padding: 18px $spacer; }
-        @include hover() { background-color: $body-bg; }
+        @include media-breakpoint-up(md) { padding: ($spacer * .5) $spacer; }
         &[aria-expanded="true"],
         &:not(:disabled):not(.disabled).active { background-color: $body-bg; }
         &.disabled {
@@ -211,9 +173,7 @@
           }
           @include media-breakpoint-down(sm) {
             display: block;
-            margin-top: 2px;
-            font-weight: $font-weight-bold;
-            font-size: 10px;
+            font-size: 12px;
           }
           @include media-breakpoint-up(md) { margin-left: ($spacer * .25); }
           @include media-breakpoint-up(xl) { display: none; }