nfg_ui 0.12.11 → 0.12.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1b470649dc13da4589ebf542a26a8945906254c9b26362125b93bf1cd146a36
-  data.tar.gz: b8578d38c9ebc6299e112f87909d3764a0990373276904e8cc39c5cf14675686
+  metadata.gz: 84aebec82a0980d25e33ff5fae45e97619164e1891324a50eaf8d015a76f68ee
+  data.tar.gz: c3bba095593a3be49a1af977e5ebaccfb60f07fd94f198ad28c223cffe3ca223
 SHA512:
-  metadata.gz: 5dbcc04fa8b4c8275faeb61791d975788b1e1757d9990afe01ff1194d78ba6b7bbc2b43bda281ae862445f309784c01e4913313013a02816ba06f034e4dff394
-  data.tar.gz: 9843c75e01cb86f33759295241a20d701f826301ba89da3672944c3f1de0a0cd1826053ccc2678ffe6a661a2dc05e3b3f7d85fa2bbd206d1fa594f62c238f86f
+  metadata.gz: '088a81ad02d1db83e08f4d6e847616cd64a1b8568a4b0c098e88cbad51b3fa90c79b23bfff83de8495906b1b6dbe1a8706878bcd7a118f49ced4200581df53b9'
+  data.tar.gz: e9162e6a4804511b979cc9a4e7fb1acd545784063acf15fcc71df58aa1b8cc0f722b8091b36991409211c8c3d6fc0491d899dc1f7e91e3fdc79a868d1c362d8d

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';
@@ -20,5 +21,6 @@
 @import 'custom/sortable';
 @import 'custom/status_indicator';
 @import 'custom/sys_only_functionality';
+@import 'custom/task';
 @import 'custom/tile';
 @import 'custom/video_countdown';

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/_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/_status_indicator.scss

@@ -2,8 +2,8 @@
 .status-indicator {
   position: absolute;
   top: -($spacer * .5);
-  right: -($spacer * .5);
+  left: -($spacer * .5);
   display: block;
   z-index: 100;
   font-size: $font-size-base;
-}
+}

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

@@ -0,0 +1,20 @@
+// Styles related to the task page in DM
+
+.task {
+  &.selected {
+    border-color: $input-focus-border-color;
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+  }
+  &.task-completed {
+    background-color: $body-bg;
+    .media-body {
+      color: $text-muted;
+      [class*='text-'] { color: $text-muted !important; }
+    }
+    .badge {
+      color: $text-muted;
+      background-color: $input-disabled-bg;
+      border-color: $border-color;
+    }
+  }
+}

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,7 +41,7 @@
     }
   }
   li a {
-    color: inherit !important;
+    color: $body-color !important;
     &.re-icon {
       .body-text { font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif !important; }
     }
@@ -52,6 +52,10 @@
   }
 }
 .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;

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

@@ -2,13 +2,19 @@
 @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

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/_grid.scss

@@ -0,0 +1,236 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group grid
+////
+
+/// Default number of columns for an email.
+/// @type Number
+// $grid-column-count: 12 !default;
+
+/// Default padding for the bottom of a column.
+/// @type Number
+// $column-padding-bottom: $global-padding !default;
+
+/// Default border radius for the container. Use a px value
+/// @type Number
+// $container-radius: 0 !default;
+
+// 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,379 @@
+// // Foundation for Emails by ZURB
+// // zurb.com/ink/
+// // Licensed under MIT Open Source
+
+// ////
+// /// @group typography
+// ////
+
+/// Global font color.
+/// @type Color
+$global-font-color: #313A3E;
+
+// /// Global font family.
+// /// @type Font
+// $body-font-family: Helvetica, Arial, sans-serif !default;
+
+// /// Global font weight.
+// /// @type Keyword
+// $global-font-weight: normal !default;
+
+// /// Header color
+// /// @type Color
+// $header-color: inherit !default;
+
+/// Global line height.
+/// @type Number
+$global-line-height: 1.4;
+
+/// Font size of body text.
+/// @type Number
+$global-font-size: 14px;
+
+/// Line height of body text.
+/// @type Number
+$body-line-height: 1.5;
+
+// /// Font family of headings.
+// /// @type List
+// $header-font-family: $body-font-family !default;
+
+// /// Font family of headings.
+// /// @type List
+$header-font-weight: bold;
+
+/// Font size of `<h1>` elements.
+/// @type Number
+$h1-font-size: 30px;
+
+/// Font size of `<h2>` elements.
+/// @type Number
+$h2-font-size: 27px;
+
+/// Font size of `<h3>` elements.
+/// @type Number
+$h3-font-size: 24px;
+
+/// Font size of `<h4>` elements.
+/// @type Number
+$h4-font-size: 20px;
+
+/// Font size of `<h5>` elements.
+/// @type Number
+$h5-font-size: 17px;
+
+/// Font size of `<h6>` elements.
+/// @type Number
+$h6-font-size: 14px;
+
+/// Margin bottom of `<h1>` through `<h6>` elements.
+/// @type Number
+$header-margin-bottom: 0;
+
+/// Margin bottom of paragraphs.
+/// @type Number
+$paragraph-margin-bottom: 0;
+
+// /// Default font size for `<small>`.
+// /// @type Number
+$small-font-size: 12px;
+
+// /// Color of `<small>` elements when placed inside headers.
+// /// @type Color
+// $small-font-color: $medium-gray !default;
+
+// /// Font size of lead paragraphs.
+// /// @type Number
+// $lead-font-size: $global-font-size * 1.25 !default;
+
+// /// Line height of lead paragraphs.
+// /// @type Number
+// $lead-line-height: 160% !default;
+
+// /// Padding inside paragraphs.
+// /// @type Number
+// $text-padding: 10px !default;
+
+// /// Default line height for subheaders.
+// /// @type Number
+// $subheader-lineheight: 1.4 !default;
+
+// /// Default font color for subheaders.
+// /// @type Color
+// $subheader-color: $dark-gray !default;
+
+// /// Default font weight for subheaders.
+// /// @type String
+// $subheader-font-weight: $global-font-weight !default;
+
+// /// Default top margin for subhheaders.
+// /// @type Number
+// $subheader-margin-top: 4px !default;
+
+// /// Default bottom margin for subheaders.
+// /// @type Number
+// $subheader-margin-bottom: 8px !default;
+
+/// Maximum width of a divider.
+/// @type Number
+$hr-width: 100% !default;
+
+/// Default border for a divider.
+/// @type List
+$hr-border: 1px solid $medium-gray;
+
+/// Default margin for a divider.
+/// @type Number | List
+$hr-margin: $global-gutter auto;
+
+// /// Text decoration for anchors.
+// /// @type Keyword
+// $anchor-text-decoration: none !default;
+
+// /// Text color of anchors.
+// /// @type Color
+$anchor-color: $primary-color;
+
+// /// Text color of anchors to visited links.
+// /// @type Color
+$anchor-color-visited: $anchor-color;
+
+// /// Text color of anchors on hover.
+// /// @type Color
+$anchor-color-hover: lighten($primary-color, 10%);
+
+// /// Text color of active anchors.
+// /// @type Color
+// $anchor-color-active: $anchor-color-hover !default;
+
+// /// Default font size for statistic numbers.
+// /// @type Number
+// $stat-font-size: 40px !default;
+
+// /// Removing the iOS telephone and address styling
+// /// @type Boolean
+// $remove-ios-blue: true !default;
+
+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-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: solid 1px $medium-gray; }
+.border-top { border-top: solid 1px $medium-gray; }

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: 4px 6px !important;
+  font-weight: $bold-font-weight;
+  font-size: 12px !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;
+    }
   }
 }
 

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: #8c8c8c; }

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

@@ -17,13 +17,13 @@
 // ---------
 
 $primary-color: #25aceb;
-$secondary-color: #9A9A9A;
+$secondary-color: #70787C;
 $success-color: #59bf22;
 $warning-color: #ffaa00;
 $alert-color: #ff6d33;
-$light-gray: #F7F7F7;
-$medium-gray: #D8D8D8;
-$dark-gray: #4D4D4D;
+$light-gray: #F3F6F8;
+$medium-gray: #C9CED1;
+$dark-gray: #313A3E;
 $black: #000000;
 $white: #ffffff;
 $pre-color: #ff6908;

data/lib/nfg_ui/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.12.11
+  version: 0.12.15
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-16 00:00:00.000000000 Z
+date: 2021-09-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -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
@@ -443,6 +451,7 @@ files:
 - 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
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_sys_only_functionality.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_task.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_tile.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_video_countdown.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/_variables.scss
@@ -541,10 +550,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