nfg_ui 0.9.8.15

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

@@ -0,0 +1,54 @@
+// Navbar
+
+.navbar {
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+  -ms-flex-align: center;
+  -ms-flex-pack: justify;
+
+  > .container,
+  > .container-fluid {
+    display: -ms-flexbox;
+    -ms-flex-wrap: wrap;
+    -ms-flex-align: center;
+    -ms-flex-pack: justify;
+  }
+}
+
+// Navbar nav
+
+.navbar-nav {
+  display: -ms-flexbox;
+  -ms-flex-direction: column;
+}
+
+// Responsive navbar
+.navbar-collapse {
+  -ms-flex-preferred-size: 100%;
+  -ms-flex-positive: 1;
+  -ms-flex-align: center;
+}
+
+
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+.navbar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-up($next) {
+        -ms-flex-direction: row;
+        -ms-flex-wrap: none;
+        -ms-flex-pack: start;
+        .navbar-nav { -ms-flex-direction: row; }
+        > .container, > .container-fluid { -ms-flex-wrap: none; }
+        .navbar-collapse {
+          display: -ms-flexbox !important;
+          -ms-flex-preferred-size: auto;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_pagination.scss

@@ -0,0 +1 @@
+.pagination { display: -ms-flexbox; }

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_progress.scss

@@ -0,0 +1,6 @@
+.progress { display: -ms-flexbox; }
+.progress-bar {
+  display: -ms-flexbox;
+  -ms-flex-direction: column;
+  -ms-flex-pack: center;
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_utilities.scss

@@ -0,0 +1,2 @@
+@import "utilities/display";
+@import "utilities/flex";

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

@@ -0,0 +1,8 @@
+// IE 10 & 11 suppport styles for EDGP public pages
+// located in _custom.scss which is called in legacy_browser_support/application.css
+.everyday_default,
+.everyday_story {
+  &.preview {
+    .jumbotron::before { top: 0; }
+  }
+}

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

@@ -0,0 +1,13 @@
+//
+// Steps
+//
+.nav-steps {
+  .nav-item {
+    .step-indicator {
+      display: -ms-flexbox;
+      -ms-flex-align: center;
+      -ms-flex-pack: center;
+    }
+  }
+  &.nav-fill .nav-item { -ms-flex-preferred-size: 0; }
+}

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

@@ -0,0 +1,66 @@
+// Slat and its child elements
+.slat {
+  display: -ms-flexbox;
+  -ms-flex-direction: row;
+  -ms-flex-wrap: wrap;
+}
+
+.slat-body {
+  display: -ms-flexbox;
+  -ms-flex-direction: row;
+  -ms-flex-wrap: wrap;
+  -ms-flex-positive: 1;
+  -ms-flex-negative: 0;
+  -ms-flex-preferred-size: 0;
+
+  .slat-item {
+    -ms-flex-positive: 1;
+    -ms-flex-negative: 0;
+    -ms-flex-preferred-size: 0;
+    &:first-child {
+      -ms-flex-positive: 2;
+
+      // Sizing options
+      &.slat-item-sm { -ms-flex-positive: 0; }
+      &.slat-item-lg { -ms-flex-positive: 6; }
+    }
+  }
+}
+
+.slat-actions {
+  -ms-flex-positive: 0;
+  -ms-flex-negative: 0;
+  -ms-flex-preferred-size: ($spacer * 1.5);
+  min-width: ($spacer * 1.5);
+  @include media-breakpoint-up(sm) {
+    -ms-flex-preferred-size: ($spacer * 6);
+    min-width: ($spacer * 6);
+  }
+
+
+  // Sizing options
+  &.slat-actions-sm { -ms-flex-preferred-size: ($spacer * 1.5); }
+  &.slat-actions-lg { -ms-flex-preferred-size: ($spacer * 12); }
+}
+
+
+// Slat header
+.slat-header {
+  .slat-body { -ms-flex-align: center; }
+}
+
+
+// Slat list layout
+.slat-list {
+
+  // Non-breaked version -- used when the goal is to have all slat-item columns on the same line in smaller screens
+  &:not(.slat-list-no-break) {
+    .slat-item {
+      &:first-child {
+        @include media-breakpoint-down(sm) {
+          -ms-flex-preferred-size: 100%;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/mixins/_breakpoints.scss

@@ -0,0 +1,123 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/mixins/_grid-framework.scss

@@ -0,0 +1,30 @@
+// Stripped out additional styles not needed for flexbox support from original mixins/grid-framework.scss
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .col#{$infix} {
+        -ms-flex-preferred-size: 0;
+        -ms-flex-positive: 1;
+      }
+      .col#{$infix}-auto {
+        -ms-flex: 0 0 auto;
+      }
+
+      @for $i from 1 through $columns {
+        .col#{$infix}-#{$i} {
+          @include make-col($i, $columns);
+        }
+      }
+
+      .order#{$infix}-first { -ms-flex-order: -1; }
+      .order#{$infix}-last { -ms-flex-order: $columns + 1; }
+
+      @for $i from 0 through $columns {
+        .order#{$infix}-#{$i} { -ms-flex-order: $i; }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/mixins/_grid.scss

@@ -0,0 +1,10 @@
+// Stripped out additional styles not needed for flexbox support from original mixins/grid.scss
+
+@mixin make-row() {
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+  -ms-flex: 0 0 percentage($size / $columns);
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/utilities/_display.scss

@@ -0,0 +1,9 @@
+// Utilities for common `display` values
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .d#{$infix}-flex         { display: -ms-flexbox !important; }
+    .d#{$infix}-inline-flex  { display: -ms-inline-flexbox !important; }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/utilities/_flex.scss

@@ -0,0 +1,49 @@
+// Flex variation
+//
+// Custom styles for additional flex alignment options.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .flex#{$infix}-row            { -ms-flex-direction: row !important; }
+    .flex#{$infix}-column         { -ms-flex-direction: column !important; }
+    .flex#{$infix}-row-reverse    { -ms-flex-direction: row-reverse !important; }
+    .flex#{$infix}-column-reverse { -ms-flex-direction: column-reverse !important; }
+
+    .flex#{$infix}-wrap         { -ms-flex-wrap: wrap !important; }
+    .flex#{$infix}-nowrap       { -ms-flex-wrap: none !important; }
+    .flex#{$infix}-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; }
+    .flex#{$infix}-fill         { -ms-flex: 1 1 auto !important; }
+    .flex#{$infix}-grow-0       { -ms-flex-positive: 0 !important; }
+    .flex#{$infix}-grow-1       { -ms-flex-positive: 1 !important; }
+    .flex#{$infix}-shrink-0     { -ms-flex-negative: 0 !important; }
+    .flex#{$infix}-shrink-1     { -ms-flex-negative: 1 !important; }
+
+    .justify-content#{$infix}-start   { -ms-flex-pack: start !important; }
+    .justify-content#{$infix}-end     { -ms-flex-pack: end !important; }
+    .justify-content#{$infix}-center  { -ms-flex-pack: center !important; }
+    .justify-content#{$infix}-between { -ms-flex-pack: justify !important; }
+    .justify-content#{$infix}-around  { -ms-flex-pack: distribute !important; }
+
+    .align-items#{$infix}-start    { -ms-flex-align: start !important; }
+    .align-items#{$infix}-end      { -ms-flex-align: end !important; }
+    .align-items#{$infix}-center   { -ms-flex-align: center !important; }
+    .align-items#{$infix}-baseline { -ms-flex-align: baseline !important; }
+    .align-items#{$infix}-stretch  { -ms-flex-align: stretch !important; }
+
+    .align-content#{$infix}-start   { -ms-flex-line-pack: start !important; }
+    .align-content#{$infix}-end     { -ms-flex-line-pack: end !important; }
+    .align-content#{$infix}-center  { -ms-flex-line-pack: center !important; }
+    .align-content#{$infix}-between { -ms-flex-line-pack: space-between !important; }
+    .align-content#{$infix}-around  { -ms-flex-line-pack: space-around !important; }
+    .align-content#{$infix}-stretch { -ms-flex-line-pack: stretch !important; }
+
+    .align-self#{$infix}-auto     { -ms-flex-item-align: auto !important; }
+    .align-self#{$infix}-start    { -ms-flex-item-align: start !important; }
+    .align-self#{$infix}-end      { -ms-flex-item-align: end !important; }
+    .align-self#{$infix}-center   { -ms-flex-item-align: center !important; }
+    .align-self#{$infix}-baseline { -ms-flex-item-align: baseline !important; }
+    .align-self#{$infix}-stretch  { -ms-flex-item-align: stretch !important; }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/plugins/_sticky_div.scss

@@ -0,0 +1,9 @@
+// IE 10 & 11 suppport styles
+[data-toggle='sticky-div'] {
+  &.stuck {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+}

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

@@ -0,0 +1,2 @@
+// Custom type color
+.alert { color: $body-color; }

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

@@ -0,0 +1,17 @@
+// Custom secondary button usage
+.btn-outline-secondary {
+  color: $primary;
+  background-color: $white;
+  border-color: $border-color;
+  &:hover {
+    color: $primary;
+    background-color: $body-bg;
+  }
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: $primary;
+    background-color: $body-bg;
+  }
+}
+.btn-link { font-weight: $btn-font-weight; }

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

@@ -0,0 +1,6 @@
+//
+// Base styles
+//
+.card { box-shadow: $box-shadow-sm; }
+
+.card-title { margin-bottom: ($card-spacer-y * .5); }

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

@@ -0,0 +1,9 @@
+// Optional indicator pips
+//
+// Add an unordered list with the following class and add a list item for each
+// slide your carousel holds.
+
+.carousel-indicators {
+  bottom: 0;
+  li { border-radius: 50%; }
+}

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

@@ -0,0 +1,12 @@
+// Our custom styles
+@import 'custom/admin_bar';
+@import 'custom/background_variations';
+@import 'custom/everyday_default';
+@import 'custom/everyday_story';
+@import 'custom/footer_links';
+@import 'custom/nav_step';
+@import 'custom/slat';
+@import 'custom/social_share';
+@import 'custom/ticket';
+@import 'custom/tile';
+@import 'custom/user_navbar';

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

@@ -0,0 +1,156 @@
+// Checkboxes and radios
+//
+// Base class takes care of all the key behavioral aspects.
+
+.custom-control {
+  .custom-control-input {
+    &:checked {
+      ~ .custom-control-label,
+      ~ .custom-control-label::before { border-color: $input-focus-border-color; }
+    }
+    &:focus:not(:checked) ~ .custom-control-label::before { border-color: $input-border-color; }
+  }
+}
+
+// Custom control indicators
+//
+// Build the custom controls out of pseudo-elements.
+
+.custom-control-label {
+  font-weight: $font-weight-normal;
+
+  // Background-color and icon
+  &::before, &::after { top: .3rem; }
+  &::before { border: $border-width solid $border-color; }
+  &::after { cursor: pointer; }
+}
+
+// Radios
+//
+// Tweak just a few things for radios.
+
+.custom-radio {
+  .custom-control-label::after { background-size: 45% 45%; }
+}
+
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// https://primer.github.io/.
+//
+
+.custom-select {
+  font-weight: $btn-font-weight;
+  cursor: pointer;
+  box-shadow: none;
+}
+
+// File
+//
+// Custom file input.
+
+.custom-file-label {
+  font-weight: $font-weight-normal;
+  cursor: pointer;
+  border-radius: 0 $btn-border-radius $btn-border-radius 0;
+  overflow: hidden;
+  &::after {
+    font-weight: $btn-font-weight;
+    border-radius: 0 $btn-border-radius $btn-border-radius 0;
+  }
+}
+
+
+// Block
+//
+// Custom control block (ex: for images)
+.custom-control-block {
+  padding: 0;
+  .custom-control-label {
+    margin-bottom: 0;
+    padding: ($spacer * .5) ($spacer * .5) ($spacer * 1.5);
+    border: $border-width solid $border-color;
+    border-radius: $border-radius;
+    cursor: pointer;
+    transition: $transition-base;
+    &:hover { border-color: $gray-600; }
+    &::before, &::after {
+      top: auto;
+      left: 50%;
+      bottom: ($spacer * .5);
+      margin-left: -9px;
+    }
+  }
+}
+
+// Without radio or checkbox indicator
+.custom-control-block:not(.custom-radio):not(.custom-checkbox) {
+  .custom-control-label {
+    padding: ($spacer * .5);
+    &::before, &::after { display: none; }
+  }
+}
+
+// switches
+//
+// Tweak a few things for switches
+
+.custom-switch {
+  .custom-control-label {
+    &::before {
+      padding-left: 28px;
+      font-size: 12px;
+      line-height: 16px;
+      color: $text-muted;
+      font-family: "FontAwesome";
+      content: "\f00d";
+      background-color: $body-bg;
+    }
+    &::after {
+      top: 0;
+      left: -($custom-switch-width + $custom-control-gutter);
+      background-color: $white;
+      border: $border-width solid $border-color;
+      border-radius: 50%;
+      @include transition(transform .15s ease-in-out, $custom-forms-transition);
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      border-color: $input-focus-border-color;
+      transform: translateX($custom-switch-width - $custom-switch-indicator-size);
+    }
+    &::before {
+      content: "";
+      background-repeat: no-repeat;
+      background-size: 30%;
+      background-position: 6px 1px;
+      background-image: $custom-checkbox-indicator-icon-checked;
+      background-color: $custom-control-indicator-checked-bg;
+      border-color: $input-focus-border-color;
+    }
+  }
+}
+
+
+// Styles needed to override :valid success styles provided by bootstrap... this is for server side forms only
+.custom-control-input {
+  .was-validated &:valid {
+    ~ .custom-control-label {
+      color: inherit;
+      &::before { background-color: inherit; }
+    }
+    &:checked {
+      ~ .custom-control-label::before {
+        background-color: $custom-control-indicator-checked-bg;
+      }
+    }
+  }
+}
+
+.custom-file-input {
+  .was-validated &:valid {
+    ~ .custom-file-label { border-color: $custom-file-border-color; }
+  }
+}

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

@@ -0,0 +1 @@
+.dropdown-toggle::after { content: none; }

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

@@ -0,0 +1,19 @@
+// Styles specific to the everyday default style
+.event {
+  .jumbotron {
+    height: auto;
+    @include border-radius(0);
+    background-repeat:no-repeat;
+    background-size: cover;
+    &:before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 0;
+      background-color: transparentize(#000, 0.7);
+      content: '';
+    }
+  }
+}