nfg_ui 0.10.12 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e531527f9d795e4a54dbc9df9192a98faed4e0894ffa50299791cb6a7826da93
-  data.tar.gz: 2652d0a8fb19792d944f4cf557b46a0d5ebb3e3ca4f85025a81b5b2c4ec7c3d5
+  metadata.gz: f61158331b40d623b2841200a49849f0afc8ac396b4e14d0c422d565e428276b
+  data.tar.gz: 4e662c099cdcacb5aadbaa096fc8a31d0aab5c5a9b07283fd11dd87b3d56e652
 SHA512:
-  metadata.gz: 74abb5fa42c24c4795f963fd4df51508010c905925c085f3696cee7958bd15b11d2e4634e0fe95e9ab725f7e9ecca7a167ff10cecd87478ed050a46f7d593beb
-  data.tar.gz: 0f67b95f73b003f8e2d0c7089b4d51ec22bd71fa00223e4107251df5b582210f2e0ac697b3832d81c570f18eaefa09e5937588082e469cc45e1f643e7f4b13bf
+  metadata.gz: 610dc6560c3d1f3203efda9a84778921c89b75b1e4d4c347ef9057beca044f281fc6f23df9ec229988a26e3efdb2d679ef41c83c4e0a2cde18615e6cff00b3c6
+  data.tar.gz: ff44548766c96889fcf7f0a81c5bc65d52930a269f4971a686c5952e75e7d1bae70b0b1d59e5d06650654f3b7db953206754e5cd19fde0f9c5f22f0ce2c5e971

data/README.md

@@ -190,7 +190,6 @@ Groupings of elements to create rich interfaces. For example, an `:activity_feed
 * `:media`
 * `:modal`
 * `:navbar`
-* `:slat_list`
 * `:task_list`
 * *Tiles*
   * `:tile`
@@ -425,7 +424,6 @@ FOUNDATION_COMPONENT_NAMES = %i[color
                                   navbar
                                   navbar_nav
                                   page_header
-                                  slat_list [tooltip]
                                   tab_content
                                   task_list
                                   tile [icon, tooltip]

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/application.scss

@@ -1,30 +1,16 @@
 //** Admin Styles **//
 
-// App Vendors
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700);
-@import 'font-awesome';
-@import 'select2';
+// Core Styles
+@import 'nfg_ui/network_for_good/core/application';
 
-// Our Variables
-@import 'variables';
-
-// Bootstrap Vendor Base
-@import 'bootstrap';
-
-// NFG Theme
+// Customization and Overrides
 @import 'nfg_theme/*';
 
 // Plugins
-@import 'nfg_ui/network_for_good/public/plugins/datepicker';
-@import 'nfg_ui/network_for_good/public/plugins/datetimepicker';
-@import 'nfg_ui/network_for_good/public/plugins/intercom'; // only in admin layouts
-@import 'nfg_ui/network_for_good/public/plugins/select2';
-@import 'nfg_ui/network_for_good/public/plugins/sticky_div';
-@import 'nfg_ui/network_for_good/public/plugins/turbolinks';
-@import 'nfg_ui/network_for_good/public/plugins/twitter_typeahead';
-
-// Legacy browser support
-@import 'nfg_ui/network_for_good/public/legacy_browser_support/application';
+@import 'nfg_ui/network_for_good/core/plugins/intercom';
+@import 'nfg_ui/network_for_good/core/plugins/turbolinks';
+@import 'nfg_ui/network_for_good/core/plugins/twitter_typeahead';
 
-// Color variations
-@import 'nfg_theme/color_variations/*';
+// Color Variations - has to be inside admin directory for variables to work properly
+@import 'color_variations/nfg_theme/*';
+@import 'color_variations/plugins/*';

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

@@ -0,0 +1,18 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .nav-tabs {
+      .nav-link {
+        &:hover, &.active { border-color: $value; }
+      }
+    }
+  }
+
+  // Color variations for border in main nav in DM
+  .site-nav {
+    .nav-item.#{$color} {
+      .nav-link {
+        &:hover, &.active, &[aria-expanded="true"] { border-color: $value; }
+      }
+    }
+  }
+}

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

@@ -1,25 +1,17 @@
 // Our custom styles
-@import 'custom/avatar';
 @import 'custom/builder_layout';
 @import 'custom/campaign_card';
 @import 'custom/campaign_preview';
 @import 'custom/content_section_buttons';
 @import 'custom/custom_questions_questionnaire';
 @import 'custom/custom_receipt_language';
-@import 'custom/device_preview';
 @import 'custom/email_preview';
 @import 'custom/free_trial';
 @import 'custom/icomoon';
-@import 'custom/illustration';
 @import 'custom/interaction';
-@import 'custom/mobile';
-@import 'custom/nav_step';
 @import 'custom/overlay_blocker';
 @import 'custom/page_header';
-@import 'custom/redactor';
 @import 'custom/share_dropdown';
-@import 'custom/social_share';
-@import 'custom/slat';
 @import 'custom/status_indicator';
-@import 'custom/ticket';
 @import 'custom/tile';
+@import 'custom/video_countdown';

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

@@ -1,30 +1,3 @@
-//
-// Tabs
-//
-.nav-tabs {
-  border-width: $border-width;
-
-  .nav-item {
-    margin-bottom: -$border-width;
-    font-weight: $font-weight-bold;
-    font-size: $font-size-base;
-  }
-
-  .nav-link {
-    color: $text-muted !important;
-    border: none;
-    border-bottom: $nav-tabs-border-width solid transparent;
-    @include hover-focus {
-      color: $nav-tabs-link-active-color !important;
-      border-color: $nav-tabs-link-hover-border-color;
-    }
-  }
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $nav-tabs-link-active-color !important;
-  }
-}
-
 // Top navigation bar in DMS
 .site-nav {
   position: fixed;
@@ -95,14 +68,3 @@
     }
   }
 }
-
-// Color variations for border
-@each $color in $colors {
-  .site-nav {
-    .nav-item.#{nth($color, 1)} {
-      .nav-link {
-        &:hover, &.active, &[aria-expanded="true"] { border-color: nth($color, 2); }
-      }
-    }
-  }
-}

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

@@ -3,69 +3,10 @@
 //
 
 .tile {
-  display: block;
-  margin-right: auto;
-  margin-left: auto;
-  word-wrap: break-word;
-  background-color: $white;
-  border-top: $border-width solid $border-color;
-  border-bottom: $border-width solid $border-color;
   @include media-breakpoint-down(sm) {
     margin-right: -($grid-gutter-width / 2);
     margin-left: -($grid-gutter-width / 2);
+    border-right: none;
+    border-left: none;
   }
-  @include media-breakpoint-up(sm) {
-    border-right: $border-width solid $border-color;
-    border-left: $border-width solid $border-color;
-  }
-  + .tile { margin-top: $spacer; }
-}
-
-.tile-body {
-  padding: $grid-gutter-width;
-  @include media-breakpoint-up(sm) { padding: ($grid-gutter-width * 1.5); }
-}
-
-// Sections within a tile used to separate groups of content
-.tile-section {
-  display: block;
-  margin-right: auto;
-  margin-left: auto;
-  @include media-breakpoint-down(sm) { padding-bottom: $grid-gutter-width; }
-  @include media-breakpoint-up(sm) { padding-bottom: ($grid-gutter-width * 1.5); }
-  &:last-child { padding-bottom: 0; }
-  + .tile-section {
-    border-top: $border-width solid $border-color;
-    @include media-breakpoint-down(sm) { padding-top: $grid-gutter-width; }
-    @include media-breakpoint-up(sm) { padding-top: ($grid-gutter-width * 1.5); }
-  }
-}
-
-//
-// Optional textual caps
-//
-
-.tile-header, .tile-footer {
-  padding: ($grid-gutter-width / 2) $grid-gutter-width;
-  background-color: $white;
-  @include media-breakpoint-up(sm) { padding: $grid-gutter-width; }
-}
-.tile-header {
-  + .collapse,
-  + .collapsing,
-  + .tile-body,
-  + .tile-footer { border-top: $border-width solid $border-color; }
 }
-.tile-body + .tile-footer { border-top: $border-width solid $border-color; }
-
-//
-// Header navs
-//
-
-.tile-header-tabs {
-  margin-right: -$grid-gutter-width;
-  margin-bottom: -($grid-gutter-width / 2);
-  margin-left: -$grid-gutter-width;
-  border-bottom: 0;
-  @include media-breakpoint-up(sm) { margin-bottom: -$grid-gutter-width; }
-}

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

@@ -0,0 +1,47 @@
+.video-container {
+  video { z-index: 10; }
+}
+
+// Animation timing
+$anim: 6s;
+@keyframes time {
+  0%, 10%, 100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  5% {
+    opacity: 0.8;
+    transform: scale(1.2);
+  }
+}
+
+.countdown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  visibility: hidden;
+  text-align: center;
+  z-index: 20;
+  span {
+    position: absolute;
+    font-size: ($spacer * 5);
+    font-weight: bold;
+    color: $white;
+    opacity: 0;
+  }
+  &.play {
+    visibility: visible;
+    @for $i from 0 through 3 {
+      .num#{$i} {
+        animation: time $anim;
+        animation-delay: (3-$i)+s;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/_variables.scss

@@ -66,7 +66,7 @@ $teal:    #60c6cf; // legacy color -- not used in our theme
 //   $colors
 // );
 
-$primary:       $blue !default;
+$primary:       $blue !default; // need !default for $primary to work properly (override) in entity_branding
 // $secondary:     $gray-600 !default;
 $success:       $green;
 $info:          $blue;
@@ -75,7 +75,6 @@ $danger:        $red;
 // $light:         $gray-100 !default;
 // $dark:          $gray-800 !default;
 
-
 // $theme-colors: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 // $theme-colors: map-merge(
@@ -233,9 +232,9 @@ $line-height-sm:              1;
 $border-width:                1px;
 $border-color:                $gray-300;
 
-$border-radius:               .6rem;
-$border-radius-lg:            .6rem;
-$border-radius-sm:            .6rem;
+$border-radius:               .3rem;
+$border-radius-lg:            .3rem;
+$border-radius-sm:            .3rem;
 
 // $rounded-pill:                50rem !default;
 
@@ -254,17 +253,19 @@ $component-active-bg:         $primary;
 // $transition-fade:             opacity .15s linear !default;
 // $transition-collapse:         height .35s ease !default;
 
-// $embed-responsive-aspect-ratios: () !default;
+$embed-responsive-aspect-ratios: ();
 // stylelint-disable-next-line scss/dollar-variable-default
-// $embed-responsive-aspect-ratios: join(
-//   (
-//     (21 9),
-//     (16 9),
-//     (3 4),
-//     (1 1),
-//   ),
-//   $embed-responsive-aspect-ratios
-// );
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (9 16),
+    (4 3),
+    (3 4),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
 
 // Fonts
 //
@@ -310,7 +311,7 @@ $display4-size:               ($font-size-base * .875);
 // $display1-weight:             300 !default;
 // $display2-weight:             300 !default;
 // $display3-weight:             300 !default;
-$display4-weight:             $font-weight-normal;
+$display4-weight:             $font-weight-bold;
 // $display-line-height:         $headings-line-height !default;
 
 $lead-font-size:              ($font-size-base * 1.5);
@@ -396,7 +397,7 @@ $input-btn-padding-x-sm:      ($spacer * .25);
 // $input-btn-font-size-sm:      $font-size-sm !default;
 // $input-btn-line-height-sm:    $line-height-sm !default;
 
-$input-btn-padding-y-lg:      1.1rem;
+$input-btn-padding-y-lg:      .5rem;
 $input-btn-padding-x-lg:      ($spacer * .75);
 // $input-btn-font-size-lg:      $font-size-lg !default;
 // $input-btn-line-height-lg:    $line-height-lg !default;
@@ -655,7 +656,7 @@ $form-feedback-icon-valid:          none;
 // $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        none;
 
-$form-validation-states: () !default;
+$form-validation-states: ();
 // stylelint-disable-next-line scss/dollar-variable-default
 $form-validation-states: map-merge(
   (
@@ -692,16 +693,16 @@ $nav-link-padding-x:                $spacer;
 $nav-link-disabled-color:           $text-muted;
 
 $nav-tabs-border-color:             $border-color;
-$nav-tabs-border-width:             $border-width;
+$nav-tabs-border-width:             3px;
 $nav-tabs-border-radius:            0;
 $nav-tabs-link-hover-border-color:  $primary;
 $nav-tabs-link-active-color:        $body-color;
 $nav-tabs-link-active-bg:           transparent;
 $nav-tabs-link-active-border-color: $primary;
 
-// $nav-pills-border-radius:           $border-radius !default;
-// $nav-pills-link-active-color:       $component-active-color !default;
-// $nav-pills-link-active-bg:          $component-active-bg !default;
+$nav-pills-border-radius:           0;
+$nav-pills-link-active-color:       $white;
+$nav-pills-link-active-bg:          darken(#006D9D, 10%);
 
 $nav-divider-color:                 $border-color;
 $nav-divider-margin-y:              0;
@@ -709,8 +710,8 @@ $nav-divider-margin-y:              0;
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer * .5);
-// $navbar-padding-x:                  $spacer !default;
+$navbar-padding-y:                  0;
+$navbar-padding-x:                  0;
 
 $navbar-nav-link-padding-x:         ($spacer * .5);
 
@@ -725,9 +726,9 @@ $navbar-toggler-padding-x:          ($spacer * .5);
 // $navbar-toggler-font-size:          $font-size-lg !default;
 // $navbar-toggler-border-radius:      $btn-border-radius !default;
 
-// $navbar-dark-color:                 rgba($white, .5) !default;
-// $navbar-dark-hover-color:           rgba($white, .75) !default;
-// $navbar-dark-active-color:          $white !default;
+$navbar-dark-color:                 #9a9a9a; // LEGACY
+$navbar-dark-hover-color:           #b9b9b9; // LEGACY
+$navbar-dark-active-color:          #cccccc; // LEGACY
 // $navbar-dark-disabled-color:        rgba($white, .25) !default;
 // $navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
 // $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
@@ -820,11 +821,11 @@ $jumbotron-bg:                      $body-bg;
 
 $card-spacer-y:                     $spacer;
 $card-spacer-x:                     $spacer;
-$card-border-width:                 0;
+$card-border-width:                 $border-width;
 // $card-border-radius:                $border-radius !default;
-$card-border-color:                 transparent;
+$card-border-color:                 $border-color;
 $card-inner-border-radius:          $border-radius;
-$card-cap-bg:                       theme-color("light");
+$card-cap-bg:                       $white;
 // $card-cap-color:                    null !default;
 // $card-color:                        null !default;
 // $card-bg:                           $white !default;
@@ -954,8 +955,8 @@ $modal-header-padding-x:            $spacer;
 // $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
 // $modal-xl:                          1140px !default;
-$modal-lg:                          900px !default;
-$modal-md:                          600px !default;
+$modal-lg:                          900px;
+$modal-md:                          600px;
 // $modal-sm:                          300px !default;
 
 // $modal-fade-transform:              translate(0, -50px) !default;
@@ -1018,7 +1019,7 @@ $list-group-action-color:           $body-color;
 // $list-group-action-active-bg:       $gray-200 !default;
 
 
-// Image thumbnails -- NOT CURRENTLY USED IN PUBLIC
+// Image thumbnails
 
 // $thumbnail-padding:                 .25rem !default;
 // $thumbnail-bg:                      $body-bg !default;
@@ -1034,7 +1035,7 @@ $list-group-action-color:           $body-color;
 $figure-caption-color:              $text-muted;
 
 
-// Breadcrumbs -- NOT CURRENTLY USED IN PUBLIC
+// Breadcrumbs
 
 // $breadcrumb-padding-y:              .75rem !default;
 // $breadcrumb-padding-x:              1rem !default;