nfg_ui 0.9.8.15

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

@@ -0,0 +1,83 @@
+// Required styles
+label {
+  font-weight: $font-weight-bold;
+  &.required {
+    padding-left: ($spacer * .5);
+    &::before{
+      content: '*';
+      color: theme-color("danger");
+      margin-left: -($spacer * .5);
+      padding-right: ($spacer * .25);
+    }
+  }
+}
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-text {
+  font-size: $font-size-sm;
+  line-height: 1.3;
+}
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.form-check-label { font-weight: $font-weight-normal; }
+.form-check-inline { display: inline-block; } // override inline-flex display for better line-height
+
+
+// Form validation
+//
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server side validation.
+
+.valid-feedback,
+.invalid-feedback {
+  line-height: 1.3;
+}
+.valid-tooltip,
+.invalid-tooltip {
+  padding: $tooltip-padding-y $tooltip-padding-x;
+  font-size: $tooltip-font-size;
+  font-weight: $font-weight-bold;
+  line-height: 1.3;
+  border-radius: $tooltip-border-radius;
+}
+
+
+// Inline checkbox/radio validation is a sibling of the form element instead of a child
+.form-group {
+  &.is-valid, &.is-invalid {
+    .form-check, .custom-control {
+      ~ .valid-feedback, ~ .invalid-feedback { display: block; }
+    }
+  }
+}
+
+
+// Sometimes rails likes to say a form control is valid even when it isn't... this helps ensure that
+// When simple_form (accurately) detects an error on the field...
+// that the invalid version wins ... avoiding false readings
+.is-invalid { border-color: $form-feedback-invalid-color !important; }
+
+
+// Styles needed to override :valid success styles provided by bootstrap... this is for server side forms only
+.form-control,
+.custom-select {
+  .was-validated &:valid {
+    border-color: $input-border-color;
+    &:focus { border-color: $input-focus-border-color; }
+  }
+}
+
+.form-check-input {
+  .was-validated &:valid {
+    ~ .form-check-label { color: inherit; }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_list-group.scss

@@ -0,0 +1,12 @@
+// Flush list items
+//
+// Remove borders and border-radius to keep list group items edge-to-edge. Most
+// useful within other components (e.g., cards).
+
+.list-group-flush {
+  .list-group-item {
+    padding-right: 0;
+    padding-left: 0;
+    &:last-child { border-bottom: 0; }
+  }
+}

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

@@ -0,0 +1,9 @@
+// Sizing options
+.progress-sm {
+  height: ($spacer * .5);
+  border-radius: ($spacer * .5);
+}
+.progress-lg {
+  height: ($spacer * 1.5);
+  border-radius: ($spacer * 1.5);
+}

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

@@ -0,0 +1,31 @@
+html { font-size: 62.5%; }
+body {
+  -ms-overflow-style: scrollbar !important;
+  font-smooth: always;
+  -webkit-font-smoothing: antialiased;
+     -moz-font-smoothing: antialiased;
+          font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-size: $font-size-base;
+  @include media-breakpoint-down(md) {
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: auto;
+  }
+}
+
+div { position: relative; } // setting this as a base to avoid improper absolute positioning elements
+
+ol,
+ul,
+dl {
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+img { max-width: 100%; }
+
+// Ensure that .disabled and [disabled] really aren't clickable
+.disabled:not([data-toggle='tooltip']),
+[disabled] {
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}

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

@@ -0,0 +1,5 @@
+// Setting line-height
+.tooltip {
+  font-weight: $font-weight-bold;
+  line-height: 1.3;
+}

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

@@ -0,0 +1,81 @@
+//
+// Headings
+//
+h1, .h1 { line-height: 1; }
+h2, .h2 { line-height: 1.15; }
+h3, .h3 { line-height: 1.1; }
+h4, .h4 { line-height: 1; }
+h5, .h5 { line-height: 1.2; }
+h6, .h6 { line-height: 1.5; }
+
+// Type display classes
+.display-4 {
+  line-height: 1.3;
+  color: $text-muted;
+}
+
+
+//
+// Misc
+//
+.font-size-base { font-size: $font-size-base !important; }
+.font-size-sm {
+  font-size: $font-size-sm !important;
+  line-height: 1.3;
+}
+.font-size-lg { font-size: $font-size-lg !important; }
+.line-height-sm { line-height: $line-height-sm; }
+.line-height { line-height: 1.5; }
+.line-height-lg { line-height: $line-height-lg; }
+
+strong, .strong, b, .b { font-weight: $font-weight-bold; }
+
+a.no-link-color {
+  &, &:visited { color: $body-color !important; }
+
+  &:hover, &:active, &:focus {
+    color: $primary !important;
+    text-decoration: none;
+  }
+}
+
+// Contextual colors
+@each $color, $value in $colors {
+  @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+
+// Adds a background divider to word
+.text-divider {
+  position: relative;
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 0;
+    border-top: $border-width solid $border-color;
+    content: '';
+    z-index: 0;
+  }
+  .text-center, .btn-center { z-index: 10; }
+  .text-center {
+    position: relative;
+    text-align: center;
+    line-height: 1;
+    span {
+      display: inline-block;
+      padding: ($spacer * .25) ($spacer * .5);
+      background-color: $white;
+    }
+  }
+  .btn-center {
+    position: absolute;
+    top: -18px;
+    left: 50%;
+    .btn {
+      position: relative;
+      left: -50%;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+// Remove styles and use bs4 structure and styles once update is final
+
+.admin-bar {
+  position: relative;
+  z-index: 100;
+  font-weight: $font-weight-bold;
+  color: $text-muted;
+  text-transform: uppercase;
+  background-color: $black;
+}
+.admin-bar-descriptor {
+  display: inline-block;
+  padding: ($spacer * .5) 0;
+}
+.admin-bar-main-links a {
+  display: inline-block;
+  padding: ($spacer * .5);
+  color: $white;
+  &:hover, &:active { color: $text-muted; }
+}

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

@@ -0,0 +1,12 @@
+// Background variations for donation form and donation stat cards
+.bg-dark {
+  @include media-breakpoint-down(md) {
+    &.jumbotron, &.card { background-color: $gray-800; }
+  }
+  h1, h2, h3, h4, h5, h6, p, label { color: $white; }
+  .progress { background-color: $gray-600; }
+
+
+  // Styles needed to override :valid success styles provided by bootstrap... this is for server side forms only
+  .was-validated .form-check-input:valid ~ .form-check-label { color: $white; }
+}

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

@@ -0,0 +1,43 @@
+// Styles specific to the everyday default style
+.everyday_default {
+  .jumbotron {
+    &::before {
+      width:100%;
+      height: 100%;
+      -ms-transform-style: preserve-3d;
+      -ms-transform: translate3d(0,0,0);
+      transform: translate3d(0,0,0);
+      position: fixed;
+      content: '';
+      background-repeat: no-repeat;
+      background-size: cover;
+      z-index: 0;
+    }
+    @include media-breakpoint-down(md) {
+      &::before { content: none; }
+      .card {
+        box-shadow: none;
+        border-radius: 0;
+      }
+      .card-body { padding: 0; }
+    }
+  }
+  .progress-stats {
+    position: absolute;
+    top: ($spacer * .25);
+    left: $grid-gutter-width / 2;
+    width: 100%;
+    z-index: 1;
+  }
+
+  &.admin {
+    .jumbotron {
+      &::before { margin-top: 0; }
+    }
+  }
+}
+
+// positioning background image properly in iframe campaign preview
+body.preview.everyday_default{
+  .jumbotron::before { position: absolute; }
+}

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

@@ -0,0 +1,21 @@
+// Styles specific to the everyday story style
+.everyday_story {
+  .jumbotron {
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    @include media-breakpoint-down(md) {
+      background-image: none !important;
+      .card { box-shadow: none; }
+      .card-body { padding: 0; }
+    }
+    @include media-breakpoint-up(lg) { min-height: 500px; }
+  }
+
+  &.admin {
+    .jumbotron {
+      &::before { margin-top: 0; }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+// Styles for legal footer links on campaign pages (bad practice to use ID, so these styles should be switched to inline classes eventually)
+
+#footer_site_links {
+  a {
+    display: inline-block;
+    padding: ($spacer * .5);
+  }
+}

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

@@ -0,0 +1,95 @@
+//
+// Steps
+//
+.nav-steps {
+  .nav-item {
+    position: relative;
+
+
+    // Background connector bar between items
+    &::after {
+      position: absolute;
+      top: (($spacer * .5) - .1rem);
+      left: 50%;
+      width: 100%;
+      height: ($border-width + 1px);
+      background-color: $border-color;
+      content: '';
+      z-index: 0;
+    }
+
+
+    // Removes the background connector bar on the last item
+    &:last-child {
+      &::after { display: none; }
+    }
+
+
+    // Various states
+    &.visited, &.active {
+      .step-indicator {
+        color: $white;
+        background-color: $primary;
+        border-color: $primary;
+      }
+    }
+    &.visited::after { background-color: $primary; }
+    &.disabled {
+      cursor: default;
+      pointer-events: none;
+    }
+
+
+    // Nav-link overrides
+    .nav-link {
+      position: relative;
+      display: inline-block;
+      padding: 0 ($spacer * .25);
+      z-index: 10;
+      &[href] {
+        @include hover-focus {
+          .step-indicator::after { opacity: 1; }
+        }
+      }
+    }
+
+
+    // Circle step indicator uses either integeer or icon
+    .step-indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto;
+      width: $spacer;
+      height: $spacer;
+      font-size: $font-size-sm;
+      font-weight: $font-weight-bold;
+      line-height: 100%;
+      color: $text-muted;
+      background-color: $white;
+      border: ($border-width + 1px) solid $border-color;
+      border-radius: 50%;
+
+
+      // Provides smooth transition for box-shadow
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        box-shadow: 0 0 0 ($spacer * .25) transparentize($primary, 0.5);
+        transition: $transition-fade;
+        opacity: 0;
+        content: '';
+      }
+    }
+  }
+
+
+  // Flex fix for equal width items
+  &.nav-fill .nav-item { flex-basis: 0; }
+}

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

@@ -0,0 +1,110 @@
+// Slat and its child elements
+.slat {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+
+// Body Column
+.slat-body {
+  display: flex;
+  flex-flow: row wrap;
+  flex: 1 0 0;
+  margin-right: -($grid-gutter-width * .5);
+  margin-left: -($grid-gutter-width * .5);
+  width: 100%;
+  .slat-item {
+    flex: 1 0 0;
+    padding-right: ($grid-gutter-width * .5);
+    padding-left: ($grid-gutter-width * .5);
+    width: 100%;
+    max-width: 100%;
+    min-height: 1px;
+    &:first-child {
+      flex-grow: 2;
+
+      // Sizing options
+      &.slat-item-sm { flex-grow: 0; }
+      &.slat-item-lg { flex-grow: 6; }
+    }
+  }
+}
+
+
+// Action Column
+.slat-actions {
+  padding-left: ($grid-gutter-width * .5);
+  flex: 0 0 ($spacer * 1.5);
+  width: auto;
+  max-width: none;
+  text-align: right;
+  @include media-breakpoint-up(sm) { flex-basis: ($spacer * 6); }
+
+
+  // Sizing options
+  &.slat-actions-sm { flex-basis: ($spacer * 1.5); }
+  &.slat-actions-lg { flex-basis: ($spacer * 12); }
+}
+
+
+// Slat header
+.slat-header {
+  padding-bottom: ($spacer * .5);
+  .slat-body { align-items: center; }
+}
+
+
+// Slat list layout
+.slat-list {
+  .slat {
+    padding-top: ($spacer * .5);
+    padding-bottom: ($spacer * .5);
+
+
+    // Various states
+    &.ui-sortable-placeholder {
+      visibility: visible !important;
+      background: theme-color("light");
+      border: $border-width dashed $border-color;
+      + .slat { border-top: none; }
+      + &.ui-sortable-helper {
+        border-top-style: dashed;
+        + &.slat { border-top: none; }
+      }
+    }
+    &.ui-sortable-helper {
+      border-top: none;
+      opacity: .5;
+      border-top: none;
+      + &.ui-sortable-placeholder { border-top: $border-width dashed $border-color; }
+    }
+  }
+
+
+  // Sizing options
+  &.slat-list-sm {
+    .slat {
+      padding-top: ($spacer * .25);
+      padding-bottom: ($spacer * .25);
+    }
+  }
+  &.slat-list-lg {
+    .slat {
+      padding-top: $spacer;
+      padding-bottom: $spacer;
+    }
+  }
+
+
+  // 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) {
+          flex-basis: 100%;
+          margin-bottom: $spacer;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+// Helper colors used for social media links, text, and backgrounds
+
+$facebook:      #3b5998 !default;
+$twitter:       #1da1f2 !default;
+$linkedin:      #0077b5 !default;
+$pinterest:     #bd081c !default;
+
+$social-media-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$social-media-colors: map-merge(
+  (
+    "facebook":     $facebook,
+    "twitter":      $twitter,
+    "linkedin":     $linkedin,
+    "pinterest":    $pinterest
+  ),
+  $social-media-colors
+);
+
+
+// Buttons
+@each $color, $value in $social-media-colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $social-media-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+
+// Text
+@each $color, $value in $social-media-colors {
+  @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+
+// Backgrounds
+@each $color, $value in $social-media-colors {
+  @include bg-variant(".bg-#{$color}", $value);
+}

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

@@ -0,0 +1,12 @@
+// Styles specific to the ticket experience
+.ticket-guest {
+  padding: $spacer ($spacer * .5);
+  border-radius: $border-radius;
+  box-shadow: $box-shadow-sm;
+  @include transition(box-shadow .4s ease-in-out, padding .3s ease-in-out); // animation for active/inactive ticket guest rows
+  &.disabled {
+    opacity: .4;
+    pointer-events: none;
+  }
+}
+.ticket-guest-row { @include transition(box-shadow .1s ease-in-out, padding .3s ease-in-out); } // corresponding animation for active/inactive ticket guest rows

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

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

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

@@ -0,0 +1,33 @@
+// Styles specific for the new user navbar on everyday_story and everyday_classic_style layouts
+
+$navbar-logo-height: (($spacer * 4.5) - ($navbar-padding-y * 2));
+
+.navbar-brand {
+  margin-right: 0;
+  padding: $navbar-padding-y 0;
+  max-width: ($spacer * 8);
+  height: $navbar-logo-height;
+  white-space: normal !important;
+  @include media-breakpoint-up(lg) { max-width: ($spacer * 12); }
+  img {
+    max-width: ($spacer * 8);
+    max-height: $navbar-logo-height;
+    @include media-breakpoint-up(lg) { max-width: ($spacer * 12); }
+  }
+}
+.navbar-text {
+  margin-left: $navbar-padding-x;
+  padding-left: $navbar-padding-x;
+  border-left: $border-width solid $border-color;
+}
+.sticky-div {
+  box-shadow: $box-shadow-sm;
+  .btn-header-donate {
+    opacity: 0;
+    transition: $transition-base;
+  }
+  &.stuck {
+    box-shadow: $box-shadow;
+    .btn-header-donate { opacity: 1; }
+  }
+}