nfg_ui 0.9.8.15

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

@@ -0,0 +1,23 @@
+//** Public 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 'plugins/datepicker';
+@import 'plugins/sticky_div';
+@import 'plugins/select2';
+
+// Legacy browser support
+@import 'legacy_browser_support/application';

data/app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/application.scss

@@ -0,0 +1,19 @@
+//** Entity Branding Styles **//
+
+// Our Variables
+@import 'nfg_ui/network_for_good/public/variables';
+
+// NFG Theme
+@import 'nfg_theme/functions';
+@import 'nfg_theme/reboot';
+@import 'nfg_theme/type';
+@import 'nfg_theme/forms';
+@import 'nfg_theme/buttons';
+@import 'nfg_theme/custom_forms';
+@import 'nfg_theme/navbar';
+@import 'nfg_theme/badge';
+@import 'nfg_theme/utilities';
+@import 'nfg_theme/custom';
+
+// Plugins
+@import 'plugins/select2';

data/app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_badge.scss

@@ -0,0 +1,6 @@
+// Specific styles for entity branding
+
+.badge-primary {
+  color: color-yiq($primary);
+  background-color: $primary;
+}

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

@@ -0,0 +1,43 @@
+// Specific styles for entity branding
+
+.btn-primary {
+  color: color-yiq($primary);
+  background-color: $primary;
+  border-color: $primary;
+  &:hover {
+    color: color-yiq(darken($primary, 10%));
+    background-color: darken($primary, 10%);
+    border-color: darken($primary, 10%);
+  }
+  &.disabled,
+  &:disabled,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($primary);
+    background-color: $primary;
+    border-color: $primary;
+  }
+}
+
+.btn-outline-secondary {
+  color: color-yiq($primary, $yiq-text-dark, $primary);
+  &:hover { color: color-yiq($primary, $yiq-text-dark, $primary); }
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle { color: color-yiq($primary, $yiq-text-dark, $primary); }
+}
+
+.btn-link {
+  color: color-yiq($primary, $yiq-text-dark, $primary);
+  &:hover { color: color-yiq(darken($primary, 15%), $yiq-text-dark, darken($primary, 15%)); }
+}
+
+.bg-dark {
+  .btn-primary {
+    h1, h2, h3, h4, h5, h6, p, label { color: color-yiq($primary); }
+  }
+  .btn-outline-secondary {
+    h1, h2, h3, h4, h5, h6, p, label { color: color-yiq($primary, $yiq-text-dark, $primary); }
+  }
+}

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

@@ -0,0 +1,3 @@
+// Our custom styles
+@import 'custom/everyday_default';
+@import 'custom/nav_step';

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

@@ -0,0 +1,50 @@
+// Specific styles for entity branding
+
+.custom-control {
+  .custom-control-input {
+    &:checked {
+      ~ .custom-control-label, ~ .custom-control-label::before { border-color: $primary; }
+      ~ .custom-control-label::before { background-color: $primary; }
+    }
+    &:not(:disabled):active ~ .custom-control-label::before {
+      background-color: lighten($primary, 35%);
+      border-color: lighten($primary, 35%);
+    }
+  }
+}
+
+.custom-select {
+  color: color-yiq($primary, $yiq-text-dark, $primary);
+  background-image: $custom-select-indicator;
+  &:focus {
+    border-color: $primary;
+    &::-ms-value { color: $primary; }
+  }
+}
+
+.custom-file-input {
+  &:focus ~ .custom-file-label {
+    border-color: $primary;
+    &::after { border-color: $primary; }
+  }
+}
+
+.custom-switch {
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after { border-color: $primary; }
+    &::before {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+}
+
+
+// Styles needed to override :valid success styles provided by bootstrap... this is for server side forms only
+.custom-control-input {
+  .was-validated &:valid {
+    &:checked {
+      ~ .custom-control-label::before { background-color: $primary; }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+// Specific styles for entity branding
+
+.form-control:focus { border-color: $primary; }
+
+
+// Styles needed to override :valid success styles provided by bootstrap... this is for server side forms only
+.form-control,
+.custom-select {
+  .was-validated &:valid {
+    &:focus { border-color: $primary; }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_functions.scss

@@ -0,0 +1,29 @@
+// Specific functions for entity branding
+
+// Color contrast
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+// This function replaces the hex color code with proper URL-encoding for color in SVG paths
+@function encodecolor($string) {
+  @if type-of($string) == 'color' {
+    $hex: str-slice(ie-hex-str($string), 4);
+    $string:unquote("#{$hex}");
+  }
+  $string: '%23' + $string;
+  @return $string;
+}
+
+// Entity variable for custom select and select2 arrow icons
+$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{encodecolor($primary)}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");

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

@@ -0,0 +1,18 @@
+// Specific styles for entity branding
+
+.navbar-light {
+  .navbar-brand,
+  .navbar-toggler {
+    color: color-yiq($primary, $yiq-text-dark, $primary);
+    &:hover, &:focus { color: color-yiq($primary, $yiq-text-dark, $primary); }
+  }
+  .navbar-nav {
+    .nav-link {
+      &:hover, &:focus { color: color-yiq($primary, darken($primary, 10%), $primary); }
+    }
+    .open > .nav-link,
+    .active > .nav-link,
+    .nav-link.open,
+    .nav-link.active { color: color-yiq($primary, darken($primary, 10%), $primary); }
+  }
+}

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

@@ -0,0 +1,6 @@
+// Specific styles for entity branding
+
+a {
+  color: color-yiq($primary, darken($primary, 15%), $primary);
+  &:not(.btn):hover, &:not(.btn):focus { color: darken($primary, 15%) !important; }
+}

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

@@ -0,0 +1,16 @@
+// Specific styles for entity branding
+
+a.no-link-color {
+  &:hover, &:active, &:focus { color: $primary !important; }
+}
+
+.text-primary { color: color-yiq($primary, $yiq-text-dark, $primary) !important; }
+
+a.text-primary {
+  color: color-yiq($primary, darken($primary, 15%), $primary) !important;
+  &:hover, &:focus { color: darken($primary, 15%) !important; }
+}
+
+.bg-dark {
+  .text-primary { color: color-yiq($primary, $primary, $yiq-text-light) !important; }
+}

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

@@ -0,0 +1,8 @@
+// Specific styles for entity branding
+
+.bg-primary {
+  color: color-yiq($primary) !important;
+  background-color: $primary !important;
+}
+
+.border-primary { border-color: $primary !important; }

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

@@ -0,0 +1,6 @@
+// Styles specific to the everyday default style
+.everyday_default {
+  .progress-stats {
+    .progress-text-on { color: color-yiq($primary); }
+  }
+}

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

@@ -0,0 +1,20 @@
+//
+// Steps
+//
+.nav-steps {
+  .nav-item {
+
+    &.visited, &.active {
+      .step-indicator {
+        color: color-yiq($primary);
+        background-color: $primary;
+        border-color: $primary;
+      }
+    }
+    &.visited::after { background-color: $primary; }
+
+    .step-indicator {
+      &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($primary, 0.5); }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/plugins/_select2.scss

@@ -0,0 +1,16 @@
+ // Specific styles for entity branding
+
+.select2-container--default {
+  .select2-selection--single {
+    color: color-yiq($primary) !important;
+    background-image: $custom-select-indicator;
+    &,
+    .select2-selection__placeholder,
+    .select2-selection__choice__remove,
+    .select2-selection__rendered,
+    .select2-selection__rendered .select2-selection__choice { color: color-yiq($primary, $yiq-text-dark, $primary) !important;  }
+  }
+  &.select2-container--focus .select2-selection--multiple,
+  &.select2-container--open .select2-selection--single { border-color: $primary !important; }
+  .select2-search--dropdown .select2-search__field:focus { border-color: $primary !important; }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/_variables.scss

@@ -0,0 +1,13 @@
+// These variables are neeeded to ensure the grid and breakpoints work within the legacy_browser_support directory
+$spacer: 2.4rem;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);
+
+$grid-columns:                12;
+$grid-gutter-width:           $spacer;

data/app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/application.scss

@@ -0,0 +1,35 @@
+//** Browser Compatibility Styles **//
+
+// This document is powered by modernizr's detection of flexbox support
+// Read more here: http://zomigi.com/blog/using-modernizr-with-flexbox/
+
+// IE 10 & 11 Specific
+// Flexbox Tweener (only) Supported:
+html.flexboxtweener {
+
+  // Legacy browser support requreid variables
+  @import 'variables';
+
+  // NFG Theme
+  @import 'nfg_theme/mixins';
+  @import 'nfg_theme/grid';
+  @import 'nfg_theme/forms';
+  @import 'nfg_theme/button-group';
+  @import 'nfg_theme/input-group';
+  @import 'nfg_theme/custom-forms';
+  @import 'nfg_theme/nav';
+  @import 'nfg_theme/navbar';
+  @import 'nfg_theme/card';
+  @import 'nfg_theme/breadcrumb';
+  @import 'nfg_theme/pagination';
+  @import 'nfg_theme/progress';
+  @import 'nfg_theme/media';
+  @import 'nfg_theme/list-group';
+  @import 'nfg_theme/modal';
+  @import 'nfg_theme/carousel';
+  @import 'nfg_theme/utilities';
+  @import 'nfg_theme/custom';
+
+  // Plugins
+  @import 'plugins/sticky_div';
+}

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

@@ -0,0 +1,4 @@
+.breadcrumb {
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+}

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

@@ -0,0 +1,10 @@
+.btn-group,
+.btn-group-vertical {
+  display: -ms-inline-flexbox;
+  > .btn { -ms-flex: 1 1 auto; }
+}
+.btn-toolbar {
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+  -ms-flex-pack: start;
+}

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

@@ -0,0 +1,45 @@
+//
+// Base styles
+//
+
+.card {
+  display: block; // using display block because "-ms-flex-direction: column;" doesn't work in IE10
+  // display: -ms-flexbox;
+  // -ms-flex-direction: column;
+}
+
+.card-body { -ms-flex: 1 1 auto; }
+
+
+// Card deck
+
+.card-deck {
+  display: -ms-flexbox;
+  -ms-flex-direction: column;
+
+  @include media-breakpoint-up(sm) {
+    -ms-flex-direction: row;
+    -ms-flex-wrap: wrap;
+    .card {
+      display: -ms-flexbox;
+      -ms-flex: 1 0 0%;
+      -ms-flex-direction: column;
+    }
+  }
+}
+
+
+//
+// Card groups
+//
+
+.card-group {
+  display: -ms-flexbox;
+  -ms-flex-direction: column;
+
+  @include media-breakpoint-up(sm) {
+    -ms-flex-direction: row;
+    -ms-flex-wrap: wrap;
+    > .card { -ms-flex: 1 0 0%; }
+  }
+}

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

@@ -0,0 +1,18 @@
+.carousel-item { -ms-flex-align: center; }
+
+// Left/right controls for nav
+
+.carousel-control-prev,
+.carousel-control-next {
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+}
+
+// Optional indicator pips
+
+.carousel-indicators {
+  display: -ms-flexbox;
+  -ms-flex-pack: center;
+  li { -ms-flex: 0 1 auto; }
+}

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

@@ -0,0 +1,12 @@
+// Checkboxes and radios
+
+.custom-control-inline { display: -ms-inline-flexbox; }
+
+.custom-switch {
+  .custom-control-label {
+    &::before {
+      background-size: 45% !important;
+      background-position-x: left;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+// Our custom styles
+@import 'custom/everyday_giving';
+@import 'custom/nav_step';
+@import 'custom/slat';

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

@@ -0,0 +1,68 @@
+// IE10 only
+&.no-flexbox {
+  select {
+    padding-right: 12px;
+    background: #FFFFFF !important;
+    &::-ms-expand { display: block !important; }
+  }
+}
+
+// Fixes padding issue on file inputs
+input[type='file'] {
+  padding: 0;
+  border: none;
+}
+
+// Form grid
+//
+// Special replacement for our grid system's `.row` for tighter form layouts.
+
+.form-row {
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.form-check-inline {
+  display: -ms-inline-flexbox;
+  -ms-flex-align: center;
+}
+
+
+// Inline forms
+
+.form-inline {
+  display: -ms-flexbox;
+  -ms-flex-direction: row;
+  -ms-flex-wrap: wrap;
+  -ms-flex-align: center;
+
+  // Kick in the inline
+  @include media-breakpoint-up(sm) {
+    label {
+      display: -ms-flexbox;
+      -ms-flex-align: center;
+      -ms-flex-pack: center;
+    }
+    .form-group {
+      display: -ms-flexbox;
+      -ms-flex: 0 0 auto;
+      -ms-flex-direction: row;
+      -ms-flex-wrap: wrap;
+      -ms-flex-align: center;
+    }
+    .form-check {
+      display: -ms-flexbox;
+      -ms-flex-align: center;
+      -ms-flex-pack: center;
+    }
+    .custom-control {
+      -ms-flex-align: center;
+      -ms-flex-pack: center;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+// Stripped out additional styles not needed for flexbox support from original grid.scss
+
+.row { @include make-row(); }
+@include make-grid-columns();

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

@@ -0,0 +1,25 @@
+//
+// Base styles
+//
+.input-group {
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+  -ms-flex-align: stretch;
+  > .form-control,
+  > .custom-select,
+  > .custom-file {
+    -ms-flex: 1 1 auto;
+  }
+  > .custom-file {
+    display: -ms-flexbox;
+    -ms-flex-align: center;
+  }
+}
+
+// Prepend and append
+
+.input-group-prepend, .input-group-append { display: -ms-flexbox; }
+
+// Textual addons
+
+.input-group-text { display: -ms-flexbox; }

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

@@ -0,0 +1,9 @@
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+
+.list-group {
+  display: block; // using display block because "-ms-flex-direction: column;" doesn't work in IE10
+  // display: -ms-flexbox;
+  // -ms-flex-direction: column;
+}

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

@@ -0,0 +1,5 @@
+.media {
+  display: -ms-flexbox;
+  -ms-flex-align: start;
+}
+.media-body { -ms-flex: 1 1 auto; }

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

@@ -0,0 +1,6 @@
+// Utilities
+@import 'mixins/breakpoints';
+
+// Layout
+@import 'mixins/grid-framework';
+@import 'mixins/grid';

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

@@ -0,0 +1,28 @@
+.modal-dialog-centered {
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+}
+
+// Actual modal
+.modal-content {
+  display: block; // using display block because "-ms-flex-direction: column;" doesn't work in IE10
+  // display: -ms-flexbox;
+  // -ms-flex-direction: column;
+}
+
+// Modal header
+.modal-header {
+  display: -ms-flexbox;
+  -ms-flex-align: start;
+  -ms-flex-pack: justify;
+}
+
+// Modal body
+.modal-body { -ms-flex: 1 1 auto; }
+
+// Footer (for actions)
+.modal-footer {
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-pack: end;
+}

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

@@ -0,0 +1,21 @@
+// Base class
+
+.nav {
+  display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+}
+
+// Justified variants
+
+.nav-fill {
+  .nav-item {
+    -ms-flex: 1 1 auto;
+  }
+}
+
+.nav-justified {
+  .nav-item {
+    -ms-flex-preferred-size: 0;
+    -ms-flex-positive: 1;
+  }
+}