nfg_ui 0.9.8.15

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

@@ -0,0 +1,23 @@
+//** Admin Styles **//
+
+// App Vendors
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700);
+@import 'font-awesome';
+@import 'select2';
+
+// Our Variables
+@import 'variables';
+
+// Bootstrap Vendor Base
+@import 'bootstrap';
+
+// NFG Theme
+@import 'nfg_theme/*';
+
+// Plugins
+@import 'nfg_ui/network_for_good/public/plugins/datepicker';
+@import 'nfg_ui/network_for_good/public/plugins/sticky_div';
+@import 'nfg_ui/network_for_good/public/plugins/select2';
+
+// Legacy browser support
+@import 'nfg_ui/network_for_good/public/legacy_browser_support/application';

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

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

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

@@ -0,0 +1,9 @@
+// Clouds
+.bg-clouds {
+  padding-bottom: 20%;
+  background-position: 50% 100%;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  &.blue { background-image: image-url("onboarding/clouds-blue.png"); }
+  &.green { background-image: image-url("onboarding/clouds-green.png"); }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_button-group.scss

@@ -0,0 +1,8 @@
+// Add visual separator for btn-primary buttons that are in a button group
+.btn-group {
+  > .btn-primary:not(:first-child),
+  > .btn-group:not(:first-child) > .btn-primary {
+    margin-left: 0;
+    border-left-color: rgba(0,0,0,.15);
+  }
+}

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

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

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

@@ -0,0 +1,20 @@
+//
+// Base styles
+//
+.card {
+  box-shadow: 0;
+  transition: $transition-base;
+  &:hover { box-shadow: $box-shadow-sm; }
+}
+.card-subtitle { margin-top: 0; }
+
+
+//
+// Optional textual caps
+//
+.card-footer { border-top: none; }
+
+// Card image
+.card-img-overlay { @include gradient-y(transparentize($black, 1), transparentize($black, .5)); }
+
+.card-img { @include border-radius(0); }

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

@@ -0,0 +1,20 @@
+// Our custom styles
+@import 'custom/campaign_card';
+@import 'custom/campaign_preview';
+@import 'custom/content_section_buttons';
+@import 'custom/custom_questions_questionnaire';
+@import 'custom/custom_receipt_language';
+@import 'custom/email_preview';
+@import 'custom/interaction';
+@import 'custom/mobile';
+@import 'custom/nav_step';
+@import 'custom/overlay_blocker';
+@import 'custom/page_header';
+@import 'custom/product_icons';
+@import 'custom/redactor';
+@import 'custom/share_dropdown';
+@import 'custom/social_share';
+@import 'custom/slat';
+@import 'custom/status_indicator';
+@import 'custom/ticket';
+@import 'custom/tile';

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

@@ -0,0 +1,24 @@
+.dropdown-toggle::after { content: none; }
+
+
+// Links, buttons, and more within the dropdown menu
+.dropdown-item {
+  + .dropdown-item { border-top: $border-width solid $border-color; }
+  &.disabled, &:disabled {
+    background-color: $body-bg;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+
+// Dropdown section headers
+.dropdown-header {
+  padding-top: ($spacer * .5);
+  padding-bottom: ($spacer * .5);
+  + .dropdown-item { border-top: $border-width solid $border-color; }
+}
+
+
+// Sizing
+.dropdown-menu-md { min-width: ($spacer * 12); }

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

@@ -0,0 +1,85 @@
+// 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 { 
+  &, .custom-select{ 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/admin/nfg_theme/_media.scss

@@ -0,0 +1,2 @@
+// Allows for text-truncate to work inside a media-body container
+.media-body { min-width: 0; }

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

@@ -0,0 +1,22 @@
+//
+// Tabs
+//
+.nav-tabs {
+  border-width: $border-width;
+
+  .nav-item {
+    margin-bottom: -$border-width;
+    font-weight: $font-weight-bold;
+    font-size: $font-size-base;
+  }
+
+  .nav-link {
+    color: $text-muted;
+    border: none;
+    border-bottom: $nav-tabs-border-width solid transparent;
+    @include hover-focus {
+      color: $nav-tabs-link-active-color;
+      border-color: $nav-tabs-link-hover-border-color;
+    }
+  }
+}

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

@@ -0,0 +1,132 @@
+// Styles that replicate the legacy top navs
+#admin-nav {
+  background-color: #444444;
+  .navbar {
+    background: transparent !important;
+    .navbar-nav {
+      .nav-item {
+        @include media-breakpoint-up(lg) {
+          + .nav-item { border-left: $border-width solid #4d4d4d; }
+        }
+        > .nav-link {
+          padding: $spacer ($spacer * .5);
+          font-size: $font-size-sm;
+          font-weight: $font-weight-bold;
+          &:hover {
+            color: $navbar-dark-hover-color;
+            background-color: #414141;
+          }
+          > .fa {
+            color: #626262;
+            &:first-child { margin-right: ($spacer * .25); }
+          }
+        }
+        &.active {
+          > .nav-link {
+            color: $navbar-dark-active-color;
+            background-color: #4b4b4b;
+            > .fa { color: $navbar-dark-active-color; }
+          }
+        }
+      }
+      .dropdown-menu {
+        margin-top: 0;
+        border-radius: 0 0 $border-radius $border-radius;
+        background-color: #525252;
+        .dropdown-item {
+          padding: 0;
+          + .dropdown-item { border-top: none; }
+          &.active {
+            background-color: transparent;
+            .nav-link {
+              color: #cccccc;
+              border-left-color: $teal;
+            }
+          }
+        }
+        .nav-link {
+          padding: ($spacer * .5);
+          color: #989797;
+          border-left: 5px solid transparent;
+          &:hover {
+            color: #cccccc;
+            background-color: #575757;
+            border-left-color: #616161;
+          }
+        }
+      }
+    }
+  }
+}
+
+#admin-toolbar {
+  padding-top: 2px;
+  font-size: 12px;
+  font-weight: $font-weight-bold;
+  line-height: 1;
+  background-color: #2b2b2b;
+  &:before {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: $teal;
+    z-index: 5;
+    content: '';
+  }
+  .navbar { background: transparent !important; }
+  .navbar-brand {
+    font-size: 11px;
+    font-weight: $font-weight-bold;
+    line-height: 1;
+    text-transform: uppercase;
+  }
+  .nav-item {
+    > .nav-link {
+      padding: ($spacer * .5);
+      text-transform: uppercase;
+      color: $teal;
+      transition: $transition-base;
+      &:hover { background-color: #515151; }
+      @include media-breakpoint-down(sm) { font-size: 14px; }
+    }
+    &.show {
+      > .nav-link {
+        background-color: #fff;
+        color: $teal;
+      }
+    }
+    .dropdown-menu {
+      margin-top: 0;
+      border-radius: 0 0 $border-radius $border-radius;
+      .dropdown-item, .nav-link { color: $teal; }
+      .nav-link { padding: 0; }
+    }
+  }
+}
+
+#cross_product_nav {
+  > .dropdown-menu {
+    > .dropdown-item {
+      transition: $transition-base;
+      position: relative;
+      [class^="icon-sso"] { font-size: 40px; }
+      .media-body { width: 240px; }
+    }
+  }
+}
+
+#p2p-nav {
+  background-color: $gray-800;
+  .navbar-nav {
+    .nav-link {
+      padding-right: ($nav-link-padding-x * .5);
+      padding-left: ($nav-link-padding-x * .5);
+      color: $teal;
+      &:hover {
+        background-color: $gray-900;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,7 @@
+//
+// Basic Bootstrap table
+//
+.table {
+  thead th { border-bottom-width: $table-border-width; }
+  tbody + tbody { border-top-width: $table-border-width; }
+}

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

@@ -0,0 +1,82 @@
+//
+// 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;
+  text-transform: uppercase;
+}
+
+
+//
+// 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: theme-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/admin/nfg_theme/custom/_campaign_card.scss

@@ -0,0 +1,6 @@
+// Campaign card specific styles to ensure same height images
+#campaign_image {
+  height: ($spacer * 8);
+  overflow: hidden;
+  .card-img { min-height: 100%; }
+}