nfg_ui 0.11.18 → 0.12.0

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_badge.scss

@@ -1,6 +1,5 @@
 // Specific styles for entity branding
-
 .badge-primary {
-  color: color-yiq($primary);
-  background-color: $primary;
+  background: scale-color($primary, $lightness: 80%);
+  border-color: $primary;
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_buttons.scss

@@ -1,5 +1,4 @@
 // Specific styles for entity branding
-
 .btn-primary {
   color: color-yiq($primary);
   background-color: $primary;
@@ -9,23 +8,29 @@
     background-color: darken($primary, 10%);
     border-color: darken($primary, 10%);
   }
-  &.disabled,
-  &:disabled,
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $input-btn-focus-width transparentize($primary, 0.8);
+  }
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
     color: color-yiq($primary);
     background-color: $primary;
     border-color: $primary;
+    box-shadow: 0 0 0 $input-btn-focus-width transparentize($primary, 0.8);
+    &:focus { box-shadow: 0 0 0 $input-btn-focus-width transparentize($primary, 0.8); }
   }
 }
 
-.btn-outline-secondary {
+.btn-secondary, .btn-outline-secondary {
   color: color-yiq($primary, $yiq-text-dark, $primary);
   &:hover { color: color-yiq($primary, $yiq-text-dark, $primary) !important; }
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .show > &.dropdown-toggle { color: color-yiq($primary, $yiq-text-dark, $primary) !important; }
+  .show > &.dropdown-toggle {
+    color: color-yiq($primary, $yiq-text-dark, $primary) !important;
+  }
 }
 
 .btn-link {

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_custom-forms.scss

@@ -4,21 +4,25 @@
   .custom-control-input {
     &:checked {
       ~ .custom-control-label, ~ .custom-control-label::before { border-color: $primary; }
-      ~ .custom-control-label::before { background-color: $primary; }
+      ~ .custom-control-label::before {
+        background-color: $primary;
+        box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+      }
     }
     &:not(:disabled):active ~ .custom-control-label::before {
       background-color: lighten($primary, 35%);
       border-color: lighten($primary, 35%);
     }
   }
+  &.custom-control-block {
+    .custom-control-input:checked ~ .custom-control-label { box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8); }
+  }
 }
 
 .custom-select {
-  color: color-yiq($primary, $yiq-text-dark, $primary);
-  background-image: $custom-select-indicator;
-  &:focus {
+  &:active, &:focus {
     border-color: $primary;
-    &::-ms-value { color: $primary; }
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
   }
 }
 

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_forms.scss

@@ -1,6 +1,10 @@
 // Specific styles for entity branding
-
-.form-control:focus { border-color: $primary; }
+.form-control {
+  &:focus {
+    border-color: $primary;
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+  }
+}
 
 
 // Styles needed to override :valid success styles provided by bootstrap... this is for server side forms only

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_nav.scss

@@ -1,14 +1,17 @@
 // Specific styles for entity branding
-
 .nav {
   &.flex-column {
     .nav-link {
-      &.active { border-color: $primary; }
+      &:hover, &.active {
+        &:after { background: $primary; }
+      }
     }
   }
 }
 .nav-tabs {
   .nav-link {
-    &:hover, &.active { border-color: $primary; }
+    &:hover, &.active {
+      &:after { background: $primary; }
+    }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/custom/_nav_step.scss

@@ -14,7 +14,7 @@
     }
 
     .step-indicator {
-      &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($primary, 0.5); }
+      &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($primary, 0.8); }
     }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/plugins/_select2.scss

@@ -1,16 +1,13 @@
  // Specific styles for entity branding
 
 .select2-container--default {
-  .select2-selection--single {
-    color: color-yiq($primary) !important;
-    background-image: $custom-select-indicator;
-    &,
-    .select2-selection__placeholder,
-    .select2-selection__choice__remove,
-    .select2-selection__rendered,
-    .select2-selection__rendered .select2-selection__choice { color: color-yiq($primary, $yiq-text-dark, $primary) !important;  }
-  }
   &.select2-container--focus .select2-selection--multiple,
-  &.select2-container--open .select2-selection--single { border-color: $primary !important; }
-  .select2-search--dropdown .select2-search__field:focus { border-color: $primary !important; }
+  &.select2-container--open .select2-selection--single {
+    border-color: $primary !important;
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+  }
+  .select2-search--dropdown .select2-search__field:focus {
+    border-color: $primary !important;
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+  }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/_variables.scss

@@ -1,5 +1,5 @@
 // These variables are neeeded to ensure the grid and breakpoints work within the legacy_browser_support directory
-$spacer: 2.4rem;
+$spacer: 3.2rem;
 
 $grid-breakpoints: (
   xs: 0,

data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_modal.scss

@@ -24,5 +24,5 @@
 .modal-footer {
   display: -ms-flexbox;
   -ms-flex-align: center;
-  -ms-flex-pack: end;
+  -ms-flex-pack: start;
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_alert.scss

@@ -6,6 +6,12 @@
     &:hover, &:active { text-decoration: none; }
   }
 }
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    background: scale-color($value, $lightness: 80%);
+  }
+}
 .alert-success a:not(.btn) { color: $success !important; }
 .alert-info a:not(.btn) { color: $info !important; }
 .alert-warning a:not(.btn) { color: $warning !important; }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_badge.scss

@@ -1,3 +1,15 @@
-// overrides color contrast settings
-.badge-secondary { color: $white !important; }
-.badge-warning { color: $white !important; }
+.badge {
+  color: $body-color;
+  border: $border-width solid transparent;
+}
+
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    background: scale-color($value, $lightness: 80%);
+    border-color: $value;
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_button-group.scss

@@ -3,7 +3,7 @@
   > .btn-primary:not(:first-child),
   > .btn-group:not(:first-child) > .btn-primary {
     margin-left: 0;
-    border-left-color: rgba(0,0,0,.15);
+    border-left: $border-width solid transparentize($black, .8);
   }
 }
 
@@ -24,6 +24,7 @@
 // Buttons on quick add modal in DMS
 .btn-group-quick-add {
   .col-4 {
+    padding: 0;
     &:nth-child(1n) { border-left: $border-width solid $border-color; }
     @include media-breakpoint-down(sm) {
       &:first-child { border-left: none; }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_buttons.scss

@@ -1,9 +1,40 @@
+// Sets box-shadow interaction to override bootstrap's defaults
+@each $color, $value in $theme-colors {
+  .btn-#{$color}, .btn-outline-#{$color} {
+    &:focus,
+    &.focus {
+      @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width transparentize($value, 0.8));
+    }
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show > &.dropdown-toggle {
+      @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width transparentize($value, 0.8));
+      &:focus { @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width transparentize($value, 0.8)); }
+    }
+  }
+}
+
+
 // Custom secondary button usage
-.btn-outline-secondary {
+[class*='btn-outline'], .btn-secondary {
+  padding-top: $input-btn-padding-y;
+  padding-bottom: $input-btn-padding-y;
+  border-width: $border-width;
+  box-shadow: transparentize($black, 0.9) 0px 1px 0px 0px;
+  &.btn-sm {
+    padding-top: $input-btn-padding-y-sm;
+    padding-bottom: $input-btn-padding-y-sm;
+  }
+  &.btn-lg {
+    padding-top: $input-btn-padding-y-lg;
+    padding-bottom: $input-btn-padding-y-lg;
+  }
+}
+.btn-secondary, .btn-outline-secondary {
   color: $primary;
   background-color: $white;
-  border-color: $border-color;
-  @include hover {
+  border: $border-width solid $border-color;
+  @include hover-focus {
     color: $body-color !important;
     background-color: $body-bg;
   }
@@ -14,7 +45,10 @@
     background-color: $body-bg;
   }
 }
-.btn-link { font-weight: $btn-font-weight; }
+.btn-link {
+  font-weight: $btn-font-weight;
+  &:hover { text-decoration: underline; }
+}
 
 // overrides color contrast settings
 .btn-warning { color: $white !important; }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_card.scss

@@ -16,7 +16,7 @@
 .card-img-overlay {
   top: auto; // makes the overlay gradient and container "stick" to bottom of parent container
   min-height: ($spacer * 2);
-  @include gradient-y(transparentize($black, 1), transparentize($black, .5));
+  @include gradient-y(transparentize($gray-900, 1), transparentize($gray-900, .5));
 }
 
 .card-img { @include border-radius(0); }

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

@@ -7,10 +7,18 @@
   .custom-control-input {
     &:checked {
       ~ .custom-control-label,
-      ~ .custom-control-label::before { border-color: $input-focus-border-color; }
+      ~ .custom-control-label::before {
+        border-color: $input-focus-border-color;
+      }
+      ~ .custom-control-label::before {
+        box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+      }
     }
     &:focus:not(:checked) ~ .custom-control-label::before { border-color: $input-border-color; }
   }
+  &.custom-control-block {
+    .custom-control-input:checked ~ .custom-control-label { box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8); }
+  }
   + .custom-control:not(.custom-control-inline) { margin-top: ($spacer * .25); }
 }
 .custom-checkbox, .custom-radio { min-width: $custom-control-gutter + $custom-control-indicator-size; } // sets minimum width to have space even if custom-control-label isn't there
@@ -40,7 +48,7 @@
 // Tweak just a few things for radios.
 
 .custom-radio {
-  .custom-control-label::after { background-size: 45% 45%; }
+  .custom-control-label::after { background-size: 50% 50%; }
 }
 
 // Select
@@ -53,9 +61,13 @@
   display: block;
   width: auto;
   max-width: 100%;
-  font-weight: $btn-font-weight;
   cursor: pointer;
   box-shadow: none;
+  &:focus { border-color: $border-color; } // if focus has a color other than the original, it shows the new border color after user selects item in select
+  &:active, &:focus {
+    border-color: $input-focus-border-color;
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8); // adds box-shadow for active only
+  }
 }
 
 // File
@@ -80,7 +92,7 @@
   padding: 0;
   .custom-control-label {
     margin-bottom: 0;
-    padding: ($spacer * 1.5) $spacer ($spacer * 2);
+    padding: $spacer $spacer ($spacer * 1.75);
     border: $border-width solid $border-color;
     border-radius: $border-radius;
     cursor: pointer;
@@ -123,7 +135,7 @@
       background-color: $body-bg;
     }
     &::after {
-      top: 0;
+      top: 1px;
       background-color: $white;
       border: $border-width solid $border-color;
       border-radius: 50%;

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_dropdown.scss

@@ -1,37 +1,40 @@
 .dropdown-toggle::after { content: none; }
 
 
+// The dropdown menu
+.dropdown-menu { padding: $dropdown-padding-y $dropdown-padding-x; }
+
+
 // Links, buttons, and more within the dropdown menu
 .dropdown-item {
-  + .dropdown-item { border-top: $border-width solid $border-color; }
+  border-radius: $dropdown-inner-border-radius;
   &.disabled, &:disabled {
-    background-color: $body-bg;
+    color: $dropdown-link-disabled-color !important;
+    background-color: $input-disabled-bg;
     cursor: default;
     pointer-events: none;
   }
-  &:not(.text-danger) { color: inherit !important; }
+  &:not(.text-danger):not(.disabled) { color: inherit !important; }
 }
 
-
 // Dropdown section headers
 .dropdown-header {
-  padding-top: ($spacer * .5);
-  padding-bottom: ($spacer * .5);
-  + .dropdown-item { border-top: $border-width solid $border-color; }
+  padding-top: ($spacer * .25);
+  padding-bottom: ($spacer * .25);
+  font-size: $font-size-base;
 }
 
 
 // Sizing
-.dropdown-menu-md, .dropdown-menu-lg { min-width: ($spacer * 10); }
+.dropdown-menu-md, .dropdown-menu-lg { min-width: ($spacer * 8); }
 .dropdown-menu-md {
-  @include media-breakpoint-up(sm) { min-width: ($spacer * 12); }
+  @include media-breakpoint-up(sm) { min-width: ($spacer * 10); }
 }
 .dropdown-menu-lg {
-  @include media-breakpoint-up(sm) { min-width: ($spacer * 24); }
+  @include media-breakpoint-up(sm) { min-width: ($spacer * 20); }
 }
 
 
-
 // Styles for wider "My Tools" dropdown in top nav
 #my_tools_dropdown {
   @include media-breakpoint-down(sm) { max-width: 100vw; }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_forms.scss

@@ -1,13 +1,20 @@
+.form-control {
+  &:focus {
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+  }
+}
+
+
 // Required styles
 label {
   font-weight: $font-weight-bold;
   &.required {
-    padding-left: ($spacer * .5);
+    padding-left: ($spacer * .25);
     &::before{
       content: '*';
       color: theme-color("danger");
-      margin-left: -($spacer * .5);
-      padding-right: ($spacer * .25);
+      margin-left: -($spacer * .25);
+      padding-right: ($spacer * .125);
     }
   }
   .required, abbr[title='required'] {
@@ -18,7 +25,7 @@ label {
   }
 }
 
-textarea.form-control { min-height: ($spacer * 6); }
+textarea.form-control { min-height: ($spacer * 5); }
 
 // Form groups
 //
@@ -27,7 +34,7 @@ textarea.form-control { min-height: ($spacer * 6); }
 
 .form-text {
   font-size: $font-size-sm;
-  line-height: 1.3;
+  line-height: 1.428;
 }
 
 // Checkboxes and radios
@@ -47,14 +54,14 @@ textarea.form-control { min-height: ($spacer * 6); }
 
 .valid-feedback,
 .invalid-feedback {
-  line-height: 1.3;
+  line-height: 1.428;
 }
 .valid-tooltip,
 .invalid-tooltip {
   padding: $tooltip-padding-y $tooltip-padding-x;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
-  line-height: 1.3;
+  line-height: 1.428;
   border-radius: $tooltip-border-radius;
 }