nfg_ui 0.12.14 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 60875d5aa3ea456c24da466c6a9c424697bf2ead1cafc1ea2fc75e98fbc8e485
-  data.tar.gz: 7bc521886ce98d98619f3739493dd7efa2018f24309de68d641eae3b29f50398
+  metadata.gz: 8235aa4af7843ba006e8caae070d20f87561c6d39db6dda7acc0f86c5bb2a54f
+  data.tar.gz: b2cda42305a691eba3bfc4351851b1dd21d753b8b6e162f1bb7229036d5c1eb7
 SHA512:
-  metadata.gz: d5a81f8a7c78e15e311efeaa54fe2563267390243a9d6e7c7c9f3c2e40e3331648ddd51d93c5c841223f54b411e83bad435b1f0c7b24e1d887b6bca0f95c50d9
-  data.tar.gz: 1ff27c8b7276506d41987310bbc84618a4a9fe9fab5ccc86024e73db8be820d2f0e2a764c5862e8f134baab07112220ef3926dcbb1d5cd89a62896af6848ede5
+  metadata.gz: 0e9a5cc6430ecdef3e4090ff685d8455fd5ac6d6291052bca66e8715d7817484db14a014a635ff6b52f0350cb1a1cfdfb42b5a725d4e7cc8c030ea878fc0d81f
+  data.tar.gz: b94dd4c453cec22475b90ca00faf7cb6d19646c8e3e2386b037f38925fe78073eb73a73ce8e3642620feb69d3992690b554b6564d1ee5c2a2f0bab01872d1d8d

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

@@ -16,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/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/_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
@@ -296,7 +296,7 @@ $font-family-sans-serif:      "Open Sans", "Helvetica Neue", Arial, sans-serif;
 // stylelint-enable value-keyword-case
 
 $font-size-base:              1.6rem; // Root font size is 62.5% to make calculations to REM 10 point based
-// $font-size-lg:                ($font-size-base * 1.25) !default;
+$font-size-lg:                ($font-size-base * 1.25);
 $font-size-sm:                ($font-size-base * .875);
 
 // $font-weight-lighter:         lighter !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
@@ -1072,10 +1072,10 @@ $breadcrumb-active-color:           $text-muted;
 
 // Carousel
 
-// $carousel-control-color:             $white !default;
-// $carousel-control-width:             15% !default;
-$carousel-control-opacity:           .3;
-// $carousel-control-hover-opacity:     .9 !default;
+$carousel-control-color:             $white;
+$carousel-control-width:             ($spacer * 1.5);
+$carousel-control-opacity:           .5;
+$carousel-control-hover-opacity:     .9;
 // $carousel-control-transition:        opacity .15s ease !default;
 
 $carousel-indicator-width:           ($spacer * .5);
@@ -1088,10 +1088,12 @@ $carousel-indicator-transition:      $text-muted;
 // $carousel-caption-width:             70% !default;
 // $carousel-caption-color:             $white !default;
 
-// $carousel-control-icon-width:        20px !default;
+$carousel-control-icon-width:        $spacer;
 
-// $carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
-// $carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
+// $carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
+// $carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
+$carousel-control-prev-icon-bg:      '\f0d9';
+$carousel-control-next-icon-bg:      '\f0da';
 
 // $carousel-transition-duration:       .6s !default;
 // $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

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

@@ -1,3 +1,5 @@
+$carousel-thumbnail-size: ($spacer * 2.5); // 80px
+
 .carousel-item { -ms-flex-align: center; }
 
 // Left/right controls for nav
@@ -15,4 +17,30 @@
   display: -ms-flexbox;
   -ms-flex-pack: center;
   li { -ms-flex: 0 1 auto; }
-}
+}
+
+
+// Carousels that have a fixed aspect ratio height
+.carousel-fixed-height {
+  .carousel-item {
+    display: -ms-flexbox;
+    -ms-flex-align: center;
+    -ms-flex-pack: center;
+  }
+}
+
+
+// Carousels that use image thumbnails for indicators
+.carousel-has-thumbnails {
+  .carousel-indicators {
+    @include media-breakpoint-down(lg) {
+      -ms-flex-pack: start;
+    }
+    li {
+      @include media-breakpoint-down(lg) {
+        -ms-flex-negative: 0;
+        -ms-flex-preferred-size: $carousel-thumbnail-size;
+      }
+    }
+  }
+}

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

@@ -45,7 +45,7 @@
     &.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;
     }
@@ -72,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,10 +1,19 @@
+//** 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/backgrounds";
 @import "nfg_theme/borders";
@@ -16,21 +25,19 @@
 @import "nfg_theme/text_colors";
 @import "nfg_theme/typography";
 
-
 // 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/_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

@@ -6,18 +6,6 @@
 /// @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 {

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

@@ -1,158 +1,6 @@
-// // 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;
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
 
 body,
 table.body,
@@ -354,6 +202,7 @@ span.preheader {
 }
 
 ul, ol{
+  margin-top: 0;
   margin-bottom: $paragraph-margin-bottom;
 }
 

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

@@ -1,2 +1,2 @@
-.border { border: solid 1px $medium-gray; }
-.border-top { border-top: solid 1px $medium-gray; }
+.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

@@ -1,8 +1,8 @@
 // Styles specific for content section links
 .cs-edit, .cs-rm-group, .cs-add-group {
-  padding: 4px 6px !important;
+  padding: 0.5rem 0.8rem !important;
   font-weight: $bold-font-weight;
-  font-size: 12px !important;
+  font-size: 14px !important;
   line-height: 1;
 }
 

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

@@ -19,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/_typography.scss

@@ -3,4 +3,4 @@
 .text-warning { color: $warning-color; }
 .text-alert { color: $alert-color; }
 .text-white { color: $white; }
-.text-muted { color: #8c8c8c; }
+.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: #70787C;
-$success-color: #59bf22;
-$warning-color: #ffaa00;
-$alert-color: #ff6d33;
-$light-gray: #F3F6F8;
-$medium-gray: #C9CED1;
-$dark-gray: #313A3E;
-$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/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_carousel.scss

@@ -1,9 +1,185 @@
+$carousel-fixed-height: (3 / 4); // 4:3 aspect ratio
+$carousel-thumbnail-size: ($spacer * 2.5); // 80px
+
+//
+// Left/right controls for nav
+//
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  width: 100%;
+  background: none;
+  background-image: none;
+  &::before, &::after {
+    position: absolute;
+    top: -($carousel-control-icon-width * .5);
+    left: ($spacer * .25);
+    display: block;
+    margin: auto;
+    width: $carousel-control-icon-width;
+    height: $carousel-control-icon-width;
+    content: '';
+  }
+  &::before {
+    background-color: $white;
+    border-radius: 50%;
+    z-index: 1;
+    box-shadow: $box-shadow-sm;
+  }
+  &::after {
+    font-family: "FontAwesome";
+    font-size: $font-size-lg;
+    line-height: $carousel-control-icon-width;
+    color: $body-color;
+    text-align: center;
+    z-index: 10;
+  }
+}
+.carousel-control-prev-icon {
+  &:after {
+    padding-right: 2px;
+    content: $carousel-control-prev-icon-bg;
+  }
+}
+.carousel-control-next-icon {
+  &:after {
+    padding-left: 2px;
+    content: $carousel-control-next-icon-bg;
+  }
+}
+
+
 // Optional indicator pips
 //
-// Add an unordered list with the following class and add a list item for each
+// Add an ordered list with the following class and add a list item for each
 // slide your carousel holds.
-
 .carousel-indicators {
-  bottom: 0;
   li { border-radius: 50%; }
 }
+
+
+// Carousels that have a fixed aspect ratio height
+.carousel-fixed-height {
+  width: 100%;
+  .carousel-inner {
+    &::before {
+      display: block;
+      content: "";
+      width: 100%;
+      padding-top: $carousel-fixed-height * 100%;
+    }
+  }
+  .carousel-item {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    float: none; // overrides BS carousel defaults
+    margin-right: 0; // overrides BS carousel defaults
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    overflow: hidden;
+    @include transition($transition-fade);
+    &.active.carousel-item-left,
+    &.active.carousel-item-right {
+      @include transition($transition-fade); // overrides BS carousel defaults
+    }
+    img { // keeps image scaled proportionally
+      width: auto !important;
+      min-width: 0px !important;
+      max-width: 100%;
+      height: 100% !important;
+      max-height: 100%;
+      margin: auto;
+    }
+  }
+}
+
+
+// Carousels that use image thumbnails for indicators
+.carousel-has-thumbnails {
+  @include media-breakpoint-up(lg) { padding-left: ($spacer * 3.5); }
+  .carousel-inner {
+    border: $border-width solid $border-color;
+    border-radius: $border-radius;
+  }
+  .carousel-indicators {
+    margin: 0;
+    @include media-breakpoint-down(lg) {
+      justify-content: flex-start;
+      position: relative;
+      right: auto;
+      bottom: auto;
+      left: auto;
+      margin-top: ($spacer * .5);
+      width: 100%;
+      height: $carousel-thumbnail-size;
+      overflow-x: auto;
+      overflow-y: hidden;
+      @include clearfix();
+    }
+    @include media-breakpoint-up(lg) {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: auto;
+      left: 0;
+      width: auto;
+      height: 100%;
+      margin-top: 0;
+      overflow-y: auto;
+    }
+    li {
+      position: relative;
+      width: $carousel-thumbnail-size;
+      height: $carousel-thumbnail-size;
+      text-indent: 0;
+      text-align: center;
+      background-color: transparent;
+      border-top: none;
+      border-bottom: none;
+      box-sizing: border-box;
+      border-radius: $border-radius;
+      overflow: hidden;
+      opacity: .4;
+      @include media-breakpoint-down(lg) {
+        flex-shrink: 0;
+        flex-basis: $carousel-thumbnail-size;
+        margin: 0 ($spacer * .25) 0 0;
+      }
+      @include media-breakpoint-up(lg) { margin: 0 0 ($spacer * .25); }
+      &::before {
+        display: block;
+        content: "";
+        width: 100%;
+        padding-top: $carousel-fixed-height * 100%;
+      }
+      &.active {
+        border: $border-width solid $border-color;
+        opacity: 1;
+      }
+      img { // keeps image scaled proportionally
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: auto !important;
+        min-width: 0px !important;
+        max-width: 100%;
+        height: 100% !important;
+        max-height: 100%;
+        margin: auto;
+      }
+    }
+  }
+}

data/lib/nfg_ui/bootstrap/components/carousel.rb

@@ -6,6 +6,11 @@ module NfgUi
       # Bootstrap Carousel Component
       # https://getbootstrap.com/docs/4.1/components/carousel/
       class Carousel < NfgUi::Bootstrap::Components::Base
+        # Turn on or off auto scrolling carousel
+        def auto
+          options.fetch(:auto, true)
+        end
+
         def component_family
           :carousel
         end
@@ -15,7 +20,10 @@ module NfgUi
         end
 
         def data
-          super.merge!(ride: 'carousel')
+          # false on auto means that the carousel should not automatically rotate.
+          data_val = auto == false ? { interval: 'false' } : { ride: 'carousel' }
+
+          super.merge!(**data_val)
         end
 
         def indicators

data/lib/nfg_ui/bootstrap/components/carousel_item.rb

@@ -16,10 +16,23 @@ module NfgUi
           :carousel
         end
 
+        def data
+          return super unless interval
+          super.merge!(interval: interval)
+        end
+
         def image
           options.fetch(:image, nil)
         end
 
+        # manually pass in an interval numerical value
+        # which translates to miliseconds between carousel item
+        # slide transitions.
+        # ex: interval: 5000
+        def interval
+          options[:interval] || nil
+        end
+
         def label
           options.fetch(:label, nil)
         end
@@ -41,7 +54,8 @@ module NfgUi
         def non_html_attribute_options
           super.push(:image,
                      :caption,
-                     :label)
+                     :label,
+                     :interval)
         end
       end
     end

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

@@ -13,26 +13,23 @@ module NfgUi
 
         def render
           content_tag(:div, html_options) do
-            content_tag(:div, class: carousel_inner_css_classes) do
-              concat((block_given? ? yield : body))
-              if controls
-                concat(NfgUi::Components::Elements::CarouselControl.new({ control: :next, carousel: "##{id}" }, view_context).render)
-                concat(NfgUi::Components::Elements::CarouselControl.new({ control: :prev, carousel: "##{id}" }, view_context).render)
-              end
-              if indicators > 0
-                concat(NfgUi::Components::Elements::CarouselIndicators.new({ count: indicators, carousel: "##{id}" }, view_context).render)
+            concat(
+              content_tag(:div, class: 'carousel-inner') do
+                concat((block_given? ? yield : body))
               end
+            )
+            if controls
+              concat(NfgUi::Components::Elements::CarouselControl.new({ control: :next, carousel: "##{id}" }, view_context).render)
+              concat(NfgUi::Components::Elements::CarouselControl.new({ control: :prev, carousel: "##{id}" }, view_context).render)
+            end
+            if indicators > 0
+              concat(NfgUi::Components::Elements::CarouselIndicators.new({ count: indicators, carousel: "##{id}" }, view_context).render)
             end
           end
         end
 
-        private
-
-        def carousel_inner_css_classes
-          [
-            'carousel-inner',
-            ('pb-3' if indicators > 0)
-          ].join(' ').squish
+        def non_html_attribute_options
+          super.push(:auto)
         end
       end
     end

data/lib/nfg_ui/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.12.14
+  version: 0.13.0
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-09-23 00:00:00.000000000 Z
+date: 2021-10-20 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
@@ -446,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

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; }
-}