nfg_ui 0.11.14 → 0.12.0

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

@@ -1,13 +1,20 @@
+.form-control {
+  &:focus {
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
+  }
+}
+
+
 // Required styles
 label {
   font-weight: $font-weight-bold;
   &.required {
-    padding-left: ($spacer * .5);
+    padding-left: ($spacer * .25);
     &::before{
       content: '*';
       color: theme-color("danger");
-      margin-left: -($spacer * .5);
-      padding-right: ($spacer * .25);
+      margin-left: -($spacer * .25);
+      padding-right: ($spacer * .125);
     }
   }
   .required, abbr[title='required'] {
@@ -18,7 +25,7 @@ label {
   }
 }
 
-textarea.form-control { min-height: ($spacer * 6); }
+textarea.form-control { min-height: ($spacer * 5); }
 
 // Form groups
 //
@@ -27,7 +34,7 @@ textarea.form-control { min-height: ($spacer * 6); }
 
 .form-text {
   font-size: $font-size-sm;
-  line-height: 1.3;
+  line-height: 1.428;
 }
 
 // Checkboxes and radios
@@ -47,14 +54,14 @@ textarea.form-control { min-height: ($spacer * 6); }
 
 .valid-feedback,
 .invalid-feedback {
-  line-height: 1.3;
+  line-height: 1.428;
 }
 .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;
+  line-height: 1.428;
   border-radius: $tooltip-border-radius;
 }
 

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,9 +4,9 @@
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  width: ($spacer * 2);
-  height: ($spacer * 2);
-  color: transparent;
+  width: ($spacer * 1.25);
+  height: ($spacer * 1.25);
+  color: $body-color;
   background-color: $border-color;
   border-radius: 50%;
 
@@ -22,7 +22,7 @@
     font-weight: $font-weight-bold;
     font-size: $font-size-base;
     line-height: 1.2;
-    color: $body-color;
+    color: inherit;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
@@ -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/_chat.scss

@@ -0,0 +1,39 @@
+// Chat functionality within FP admin and public (livestream event template)
+
+.chat-container {
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  max-height: 100%;
+  height: 100%;
+  z-index: 0;
+  &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: $spacer;
+    @include gradient-y(transparentize($white, 0), transparentize($white, 1));
+    content: '';
+    z-index: 10;
+  }
+}
+.chat-messages {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding-top: $spacer;
+  width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+  z-index: 0;
+}
+.chat-message {
+  // donation icon in chat message renders top left of avatar
+  .icon-circle {
+    position: absolute;
+    top: -($spacer * .5);
+    left: -($spacer * .5);
+    z-index: 20;
+  }
+}

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/_overlay_blocker.scss

@@ -0,0 +1,17 @@
+.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: transparentize($white, 0.1);
+}
+.overlay-blur {
+  transition: $transition-base;
+  filter: blur(0);
+  &.in { filter: blur(4px); }
+}

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; }