nfg_ui 0.12.12 → 0.12.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b4498adb366b0640bf169212acf8b00bb04ef18758d635fe7daf2f39b09b8fc6
-  data.tar.gz: 16547d15f0b5bafcfa47e1b2be5c8e0c814a86002e2edf30675ac6475e9f155b
+  metadata.gz: 2c4cea3d2799cbb858d6c47ae922ac963674a7739e8d10ca0019f57b739f2ff3
+  data.tar.gz: 6ec0cdedc2db4dc0297e233ea259299e676124d07fcecaa86f06060a83b0c96e
 SHA512:
-  metadata.gz: '06628b9cfe64620e26a6b77d2cd0b8ac8c4a0de5ae04cf8ebfda5bb2280672c7c776d9e5fa8ada61f44ca2324fda40abea99a7354ad1d21873906d0cc62c764b'
-  data.tar.gz: 6220377e98ed40850fe7591ad2669154b7ab8fe7f4e187578cd8fad850d5f07cb3e4b0e27dac06bc8d3762bbdea9f2b444c2ca0e75bd5617e866544b0ce9cf05
+  metadata.gz: fe6ab62c43eb5b7dcbb99d97ae6c89343c243c6b5b9b6014e9ae39eda332808310fbe68a4f3ad2962adcc705b02b9cb96cbc7ee15b7ce84f672b2039cea6ec60
+  data.tar.gz: 06a649cc5652f1de76ac8a3f9303f9e70f86dbc7136499be4b0bf5016724f1d5e75613661f8d4e21441d092398f5ff0943a59363aaa9787b3a23d34a69138b37

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

@@ -8,6 +8,7 @@
 @import 'custom/custom_questions_questionnaire';
 @import 'custom/custom_receipt_language';
 @import 'custom/email_preview';
+@import 'custom/engagement_banners';
 @import 'custom/free_trial';
 @import 'custom/gallery';
 @import 'custom/icomoon';
@@ -15,7 +16,6 @@
 @import 'custom/mailings';
 @import 'custom/page_header';
 @import 'custom/readmore';
-@import 'custom/redacted_text';
 @import 'custom/share_dropdown';
 @import 'custom/sortable';
 @import 'custom/status_indicator';

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

@@ -0,0 +1,10 @@
+// Cloud jumbotron
+.jumbotron-clouds-white, .jumbotron-clouds-gray {
+  padding-bottom: 10%;
+  background-position: 50% 100%;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+}
+
+.jumbotron-clouds-gray { background-image: image-url("nfg_ui/clouds-gray-lg.png"); }
+.jumbotron-clouds-white { background-image: image-url("nfg_ui/clouds-white-lg.png"); }

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

@@ -38,10 +38,10 @@
   bottom: 100%;
   margin-bottom: ($spacer * .5);
   min-width: 200px;
+  max-width: 100%;
   width: 430px;
   text-align: center;
   z-index: 120;
-  @include media-breakpoint-down(xs) { max-width: 100%; }
   &[data-for='header_text'] {
     top: 100%;
     bottom: auto;
@@ -55,24 +55,24 @@
     z-index: 100;
     a {
       display: inline-block;
-      padding: $btn-padding-y $btn-padding-x;
-      font-size: $btn-font-size;
-      line-height: $btn-line-height;
-      color: $body-color;
+      padding: $btn-padding-y $btn-padding-x !important;
+      font-size: $btn-font-size !important;
+      line-height: $btn-line-height !important;
+      color: $body-color !important;
       text-align: center;
-      background-color: $white;
+      background-color: $white !important;
       border: $border-width solid $border-color;
       border-bottom: 0;
-      text-decoration: none;
+      text-decoration: none !important;
       border-radius: $btn-border-radius $btn-border-radius 0 0;
-      @include hover-focus-active {
-        color: $white;
-        background: $primary;
+      &:hover, &:focus, &:active {
+        color: $white !important;
+        background: $primary !important;
       }
       i.fa { margin-right: ($spacer * .25); }
       &.cs-html-editor-save {
-        color: $white;
-        background-color: $primary;
+        color: $white !important;
+        background-color: $primary !important;
       }
       + a[class^='cs-html-editor-'] { margin-left: ($spacer * .25); }
     }

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

@@ -0,0 +1,23 @@
+// Holiday themed version for engagement banner
+.snowflake-bg, .hearts-bg, .arrows-bg, .flowers-bg {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  width: 100%;
+  z-index: 0;
+}
+.snowflakes-bg {
+  background: transparent image-url('nfg_ui/engagement_banners/snow-bg.gif') 0 0 repeat;
+  opacity: 0.5;
+}
+.hearts-bg {
+  background: transparent image-url('nfg_ui/engagement_banners/hearts-bg.gif') 0 0 repeat;
+  opacity: 0.1;
+}
+.arrows-bg {
+  background: transparent image-url('nfg_ui/engagement_banners/arrows-bg.png') 50% 50% no-repeat;
+  background-size: cover;
+}
+.flowers-bg {
+  background: transparent image-url('nfg_ui/engagement_banners/flowers-bg.png') 0 0 repeat;
+  opacity: 0.1;
+}

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

@@ -1,7 +1,7 @@
 // Free trial styles for DMS
 
 // Height of banner
-$free_trial_banner_height: 6.2rem;
+$free_trial_banner_height: 7.4rem;
 
 // Styles for container elements when body tag is using .has-free-trial
 body.has-free-trial.nfg_ui {
@@ -15,7 +15,7 @@ body.has-free-trial.nfg_ui {
   @include media-breakpoint-up(xl) {
     .site-nav {
       top: $free_trial_banner_height;
-      height: calc(100% - 62px);
+      height: calc(100% - 74px);
     }
     .full_width_layout { padding-top: ($spacer * 3); }
     .container-wrap { padding-top: ($spacer * 2) + $free_trial_banner_height; }

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

@@ -5,7 +5,7 @@
 
 // Color system
 
-$white:    #fff;
+$white:    #ffffff;
 $gray-100: #F3F6F8;
 $gray-200: #E2E7EA;
 $gray-300: #C9CED1;
@@ -15,7 +15,7 @@ $gray-600: #70787C;
 $gray-700: #5B6367; // not used in our theme
 $gray-800: #313A3E;
 $gray-900: #1D262B;
-$black:    #000;
+$black:    #000000;
 
 // $grays: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
@@ -403,8 +403,8 @@ $table-dark-color:            theme-color("light");
 $input-btn-padding-y:         .7rem;
 $input-btn-padding-x:         ($spacer * .25) + ($spacer * .125);
 // $input-btn-font-family:       null !default;
-// $input-btn-font-size:         $font-size-base !default;
-// $input-btn-line-height:       $line-height-base !default;
+$input-btn-font-size:         $font-size-base;
+$input-btn-line-height:       $line-height-base;
 
 $input-btn-focus-width:       ($spacer * .125);
 $input-btn-focus-color:       transparentize($primary, 0.8);
@@ -430,8 +430,8 @@ $input-btn-padding-x-lg:      ($spacer * .75) - ($spacer * .125);
 $btn-padding-y:               ($input-btn-padding-y + .1rem);
 $btn-padding-x:               ($spacer * .5);
 // $btn-font-family:             $input-btn-font-family !default;
-// $btn-font-size:               $input-btn-font-size !default;
-// $btn-line-height:             $input-btn-line-height !default;
+$btn-font-size:               $input-btn-font-size;
+$btn-line-height:             $input-btn-line-height;
 
 $btn-padding-y-sm:            ($input-btn-padding-y-sm + .1rem);
 // $btn-padding-x-sm:            $input-btn-padding-x-sm !default;
@@ -695,13 +695,13 @@ $form-validation-states: map-merge(
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // of components dependent on the z-axis and are designed to all work together.
 
-// $zindex-dropdown:                   1000 !default;
-// $zindex-sticky:                     1020 !default;
-// $zindex-fixed:                      1030 !default;
-// $zindex-modal-backdrop:             1040 !default;
-// $zindex-modal:                      1050 !default;
-// $zindex-popover:                    1060 !default;
-// $zindex-tooltip:                    1070 !default;
+$zindex-dropdown:                   1000;
+$zindex-sticky:                     1020;
+$zindex-fixed:                      1030;
+$zindex-modal-backdrop:             1040;
+$zindex-modal:                      1050;
+$zindex-popover:                    1060;
+$zindex-tooltip:                    1070;
 
 
 // Navs

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

@@ -9,7 +9,7 @@
 }
 .redactor-toolbar {
   position: relative;
-  background-color: $body-bg;
+  background-color: $white;
   box-shadow: none;
   border-bottom: $border-width solid $border-color;
   &.redactor-toolbar-external {
@@ -29,7 +29,7 @@
     }
     &:after {
       border-color: rgba(255, 255, 255, 0);
-      border-top-color: $body-bg;
+      border-top-color: $white;
       border-width: 6px;
       margin-left: -6px;
     }
@@ -41,17 +41,21 @@
     }
   }
   li a {
-    color: inherit !important;
+    color: $body-color !important;
     &.re-icon {
       .body-text { font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif !important; }
     }
-    @include hover-focus-active {
+    &:hover, &:focus, &:active {
       color: $white !important;
       background-color: $primary;
     }
   }
 }
 .redactor-editor, .redactor-box, .redactor-box textarea { z-index: auto; }
+.redactor-editor {
+  min-height: ($spacer * 5);
+  border: none;
+}
 .redactor-box .redactor-toolbar { z-index: $zindex-dropdown - 10 !important; }
 #redactor-modal-close {
   border: none;
@@ -68,7 +72,7 @@ body.modal-open  {
   z-index: $zindex-modal + 1 !important;
   a[class^="redactor-dropdown-"] {
     color: $body-color;
-    @include hover-focus-active {
+    &:hover, &:focus, &:active {
       color: $white;
       background-color: $primary;
     }

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

@@ -1,30 +1,43 @@
+//** Email Styles **//
+
+// Variables from core
+@import 'nfg_ui/network_for_good/core/variables';
+
+// Redactor styles
+@import 'nfg_ui/network_for_good/core/nfg_theme/custom/redactor.scss';
+@import 'nfg_ui/network_for_good/admin/nfg_theme/custom/content_section.scss';
+
+// Foundation email styles
 @import "settings/settings";
 @import "foundation-emails";
 @import "foundation_emails/alignment";
 @import "foundation_emails/button";
+@import "foundation_emails/typography";
 
 // NFG Theme specific
-@import "nfg_theme/spacers";
+@import "nfg_theme/backgrounds";
+@import "nfg_theme/borders";
+@import "nfg_theme/content_sections";
 @import "nfg_theme/layout";
 @import "nfg_theme/rainbow_bar";
+@import "nfg_theme/spacers";
+@import "foundation_emails/grid"; // listed after spacers to utilize variables
+@import "nfg_theme/text_colors";
 @import "nfg_theme/typography";
-@import "nfg_theme/backgrounds";
-
 
 // App Utilities
 // i18n translation missing visual to help find missing t('')s...
-.translation_missing{
-  background-color: #ec5840;
+.translation_missing {
+  background-color: $danger;
   display: inline-block;
-  border: solid 3px darken(#ec5840, 15%);
-  padding:10px;
-  color:#fff;
+  border: solid 3px darken($danger, 15%);
+  padding: 10px;
+  color: #fff;
   position: relative;
-
-  &:before{
+  &:before {
     content: "Translation Missing:";
     position: absolute;
-    background-color: darken(#ec5840, 15%);
+    background-color: darken($danger, 15%);
     display: inline-block;
     width: 110px;
     left: 50%;

data/app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_alignment.scss

@@ -6,29 +6,22 @@
 /// @group alignment
 ////
 
-// table,
-// th,
-// td,
-// h1,
-// h2,
-// h3,
-// h4,
-// h5,
-// h6,
-// p,
-// span {
-//   &.text-center {
-//     text-align: center;
-//   }
-
-//   &.text-left {
-//     text-align: left;
-//   }
-
-//   &.text-right {
-//     text-align: right;
-//   }
-// }
+div,
+table,
+th,
+td,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+span {
+  &.text-center { text-align: center; }
+  &.text-left { text-align: left; }
+  &.text-right { text-align: right; }
+}
 .text-center { text-align: center; }
 .text-left { text-align: left; }
 .text-right { text-align: right; }

data/app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_button.scss

@@ -2,60 +2,6 @@
 // zurb.com/ink/
 // Licensed under MIT Open Source
 
-////
-/// @group button
-////
-
-// /// Padding inside buttons at various sizes.
-// /// @type Map
-// $button-padding: (
-//   tiny: 4px 8px 4px 8px,
-//   small: 5px 10px 5px 10px,
-//   default: 8px 16px 8px 16px,
-//   large: 10px 20px 10px 20px,
-// ) !default;
-
-// /// Font sizes of buttons at various sizes.
-// /// @type Map
-// $button-font-size: (
-//   tiny: 10px,
-//   small: 12px,
-//   default: 16px,
-//   large: 20px,
-// ) !default;
-
-// /// Text color of buttons.
-// /// @type Color
-// $button-color: $white !default;
-
-// /// Text color of buttons with a light background.
-// /// @type Color
-// $button-color-alt: $medium-gray !default;
-
-// /// Font weight of buttons.
-// /// @type Weight
-// $button-font-weight: bold !default;
-
-// /// Margin around buttons.
-// /// @type List
-// $button-margin: 0 0 $global-margin 0 !default;
-
-// /// Background color of buttons.
-// /// @type Color
-// $button-background: $primary-color !default;
-
-// /// Border around buttons.
-// /// @type Border
-// $button-border: 2px solid $button-background !default;
-
-// /// Border radius of buttons. Not supported by all email clients.
-// /// @type Number
-// $button-radius: $global-radius !default;
-
-// /// Border radius of rounded buttons. Not supported by all email clients.
-// /// @type Number
-// $button-rounded: $global-rounded !default;
-
 table.button {
   // width: auto;
   // margin: $button-margin;
@@ -157,7 +103,7 @@ table.button.inverse {
     td {
       background: transparent;
       color: $white;
-      border: 1px solid $white;
+      border: $border-width solid $white;
     }
     a {
       color: $white;

data/app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_grid.scss

@@ -0,0 +1,224 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+// For viewing email in browser
+@media only screen {
+  html {
+    min-height: 100%;
+    background: $body-background;
+  }
+}
+
+table {
+  &.body {
+    background: $body-background;
+    // height: 100%;
+    // width: 100%;
+  }
+
+  &.container {
+    // background: $container-background;
+    width: $global-width;
+    // margin: 0 auto;
+    // Margin: 0 auto;
+    // text-align: inherit;
+  }
+
+  &.row {
+    margin: 0;
+    // padding: 0;
+    // width: 100%;
+    // position: relative;
+    flex-wrap: initial; // clears flex-wrap property in DMS BS4 .row styles
+  }
+
+  // &.spacer {
+  //   width: 100%;
+  //   td {
+  //     mso-line-height-rule: exactly;
+  //   }
+  // }
+}
+
+// table.container table.row {
+//   display: table;
+// }
+
+td.columns,
+td.column,
+th.columns,
+th.column {
+  // margin: 0 auto;
+  // Margin: 0 auto;
+  // padding-left: $global-gutter;
+  // padding-bottom: $column-padding-bottom;
+
+  // // Prevents Nested columns from double the padding
+  // .column,
+  // .columns {
+  //   padding-left: 0 !important;
+  //   padding-right: 0 !important;
+
+  //   center {
+  //     min-width: none !important;
+  //   }
+  // }
+
+  @each $prop, $abbrev in (margin: m, padding: p) {
+    @each $size, $length in $spacers {
+      &.#{$abbrev}-all-#{$size} { #{$prop}:        $length !important; } // a = All sides
+      &.#{$abbrev}-top-#{$size} { #{$prop}-top:    $length !important; }
+      &.#{$abbrev}-right-#{$size} { #{$prop}-right:  $length !important; }
+      &.#{$abbrev}-bottom-#{$size} { #{$prop}-bottom: $length !important; }
+      &.#{$abbrev}-left-#{$size} { #{$prop}-left:   $length !important; }
+
+      // Axes
+      &.#{$abbrev}-x-axis-#{$size} {
+        #{$prop}-right:  $length !important;
+        #{$prop}-left:   $length !important;
+      }
+      &.#{$abbrev}-y-axis-#{$size} {
+        #{$prop}-top:    $length !important;
+        #{$prop}-bottom: $length !important;
+      }
+    }
+  }
+}
+
+// td.columns.last,
+// td.column.last,
+// th.columns.last,
+// th.column.last {
+//   padding-right: $global-gutter;
+// }
+
+// //makes sure nested tables are 100% width
+// td.columns,
+// td.column,
+// th.columns,
+// th.column {
+//   table:not(.button) {
+//     width: 100%;
+//   }
+// }
+
+@for $i from 1 through $grid-column-count {
+  // td.large-#{$i},
+  // th.large-#{$i} {
+  //   width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
+  //   padding-left: $global-gutter / 2;
+  //   padding-right: $global-gutter / 2;
+  // }
+
+  // td.large-#{$i}.first,
+  // th.large-#{$i}.first {
+  //   padding-left: $global-gutter;
+  // }
+
+  // td.large-#{$i}.last,
+  // th.large-#{$i}.last {
+  //   padding-right: $global-gutter;
+  // }
+
+  // Collapsed logic
+  .collapse {
+    > tbody > tr > td.large-#{$i},
+    > tbody > tr > th.large-#{$i} {
+      padding-right: 0;
+      padding-left: 0;
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
+    }
+
+    //Gotta give it that extra love for the first and last columns.
+    td.large-#{$i}.first,
+    th.large-#{$i}.first,
+    td.large-#{$i}.last,
+    th.large-#{$i}.last {
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
+    }
+  }
+
+  // Expanded logic
+  .expanded {
+    > tbody > tr {
+      > td.large-#{$i}.first,
+      > th.large-#{$i}.first {
+        padding-left: 0 !important;
+        width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
+        @media only screen and (max-width: 624px) { padding-right: 0 !important; }
+      }
+      > td.large-#{$i}.last,
+      > th.large-#{$i}.last {
+        padding-right: 0 !important;
+        width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
+        @media only screen and (max-width: 624px) { padding-left: 0 !important; }
+      }
+    }
+
+    // Nested columns need gutters
+    td.columns,
+    td.column,
+    th.columns,
+    th.column {
+      .column,
+      .columns {
+        padding-left: $global-gutter !important;
+        padding-right: $global-gutter !important;
+      }
+    }
+
+  }
+
+  // td.large-#{$i} center,
+  // th.large-#{$i} center {
+  //   min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
+  // }
+
+  // .body .columns td.large-#{$i},
+  // .body .column td.large-#{$i},
+  // .body .columns th.large-#{$i},
+  // .body .column th.large-#{$i} {
+  //   width: -zf-grid-calc-pct($i, $grid-column-count);
+  // }
+}
+
+// @for $i from 1 through ($grid-column-count - 1) {
+//   td.large-offset-#{$i},
+//   td.large-offset-#{$i}.first,
+//   td.large-offset-#{$i}.last,
+//   th.large-offset-#{$i},
+//   th.large-offset-#{$i}.first,
+//   th.large-offset-#{$i}.last {
+//     //1.5 takes in effect a whole empty cell.
+//     padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
+//   }
+// }
+
+// td.expander,
+// th.expander {
+//   visibility: hidden;
+//   width: 0;
+//   padding: 0 !important;
+// }
+
+// // adds radius to container
+// table.container.radius {
+//   border-radius: $container-radius;
+//   border-collapse: separate;
+// }
+
+// Specific calendar table on layout_12 (event - 2)
+  .calendar {
+    td.columns,
+    td.column,
+    th.columns,
+    th.column {
+      padding-left: $global-gutter !important;
+      padding-right: $global-gutter !important;
+    }
+  }

data/app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_typography.scss

@@ -0,0 +1,228 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+body,
+table.body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+td,
+th {
+  color: $global-font-color;
+  font-family: $body-font-family;
+  font-weight: $global-font-weight;
+//   padding-top: 0;
+//   padding-right: 0;
+//   padding-bottom: 0;
+//   padding-left: 0;
+//   margin: 0;
+//   Margin: 0;
+//   text-align: left;
+  line-height: $global-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $header-color;
+//   word-wrap: normal;
+  font-family: $header-font-family;
+  font-weight: $header-font-weight;
+  margin-bottom: $header-margin-bottom;
+  Margin-bottom: $header-margin-bottom;
+}
+
+h1 {
+  font-size: $h1-font-size;
+}
+
+h2 {
+  font-size: $h2-font-size;
+}
+
+h3 {
+  font-size: $h3-font-size;
+}
+
+h4 {
+  font-size: $h4-font-size;
+}
+
+h5 {
+  font-size: $h5-font-size;
+}
+
+h6 {
+  font-size: $h6-font-size;
+}
+
+body,
+table.body,
+p,
+td,
+th {
+  font-size: $global-font-size;
+  line-height: $body-line-height;
+}
+
+p {
+  margin-bottom: $paragraph-margin-bottom;
+  Margin-bottom: $paragraph-margin-bottom;
+
+  &.lead {
+    font-size: $lead-font-size;
+    line-height: $lead-line-height;
+  }
+
+  &.subheader {
+    margin-top: $subheader-margin-top;
+    margin-bottom: $subheader-margin-bottom;
+    Margin-top: $subheader-margin-top;
+    Margin-bottom: $subheader-margin-bottom;
+    font-weight: $subheader-font-weight;
+    line-height: $subheader-lineheight;
+    color: $subheader-color;
+  }
+}
+
+small, .small{
+  font-size: $small-font-size;
+  color: inherit;
+  line-height: inherit;
+}
+
+a {
+  color: $anchor-color;
+  text-decoration: $anchor-text-decoration;
+  font-family: $body-font-family;
+  font-weight: $global-font-weight;
+//   padding: 0;
+//   text-align: left;
+  line-height: $global-line-height;
+
+  &:hover {
+    color: $anchor-color-hover;
+  }
+
+  &:active {
+    color: $anchor-color-active;
+  }
+
+  &:visited {
+    color: $anchor-color-visited;
+  }
+}
+
+h1 a,
+h1 a:visited,
+h2 a,
+h2 a:visited,
+h3 a,
+h3 a:visited,
+h4 a,
+h4 a:visited,
+h5 a,
+h5 a:visited,
+h6 a,
+h6 a:visited {
+  color: $anchor-color;
+}
+
+pre {
+  background: $light-gray;
+//   margin: 30px 0;
+//   Margin: 30px 0;
+
+  code {
+    color: $medium-gray;
+
+    span.callout {
+      color: $dark-gray;
+//       font-weight: bold;
+    }
+
+    span.callout-strong {
+      color: $pre-color;
+//       font-weight: bold;
+    }
+  }
+}
+
+// Horizontal rule -- used for a break and division between content sections
+table.hr {
+  // width: 100%;
+
+  th {
+    height: 1px;
+    max-width: $hr-width;
+    // border-top: 0;
+    // border-right: 0;
+    border-bottom: $hr-border;
+    // border-left: 0;
+    // margin: $hr-margin;
+    // Margin: $hr-margin;
+    // clear: both;
+  }
+}
+
+
+
+
+// // Use to style a large number to display a statistic
+.stat {
+  font-size: $stat-font-size;
+//   line-height: 1;
+
+//   p + & {
+//     margin-top: -16px;
+//     Margin-top: -16px;
+//   }
+}
+
+// // preheader styles
+span.preheader {
+//   display: none !important;
+//   visibility: hidden;
+//   mso-hide: all !important;
+//   font-size: 1px;
+  color: $body-background; // needs to match background color of it's container
+//   line-height: 1px;
+//   max-height: 0px;
+//   max-width: 0px;
+//   opacity: 0;
+//   overflow: hidden;
+}
+
+ul, ol{
+  margin-top: 0;
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+blockquote{
+  margin-left: $paragraph-margin-bottom;
+  color: $global-font-color;
+  font-style: italic;
+}
+
+// // Removing the iOS colors put in for telephone and addresses
+// @if $remove-ios-blue {
+//   // Wrapping in a media only screen to have inline-css respect the styling
+//   @media only screen {
+//     a[x-apple-data-detectors] {
+//       color: inherit !important;
+//       text-decoration: none !important;
+//       font-size: inherit !important;
+//       font-family: inherit !important;
+//       font-weight: inherit !important;
+//       line-height: inherit !important;
+//     }
+//   }
+// }

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_backgrounds.scss

@@ -3,7 +3,15 @@
 .bg-success { background-color: $success-color; }
 .bg-warning { background-color: $warning-color; }
 .bg-alert { background-color: $alert-color; }
+.bg-white { background: $white !important; }
+.bg-secondary { background: $medium-gray !important; }
+.bg-tertiary { background: $dark-gray !important; }
 .bg-light-gray { background-color: $light-gray !important; }
+.bg-transparent { background: transparent !important; }
+.bg-black {
+  background: $black !important;
+  color: inherit;
+}
 
 // Images
 .bg-image {

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_borders.scss

@@ -0,0 +1,2 @@
+.border { border: $border-width solid $border-color; }
+.border-top { border-top: $border-width solid $border-color; }

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_content_sections.scss

@@ -0,0 +1,10 @@
+// Styles specific for content section links
+.cs-edit, .cs-rm-group, .cs-add-group {
+  padding: 0.5rem 0.8rem !important;
+  font-weight: $bold-font-weight;
+  font-size: 14px !important;
+  line-height: 1;
+}
+
+// Override white text
+.redactor-box .text-white { color: $global-font-color !important; }

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_layout.scss

@@ -1,14 +1,12 @@
 // Extra layout styles
-
-
-// Inner wrapper styles that Foundation adds inside wrapper classes
-.wrapper-inner {
-  padding: 24px;
-  @media only screen and (max-width: #{$global-breakpoint}) { padding: 24px 0px !important; }
-}
-.collapse {
-  .wrapper-inner {
-    @media only screen and (max-width: #{$global-breakpoint}) { padding: 24px !important; }
+.wrapper {
+  &.strict { // Strict mode: Wrap with zero impact on nested components
+    width: 100% !important;
+    padding: 0 !important;
+    .wrapper-inner {
+      width: 100% !important;
+      padding: 0 !important;
+    }
   }
 }
 
@@ -21,7 +19,7 @@
   th.column {
     padding-top: 12px;
     padding-bottom: 12px;
-    border-top: 1px solid $medium-gray;
+    border-top: $border-width solid $border-color;
   }
 }
 

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_spacers.scss

@@ -1,60 +1,36 @@
-$spacer                                     : 24px !default;
-$spacer-x                                   : $spacer !default;
-$spacer-y                                   : $spacer !default;
-$spacers: (
-  0: (
-    x : 0,
-    y : 0
+$spacer: 24px;
+$spacers: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$spacers: map-merge(
+  (
+    0: 0,
+    quarter: ($spacer * .25),
+    half: ($spacer * .5),
+    base: $spacer,
+    base-half: ($spacer * 1.5),
+    double: ($spacer * 2),
+    double-half: ($spacer * 2.5),
+    triple: ($spacer * 3)
   ),
-  quarter: (
-    x : ($spacer-x * 0.25),
-    y : ($spacer-y * 0.25)
-  ),
-  half: (
-    x : ($spacer-x * 0.5),
-    y : ($spacer-y * 0.5)
-  ),
-  base: (
-    x : $spacer-x,
-    y : $spacer-y
-  ),
-  base-half: (
-    x : $spacer-x * 1.5,
-    y : $spacer-y * 1.5
-  ),
-  double: (
-    x : ($spacer-x * 2),
-    y : ($spacer-y * 2)
-  ),
-  double-half: (
-    x : ($spacer-x * 2.5),
-    y : ($spacer-y * 2.5)
-  ),
-  triple: (
-    x : ($spacer-x * 3),
-    y : ($spacer-y * 3)
-  )
+  $spacers
 );
 
 @each $prop, $abbrev in (margin: m, padding: p) {
-  @each $size, $lengths in $spacers {
-    $length-x:   map-get($lengths, x);
-    $length-y:   map-get($lengths, y);
-
-    .#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
-    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length-y !important; }
-    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length-x !important; }
-    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
-    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length-x !important; }
+  @each $size, $length in $spacers {
+    .#{$abbrev}-a-#{$size} { #{$prop}:        $length !important; } // a = All sides
+    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length !important; }
+    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length !important; }
+    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length !important; }
+    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length !important; }
 
     // Axes
     .#{$abbrev}-x-#{$size} {
-      #{$prop}-right:  $length-x !important;
-      #{$prop}-left:   $length-x !important;
+      #{$prop}-right:  $length !important;
+      #{$prop}-left:   $length !important;
     }
     .#{$abbrev}-y-#{$size} {
-      #{$prop}-top:    $length-y !important;
-      #{$prop}-bottom: $length-y !important;
+      #{$prop}-top:    $length !important;
+      #{$prop}-bottom: $length !important;
     }
   }
-}
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_text_colors.scss

@@ -0,0 +1,26 @@
+@mixin text-color-variant($color){
+  &h1,
+  &h2,
+  &h3,
+  &h4,
+  &h5,
+  &h6,
+  &p,
+  &td,
+  &th,
+  &small,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & td,
+  & th,
+  & small {
+    color: $color !important;
+  }
+}
+
+.text-black { @include text-color-variant($black); }

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_typography.scss

@@ -3,4 +3,4 @@
 .text-warning { color: $warning-color; }
 .text-alert { color: $alert-color; }
 .text-white { color: $white; }
-.text-muted { color: #9A9A9A; }
+.text-muted { color: $secondary-color; }

data/app/assets/stylesheets/nfg_ui/network_for_good/email/settings/_settings.scss

@@ -16,25 +16,25 @@
 // 1. Global
 // ---------
 
-$primary-color: #25aceb;
-$secondary-color: #9A9A9A;
-$success-color: #59bf22;
-$warning-color: #ffaa00;
-$alert-color: #ff6d33;
-$light-gray: #F7F7F7;
-$medium-gray: #D8D8D8;
-$dark-gray: #4D4D4D;
-$black: #000000;
-$white: #ffffff;
-$pre-color: #ff6908;
+$primary-color: $primary;
+$secondary-color: $gray-600;
+$success-color: $success;
+$warning-color: $warning;
+$alert-color: $danger;
+$light-gray: $gray-100;
+$medium-gray: $gray-300;
+$dark-gray: $gray-800;
+$black: $black;
+$white: $white;
+$pre-color: $gray-800;
 $global-width: 580px;
 $global-width-small: 100%;
 $global-gutter: 24px;
-$body-background: $light-gray;
+$body-background: $body-bg;
 $container-background: $white;
 $global-padding: 12px;
 $global-margin: 12px;
-$global-radius: 3px;
+$global-radius: $border-radius;
 $global-rounded: 500px;
 $global-breakpoint: $global-width + $global-gutter;
 
@@ -57,19 +57,19 @@ $block-grid-gutter: $global-gutter;
 $global-font-color: $dark-gray;
 $body-font-family: Helvetica, Arial, sans-serif;
 $global-font-weight: normal;
-$bold-font-weight: 500;
+$bold-font-weight: $font-weight-bold;
 $header-color: inherit;
-$global-line-height: 1.5;
-$global-font-size: 14px;
+$global-line-height: $line-height-base;
+$global-font-size: 16px;
 $body-line-height: $global-line-height;
 $header-font-family: Helvetica, Arial, sans-serif;
 $header-font-weight: $bold-font-weight;
-$h1-font-size: 30px;
-$h2-font-size: 27px;
-$h3-font-size: 24px;
-$h4-font-size: 20px;
-$h5-font-size: 17px;
-$h6-font-size: 14px;
+$h1-font-size: 40px;
+$h2-font-size: 32px;
+$h3-font-size: 28px;
+$h4-font-size: 24px;
+$h5-font-size: 20px;
+$h6-font-size: 16px;
 $header-margin-bottom: 12px;
 $paragraph-margin-bottom: 12px;
 $small-font-size: 80%;
@@ -83,7 +83,7 @@ $subheader-font-weight: $global-font-weight;
 $subheader-margin-top: 4px;
 $subheader-margin-bottom: 8px;
 $hr-width: $global-width;
-$hr-border: 1px solid $medium-gray;
+$hr-border: $border-width solid $border-color;
 $hr-margin: 24px auto;
 $anchor-text-decoration: underline;
 $anchor-color: $primary-color;
@@ -102,10 +102,10 @@ $button-padding: (
   large: 10px 12px 10px 12px,
 );
 $button-font-size: (
-  tiny: 12px,
+  tiny: 14px,
   small: 14px,
-  default: 15px,
-  large: 17px,
+  default: 16px,
+  large: 20px,
 );
 $button-color: $white;
 $button-color-alt: $medium-gray;
@@ -123,11 +123,11 @@ $callout-background: #e5f5fd;
 $callout-background-fade: 88%;
 $callout-padding: 12px;
 $callout-margin-bottom: $global-margin;
-$callout-border: 1px solid $primary-color;
-$callout-border-secondary: 1px solid $secondary-color;
-$callout-border-success: 1px solid $success-color;
-$callout-border-warning: 1px solid $warning-color;
-$callout-border-alert: 1px solid $alert-color;
+$callout-border: $border-width solid $primary-color;
+$callout-border-secondary: $border-width solid $secondary-color;
+$callout-border-success: $border-width solid $success-color;
+$callout-border-warning: $border-width solid $warning-color;
+$callout-border-alert: $border-width solid $alert-color;
 
 // 7. Menu
 // -------

data/lib/nfg_ui/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.12.12
+  version: 0.12.16
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-19 00:00:00.000000000 Z
+date: 2021-10-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -149,14 +149,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.11.4
+        version: 1.12.5
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.11.4
+        version: 1.12.5
 - !ruby/object:Gem::Dependency
   name: browser
   requirement: !ruby/object:Gem::Requirement
@@ -372,6 +372,8 @@ files:
 - app/assets/images/nfg_ui/app_icon/mstile-150x150.png
 - app/assets/images/nfg_ui/app_icon/safari-pinned-tab.svg
 - app/assets/images/nfg_ui/app_icon/site.webmanifest.erb
+- app/assets/images/nfg_ui/clouds-gray-lg.png
+- app/assets/images/nfg_ui/clouds-white-lg.png
 - app/assets/images/nfg_ui/email/icons/fa-caret-right.png
 - app/assets/images/nfg_ui/email/icons/fa-check-circle-o-success.png
 - app/assets/images/nfg_ui/email/icons/fa-check-circle-success.png
@@ -380,6 +382,10 @@ files:
 - app/assets/images/nfg_ui/email/icons/fa-twitter.png
 - app/assets/images/nfg_ui/email/icons/fa-youtube.png
 - app/assets/images/nfg_ui/email/nfg-logo.png
+- app/assets/images/nfg_ui/engagement_banners/arrows-bg.png
+- app/assets/images/nfg_ui/engagement_banners/flowers-bg.png
+- app/assets/images/nfg_ui/engagement_banners/hearts-bg.gif
+- app/assets/images/nfg_ui/engagement_banners/snow-bg.gif
 - app/assets/javascripts/nfg_ui/application.coffee
 - app/assets/javascripts/nfg_ui/collapsible_toggle.coffee
 - app/assets/javascripts/nfg_ui/datepicker.coffee
@@ -416,6 +422,7 @@ files:
 - 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/_jumbotron.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_media.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_modal.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_nav.scss
@@ -431,6 +438,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_questions_questionnaire.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_receipt_language.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_email_preview.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_engagement_banners.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_free_trial.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_gallery.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_icomoon.scss
@@ -438,7 +446,6 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_mailings.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_page_header.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_readmore.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_redacted_text.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_share_dropdown.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_sortable.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_status_indicator.scss
@@ -542,10 +549,15 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/email/application.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_alignment.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_button.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_grid.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_typography.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_backgrounds.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_borders.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_content_sections.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_layout.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_rainbow_bar.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_spacers.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_text_colors.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_typography.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/settings/_settings.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/application.scss

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

@@ -1,32 +0,0 @@
-// Empty state blocker with blokk font-family replacement
-
-// Import redacted-style "blokk" font for empty states
-// Needs to be outside of the namespace for valid CSS output (particularly important for Internet Explorer)
-@font-face {
-  font-family: 'BLOKK';
-  src: asset-url('admin/blokk/BLOKKNeue-Regular.eot');
-  src: asset-url('admin/blokk/BLOKKNeue-Regular.eot?#iefix') format('embedded-opentype'),
-       asset-url('admin/blokk/BLOKKNeue-Regular.woff2') format('woff2'),
-       asset-url('admin/blokk/BLOKKNeue-Regular.woff') format('woff'),
-       asset-url('admin/blokk/BLOKKNeue-Regular.otf') format('opentype'),
-       asset-url('admin/blokk/BLOKKNeue-Regular.ttf') format('truetype'),
-       asset-url('admin/blokk/BLOKKNeue-Regular.svg#BLOKKRegular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'BLOKK';
-    src: asset-url('admin/blokk/BLOKKNeue-Regular.svg') format('svg');
-  }
-}
-
-$redacted-font-family: "BLOKK";
-
-// Overlay styles
-.redacted-text {
-  font-family: $redacted-font-family !important;
-  letter-spacing: -3px;
-  word-spacing: -3px;
-  .card-img-overlay { background: none; }
-}