nfg_ui 0.11.14 → 0.12.0

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;

data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_select2.scss

@@ -18,11 +18,10 @@ body.modal-open  {
 
 
 .select2-container--default {
-  &.select2-container--focus .select2-selection--multiple { border-color: $primary; }
-  &.select2-container--open {
-    .select2-selection--single {
-      border-color: $custom-select-focus-border-color !important;
-    }
+  &.select2-container--focus .select2-selection--multiple,
+  &.select2-container--open .select2-selection--single {
+    border-color: $custom-select-focus-border-color;
+    box-shadow: 0 0 0 ($spacer * .125) transparentize($primary, 0.8);
   }
 
   //** Single select option
@@ -31,25 +30,23 @@ body.modal-open  {
     width: 100%;
     height: $custom-select-height !important;
     padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x !important;
-    font-weight: $btn-font-weight;
+    // font-weight: $btn-font-weight;
     line-height: $custom-select-line-height;
     color: $custom-select-color;
     vertical-align: middle;
     background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
     background-size: $custom-select-bg-size;
-    border: $custom-select-border-width solid $custom-select-border-color !important;
+    border: $custom-select-border-width solid $custom-select-border-color;
     border-radius: $border-radius;
     outline: none;
     cursor: pointer;
     transition: $transition-base;
     .select2-selection__rendered {
       padding: 0 !important;
-      color: $primary !important;
-      line-height: $spacer !important;
+      line-height: ($spacer * .75) !important;
       height: $custom-select-height !important;
       transition: $transition-base;
     }
-    .select2-selection__placeholder { color: $primary; }
     .select2-selection__arrow { display: none; }
   }
 
@@ -83,14 +80,13 @@ body.modal-open  {
         font-weight: $badge-font-weight;
         font-size: $font-size-sm;
         line-height: 1;
-        color: $primary;
         background-color: $white;
         border: $border-width solid $border-color;
         border-radius: $border-radius;
         transition: $transition-base;
         &:hover, &:active {
           color: $body-color;
-          background-color: theme-color("light");
+          background-color: $dropdown-link-active-bg;
         }
         + li { margin-top: 0; }
       }
@@ -103,6 +99,7 @@ body.modal-open  {
 
   //** Dropdown styles
   .select2-dropdown {
+    padding: $dropdown-padding-y $dropdown-padding-x;
     font-size: $font-size-base;
     color: $body-color;
     text-align: left;
@@ -110,11 +107,11 @@ body.modal-open  {
     background-color: $dropdown-bg;
     background-clip: padding-box;
     border: $dropdown-border-width solid $dropdown-border-color;
-    @include border-radius($dropdown-border-radius);
-    @include box-shadow($dropdown-box-shadow);
+    border-radius: $dropdown-border-radius;
+    box-shadow: $dropdown-box-shadow;
   }
   .select2-search--dropdown {
-    padding: ($spacer * .5);
+    padding: ($spacer * .25);
     .select2-search__field {
       display: block;
       width: 100%;
@@ -143,22 +140,22 @@ body.modal-open  {
     white-space: normal; // breaks long text
     background-color: transparent; // For `<button>`s
     border: 0; // For `<button>`s
-    border-top: $border-width solid $border-color;
     z-index: 1;
+    border-radius: $dropdown-inner-border-radius;
     transition: $transition-base;
     &.select2-results__option--highlighted, &.select2-results__option--highlighted[aria-selected] {
       color: $body-color;
-      background-color: transparent;
+      background-color: $dropdown-link-active-bg;
       &:hover, &:active {
         color: $body-color;
-        background-color: theme-color("light");
+        background-color: $dropdown-link-active-bg;
       }
     }
     &[aria-disabled="true"],
     &[aria-selected='true'] {
       padding-right: ($spacer * 2);
       color: $body-color !important;
-      background-color: transparent !important;
+      background-color: $dropdown-link-active-bg !important;
       cursor: default;
       &:after {
         position: absolute;
@@ -169,7 +166,7 @@ body.modal-open  {
         font-family: "FontAwesome";
         font-size: $font-size-base;
         line-height: 1.5;
-        color: theme-color("success");
+        color: $success;
         text-align: center;
         content: '\f00c';
         z-index: 5;
@@ -177,17 +174,30 @@ body.modal-open  {
     }
     &.loading-results {
       padding-right: 0;
+      padding-left: ($spacer * 1.5);
       color: $text-muted !important;
-      font-weight: $font-weight-bold;
-      text-transform: uppercase;
-      &:after { display: none; }
+      &:after {
+        position: absolute;
+        top: ($spacer * .5);
+        left: ($spacer * .25);
+        right: auto;
+        width: 36px;
+        height: 100%;
+        font-family: "FontAwesome";
+        font-size: $font-size-base;
+        line-height: 1.5;
+        color: $text-muted;
+        text-align: center;
+        content: '\f110';
+        z-index: 5;
+      }
     }
   }
   .select2-results__group {
-    padding: ($spacer * .5);
-    font-weight: $headings-font-weight;
+    padding-top: ($spacer * .25);
+    padding-bottom: ($spacer * .25);
     font-size: $font-size-base;
-    line-height: 1.3;
+    color: $dropdown-header-color;
   }
 }
 
@@ -195,8 +205,8 @@ body.modal-open  {
 // Error handling
   .has-danger {
     .select2-selection {
-      border-color: theme-color("danger");
-      color: theme-color("danger");
+      border-color: $danger;
+      color: $danger;
     }
   }
 

data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_twitter_typeahead.scss

@@ -9,23 +9,21 @@
 }
 .tt-hint { color: $text-muted; }
 .tt-menu {
-  margin-top: 2px;
-  padding: ($spacer * .25) 0;
+  margin-top: $dropdown-spacer;
+  padding: $dropdown-padding-y $dropdown-padding-x;
   width: 100%;
   max-width: 100%;
   max-height: 350px;
-  font-size: $font-size-sm;
   background-color: $dropdown-bg;
   background-clip: padding-box;
-  border: $dropdown-border-width solid $dropdown-border-color;
-  @include border-radius($border-radius);
-  @include box-shadow(0 0 5px transparentize($black, 0.7));
+  border-radius: $dropdown-border-radius;
+  box-shadow: $dropdown-box-shadow;
   overflow-y: auto;
 }
 .tt-suggestion {
   padding: ($spacer * .5);
   line-height: 1;
-  + .tt-suggestion { border-top: $dropdown-border-width solid $dropdown-border-color; }
+  border-radius: $dropdown-inner-border-radius;
 }
 .tt-selectable { cursor: pointer; }
 .tt-suggestion.tt-cursor, .tt-selectable:hover {

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

@@ -4,12 +4,25 @@
     .nav-link {
       position: relative;
       color: $text-muted;
-      border-left: 4px solid transparent;
+      &:after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: $nav-tabs-border-width;
+        border-radius: ($nav-tabs-border-width / 2);
+        background: transparent;
+        transition: $btn-transition;
+        content: '';
+      }
       &.active {
         color: $nav-tabs-link-active-color !important;
-        border-color: $nav-tabs-link-hover-border-color;
+        &:after { background: $nav-tabs-link-hover-border-color; }
+      }
+      @include hover-focus {
+        color: $nav-tabs-link-active-color !important;
+        &:after { background: $nav-tabs-link-hover-border-color; }
       }
-      @include hover-focus { color: $nav-tabs-link-active-color !important; }
     }
   }
 }

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

@@ -1,18 +1,18 @@
 // Styles specific for the new user navbar on everyday_story and everyday_classic_style layouts
 
-$navbar-logo-height: (($spacer * 4.5) - $spacer);
+$navbar-logo-height: ($spacer * 2.5);
 
 .navbar-brand {
   margin-right: 0;
-  padding: ($spacer * .5) 0;
-  max-width: ($spacer * 8);
+  padding: 0;
+  max-width: ($spacer * 6);
   height: $navbar-logo-height;
   white-space: normal !important;
-  @include media-breakpoint-up(lg) { max-width: ($spacer * 12); }
+  @include media-breakpoint-up(lg) { max-width: ($spacer * 9); }
   img {
-    max-width: ($spacer * 8);
+    max-width: ($spacer * 6);
     max-height: $navbar-logo-height;
-    @include media-breakpoint-up(lg) { max-width: ($spacer * 12); }
+    @include media-breakpoint-up(lg) { max-width: ($spacer * 9); }
   }
 }
 .navbar-text {

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

@@ -11,7 +11,7 @@
       bottom: 0;
       left: 0;
       z-index: 0;
-      background-color: transparentize($black, 0.7);
+      background-color: transparentize($black, 0.8);
       content: '';
     }
     @include media-breakpoint-down(md) {

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

@@ -1,4 +1,4 @@
-// Styles specific to the event livestream styles
+// Styles specific to the event livestream
 .event {
   @include media-breakpoint-up(lg) { height: 100%; }
   .page-content {
@@ -36,14 +36,22 @@
     > :last-child { margin-bottom: $spacer; }
   }
   &.event-sidebar-scroll {
-    @include media-breakpoint-up(lg) { overflow-y: scroll; }
+    @include media-breakpoint-up(lg) { overflow-y: auto; }
   }
   .event-sidebar-section {
     padding: $spacer;
     + .event-sidebar-section { border-top: $border-width solid $border-color; }
     &.event-sidebar-section-scroll {
+      flex-grow: 1;
+      height: 100%;
       min-height: ($spacer * 10); // sets min-height to ensure the scrollable area has room to be seen on restricted height devices (not mobile)
-      overflow-y: scroll;
+      overflow-y: auto;
+    }
+    &.event-sidebar-section-container { // container for chat and donor scroll
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      height: 100%;
     }
   }
 }
@@ -55,3 +63,32 @@
     .card-body { padding: 0; }
   }
 }
+
+// chat container and message specific styles
+.event-sidebar-section-chat {
+  display: flex;
+  align-items: flex-end;
+  flex-grow: 1;
+  @include media-breakpoint-down(md) { // puts a border and height on mobile
+    height: ($spacer * 10);
+    border: $border-width solid $border-color;
+    border-radius: $border-radius;
+  }
+  @include media-breakpoint-up(lg) {
+    height: 100%;
+    min-height: ($spacer * 10);
+  }
+  // hides elements in public page chat only meant for admin view
+  // need this because .chat-message delete button doesn't know user type in partial
+  .hide-admin { display: none; }
+}
+
+// Allows for the login form to show in desktop and mobile.
+.event-sidebar-section-no-access {
+  overflow: hidden;
+  @include media-breakpoint-down(md) { height: 720px; }
+  .log-in-form { overflow-y: auto; }
+  .event-sidebar-section-chat {
+    @include media-breakpoint-down(md) { height: 100%; }
+  }
+}

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

@@ -25,7 +25,7 @@
   }
   .progress-stats {
     position: absolute;
-    top: ($spacer * .25);
+    top: ($spacer * .125);
     left: $grid-gutter-width / 2;
     width: 100%;
     z-index: 1;

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

@@ -1,5 +1,5 @@
-$page-header-height: ($spacer * 4.5);
-$page-header-height-admin: ($spacer * 6.5);
+$page-header-height: ($spacer * 3.5); // 11.2rem
+$page-header-height-admin: ($spacer * 5); // 16rem
 
 // Page header specific styles
 .page-header {
@@ -22,13 +22,9 @@ $page-header-height-admin: ($spacer * 6.5);
 // Moving .page-content container down with padding when page-header exists but ONLY on larger screens
 .page-header {
   + .page-content {
-    @include media-breakpoint-up(lg) {
-      padding-top: $page-header-height;
-    }
+    @include media-breakpoint-up(lg) { padding-top: $page-header-height; }
   }
   body.admin & + .page-content { // this renders as body.admin .page-header + .page-content specifying when the view is in admin status
-    @include media-breakpoint-up(lg) {
-      padding-top: $page-header-height-admin;
-    }
+    @include media-breakpoint-up(lg) { padding-top: $page-header-height-admin; }
   }
 }