nfg_ui 0.9.8.15

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_tile.scss

@@ -0,0 +1,71 @@
+//
+// Base styles
+//
+
+.tile {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  word-wrap: break-word;
+  background-color: $white;
+  border-top: $border-width solid $border-color;
+  border-bottom: $border-width solid $border-color;
+  @include media-breakpoint-down(sm) {
+    margin-right: -($grid-gutter-width / 2);
+    margin-left: -($grid-gutter-width / 2);
+  }
+  @include media-breakpoint-up(sm) {
+    border-right: $border-width solid $border-color;
+    border-left: $border-width solid $border-color;
+  }
+  + .tile { margin-top: $spacer; }
+}
+
+.tile-body {
+  padding: $grid-gutter-width;
+  @include media-breakpoint-up(sm) { padding: ($grid-gutter-width * 1.5); }
+}
+
+// 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; }
+  @include media-breakpoint-up(sm) { padding-bottom: ($grid-gutter-width * 1.5); }
+  &:last-child { padding-bottom: 0; }
+  + .tile-section {
+    border-top: $border-width solid $border-color;
+    @include media-breakpoint-down(sm) { padding-top: $grid-gutter-width; }
+    @include media-breakpoint-up(sm) { padding-top: ($grid-gutter-width * 1.5); }
+  }
+}
+
+//
+// Optional textual caps
+//
+
+.tile-header, .tile-footer {
+  padding: ($grid-gutter-width / 2) $grid-gutter-width;
+  background-color: $white;
+  @include media-breakpoint-up(sm) { padding: $grid-gutter-width; }
+}
+.tile-header {
+  + .collapse,
+  + .collapsing,
+  + .tile-body,
+  + .tile-footer { border-top: $border-width solid $border-color; }
+}
+.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-left: -$grid-gutter-width;
+  border-bottom: 0;
+  @include media-breakpoint-up(sm) { margin-bottom: -$grid-gutter-width; }
+}

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

@@ -0,0 +1,38 @@
+@import "settings/settings";
+@import "foundation-emails";
+@import "foundation_emails/alignment";
+@import "foundation_emails/button";
+
+// NFG Theme specific
+@import "nfg_theme/spacers";
+@import "nfg_theme/layout";
+@import "nfg_theme/rainbow_bar";
+@import "nfg_theme/typography";
+@import "nfg_theme/backgrounds";
+
+
+// App Utilities
+// i18n translation missing visual to help find missing t('')s...
+.translation_missing{
+  background-color: #ec5840;
+  display: inline-block;
+  border: solid 3px darken(#ec5840, 15%);
+  padding:10px;
+  color:#fff;
+  position: relative;
+
+  &:before{
+    content: "Translation Missing:";
+    position: absolute;
+    background-color: darken(#ec5840, 15%);
+    display: inline-block;
+    width: 110px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px;
+    top: -30px;
+    font-size: 12px;
+    color:#fff;
+    font-weight: bold;
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_alignment.scss

@@ -0,0 +1,93 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group alignment
+////
+
+// table,
+// th,
+// td,
+// h1,
+// h2,
+// h3,
+// h4,
+// h5,
+// h6,
+// p,
+// span {
+//   &.text-center {
+//     text-align: center;
+//   }
+
+//   &.text-left {
+//     text-align: left;
+//   }
+
+//   &.text-right {
+//     text-align: right;
+//   }
+// }
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+// span.text-center {
+//   display: block;
+//   width: 100%;
+//   text-align: center;
+// }
+
+// @media only screen and (max-width: #{$global-breakpoint}) {
+//   .small-float-center {
+//     margin: 0 auto !important;
+//     float: none !important;
+//     text-align: center !important;
+//   }
+
+//   .small-text-center {
+//     text-align: center !important;
+//   }
+
+//   .small-text-left {
+//     text-align: left !important;
+//   }
+
+//   .small-text-right {
+//     text-align: right !important;
+//   }
+// }
+
+// img.float-left {
+//   float: left;
+//   text-align: left;
+// }
+
+// img.float-right {
+//   float: right;
+//   text-align: right;
+// }
+
+// img.float-center,
+// img.text-center {
+//   margin: 0 auto;
+//   Margin: 0 auto;
+//   float: none;
+//   text-align: center;
+// }
+
+img.display-inline-block { display: inline-block; }
+
+// table,
+// td,
+// th {
+//   &.float-center {
+//     margin: 0 auto;
+//     Margin: 0 auto;
+//     float: none;
+//     text-align: center;
+//   }
+// }
+
+

data/app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_button.scss

@@ -0,0 +1,345 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group button
+////
+
+// /// Padding inside buttons at various sizes.
+// /// @type Map
+// $button-padding: (
+//   tiny: 4px 8px 4px 8px,
+//   small: 5px 10px 5px 10px,
+//   default: 8px 16px 8px 16px,
+//   large: 10px 20px 10px 20px,
+// ) !default;
+
+// /// Font sizes of buttons at various sizes.
+// /// @type Map
+// $button-font-size: (
+//   tiny: 10px,
+//   small: 12px,
+//   default: 16px,
+//   large: 20px,
+// ) !default;
+
+// /// Text color of buttons.
+// /// @type Color
+// $button-color: $white !default;
+
+// /// Text color of buttons with a light background.
+// /// @type Color
+// $button-color-alt: $medium-gray !default;
+
+// /// Font weight of buttons.
+// /// @type Weight
+// $button-font-weight: bold !default;
+
+// /// Margin around buttons.
+// /// @type List
+// $button-margin: 0 0 $global-margin 0 !default;
+
+// /// Background color of buttons.
+// /// @type Color
+// $button-background: $primary-color !default;
+
+// /// Border around buttons.
+// /// @type Border
+// $button-border: 2px solid $button-background !default;
+
+// /// Border radius of buttons. Not supported by all email clients.
+// /// @type Number
+// $button-radius: $global-radius !default;
+
+// /// Border radius of rounded buttons. Not supported by all email clients.
+// /// @type Number
+// $button-rounded: $global-rounded !default;
+
+table.button {
+  // width: auto;
+  // margin: $button-margin;
+  // Margin: $button-margin;
+
+  table {
+
+    td {
+      // text-align: left;
+      // color: $button-color;
+      line-height: 1.2;
+      // background: $button-background;
+      // border: $button-border;
+
+      a {
+        // font-family: $body-font-family;
+        // font-size: map-get($button-font-size, default);
+        // font-weight: $button-font-weight;
+        line-height: 1.2;
+        // color: $button-color;
+        // text-decoration: none;
+        // text-align: left;
+        // display: inline-block;
+        // padding: map-get($button-padding, default);
+        // border: 0 solid $button-background;
+        // border-radius: $button-radius;
+      }
+    }
+  }
+
+  // &.radius table td {
+  //   border-radius: $button-radius;
+  //   border: none;
+  // }
+
+  // &.rounded table td {
+  //   border-radius: $button-rounded;
+  //   border: none;
+  // }
+}
+
+// table.button:hover table tr td a,
+// table.button:active table tr td a,
+// table.button table tr td a:visited,
+// table.button.tiny:hover table tr td a,
+// table.button.tiny:active table tr td a,
+// table.button.tiny table tr td a:visited,
+// table.button.small:hover table tr td a,
+// table.button.small:active table tr td a,
+// table.button.small table tr td a:visited,
+// table.button.large:hover table tr td a,
+// table.button.large:active table tr td a,
+// table.button.large table tr td a:visited {
+//   color: $button-color;
+// }
+
+table.button {
+  table {
+    td,
+    a {
+      padding: map-get($button-padding, default);
+      font-size: map-get($button-font-size, default);
+    }
+  }
+}
+
+table.button.tiny {
+  table {
+    td,
+    a {
+      padding: map-get($button-padding, tiny);
+      font-size: map-get($button-font-size, tiny);
+    }
+  }
+}
+
+table.button.small {
+  table {
+    td,
+    a {
+      padding: map-get($button-padding, small);
+      font-size: map-get($button-font-size, small);
+    }
+  }
+}
+
+table.button.large {
+  table {
+    td,
+    a {
+      padding: map-get($button-padding, large);
+      font-size: map-get($button-font-size, large);
+    }
+  }
+}
+
+table.button.inverse {
+  table {
+    td {
+      background: transparent;
+      color: $white;
+      border: 1px solid $white;
+    }
+    a {
+      color: $white;
+      // border: 0 solid $secondary-color;
+    }
+  }
+}
+
+// table.button.expand,
+// table.button.expanded {
+//   width: 100%;
+
+//   table {
+//     width: 100%;
+
+//     a {
+//       text-align: center;
+//       width: 100%;
+//       padding-left: 0;
+//       padding-right: 0;
+//     }
+//   }
+
+//   center {
+//     min-width: 0;
+//   }
+// }
+
+table.button:hover,
+table.button:visited,
+table.button:active {
+  table {
+    td {
+      background: lighten($button-background, 5%);
+      color: $button-color;
+    }
+  }
+}
+
+table.button:hover,
+table.button:visited,
+table.button:active {
+  table {
+    a {
+      border: 0 solid lighten($button-background, 5%);
+    }
+  }
+}
+
+// table.button.secondary {
+//   table {
+//     td {
+//       background: $secondary-color;
+//       color: $button-color;
+//       border: 0px solid $secondary-color;
+//     }
+
+//     a {
+//       color: $button-color;
+//       border: 0 solid $secondary-color;
+//     }
+//   }
+// }
+
+// table.button.secondary:hover {
+//   table {
+//     td {
+//       background: lighten($secondary-color, 10%);
+//       color: $button-color;
+//     }
+
+//     a {
+//       border: 0 solid lighten($secondary-color, 10%);
+//     }
+//   }
+// }
+
+// table.button.secondary:hover {
+//   table {
+//     td a {
+//       color: $button-color;
+//     }
+//   }
+// }
+
+// table.button.secondary:active {
+//   table {
+//     td a {
+//       color: $button-color;
+//     }
+//   }
+// }
+
+// table.button.secondary {
+//   table {
+//     td a:visited {
+//       color: $button-color;
+//     }
+//   }
+// }
+
+// table.button.success {
+//   table {
+//     td {
+//       background: $success-color;
+//       border: 0px solid $success-color;
+//     }
+
+//     a {
+//       border: 0 solid $success-color;
+//     }
+//   }
+// }
+
+table.button.success:hover {
+  table {
+    td {
+      background: lighten($success-color, 5%);
+    }
+
+    a {
+      border: 0 solid lighten($success-color, 5%);
+    }
+  }
+}
+
+// table.button.alert {
+//   table {
+//     td {
+//       background: $alert-color;
+//       border: 0px solid $alert-color;
+//     }
+
+//     a {
+//       border: 0 solid $alert-color;
+//     }
+//   }
+// }
+
+table.button.alert:hover {
+  table {
+    td {
+      background: lighten($alert-color, 5%);
+    }
+
+    a {
+      border: 0 solid lighten($alert-color, 5%);
+    }
+  }
+}
+
+// table.button.warning {
+//   table {
+//     td {
+//       background: $warning-color;
+//       border: 0px solid $warning-color;
+//     }
+
+//     a {
+//       border: 0px solid $warning-color;
+//     }
+//   }
+// }
+
+table.button.warning:hover {
+  table {
+    td {
+      background: lighten($warning-color, 5%);
+    }
+
+    a {
+      border: 0px solid lighten($warning-color, 5%);
+    }
+  }
+}
+
+// Fix for Outlook Expanded Button
+// Reference: https://github.com/zurb/foundation-emails/issues/415
+.button {
+  &.expand, &.expanded {
+    td:not(.expander) {
+      width: 100% !important;
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_backgrounds.scss

@@ -0,0 +1,15 @@
+// Colors
+.bg-primary { background-color: $primary-color; }
+.bg-success { background-color: $success-color; }
+.bg-warning { background-color: $warning-color; }
+.bg-alert { background-color: $alert-color; }
+
+
+// Images
+.bg-image {
+  background-repeat: no-repeat;
+  background-position: 50% 0%;
+}
+.bg-image-primary { background: $primary-color image-url('backgrounds/bg-image-primary.jpg'); }
+.bg-image-success { background: $success-color image-url('backgrounds/bg-image-success.jpg'); }
+.bg-image-warning { background: $warning-color image-url('backgrounds/bg-image-warning.jpg'); }

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_layout.scss

@@ -0,0 +1,33 @@
+// Extra layout styles
+
+
+// Inner wrapper styles that Foundation adds inside wrapper classes
+.wrapper-inner {
+  padding: 24px;
+  @media only screen and (max-width: #{$global-breakpoint}) { padding: 24px 0px !important; }
+}
+.collapse {
+  .wrapper-inner {
+    @media only screen and (max-width: #{$global-breakpoint}) { padding: 24px !important; }
+  }
+}
+
+
+// Table with borders separating rows
+.border-item {
+  td.columns,
+  td.column,
+  th.columns,
+  th.column {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    border-top: 1px solid $medium-gray;
+  }
+}
+
+
+// Specific footer styles
+.footer {
+  p { color: $secondary-color; }
+  a { color: $secondary-color !important; }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_rainbow_bar.scss

@@ -0,0 +1,47 @@
+// Rainbow Color Bar
+
+table.brand-colors {
+  width: 100%;
+  td {
+    font-size: 5px;
+    line-height: 5px;
+    height:5px;
+    &[class^='bar']{ height:5px; }
+    &.bar1 {
+      background-color: #2481c0;
+      width: 16% !important; // (Floor) Rounded Down: 197 / 1200
+    }
+    &.bar2 {
+      background-color: #59a5d6;
+      width: 7% !important; // (Floor) Rounded Down: 86 / 1200
+    }
+    &.bar3 {
+      background-color: #7fbb41;
+      width: 15% !important; // (Floor) Rounded Down: 187 / 1200
+    }
+    &.bar4 {
+      background-color: #31a644;
+      width: 10% !important; // Arbitrarily Updated to 10%
+    }
+    &.bar5 {
+      background-color: #2481c0;
+      width: 8% !important; // (Floor) Rounded Down: 100 / 1200
+    }
+    &.bar6 {
+      background-color: #fdb514;
+      width: 15% !important; // (Floor) Rounded Down: 189 / 1200
+    }
+    &.bar7 {
+      background-color: #f7901d;
+      width: 3% !important; // (Floor) Rounded Down: 45 / 1200
+    }
+    &.bar8 {
+      background-color: #ef3823;
+      width: 23% !important; // (Floor) Rounded Down: 287 / 1200
+    }
+    &.bar9 {
+      background-color: #9e1418;
+      width:  3% !important; // (Floor) Rounded Down: 44 / 1200
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_spacers.scss

@@ -0,0 +1,60 @@
+$spacer                                     : 24px !default;
+$spacer-x                                   : $spacer !default;
+$spacer-y                                   : $spacer !default;
+$spacers: (
+  0: (
+    x : 0,
+    y : 0
+  ),
+  quarter: (
+    x : ($spacer-x * 0.25),
+    y : ($spacer-y * 0.25)
+  ),
+  half: (
+    x : ($spacer-x * 0.5),
+    y : ($spacer-y * 0.5)
+  ),
+  base: (
+    x : $spacer-x,
+    y : $spacer-y
+  ),
+  base-half: (
+    x : $spacer-x * 1.5,
+    y : $spacer-y * 1.5
+  ),
+  double: (
+    x : ($spacer-x * 2),
+    y : ($spacer-y * 2)
+  ),
+  double-half: (
+    x : ($spacer-x * 2.5),
+    y : ($spacer-y * 2.5)
+  ),
+  triple: (
+    x : ($spacer-x * 3),
+    y : ($spacer-y * 3)
+  )
+);
+
+@each $prop, $abbrev in (margin: m, padding: p) {
+  @each $size, $lengths in $spacers {
+    $length-x:   map-get($lengths, x);
+    $length-y:   map-get($lengths, y);
+
+    .#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
+    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length-y !important; }
+    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length-x !important; }
+    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
+    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length-x !important; }
+
+    // Axes
+    .#{$abbrev}-x-#{$size} {
+      #{$prop}-right:  $length-x !important;
+      #{$prop}-left:   $length-x !important;
+    }
+    .#{$abbrev}-y-#{$size} {
+      #{$prop}-top:    $length-y !important;
+      #{$prop}-bottom: $length-y !important;
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_typography.scss

@@ -0,0 +1,6 @@
+.text-primary { color: $primary-color; }
+.text-success { color: $success-color; }
+.text-warning { color: $warning-color; }
+.text-alert { color: $alert-color; }
+.text-white { color: $white; }
+.text-muted { color: #9A9A9A; }