malvolio 0.1.0

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/_foundation_emails.scss

@@ -0,0 +1,27 @@
+// Foundation for Emails by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import
+  'util/util',
+  'global',
+  'components/normalize',
+  'grid/grid',
+  'grid/block-grid',
+  'components/alignment',
+  'components/visibility',
+  'components/typography',
+  'components/button',
+  'components/callout',
+  'components/thumbnail',
+  'components/menu',
+  'components/outlook-first',
+  'components/media-query';
+
+
+
+
+
+
+
+

data/lib/generators/malvolio/templates/base_with_inky/scss/foundation_emails/_global.scss

@@ -0,0 +1,95 @@
+// Foundation for Emails by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group global
+////
+
+/// Primary color for interactive components like links and buttons.
+/// @type Color
+$primary-color: #2199e8 !default;
+
+/// Secondary color, used with components that support the `.secondary` class.
+/// @type Color
+$secondary-color: #777777 !default;
+
+/// Color to indicate a positive status or action, used with the `.success` class.
+/// @type Color
+$success-color: #3adb76 !default;
+
+/// Color to indicate a caution status or action, used with the `.warning` class.
+/// @type Color
+$warning-color: #ffae00 !default;
+
+/// Color to indicate a negative status or action, used with the `.alert` class.
+/// @type Color
+$alert-color: #ec5840 !default;
+
+/// Color used for light gray UI items within Foundation.
+/// @type Color
+$light-gray: #f3f3f3 !default;
+
+/// Color used for medium gray UI items within Foundation.
+/// @type Color
+$medium-gray: #cacaca !default;
+
+/// Color used for dark gray UI items within Foundation.
+/// @type Color
+$dark-gray: #8a8a8a !default;
+
+/// Color used for black ui items within Foundation
+/// @type Color
+$black: #0a0a0a !default;
+
+/// Color used for white ui items within Foundation
+/// @type Color
+$white: #fefefe !default;
+
+/// Color used code.
+/// @type Color
+$pre-color: #ff6908 !default;
+
+/// Width of the container.
+/// @type Number
+$global-width: 580px !default;
+
+/// Width of the container on small screens.
+/// @type Length
+$global-width-small: 95% !default;
+
+/// Gutter for grid elements.
+/// @type length
+$global-gutter: 16px !default;
+
+/// Body background color.
+/// @type Length
+$body-background: $light-gray !default;
+
+/// Color for the container background
+/// @type Color
+$container-background: $white !default;
+
+/// Global padding.
+/// @type Number
+$global-padding: 16px !default;
+
+/// Global margin. Margin requires a capital 'M' to workin Outlook.com
+/// @type Number
+$global-margin: 16px !default;
+
+/// Global radius of radius-corners.
+/// @type Number
+$global-radius: 3px !default;
+
+/// Global rounded radius of rounded-corners.
+/// @type Number
+$global-rounded: 500px !default;
+
+/// Global media query to switch from desktop to mobile styles.
+/// @type String
+$global-breakpoint: $global-width + $global-gutter !default;
+
+.wrapper {
+  width: 100%;
+}

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

@@ -0,0 +1,88 @@
+// 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;
+  }
+}
+
+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;
+}
+
+table,
+td,
+th {
+  &.float-center {
+    margin: 0 auto;
+    Margin: 0 auto;
+    float: none;
+    text-align: center;
+  }
+}
+
+

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

@@ -0,0 +1,312 @@
+// 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;
+      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;
+        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.tiny {
+  table {
+    td,
+    a {
+      padding: map-get($button-padding, tiny);
+    }
+
+    a {
+      font-size: map-get($button-font-size, tiny);
+      font-weight: normal;
+    }
+  }
+}
+
+table.button.small {
+  table {
+    td,
+    a {
+      padding: map-get($button-padding, small);
+      font-size: map-get($button-font-size, small);
+    }
+  }
+}
+
+table.button.large {
+  table {
+    a {
+      padding: map-get($button-padding, large);
+      font-size: map-get($button-font-size, large);
+    }
+  }
+}
+
+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: darken($button-background, 10%);
+      color: $button-color;
+    }
+  }
+}
+
+table.button:hover,
+table.button:visited,
+table.button:active {
+  table {
+    a {
+      border: 0 solid darken($button-background, 10%);
+    }
+  }
+}
+
+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: darken($success-color, 10%);
+    }
+
+    a {
+      border: 0 solid darken($success-color, 10%);
+    }
+  }
+}
+
+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: darken($alert-color, 10%);
+    }
+
+    a {
+      border: 0 solid darken($alert-color, 10%);
+    }
+  }
+}
+
+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: darken($warning-color, 10%);
+    }
+
+    a {
+      border: 0px solid darken($warning-color, 10%);
+    }
+  }
+}