malvolio 0.1.0

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/components/_callout.scss

@@ -0,0 +1,85 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group callout
+////
+
+/// Background color of a callout.
+/// @type Color
+$callout-background: $white !default;
+
+/// Fade value for callout backgrounds.
+/// @type Number
+$callout-background-fade: 85% !default;
+
+/// Padding inside a callout.
+/// @type Length
+$callout-padding: 10px !default;
+
+/// Bottom margin of a callout.
+/// @type Length
+$callout-margin-bottom: $global-margin !default;
+
+/// Border around a callout.
+/// @type Border
+$callout-border: 1px solid darken($callout-background, 20%) !default;
+
+/// Border around a callout with the `.success` class.
+/// @type Border
+$callout-border-secondary: 1px solid darken($secondary-color, 20%) !default;
+
+/// Border around a callout with the `.success` class.
+/// @type Border
+$callout-border-success: 1px solid darken($success-color, 20%) !default;
+
+/// Border around a callout with the `.warning` class.
+/// @type Border
+$callout-border-warning: 1px solid darken($warning-color, 20%) !default;
+
+/// Border around a callout with the `.alert` class.
+/// @type Border
+$callout-border-alert: 1px solid darken($alert-color, 20%) !default;
+
+table.callout {
+  margin-bottom: $callout-margin-bottom;
+  Margin-bottom: $callout-margin-bottom;
+}
+
+th.callout-inner {
+  width: 100%;
+  border: $callout-border;
+  padding: $callout-padding;
+  background: $callout-background;
+
+  &.primary {
+    background: scale-color($primary-color, $lightness: $callout-background-fade);
+    border: $callout-border-secondary;
+    color: $black;
+  }
+
+  &.secondary {
+    background: scale-color($secondary-color, $lightness: $callout-background-fade);
+    border: $callout-border-secondary;
+    color: $black;
+  }
+
+  &.success {
+    background: scale-color($success-color, $lightness: $callout-background-fade);
+    border: $callout-border-success;
+    color: $white;
+  }
+
+  &.warning {
+    background: scale-color($warning-color, $lightness: $callout-background-fade);
+    border: $callout-border-warning;
+    color: $white;
+  }
+
+  &.alert {
+    background: scale-color($alert-color, $lightness: $callout-background-fade);
+    border: $callout-border-alert;
+    color: $white;
+  }
+}

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/components/_media-query.scss

@@ -0,0 +1,139 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group media-query
+////
+
+@media only screen and (max-width: #{$global-breakpoint}) {
+  table.body img {
+    width: auto;
+    height: auto;
+  }
+
+  table.body center {
+    min-width: 0 !important;
+  }
+
+  table.body .container {
+    width: $global-width-small !important;
+  }
+
+  //If it supports border-box, why not? Am I right?
+  //Also, by default pad that to the global-gutter variable
+  table.body .columns,
+  table.body .column {
+    height: auto !important;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding-left: $global-gutter !important;
+    padding-right: $global-gutter !important;
+
+    // Nested columns won't double the padding
+    .column,
+    .columns {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+  }
+
+  // Collpased columns have no gutter.
+  .collapse {
+    table.body & .columns,
+    table.body & .column {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+  }
+
+  // Basic grid rules
+  @for $i from 1 through $grid-column-count {
+    td.small-#{$i},
+    th.small-#{$i} {
+      display: inline-block !important;
+      width: -zf-grid-calc-pct($i, $grid-column-count) !important;
+    }
+  }
+
+  //If it's the last column in column count (12 by default),
+  //give it block and 100% width to knock down the wimpy columns to their own row.
+  .columns td.small-#{$grid-column-count},
+  .column td.small-#{$grid-column-count},
+  .columns th.small-#{$grid-column-count},
+  .column th.small-#{$grid-column-count} {
+    display: block !important;
+    width: 100% !important;
+  }
+
+  @for $i from 1 through ($grid-column-count - 1) {
+    table.body td.small-offset-#{$i},
+    table.body th.small-offset-#{$i} {
+      //1.5 takes in effect a whole empty cell.
+      margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
+      Margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
+    }
+  }
+
+  table.body table.columns td.expander,
+  table.body table.columns th.expander {
+    display: none !important;
+  }
+
+  table.body .right-text-pad,
+  table.body .text-pad-right {
+    padding-left: $text-padding !important;
+  }
+
+  table.body .left-text-pad,
+  table.body .text-pad-left {
+    padding-right: $text-padding !important;
+  }
+
+  //menu
+  table.menu {
+    width: 100% !important;
+
+    td,
+    th {
+      width: auto !important;
+      display: inline-block !important;
+    }
+
+    &.vertical,
+    &.small-vertical {
+      td,
+      th {
+        display: block !important;
+      }
+    }
+  }
+
+  // Centers the menus!
+  table.menu[align="center"] {
+    width: auto !important;
+  }
+
+  // expands buttons for small only
+  table.button.small-expand,
+  table.button.small-expanded {
+    width: 100% !important;
+
+    table {
+      width: 100%;
+
+      a {
+        text-align: center !important;
+        width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+
+    center {
+      min-width: 0;
+    }
+  }
+}
+

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/components/_menu.scss

@@ -0,0 +1,83 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group menu
+////
+
+/// Padding inside a menu item.
+/// @type Length
+$menu-item-padding: 10px !default;
+
+/// Right-hand spacing of items in menus with the `.simple` class.
+/// @type Length
+$menu-item-gutter: 10px !default;
+
+/// This is the color of the menu item links.
+/// @type Color
+$menu-item-color: $primary-color !default;
+
+table.menu {
+  width: $global-width;
+
+  td.menu-item,
+  th.menu-item {
+    padding: $menu-item-padding;
+    padding-right: $menu-item-gutter;
+
+    a {
+      color: $menu-item-color;
+    }
+  }
+}
+
+// Doesn't work on the pesky ESPs like outlook 2000
+table.menu.vertical {
+  td.menu-item,
+  th.menu-item {
+    padding: $menu-item-padding;
+    padding-right: 0;
+    display: block;
+
+    a {
+      width: 100%;
+    }
+  }
+
+  // Nested lists need some more padding to the left
+  td.menu-item,
+  th.menu-item {
+    table.menu.vertical {
+      td.menu-item,
+      th.menu-item {
+        padding-left: $menu-item-padding;
+      }
+    }
+  }
+}
+
+table.menu.text-center a {
+  text-align: center;
+}
+
+//Centers the menus!
+.menu[align="center"] {
+  width: auto !important;
+}
+
+// Remove outside padding so that the menu aligns with other elements on the page
+.menu:not(.float-center) {
+    .menu-item:first-child{padding-left:0!important;}
+    .menu-item:last-child{padding-right:0!important;}
+}
+.menu.vertical .menu-item {
+    padding-left:0!important;
+    padding-right:0!important;
+}
+@media only screen and (max-width: #{$global-breakpoint}) {
+    .menu.small-vertical .menu-item {
+        padding-left:0!important;
+        padding-right:0!important;
+    }
+}

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/components/_normalize.scss

@@ -0,0 +1,86 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group normalize
+////
+
+#outlook a {
+  padding: 0;
+}
+
+body {
+  width: 100% !important;
+  min-width: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  margin: 0;
+  Margin: 0;
+  padding: 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.ExternalClass {
+  width: 100%;
+
+  &,
+  p,
+  span,
+  font,
+  td,
+  div {
+    line-height: 100%;
+  }
+}
+
+#backgroundTable {
+  margin: 0;
+  Margin: 0;
+  padding: 0;
+  width: 100% !important;
+  line-height: 100% !important;
+}
+
+img {
+  outline: none;
+  text-decoration: none;
+  -ms-interpolation-mode: bicubic;
+  width: auto;
+  max-width: 100%;
+  clear: both;
+  display: block;
+}
+
+center {
+  width: 100%;
+  min-width: $global-width;
+}
+
+a img {
+  border: none;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+td {
+  word-wrap: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+  border-collapse: collapse !important;
+}
+
+table, tr, td {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  vertical-align: top;
+  text-align: left;
+}

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/components/_outlook-first.scss

@@ -0,0 +1,11 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group outlook
+////
+
+body.outlook p {
+  display: inline !important;
+}

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/components/_thumbnail.scss

@@ -0,0 +1,49 @@
+// Foundation for Emails by ZURB
+// zurb.com/ink/
+// Licensed under MIT Open Source
+
+////
+/// @group thumbnail
+////
+
+/// Border around thumbnail images.
+/// @type Border
+$thumbnail-border: solid 4px $white !default;
+
+/// Bottom margin for thumbnail images.
+/// @type Length
+$thumbnail-margin-bottom: $global-margin !default;
+
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
+
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
+
+/// Transition proprties for thumbnail images.
+/// @type Transition
+$thumbnail-transition: box-shadow 200ms ease-out !default;
+
+/// Default radius for thumbnail images.
+/// @type Number
+$thumbnail-radius: $global-radius !default;
+
+/// Adds thumbnail styles to an element.
+.thumbnail {
+  border: $thumbnail-border;
+  box-shadow: $thumbnail-shadow;
+  display: inline-block;
+  line-height: 0;
+  max-width: 100%;
+  transition: $thumbnail-transition;
+  border-radius: $thumbnail-radius;
+  margin-bottom: $thumbnail-margin-bottom;
+
+  &:hover,
+  &:focus {
+    box-shadow: $thumbnail-shadow-hover;
+  }
+}
+