nfg_ui 0.10.10 → 0.10.15

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

@@ -0,0 +1,24 @@
+//** CORE Styles **//
+
+// App Vendors
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700);
+@import 'font-awesome';
+@import 'select2';
+
+// Core Variables
+@import 'variables';
+
+// Bootstrap Vendor Base - placed after core variables in order to pull in our custom variables
+@import 'bootstrap';
+
+// NFG Theme
+@import 'nfg_theme/*';
+
+// Plugins
+@import 'plugins/datepicker';
+@import 'plugins/datetimepicker';
+@import 'plugins/select2';
+@import 'plugins/sticky_div';
+
+// Legacy Browser Support
+@import 'legacy_browser_support/application';

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/entity_branding/application.scss

@@ -1,20 +1,20 @@
 //** Entity Branding Styles **//
 
-// Our Variables
-@import 'nfg_ui/network_for_good/public/variables';
+// Core Variables
+@import 'nfg_ui/network_for_good/core/variables';
 
-// NFG Theme
+// NFG Theme - listed individually because we need functions and reboot first
 @import 'nfg_theme/functions';
 @import 'nfg_theme/reboot';
 @import 'nfg_theme/badge';
 @import 'nfg_theme/buttons';
 @import 'nfg_theme/custom-forms';
+@import 'nfg_theme/custom';
 @import 'nfg_theme/forms';
 @import 'nfg_theme/nav';
 @import 'nfg_theme/navbar';
 @import 'nfg_theme/type';
 @import 'nfg_theme/utilities';
-@import 'nfg_theme/custom';
 
 // Plugins
 @import 'plugins/datetimepicker';

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/entity_branding/nfg_theme/_buttons.scss

@@ -22,10 +22,10 @@
 
 .btn-outline-secondary {
   color: color-yiq($primary, $yiq-text-dark, $primary);
-  &:hover { color: color-yiq($primary, $yiq-text-dark, $primary); }
+  &:hover { color: color-yiq($primary, $yiq-text-dark, $primary) !important; }
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .show > &.dropdown-toggle { color: color-yiq($primary, $yiq-text-dark, $primary); }
+  .show > &.dropdown-toggle { color: color-yiq($primary, $yiq-text-dark, $primary) !important; }
 }
 
 .btn-link {

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/entity_branding/nfg_theme/_nav.scss

@@ -3,14 +3,12 @@
 .nav {
   &.flex-column {
     .nav-link {
-      &.active::after { background: $primary; }
+      &.active { border-color: $primary; }
     }
   }
 }
 .nav-tabs {
   .nav-link {
-    &:hover, &.active {
-      &::after { background: $primary; }
-    }
+    &:hover, &.active { border-color: $primary; }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/legacy_browser_support/nfg_theme/_custom.scss

@@ -3,3 +3,4 @@
 @import 'custom/everyday_giving';
 @import 'custom/nav_step';
 @import 'custom/slat';
+@import 'custom/video_countdown';

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

@@ -0,0 +1,5 @@
+.countdown {
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/{admin → core}/nfg_theme/_alert.scss

@@ -1,18 +1,18 @@
 // Custom type color
 .alert {
   color: $body-color;
-  a {
+  a:not(.btn) {
     text-decoration: underline;
     &:hover, &:active { text-decoration: none; }
   }
 }
-.alert-success a { color: $success; }
-.alert-info a { color: $info; }
-.alert-warning a { color: $warning; }
+.alert-success a:not(.btn) { color: $success; }
+.alert-info a:not(.btn) { color: $info; }
+.alert-warning a:not(.btn) { color: $warning; }
 .alert-danger, .alert-error {
-  a { color: $danger; }
+  a:not(.btn) { color: $danger; }
 }
 .alert-gray, .alert-notice,
 .alert-light, .alert-dark {
-  a { color: inherit; }
+  a:not(.btn) { color: inherit; }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/{admin → core}/nfg_theme/_buttons.scss

@@ -1,6 +1,6 @@
 // Custom secondary button usage
 .btn-outline-secondary {
-  color: theme-color("primary");
+  color: $primary;
   background-color: $white;
   border-color: $border-color;
   @include hover {

data/app/assets/stylesheets/nfg_ui/network_for_good/{admin → core}/nfg_theme/_card.scss

@@ -1,11 +1,9 @@
 //
 // Base styles
 //
-.card[href] {
-  box-shadow: none;
-  transition: $transition-base;
-  &:hover { box-shadow: $box-shadow-sm; }
-}
+// .card[href] { box-shadow: none; }
+.card-title { margin-bottom: ($card-spacer-y * .5); }
+
 .card-subtitle { margin-top: 0; }
 
 

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

@@ -0,0 +1,11 @@
+// Our custom styles
+@import 'custom/avatar';
+@import 'custom/device_preview';
+@import 'custom/illustration';
+@import 'custom/mobile';
+@import 'custom/nav_step';
+@import 'custom/redactor';
+@import 'custom/social_share';
+@import 'custom/slat';
+@import 'custom/ticket';
+@import 'custom/tile';

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

@@ -0,0 +1,26 @@
+//
+// Tabs
+//
+.nav-tabs {
+  border-width: $border-width;
+
+  .nav-item {
+    margin-bottom: -$border-width;
+    font-weight: $font-weight-bold;
+    font-size: $font-size-base;
+  }
+
+  .nav-link {
+    color: $text-muted !important;
+    border: none;
+    border-bottom: $nav-tabs-border-width solid transparent;
+    @include hover-focus {
+      color: $nav-tabs-link-active-color !important;
+      border-color: $nav-tabs-link-hover-border-color;
+    }
+  }
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $nav-tabs-link-active-color !important;
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/{admin → core}/nfg_theme/custom/_redactor.scss

@@ -10,6 +10,7 @@
   background-color: $body-bg;
   box-shadow: none;
   border-bottom: $border-width solid $border-color;
+  a { color: inherit !important; }
 }
 .redactor-editor, .redactor-box, .redactor-box textarea { z-index: auto; }
 .redactor-box .redactor-toolbar { z-index: $zindex-dropdown - 10 !important; }

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/nfg_theme/custom/_social_share.scss

@@ -3,6 +3,7 @@
 $facebook:      #3b5998 !default;
 $twitter:       #1da1f2 !default;
 $linkedin:      #0077b5 !default;
+$google-plus:   #dd4b39 !default;
 $pinterest:     #bd081c !default;
 
 $social-media-colors: () !default;
@@ -12,6 +13,7 @@ $social-media-colors: map-merge(
     "facebook":     $facebook,
     "twitter":      $twitter,
     "linkedin":     $linkedin,
+    "google-plus":  $google-plus,
     "pinterest":    $pinterest
   ),
   $social-media-colors

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/nfg_theme/custom/_tile.scss

@@ -8,8 +8,7 @@
   margin-left: auto;
   word-wrap: break-word;
   background-color: $white;
-  border-radius: $border-radius;
-  box-shadow: $box-shadow-sm;
+  border: $border-width solid $border-color;
   + .tile { margin-top: $spacer; }
 }
 

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

@@ -0,0 +1,5 @@
+// INTERCOM -- custom styles for https://www.intercom.io/ integration
+
+.intercom-lightweight-app-launcher, .intercom-launcher-frame { // second selector is class added to intercom icon after full screen closes on mobile
+  @include media-breakpoint-down(md) { bottom: ($spacer * 3.5) !important; } // adjusts location on medium devices and smaller
+}

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

@@ -1,24 +1,7 @@
 //** Public Styles **//
 
-// App Vendors
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700);
-@import 'font-awesome';
-@import 'select2';
+// Core Styles
+@import 'nfg_ui/network_for_good/core/application';
 
-// Our Variables
-@import 'variables';
-
-// Bootstrap Vendor Base
-@import 'bootstrap';
-
-// NFG Theme
+// Customization and Overrides
 @import 'nfg_theme/*';
-
-// Plugins
-@import 'plugins/datepicker';
-@import 'plugins/sticky_div';
-@import 'plugins/select2';
-@import 'plugins/datetimepicker';
-
-// Legacy browser support
-@import 'legacy_browser_support/application';

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

@@ -1,15 +1,8 @@
 // Our custom styles
 @import 'custom/admin_bar';
-@import 'custom/avatar';
 @import 'custom/background_variations';
 @import 'custom/donor_account';
+@import 'custom/event';
 @import 'custom/everyday_default';
 @import 'custom/everyday_story';
 @import 'custom/footer_links';
-@import 'custom/illustration';
-@import 'custom/nav_step';
-@import 'custom/slat';
-@import 'custom/social_share';
-@import 'custom/ticket';
-@import 'custom/tile';
-@import 'custom/user_navbar';

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

@@ -1,50 +1,15 @@
-// Vertical navigations with left indicator
+// Vertical navigations with left indicator used in donor profile area
 .nav {
   &.flex-column {
     .nav-link {
       position: relative;
       color: $text-muted;
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: ($spacer * .25);
-        height: 100%;
-        border-radius: (($spacer * .25) / 2);
-        transition: $transition-base;
-        content: '';
-      }
+      border-left: 4px solid transparent;
       &.active {
         color: $nav-tabs-link-active-color !important;
-        &::after { background: $nav-tabs-link-hover-border-color; }
+        border-color: $nav-tabs-link-hover-border-color;
       }
       @include hover-focus { color: $nav-tabs-link-active-color !important; }
     }
   }
 }
-
-//
-// Tabs
-//
-.nav-tabs {
-  .nav-item { margin-right: ($spacer * .5); }
-  .nav-link {
-    position: relative;
-    color: $text-muted;
-    border: none;
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: ($spacer * .25);
-      border-radius: (($spacer * .25) / 2);
-      transition: $transition-base;
-      content: '';
-    }
-    @include hover-focus {
-      color: $nav-tabs-link-active-color !important;
-      &::after { background: $nav-tabs-link-hover-border-color; }
-    }
-  }
-}