nfg_ui 0.10.9 → 0.10.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8f7d187b36104a09caaebbfb4a83873d95c754fa73add63845999f16b1fcd5d3
-  data.tar.gz: 15c84857ddd842ed23b5d5f151183f7519b4f39c25a231af8fba6f13aecec9e4
+  metadata.gz: 3da134a3d77f90fcfd72fad8d3471a81dfdf7040f4164c74e4d8df3a314b5355
+  data.tar.gz: 54d1d43697884a286375e0f1347ee5874da07fa3f8dbb3ecb16ece90ddd16a59
 SHA512:
-  metadata.gz: 622e2748f043ec8c391a345e833ee3594281b969d04ec5013b5e9af6b11f576ce3ba37c2cfc0288c25a77e905dd628b92eb80cec9a4e3dff52987a6555d2578f
-  data.tar.gz: 46da61eeedef655e85a9cf9dabce029bba9ffd5c8deab61dc319b11ddff9caa7da29102f299f643236d21ac9919a209aed08575aee945ffb0d788fe15e891e87
+  metadata.gz: 2f1595e913c6ebb28d05ab32dba9851fd7ef151b14fc1a67d6f708fe9163e569aca1881a26583faaecf2683a9cd5a8850d8ba335af4e64407a3fa7b053ff7b46
+  data.tar.gz: 52c86b165fdb08dc89a8cfcae740e6537cab0c8e15fa57b588276290401914bc1c94ea6c8c5edfde31af10314361e7125533cb1e24ca22d126525ca26614f491

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

@@ -25,3 +25,6 @@
 
 // Legacy browser support
 @import 'nfg_ui/network_for_good/public/legacy_browser_support/application';
+
+// Color variations
+@import 'nfg_theme/color_variations/*';

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

@@ -3,14 +3,14 @@
   color: theme-color("primary");
   background-color: $white;
   border-color: $border-color;
-  &:hover {
-    color: $body-color;
+  @include hover {
+    color: $body-color !important;
     background-color: $body-bg;
   }
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: $body-color;
+    color: $body-color !important;
     background-color: $body-bg;
   }
 }

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

@@ -18,6 +18,7 @@
 
 .custom-control-label {
   font-weight: $font-weight-normal;
+  cursor: pointer;
 
   // Background-color and icon
   &::before, &::after { top: .3rem; }

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

@@ -18,6 +18,7 @@ label {
     color: $danger;
     cursor: default;
     border-bottom: none;
+    text-decoration: none;
   }
 }
 

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

@@ -1,4 +1,7 @@
-html { font-size: 62.5%; }
+html {
+  height: 100%;
+  font-size: 62.5%;
+}
 body {
   -ms-overflow-style: scrollbar !important;
   font-smooth: always;

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_badge.scss

@@ -0,0 +1,5 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .badge-primary { @include badge-variant($value); }
+  }
+}

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

@@ -0,0 +1,6 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .btn-primary { @include button-variant($value, $value); }
+    .btn-outline-secondary, .btn-link { color: $value; }
+  }
+}

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

@@ -0,0 +1,25 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .custom-control {
+      .custom-control-input {
+        &:checked {
+          ~ .custom-control-label { border-color: $value; }
+          ~ .custom-control-label::before {
+            border-color: $value;
+            background-color: $value;
+          }
+        }
+      }
+    }
+    .custom-switch {
+      .custom-control-input:checked ~ .custom-control-label {
+        &::after { border-color: $value; }
+        &::before {
+          background-color: $value;
+          border-color: $value;
+        }
+      }
+    }
+    .custom-select { color: $value; }
+  }
+}

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

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

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

@@ -0,0 +1,7 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .form-control {
+      &:focus { border-color: $value; }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .nav-tabs {
+      .nav-link {
+        &:hover, &.active { border-color: $value; }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_pagination.scss

@@ -0,0 +1,10 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .page-item {
+      &.active .page-link {
+        background-color: $value;
+        border-color: $value;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_plugins.scss

@@ -0,0 +1,3 @@
+// Our plugin styles
+@import 'plugins/datetimepicker';
+@import 'plugins/select2';

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_reboot.scss

@@ -0,0 +1,8 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    a {
+      color: $value;
+      @include hover { color: darken($value, 15%); }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_type.scss

@@ -0,0 +1,5 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .text-primary { color: $value !important; }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_utilities.scss

@@ -0,0 +1,6 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .bg-primary { background-color: $value !important; }
+    .border-primary { border-color: $value !important; }
+  }
+}

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

@@ -0,0 +1,5 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .fa-question-circle-o.text-info { color: $value !important; } // used to make help icon correct theme color
+  }
+}

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

@@ -0,0 +1,23 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .nav-steps {
+      .nav-item {
+        &.visited, &.active {
+          &::before { background-color: $value; }
+          .step-indicator {
+            background-color: $value;
+            border-color: $value;
+          }
+        }
+        &.active ~ .visited {
+          .step-indicator {
+            &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.5); };
+          }
+        }
+        .step-indicator {
+          &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($value, 0.5); }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/plugins/_datetimepicker.scss

@@ -0,0 +1,34 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .datepicker, .timepicker {
+      [data-action^='select'],
+      [data-action^='picker'],
+      .prev,
+      .next,
+      .timepicker-picker a.btn {
+        &:hover, &:active, &.active {
+          background-color: $value;
+          color: $white !important;
+        }
+      }
+      .today.active {
+        &:hover, &:active { background-color: $value; }
+      }
+    }
+    .datepicker {
+      .prev, .next {
+        color: $value;
+      }
+    }
+    .timepicker-picker td a { color: $value; }
+    .picker-switch.accordion-toggle {
+      a {
+        color: $value;
+        &:hover, &:active {
+          color: $white !important;
+          background-color: $value;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/plugins/_select2.scss

@@ -0,0 +1,50 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .select2-container--default {
+      .select2-search--dropdown {
+        .select2-search__field:focus {
+          border-color: $value;
+        }
+      }
+      &.select2-container--focus .select2-selection--multiple { border-color: $value; }
+      &.select2-container--open {
+        .select2-selection--single {
+          border-color: $value !important;
+          .select2-selection__rendered { color: $body-color; }
+        }
+      }
+      .select2-selection--single {
+        &:hover .select2-selection__rendered { color: $body-color; }
+        .select2-selection__rendered, .select2-selection__placeholder { color: $value !important; }
+      }
+      .select2-selection--multiple {
+        .select2-selection__rendered {
+          .select2-selection__choice {
+            color: $value;
+            &:hover, &:active { color: $body-color; }
+          }
+        }
+        .select2-selection__choice__remove { color: $value;  }
+      }
+    }
+    .has-danger {
+      .select2-container--default {
+        .select2-selection--single .select2-selection__rendered,
+        .select2-selection--multiple .select2-selection__rendered {
+          color: $danger;
+        }
+      }
+    }
+    .select2-selection__rendered .select2-selection__clear:before { color: $value; }
+  }
+  .#{$color} ~ .select2-container--default { // ~ is needed to style containers and elements outside of .container-main and still adhere to the page's specifc resource_color
+    .select2-search--dropdown {
+      .select2-search__field:focus { border-color: $value; }
+    }
+    .select2-results__option {
+      &[aria-selected='true'] {
+        &:after { color: $value; }
+      }
+    }
+  }
+}

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

@@ -1,52 +1,104 @@
-// Setting a common height for the builder header
+// Setting a common height for the builder header and nav
 $builder-header-height: ($spacer * 3);
+$builder-header-padding: ($spacer * .5);
+$builder-nav-height: ($spacer * 4.5);
+$builder-nav-padding: $spacer;
+$builder-options-padding: $spacer;
+$builder-preview-padding: ($spacer * 2);
 
 // Put on the <body> to help with correct scrolling within builder-wrap and builder-options
 .builder-layout {
-  width: 100%;
-  height: 100%;
-  @include media-breakpoint-up(lg) { overflow: hidden; }
+  @include media-breakpoint-up(lg) {
+    height: 100%;
+    > form { height: 100%; } // targets form directly inside <body> and needed for correct scrolling
+  }
 }
 
-// Macro styles for builder layout
-.builder-header {
-  position: fixed;
-  z-index: $zindex-fixed;
-  left: 0;
-  right: 0;
-  padding: ($spacer * .5);
+// Header and nav styles for builder layout
+.builder-header, .builder-header-fixed-bottom {
+  padding: $builder-header-padding;
   width: 100%;
   min-height: $builder-header-height;
   background-color: $dark;
+  z-index: $zindex-fixed;
+  @include media-breakpoint-up(lg) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+.builder-header-fixed-bottom {
+  position: fixed;
   @include media-breakpoint-down(md) { bottom: 0; }
-  @include media-breakpoint-up(lg) { top: 0; }
+}
+.builder-nav, .builder-nav-sm {
+  width: 100%;
+  z-index: $zindex-fixed;
+}
+.builder-nav {
+  padding: $builder-nav-padding;
+  background-color: $white;
+  border-bottom: $border-width solid $border-color;
+  @include media-breakpoint-up(lg) {
+    position: fixed;
+    top: $builder-header-height;
+    left: 0;
+    right: 0;
+    min-height: $builder-nav-height;
+  }
+}
+.builder-nav-sm {
+  position: fixed;
+  bottom: 0;
+  padding: ($builder-nav-padding * .5);
+  min-height: $builder-header-height;
+  background-color: $dark;
+  @include media-breakpoint-up(lg) { display: none; }
+}
+
+// Container that provides padding to the top of the page to move content below header and nav
+.builder-container {
+  @include media-breakpoint-down(md) { padding-bottom: $builder-header-height; }
+  @include media-breakpoint-up(lg) { height: 100%; }
 }
 
-.builder-wrap {
-  padding: ($spacer * 2) $spacer;
-  @include media-breakpoint-down(md) { padding-bottom: $builder-header-height + ($spacer * 2); }
+// Adjusts padding on the top of builder-container depending on how many elements come before it
+.builder-header ~ .builder-container {
+  @include media-breakpoint-up(lg) { padding-top: $builder-header-height; }
+}
+.builder-header ~ .builder-nav ~ .builder-container {
+  @include media-breakpoint-up(lg) { padding-top: $builder-header-height + $builder-nav-height; }
+}
+
+// Block containers for side by side view
+.builder-body {
   @include media-breakpoint-up(lg) {
-    padding-top: $builder-header-height + ($spacer * 2);
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+.builder-preview {
+  padding: $builder-preview-padding ($builder-preview-padding / 2);
+  @include media-breakpoint-up(lg) {
+    float: left;
     width: 67vw;
-    height: 100vh;
+    height: 100%;
     overflow-y: auto;
-    > :last-child { margin-bottom: ($spacer * 2); }
+    > :last-child { margin-bottom: $builder-preview-padding; }
   }
 }
-
 .builder-options {
-  padding: $spacer;
+  padding: $builder-options-padding;
   background-color: $white;
   @include media-breakpoint-down(md) { border-bottom: $border-width solid $border-color; }
   @include media-breakpoint-up(lg) {
-    position: fixed;
-    top: 0;
-    right: 0;
-    padding-top: $builder-header-height + $spacer;
+    float: right;
     width: 33vw;
-    height: 100vh;
+    height: 100%;
     border-left: $border-width solid $border-color;
     overflow-y: auto;
-    > :last-child { margin-bottom: $spacer; }
+    > :last-child { margin-bottom: $builder-options-padding; }
   }
-}
+}

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

@@ -64,6 +64,9 @@
           .step-indicator::after { opacity: 1; }
         }
       }
+      .step-text {
+        @include media-breakpoint-down(md) { display: none; }
+      }
     }
 
 

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

@@ -1,4 +1,7 @@
-html { font-size: 62.5%; }
+html {
+  height: 100%;
+  font-size: 62.5%;
+}
 body {
   -ms-overflow-style: scrollbar !important;
   font-smooth: always;

data/lib/nfg_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module NfgUi
-  VERSION = '0.10.9'
+  VERSION = '0.10.10'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.10.9
+  version: 0.10.10
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-14 00:00:00.000000000 Z
+date: 2020-05-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -411,6 +411,21 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_tables.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_tooltip.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_type.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_badge.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_buttons.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_custom-forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_custom.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_nav.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_pagination.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_plugins.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_reboot.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_type.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_utilities.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/custom/_icons.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/custom/_nav_step.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/plugins/_datetimepicker.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/plugins/_select2.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_avatar.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_card.scss