nfg_ui 0.10.13 → 0.11.1

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

@@ -0,0 +1,64 @@
+// Slat and its child elements
+.slat {
+  display: -ms-flexbox;
+  -ms-flex-direction: column;
+  -ms-flex-wrap: nowrap;
+
+  // Nowrap version -- used when the goal is to have all slat-item columns on the same line in smaller screens
+  &:not(.slats-nowrap) { // noting the :not() psuedo-class meaning all slats that don't have this class get these styles
+    .slat-body {
+      @include media-breakpoint-down(sm) { -ms-flex-direction: column; }
+    }
+  }
+}
+
+
+// Slat and its child elements
+.slat {
+  display: -ms-flexbox;
+  -ms-flex-direction: row;
+  -ms-flex-wrap: wrap;
+}
+
+
+// Body Column
+.slat-body {
+  display: -ms-flexbox;
+  -ms-flex-direction: row;
+  -ms-flex-wrap: wrap;
+  -ms-flex-positive: 1;
+  -ms-flex-negative: 0;
+  -ms-flex-preferred-size: 0;
+}
+
+
+// Item Column
+.slat-item {
+  -ms-flex-positive: 1;
+  -ms-flex-negative: 0;
+  -ms-flex-preferred-size: 0;
+  &.slat-item-md { -ms-flex-positive: 2; }
+  &.slat-item-lg { -ms-flex-positive: 3; }
+  &.slat-item-xl { -ms-flex-positive: 4; }
+}
+
+
+// Action Column
+.slat-actions {
+  -ms-flex-positive: 0;
+  -ms-flex-negative: 0;
+  -ms-flex-preferred-size: ($spacer * 2.5);
+  min-width: ($spacer * 2.5);
+  @include media-breakpoint-up(md) {
+    -ms-flex-preferred-size: ($spacer * 5.5);
+    min-width: ($spacer * 5.5);
+  }
+  .slat-actions-sm & { -ms-flex-preferred-size: ($spacer * 2.5); }
+  .slat-actions-lg & { -ms-flex-preferred-size: ($spacer * 5.5); }
+}
+
+
+// Slat header
+.slat-header {
+  .slat-body { -ms-flex-align: center; }
+}

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/core/nfg_theme/custom/_slat.scss

@@ -0,0 +1,142 @@
+$slat-actions-sm-width: 36px;
+$slat-actions-lg-width: 108px;
+
+
+// Slat list layout
+.slats {
+  display: flex;
+  flex-flow: column nowrap;
+
+  // Nowrap version -- used when the goal is to have all slat-item columns on the same line in smaller screens
+  :not(.slats-nowrap) { // noting the :not() psuedo-class meaning all slats that don't have this class get these styles
+    .slat-body {
+      @include media-breakpoint-down(sm) { flex-direction: column; }
+    }
+    .slat-item + .slat-item {
+      @include media-breakpoint-down(sm) { margin-top: $spacer; }
+    }
+  }
+}
+
+
+// Slat and its child elements
+.slat {
+  display: flex;
+  flex-flow: row wrap;
+  padding-top: $spacer;
+  padding-bottom: $spacer;
+  + .slat { border-top: $border-width solid $border-color; }
+
+  // Sizing options
+  .slats-sm & {
+    padding-top: ($spacer * .5);
+    padding-bottom: ($spacer * .5);
+  }
+  .slats-lg & {
+    padding-top: ($spacer * 1.5);
+    padding-bottom: ($spacer * 1.5);
+  }
+
+  // Various states
+  &.ui-sortable-placeholder {
+    visibility: visible !important;
+    background: theme-color("light");
+    border: $border-width dashed $border-color;
+    + .slat { border-top: none; }
+    + &.ui-sortable-helper {
+      border-top-style: dashed;
+      + &.slat { border-top: none; }
+    }
+  }
+  &.ui-sortable-helper {
+    border-top: none;
+    opacity: .5;
+    border-top: none;
+    + &.ui-sortable-placeholder { border-top: $border-width dashed $border-color; }
+  }
+}
+
+
+// Body Column
+.slat-body {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex: 1 0 0;
+  margin-right: -($grid-gutter-width * .5);
+  margin-left: -($grid-gutter-width * .5);
+  width: 100%;
+
+  // max-width needed for when text-truncate is on an element inside
+  @include media-breakpoint-down(sm) { max-width: calc(100% - #{$slat-actions-sm-width}); }
+  @include media-breakpoint-up(md) { max-width: calc(100% - #{$slat-actions-lg-width}); }
+  .slat-actions-sm & { max-width: calc(100% - #{$slat-actions-sm-width}); }
+  .slat-actions-lg & { max-width: calc(100% - #{$slat-actions-lg-width}); }
+  .slat-actions-none & { max-width: calc(100% + 24px); }
+}
+
+
+// Shared action and item column
+.slat-item, .slat-actions {
+  padding-left: ($grid-gutter-width * .5);
+  min-width: 0px;
+  word-break: break-word;
+  white-space: normal;
+}
+
+
+// Item Column
+.slat-item {
+  flex: 1 0 0;
+  padding-right: ($grid-gutter-width * .5);
+  width: 100%;
+  max-width: 100%;
+  &.slat-item-md { flex-grow: 2; }
+  &.slat-item-lg { flex-grow: 3; }
+  &.slat-item-xl { flex-grow: 4; }
+}
+
+
+// Action Column
+.slat-actions {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: ($spacer * 2.5);
+  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); }
+}
+
+
+// Action dropdown text (ex: "Actions") used for default action dropdown behavior
+.slat-actions-text {
+  @include media-breakpoint-down(sm) { display: none; }
+  @include media-breakpoint-up(md) {
+    display: inline-block;
+    margin-right: ($spacer * .25);
+  }
+  .slat-actions-lg & { // always show text on :lg slat-actions
+    display: inline-block;
+    margin-right: ($spacer * .25);
+  }
+  .slat-actions-sm & { display: none; } // always hide text on :sm slat-actions
+  + .fa.ml-1 { margin-left: 0 !important; } // hides default margin on icons in buttons on smaller device
+}
+
+
+// Slat header
+.slat-header {
+  padding-bottom: ($spacer * .5);
+  border-bottom: $border-width solid $border-color;
+  .slat { padding: 0 !important; }
+  .slat-body { align-items: center; }
+  .slat-column-header { display: inline-block; }
+
+}
+
+
+// Slat column headers -- any .slat-column-header not in .slat-header displays none on larger devices
+.slat-column-header {
+  @include media-breakpoint-up(md) { display: none; }
+}