nfg_ui 0.10.14 → 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/_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/{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/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; }
-    }
-  }
-}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/{custom/_user_navbar.scss → _navbar.scss}

@@ -1,10 +1,10 @@
 // Styles specific for the new user navbar on everyday_story and everyday_classic_style layouts
 
-$navbar-logo-height: (($spacer * 4.5) - ($navbar-padding-y * 2));
+$navbar-logo-height: (($spacer * 4.5) - $spacer);
 
 .navbar-brand {
   margin-right: 0;
-  padding: $navbar-padding-y 0;
+  padding: ($spacer * .5) 0;
   max-width: ($spacer * 8);
   height: $navbar-logo-height;
   white-space: normal !important;

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

@@ -3,6 +3,7 @@
   @include media-breakpoint-down(md) {
     &.jumbotron, &.card { background-color: $gray-800; }
   }
+  &.card { border-color: $gray-800; }
   h1, h2, h3, h4, h5, h6, p, label { color: $white; }
   .progress { background-color: $gray-600; }