nfg_ui 0.11.18 → 0.12.0

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_modal.scss

@@ -1,3 +1,6 @@
+// Footer (for actions)
+.modal-footer { justify-content: flex-start; } // Left align buttons which overrides bootstrap's default of right aligned
+
 // Full page cover modal option
 .modal-cover {
   margin: 0;

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

@@ -3,24 +3,34 @@
 //
 .nav-tabs {
   border-width: $border-width;
-
   .nav-item {
     margin-bottom: -$border-width;
     font-weight: $font-weight-bold;
     font-size: $font-size-base;
   }
-
   .nav-link {
+    position: relative;
     color: $text-muted !important;
     border: none;
-    border-bottom: $nav-tabs-border-width solid transparent;
+    &:after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: $nav-tabs-border-width;
+      border-radius: ($nav-tabs-border-width / 2);
+      background: transparent;
+      transition: $btn-transition;
+      content: '';
+    }
     @include hover-focus {
       color: $nav-tabs-link-active-color !important;
-      border-color: $nav-tabs-link-hover-border-color;
+      &:after { background: $nav-tabs-link-hover-border-color; }
     }
   }
   .nav-link.active,
   .nav-item.show .nav-link {
     color: $nav-tabs-link-active-color !important;
+    &:after { background: $nav-tabs-link-hover-border-color; }
   }
 }

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

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

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

@@ -1,25 +1,29 @@
 //
 // 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; }
+// h1, .h1 { line-height: 1.2; } // commented out because it uses $headings-line-height
+h2, .h2 { line-height: 1.25; }
+h3, .h3 { line-height: 1.143; }
+h4, .h4 { line-height: 1.333; }
+// h5, .h5 { line-height: 1.2; } // commented out because it uses $headings-line-height
 h6, .h6 { line-height: 1.5; }
 
 // Type display classes
+.display-1 { line-height: 1.1667; }
+// .display-2 { line-height: 1.2; } // commented out because it uses $display-line-height
+.display-3 { line-height: 1.125; }
 .display-4 {
-  line-height: 1.3;
+  line-height: 1.5;
   color: $text-muted;
   text-transform: uppercase;
+  letter-spacing: .5px;
 }
 
 // Adjust heading sizes on smaller devices
 @include media-breakpoint-down(md) {
   h1, .h1, h2, .h2, h3, .h3 {
     font-size: $h4-font-size;
-    line-height: 1;
+    line-height: 1.333;
   }
 }
 
@@ -29,12 +33,13 @@ h6, .h6 { line-height: 1.5; }
 .font-size-base { font-size: $font-size-base !important; }
 .font-size-sm {
   font-size: $font-size-sm !important;
-  line-height: 1.3;
+  line-height: 1.428;
 }
 .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; }
+.lead { line-height: 1.778; }
 
 strong, .strong, b, .b { font-weight: $font-weight-bold; }
 
@@ -52,7 +57,6 @@ a.no-link-color {
   @include text-emphasis-variant(".text-#{$color}", $value);
 }
 
-
 // Adds a background divider to word
 .text-divider {
   position: relative;

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_avatar.scss

@@ -4,8 +4,8 @@
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  width: ($spacer * 2);
-  height: ($spacer * 2);
+  width: ($spacer * 1.25);
+  height: ($spacer * 1.25);
   color: $body-color;
   background-color: $border-color;
   border-radius: 50%;
@@ -32,22 +32,23 @@
   &.avatar-sm {
     width: $spacer;
     height: $spacer;
-    .avatar-text { font-size: ($font-size-base * .625); }
+    .avatar-text { font-size: $font-size-sm; }
   }
   &.avatar-lg {
-    width: ($spacer * 4);
-    height: ($spacer * 4);
-    .avatar-text { font-size: $font-size-lg; }
+    width: ($spacer * 3);
+    height: ($spacer * 3);
+    .avatar-text { font-size: $h3-font-size; }
   }
   &.avatar-xl {
-    width: ($spacer * 5);
-    height: ($spacer * 5);
+    width: ($spacer * 4.5);
+    height: ($spacer * 4.5);
     .avatar-text { font-size: $h1-font-size; }
   }
 }
 
 // Avatar as a link
 a.avatar {
+  color: inherit !important;
   opacity: 1;
   transition: $transition-fade;
   &:hover, &:active { opacity: $btn-disabled-opacity; }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_device_preview.scss

@@ -18,7 +18,7 @@
       display: block;
       content: '';
       transform: translate(-50%, -50%);
-      border: 1px solid $border-color;
+      border: $border-width solid $border-color;
     }
     &::before {
       top: -30px;

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_icon.scss

@@ -7,8 +7,8 @@
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  width: ($spacer * 1.5);
-  height: ($spacer * 1.5);
+  width: ($spacer * 1.25);
+  height: ($spacer * 1.25);
   font-size: $font-size-base;
   background-color: $border-color;
   border-radius: 50%;

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_illustration.scss

@@ -1,7 +1,8 @@
 .illustration {
   max-width: 100%;
   height: auto;
-  max-height: ($spacer * 6);
+  max-height: ($spacer * 4.5);
 }
-.illustration-sm { max-height: ($spacer * 4); }
-.illustration-lg { max-height: ($spacer * 10); }
+.illustration-xs { max-height: ($spacer * 1.5); }
+.illustration-sm { max-height: ($spacer * 3); }
+.illustration-lg { max-height: ($spacer * 7.5); }

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

@@ -4,7 +4,7 @@
 .nav-steps {
   .nav-item {
     position: relative;
-
+    line-height: 1;
 
     // Background connector bar between items
     &::before {
@@ -43,7 +43,7 @@
         .step-indicator {
           background-color: $secondary;
           border-color: $secondary;
-          &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($secondary, 0.5); };
+          &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($secondary, 0.8); }
         }
       }
     }
@@ -97,12 +97,13 @@
         width: 100%;
         height: 100%;
         border-radius: 50%;
-        box-shadow: 0 0 0 ($spacer * .25) transparentize($primary, 0.5);
+        box-shadow: 0 0 0 ($spacer * .25) transparentize($primary, 0.8);
         transition: $transition-fade;
         opacity: 0;
         content: '';
       }
     }
+    .step-text { line-height: 1.143; }
   }
 
 

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

@@ -86,11 +86,11 @@ $slat-actions-lg-width: 108px;
 .slat-actions {
   flex-grow: 0;
   flex-shrink: 0;
-  flex-basis: ($spacer * 2.5);
+  flex-basis: ($spacer * 2.25);
   text-align: right;
-  @include media-breakpoint-up(md) { flex-basis: ($spacer * 5.5); }
-  .slat-actions-sm & { flex-basis: ($spacer * 2.5); }
-  .slat-actions-lg & { flex-basis: ($spacer * 5.5); }
+  @include media-breakpoint-up(md) { flex-basis: ($spacer * 4.375); }
+  .slat-actions-sm & { flex-basis: ($spacer * 2.25); }
+  .slat-actions-lg & { flex-basis: ($spacer * 4.375); }
 }
 
 
@@ -112,7 +112,7 @@ $slat-actions-lg-width: 108px;
 
 // Slat header
 .slat-header {
-  padding-bottom: ($spacer * .5);
+  padding-bottom: ($spacer * .25);
   border-bottom: $border-width solid $border-color;
   .slat { padding: 0 !important; }
   .slat-body { align-items: center; }

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

@@ -21,26 +21,27 @@ $social-media-colors: map-merge(
 
 
 // Buttons
-@each $color, $value in $social-media-colors {
-  .btn-#{$color} {
+@each $social-media, $value in $social-media-colors {
+  .btn-#{$social-media} {
+    color: $white !important;
     @include button-variant($value, $value);
   }
 }
 
-@each $color, $value in $social-media-colors {
-  .btn-outline-#{$color} {
+@each $social-media, $value in $social-media-colors {
+  .btn-outline-#{$social-media} {
     @include button-outline-variant($value);
   }
 }
 
 
 // Text
-@each $color, $value in $social-media-colors {
-  @include text-emphasis-variant(".text-#{$color}", $value);
+@each $social-media, $value in $social-media-colors {
+  @include text-emphasis-variant(".text-#{$social-media}", $value);
 }
 
 
 // Backgrounds
-@each $color, $value in $social-media-colors {
-  @include bg-variant(".bg-#{$color}", $value);
+@each $social-media, $value in $social-media-colors {
+  @include bg-variant(".bg-#{$social-media}", $value);
 }

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

@@ -1,12 +1,9 @@
 // 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
+  padding-bottom: $spacer;
+  transition: $transition-base;
   &.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/core/nfg_theme/custom/_tile.scss

@@ -1,7 +1,6 @@
 //
 // Base styles
 //
-
 .tile {
   display: block;
   margin-right: auto;
@@ -9,36 +8,36 @@
   word-wrap: break-word;
   background-color: $white;
   border: $border-width solid $border-color;
+  border-radius: $border-radius-lg;
   + .tile { margin-top: $spacer; }
 }
-
 .tile-body {
-  padding: $grid-gutter-width;
-  @include media-breakpoint-up(sm) { padding: ($grid-gutter-width * 1.5); }
+  padding: $grid-gutter-width ($grid-gutter-width * .75);
+  @include media-breakpoint-up(sm) { padding: ($grid-gutter-width * 1.25) $grid-gutter-width; }
 }
 
+
 // 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 * 1.5); }
+  @include media-breakpoint-down(sm) { padding-bottom: $grid-gutter-width; }
   @include media-breakpoint-up(sm) { padding-bottom: ($grid-gutter-width * 2); }
   &:last-child { padding-bottom: 0; }
   + .tile-section {
     border-top: $border-width solid $border-color;
-    @include media-breakpoint-down(sm) { padding-top: ($grid-gutter-width * 1.5); }
+    @include media-breakpoint-down(sm) { padding-top: $grid-gutter-width; }
     @include media-breakpoint-up(sm) { padding-top: ($grid-gutter-width * 2); }
   }
 }
 
+
 //
 // Optional textual caps
 //
-
 .tile-header, .tile-footer {
-  padding: ($grid-gutter-width / 2) $grid-gutter-width;
-  background-color: $white;
+  padding: ($grid-gutter-width * .75);
   @include media-breakpoint-up(sm) { padding: $grid-gutter-width; }
 }
 .tile-header {
@@ -49,13 +48,13 @@
 }
 .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-bottom: -($grid-gutter-width * .75);
   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/core/plugins/_datetimepicker.scss

@@ -14,12 +14,9 @@
 .bootstrap-datetimepicker-widget {
   display: block;
   top: 0 !important;
-  padding: 0;
-  min-width: ($spacer * 14);
-  max-width: ($spacer * 14);
+  min-width: ($spacer * 10.5);
+  max-width: ($spacer * 10.5);
   background-color: $white;
-  border: $border-width solid $border-color;
-  border-radius: 0;
   z-index: 110;
 
   &.dropdown-menu {
@@ -127,8 +124,8 @@
   //** Default sizing for select cells
   [data-action^='select'] {
     display: inline-block;
-    height: ($spacer * 3);
-    line-height: ($spacer * 3);
+    height: ($spacer * 2.25);
+    line-height: ($spacer * 2.25);
   }
 }
 
@@ -137,8 +134,8 @@
 
   //** Top picker switcher for month, year, decade
   [data-action^='picker'] {
-    padding-top: ($spacer / 2);
-    padding-bottom: ($spacer / 2);
+    padding-top: ($spacer * .25);
+    padding-bottom: ($spacer * .25);
     width: ($spacer * 10);
     border-right: $border-width solid $border-color;
     border-left: $border-width solid $border-color;
@@ -147,7 +144,7 @@
 
   //** Day of the week
   .dow {
-    padding: ($spacer / 4);
+    padding: ($spacer * .25);
     font-weight: $font-weight-bold;
     font-size: $font-size-base;
     border-top: $border-width solid $border-color;
@@ -156,7 +153,7 @@
   //** Previous/Next buttons
   .prev, .next {
     color: $link-color;
-    width: ($spacer * 2);
+    width: ($spacer * 1.5);
     height: 100%;
   }
 
@@ -164,8 +161,8 @@
   .datepicker-days {
     [data-action^='select'] {
       display: table-cell;
-      width: ($spacer * 2);
-      height: ($spacer * 2);
+      width: ($spacer * 1.5);
+      height: ($spacer * 1.5);
       line-height: 1;
       &:first-child { border-left: none; }
     }
@@ -193,21 +190,21 @@
 
 //** Timepicker picker section
 .timepicker-picker {
-  padding-right: ($spacer / 2);
+  padding-right: ($spacer * .5);
   td {
     width: 35%;
-    &:nth-child(2) { width: ($spacer / 2); }
+    &:nth-child(2) { width: ($spacer * .5); }
     &:nth-child(4) {
-      padding-left: ($spacer / 2);
-      width: ($spacer * 2);
+      padding-left: ($spacer * .5);
+      width: ($spacer * 1.5);
     }
     a { color: $link-color; }
   }
   [class^='timepicker-'] {
     display: block;
     width: 100%;
-    height: ($spacer * 2);
-    line-height: ($spacer * 2);
+    height: ($spacer * 1.5);
+    line-height: ($spacer * 1.5);
     font-weight: $font-weight-bold;
     font-size: $font-size-lg;
     cursor: pointer;
@@ -217,9 +214,9 @@
   .btn {
     position: relative;
     display: block;
-    padding: ($spacer / 2) 0;
+    padding: ($spacer * .5) 0;
     width: 100%;
-    height: ($spacer * 2);
+    height: ($spacer * 1.5);
   }
 }
 
@@ -227,8 +224,8 @@
 .picker-switch.accordion-toggle {
   a {
     display: block;
-    padding-top: ($spacer / 2);
-    padding-bottom: ($spacer / 2);
+    padding-top: ($spacer * .5);
+    padding-bottom: ($spacer * .5);
     color: $link-color;
     background-color: $white;
     cursor: pointer;