nfg_ui 0.9.8.15

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

@@ -0,0 +1,25 @@
+// Iframed preview of campaign page on project overview
+.responsive-iframe-container {
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    z-index:1;
+    top:0;
+    left: 0;
+    right:0;
+    bottom: 0;
+  }
+}
+.responsive-iframe {
+  min-height: 400px;
+  position: relative;
+  z-index: 0;
+  -moz-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  border: 0;
+}

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

@@ -0,0 +1,11 @@
+// Styles for content section buttons
+.cs-edit, .cs-btn-group {
+  position: absolute;
+  top: -($spacer * .25);
+  left: -($spacer * .25);
+}
+.cs-edit, .cs-rm-group, .cs-add-group {
+  opacity: 0.8;
+  z-index: 100;
+  &:hover { opacity: 1; }
+}

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

@@ -0,0 +1,84 @@
+$questionnaire-h: 280px;
+$questionnaire-vh: 30vh;
+
+// Question List
+#question_bank_list .btn { transition: background-color 0.3s ease-in-out !important; }
+.question-bank-question {
+  background-color: $body-bg;
+  border-radius: $border-radius;
+  &.disabled .btn {
+    background-color: theme-color("secondary");
+    border-color: theme-color("secondary");
+    opacity: $btn-disabled-opacity;
+    cursor: not-allowed;
+  }
+}
+.questionnaire-overflow {
+  position: relative;
+  &:before, &:after {
+    position: absolute;
+    left: 0;
+    right: $spacer;
+    content: '';
+    z-index: 20;
+  }
+  &:before {
+    top: 0;
+    height: ($spacer * .5);
+    @include gradient-y(transparentize($white, 0), transparentize($white, 1));
+  }
+  &:after {
+    bottom: 0;
+    height: $spacer;
+    @include gradient-y(transparentize($white, 1), transparentize($white, 0));
+  }
+}
+.questionnaire-overflow-scroll {
+  position: relative;
+  min-height: $questionnaire-h;
+  min-height: $questionnaire-vh;
+  max-height: 50vh;
+  overflow-y: scroll;
+}
+
+// Dropzone Section
+#questionnaire_question_list {
+  min-height: $questionnaire-h;
+  min-height: $questionnaire-vh;
+}
+.dragging-over {
+  background-color: $gray-300;
+  transition: $transition-base;;
+  .dropzone, .dropzone-sm {
+    background-color: $gray-300;
+    border-color: $gray-800;
+    + div[style*="height: 38px;"] { display: none; } // removes pesky spacing (provided by drag/drop plugin that calculates the height of the button) at bottom of dropzone
+  }
+}
+.dropzone {
+  min-height: $questionnaire-h;
+  min-height: $questionnaire-vh;
+  background-color: $body-bg;
+  border: $border-width dashed $gray-600;
+  border-radius: $border-radius;
+  transition: $transition-base;
+  &.dropzone-sm { min-height: 0; }
+}
+
+// Question Interactions
+.questionnaire-question {
+  .form-group {
+    border: $border-width solid $white;
+    transition: $transition-base;
+    &:hover, &:focus {
+      background-color: theme-color("light");
+      border: $border-width dashed $gray-600;
+      cursor: move;
+    }
+    &[style*="position: fixed;"] {
+      background-color: theme-color("light");
+      border: $border-width dashed $gray-800;
+      box-shadow: $box-shadow;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+[data-describe='custom_receipt_language_for_body'],
+[data-describe='custom_receipt_language_for_email_subject'],
+.content-muted {
+  position: relative;
+  display: block;
+  padding: ($spacer * .25) ($spacer * .5);
+  border: dashed 2px $gray-200;
+}
+
+[data-describe='custom_receipt_language_for_body'] + hr { display: none; }
+
+.content-muted {
+  color: $text-muted;
+  background-color: $body-bg;
+}

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

@@ -0,0 +1,24 @@
+// Wrap an email preview in .email-preview to overwrite the necessary bs4 css classes
+// with the email's look and feel.
+.email-preview {
+  color: black;
+  .spacer-tr { display: none; }
+  p {
+    line-height: 1.25;
+    color: black;
+    margin-bottom: 16px;
+  }
+  h3 {
+    font-size: 20px;
+    margin-bottom: 16px;
+  }
+  .order_details {
+    margin-bottom: 16px;
+    thead th[align],
+    thead th.amount {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .amount { text-align: right; }
+  }
+}

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

@@ -0,0 +1,2 @@
+// Sort
+[class*='sort'] { cursor: move; }

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

@@ -0,0 +1,4 @@
+// Removes transition on mobile
+* {
+  @include media-breakpoint-down(sm) { transition: none !important; }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/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/admin/nfg_theme/custom/_overlay_blocker.scss

@@ -0,0 +1,49 @@
+// 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; }
+}
+.overlay-white {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 30;
+  font-family: $font-family-base;
+  letter-spacing: 0;
+  word-spacing: 0;
+  background-color: rgba(255,255,255,0.9);
+}
+.overlay-blur {
+  transition: $transition-base;
+  filter: blur(0);
+  &.in { filter: blur(4px); }
+}

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

@@ -0,0 +1,9 @@
+// Page header specific styles
+.page-header { transition: $transition-base; }
+.sticky-div {
+  box-shadow: 0;
+  &.stuck {
+    background-color: transparentize($white, 0.1);
+    box-shadow: $box-shadow;
+  }
+}

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

@@ -0,0 +1,45 @@
+// Product icons
+
+@font-face {
+  font-family: 'IcoMoon-product-icons';
+  src:  font-url('admin/nfg_product_icons/IcoMoon-product-icons.eot?b2y89i');
+  src:  font-url('admin/nfg_product_icons/IcoMoon-product-icons.eot?b2y89i#iefix') format('embedded-opentype'),
+    font-url('admin/nfg_product_icons/IcoMoon-product-icons.ttf?b2y89i') format('truetype'),
+    font-url('admin/nfg_product_icons/IcoMoon-product-icons.woff?b2y89i') format('woff'),
+    font-url('admin/nfg_product_icons/IcoMoon-product-icons.svg?b2y89i#IcoMoon-product-icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-sso-"], [class*=" icon-sso-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'IcoMoon-product-icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-sso-donatenow:before {
+  content: "\e900";
+}
+.icon-sso-donation-pages:before {
+  content: "\e683";
+}
+.icon-sso-dms:before {
+  content: "\e6ba";
+}
+.icon-product-fundraising-coach:before {
+  content: "\e199";
+}
+.icon-sso-disbursements:before {
+  content: "\e466";
+}
+
+

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

@@ -0,0 +1,25 @@
+// Redactor styles
+.redactor-in-page {
+  .redactor-editor, .redactor-box, .redactor-box textarea { z-index: 0 !important; }
+}
+.redactor-box {
+  margin-bottom: 0 !important;
+  border: $border-width solid $border-color;
+}
+.redactor-toolbar {
+  background-color: $body-bg;
+  box-shadow: none;
+  border-bottom: $border-width solid $border-color;
+}
+.redactor-editor, .redactor-box, .redactor-box textarea { z-index: auto; }
+.redactor-box .redactor-toolbar { z-index: $zindex-dropdown - 10 !important; }
+
+body.modal-open  {
+  .redactor-toolbar { z-index: $zindex-modal-backdrop - 1 !important; }
+  .modal .redactor-toolbar { z-index: $zindex-modal + 1 !important; }
+}
+.redactor-dropdown {
+  // z-index was upped from 999 to 1 more than the modal...
+  // in response to: https://jira.networkforgood.org/browse/PSTWO-9974
+  z-index: $zindex-modal + 1 !important;
+}

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

@@ -0,0 +1,53 @@
+#share_page_widget {
+  .dropdown-menu { width: 300px; }
+
+  // Social Icons
+  .list-group {
+    display: inline-block;
+    padding: 0;
+    margin-bottom: 0;
+  }
+  .btn-share { // formerly list-group-item
+    display: inline-block;
+    float: none;
+    padding: 0;
+    border-radius: 0;
+    border: none;
+    + .btn-share { margin-left: ($spacer * .5); }
+  }
+  [class^='icon-'] {
+    display: inline-block;
+    font-family: "FontAwesome";
+    &:before { font-size: $h4-font-size; }
+  }
+  .icon-facebook {
+    &:before {
+      content: "\f082";
+      color: #3b5998;
+    }
+  }
+  .icon-twitter {
+    &:before {
+      content: "\f081";
+      color: #1da1f2;
+    }
+  }
+  .icon-linkedin {
+    &:before {
+      content: "\f08c";
+      color: #0077b5;
+    }
+  }
+  .icon-googleplus {
+    &:before {
+      content: "\f0d4";
+      color: #dd4b39;
+    }
+  }
+  .icon-envelope {
+    &:before {
+      content: "\f003";
+      color: #8c8c8c;
+    }
+  }
+}

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

@@ -0,0 +1,113 @@
+// 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 {
+  border-top: $border-width solid $border-color;
+  .slat {
+    padding-top: $spacer;
+    padding-bottom: $spacer;
+    + .slat { border-top: $border-width solid $border-color; }
+
+
+    // 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 * .5);
+      padding-bottom: ($spacer * .5);
+    }
+  }
+  &.slat-list-lg {
+    .slat {
+      padding-top: ($spacer * 1.5);
+      padding-bottom: ($spacer * 1.5);
+    }
+  }
+
+
+  // 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/admin/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;
+$google-plus:   #dd4b39 !default;
+
+$social-media-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$social-media-colors: map-merge(
+  (
+    "facebook":     $facebook,
+    "twitter":      $twitter,
+    "linkedin":     $linkedin,
+    "google-plus":  $google-plus
+  ),
+  $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/admin/nfg_theme/custom/_status_indicator.scss

@@ -0,0 +1,9 @@
+// Status indicator on campaigns index
+.status-indicator {
+  position: absolute;
+  top: -($font-size-base * .5);
+  right: -($font-size-base * .5);
+  display: block;
+  z-index: 100;
+  font-size: $font-size-base;
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/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