nfg_ui 0.11.18 → 0.12.0

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

@@ -18,11 +18,10 @@ body.modal-open  {
 
 
 .select2-container--default {
-  &.select2-container--focus .select2-selection--multiple { border-color: $primary; }
-  &.select2-container--open {
-    .select2-selection--single {
-      border-color: $custom-select-focus-border-color !important;
-    }
+  &.select2-container--focus .select2-selection--multiple,
+  &.select2-container--open .select2-selection--single {
+    border-color: $custom-select-focus-border-color;
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
   }
 
   //** Single select option
@@ -31,25 +30,23 @@ body.modal-open  {
     width: 100%;
     height: $custom-select-height !important;
     padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x !important;
-    font-weight: $btn-font-weight;
+    // font-weight: $btn-font-weight;
     line-height: $custom-select-line-height;
     color: $custom-select-color;
     vertical-align: middle;
     background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
     background-size: $custom-select-bg-size;
-    border: $custom-select-border-width solid $custom-select-border-color !important;
+    border: $custom-select-border-width solid $custom-select-border-color;
     border-radius: $border-radius;
     outline: none;
     cursor: pointer;
     transition: $transition-base;
     .select2-selection__rendered {
       padding: 0 !important;
-      color: $primary !important;
-      line-height: $spacer !important;
+      line-height: ($spacer * .75) !important;
       height: $custom-select-height !important;
       transition: $transition-base;
     }
-    .select2-selection__placeholder { color: $primary; }
     .select2-selection__arrow { display: none; }
   }
 
@@ -83,14 +80,13 @@ body.modal-open  {
         font-weight: $badge-font-weight;
         font-size: $font-size-sm;
         line-height: 1;
-        color: $primary;
         background-color: $white;
         border: $border-width solid $border-color;
         border-radius: $border-radius;
         transition: $transition-base;
         &:hover, &:active {
           color: $body-color;
-          background-color: theme-color("light");
+          background-color: $dropdown-link-active-bg;
         }
         + li { margin-top: 0; }
       }
@@ -103,6 +99,7 @@ body.modal-open  {
 
   //** Dropdown styles
   .select2-dropdown {
+    padding: $dropdown-padding-y $dropdown-padding-x;
     font-size: $font-size-base;
     color: $body-color;
     text-align: left;
@@ -110,11 +107,11 @@ body.modal-open  {
     background-color: $dropdown-bg;
     background-clip: padding-box;
     border: $dropdown-border-width solid $dropdown-border-color;
-    @include border-radius($dropdown-border-radius);
-    @include box-shadow($dropdown-box-shadow);
+    border-radius: $dropdown-border-radius;
+    box-shadow: $dropdown-box-shadow;
   }
   .select2-search--dropdown {
-    padding: ($spacer * .5);
+    padding: ($spacer * .25);
     .select2-search__field {
       display: block;
       width: 100%;
@@ -143,22 +140,22 @@ body.modal-open  {
     white-space: normal; // breaks long text
     background-color: transparent; // For `<button>`s
     border: 0; // For `<button>`s
-    border-top: $border-width solid $border-color;
     z-index: 1;
+    border-radius: $dropdown-inner-border-radius;
     transition: $transition-base;
     &.select2-results__option--highlighted, &.select2-results__option--highlighted[aria-selected] {
       color: $body-color;
-      background-color: transparent;
+      background-color: $dropdown-link-active-bg;
       &:hover, &:active {
         color: $body-color;
-        background-color: theme-color("light");
+        background-color: $dropdown-link-active-bg;
       }
     }
     &[aria-disabled="true"],
     &[aria-selected='true'] {
       padding-right: ($spacer * 2);
       color: $body-color !important;
-      background-color: transparent !important;
+      background-color: $dropdown-link-active-bg !important;
       cursor: default;
       &:after {
         position: absolute;
@@ -169,7 +166,7 @@ body.modal-open  {
         font-family: "FontAwesome";
         font-size: $font-size-base;
         line-height: 1.5;
-        color: theme-color("success");
+        color: $success;
         text-align: center;
         content: '\f00c';
         z-index: 5;
@@ -177,17 +174,30 @@ body.modal-open  {
     }
     &.loading-results {
       padding-right: 0;
+      padding-left: ($spacer * 1.5);
       color: $text-muted !important;
-      font-weight: $font-weight-bold;
-      text-transform: uppercase;
-      &:after { display: none; }
+      &:after {
+        position: absolute;
+        top: ($spacer * .5);
+        left: ($spacer * .25);
+        right: auto;
+        width: 36px;
+        height: 100%;
+        font-family: "FontAwesome";
+        font-size: $font-size-base;
+        line-height: 1.5;
+        color: $text-muted;
+        text-align: center;
+        content: '\f110';
+        z-index: 5;
+      }
     }
   }
   .select2-results__group {
-    padding: ($spacer * .5);
-    font-weight: $headings-font-weight;
+    padding-top: ($spacer * .25);
+    padding-bottom: ($spacer * .25);
     font-size: $font-size-base;
-    line-height: 1.3;
+    color: $dropdown-header-color;
   }
 }
 
@@ -195,8 +205,8 @@ body.modal-open  {
 // Error handling
   .has-danger {
     .select2-selection {
-      border-color: theme-color("danger");
-      color: theme-color("danger");
+      border-color: $danger;
+      color: $danger;
     }
   }
 

data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_twitter_typeahead.scss

@@ -9,23 +9,21 @@
 }
 .tt-hint { color: $text-muted; }
 .tt-menu {
-  margin-top: 2px;
-  padding: ($spacer * .25) 0;
+  margin-top: $dropdown-spacer;
+  padding: $dropdown-padding-y $dropdown-padding-x;
   width: 100%;
   max-width: 100%;
   max-height: 350px;
-  font-size: $font-size-sm;
   background-color: $dropdown-bg;
   background-clip: padding-box;
-  border: $dropdown-border-width solid $dropdown-border-color;
-  @include border-radius($border-radius);
-  @include box-shadow(0 0 5px transparentize($black, 0.7));
+  border-radius: $dropdown-border-radius;
+  box-shadow: $dropdown-box-shadow;
   overflow-y: auto;
 }
 .tt-suggestion {
   padding: ($spacer * .5);
   line-height: 1;
-  + .tt-suggestion { border-top: $dropdown-border-width solid $dropdown-border-color; }
+  border-radius: $dropdown-inner-border-radius;
 }
 .tt-selectable { cursor: pointer; }
 .tt-suggestion.tt-cursor, .tt-selectable:hover {

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

@@ -4,12 +4,25 @@
     .nav-link {
       position: relative;
       color: $text-muted;
-      border-left: 4px solid transparent;
+      &: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: '';
+      }
       &.active {
         color: $nav-tabs-link-active-color !important;
-        border-color: $nav-tabs-link-hover-border-color;
+        &:after { background: $nav-tabs-link-hover-border-color; }
+      }
+      @include hover-focus {
+        color: $nav-tabs-link-active-color !important;
+        &:after { background: $nav-tabs-link-hover-border-color; }
       }
-      @include hover-focus { color: $nav-tabs-link-active-color !important; }
     }
   }
 }

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

@@ -1,18 +1,18 @@
 // Styles specific for the new user navbar on everyday_story and everyday_classic_style layouts
 
-$navbar-logo-height: (($spacer * 4.5) - $spacer);
+$navbar-logo-height: ($spacer * 2.5);
 
 .navbar-brand {
   margin-right: 0;
-  padding: ($spacer * .5) 0;
-  max-width: ($spacer * 8);
+  padding: 0;
+  max-width: ($spacer * 6);
   height: $navbar-logo-height;
   white-space: normal !important;
-  @include media-breakpoint-up(lg) { max-width: ($spacer * 12); }
+  @include media-breakpoint-up(lg) { max-width: ($spacer * 9); }
   img {
-    max-width: ($spacer * 8);
+    max-width: ($spacer * 6);
     max-height: $navbar-logo-height;
-    @include media-breakpoint-up(lg) { max-width: ($spacer * 12); }
+    @include media-breakpoint-up(lg) { max-width: ($spacer * 9); }
   }
 }
 .navbar-text {

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_event.scss

@@ -11,7 +11,7 @@
       bottom: 0;
       left: 0;
       z-index: 0;
-      background-color: transparentize($black, 0.7);
+      background-color: transparentize($black, 0.8);
       content: '';
     }
     @include media-breakpoint-down(md) {

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_default.scss

@@ -25,7 +25,7 @@
   }
   .progress-stats {
     position: absolute;
-    top: ($spacer * .25);
+    top: ($spacer * .125);
     left: $grid-gutter-width / 2;
     width: 100%;
     z-index: 1;

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_page_header.scss

@@ -1,5 +1,5 @@
-$page-header-height: ($spacer * 4.5);
-$page-header-height-admin: ($spacer * 6.5);
+$page-header-height: ($spacer * 3.5); // 11.2rem
+$page-header-height-admin: ($spacer * 5); // 16rem
 
 // Page header specific styles
 .page-header {
@@ -22,13 +22,9 @@ $page-header-height-admin: ($spacer * 6.5);
 // Moving .page-content container down with padding when page-header exists but ONLY on larger screens
 .page-header {
   + .page-content {
-    @include media-breakpoint-up(lg) {
-      padding-top: $page-header-height;
-    }
+    @include media-breakpoint-up(lg) { padding-top: $page-header-height; }
   }
   body.admin & + .page-content { // this renders as body.admin .page-header + .page-content specifying when the view is in admin status
-    @include media-breakpoint-up(lg) {
-      padding-top: $page-header-height-admin;
-    }
+    @include media-breakpoint-up(lg) { padding-top: $page-header-height-admin; }
   }
 }

data/lib/nfg_ui/components/patterns/page_header.rb

@@ -56,12 +56,12 @@ module NfgUi
                     NfgUi::Components::Patterns::Media.new({}, view_context).render do
                       capture do
                         concat(NfgUi::Components::Elements::MediaObject.new({}, view_context).render {
-                          content_tag(:div, class: 'mr-2 h2') do
+                          content_tag(:div, class: 'mt-lg-1 mr-2 h3') do
                             NfgUi::Components::Foundations::Icon.new({ traits: [resource_theme_icon], class: "text-#{resource_theme_color} mr-0" }, view_context).render
                           end
                         })
                         concat(NfgUi::Components::Elements::MediaBody.new({}, view_context).render {
-                          content_tag(:h2) do
+                          content_tag(:h1) do
                             if subtitle
                               concat(content_tag(:span, title, class: 'mr-2'))
                               concat(content_tag(:small, subtitle, class: 'text-muted'))

data/lib/nfg_ui/components/patterns/tile_header.rb

@@ -20,7 +20,7 @@ module NfgUi
               concat(NfgUi::Components::Elements::Button.new({ traits: [:link, :block], collapse: collapse, class: 'no-link-color p-0 m-0' }, view_context).render {
                 content_tag(:div, class: 'row align-items-center') do
                   concat(content_tag(:div, class: 'col-10 text-left') {
-                    NfgUi::Components::Foundations::Typeface.new({ title: title, class: 'text-uppercase', icon: icon }, view_context).render
+                    NfgUi::Components::Foundations::Typeface.new({ heading: title, icon: icon, class: 'h4' }, view_context).render
                   })
                   concat(content_tag(:div, class: 'col-2 text-right') {
                     NfgUi::Components::Foundations::Icon.new({ traits: ['caret-down fw'], tooltip: 'Show / hide additional information' }, view_context).render
@@ -28,7 +28,7 @@ module NfgUi
                 end
               })
             elsif title
-              concat(NfgUi::Components::Foundations::Typeface.new({ title: title, class: 'text-uppercase', icon: icon }, view_context).render)
+              concat(NfgUi::Components::Foundations::Typeface.new({ heading: title, icon: icon, class: 'h4' }, view_context).render)
             end
 
             concat((block_given? ? yield : body))

data/lib/nfg_ui/components/utilities/disable_withable.rb

@@ -14,7 +14,7 @@ module NfgUi
         private
 
         def default_disable_with
-          @default_disable_with ||= view_context.ui.nfg(:icon, :loader, text: 'Saving...')
+          @default_disable_with ||= view_context.ui.nfg(:icon, :loader, text: 'Saving')
         end
 
         def non_html_attribute_options

data/lib/nfg_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module NfgUi
-  VERSION = '0.11.18'
+  VERSION = '0.12.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.11.18
+  version: 0.12.0
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-21 00:00:00.000000000 Z
+date: 2021-05-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -412,7 +412,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/custom/_nav_step.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/plugins/_datetimepicker.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/plugins/_select2.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_backgrounds.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_background.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_custom.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_grid.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_media.scss