Various <hr> fixes

[jsit]

Fix margin around <hr>s (#647)
Make <hr>s 0-height (#648)
Make <hr>s obey $hr-width (#678)
Make <hr>s obey $hr-margin in Outlook 2007/10/13 (#682)
Add h-line mixin to create different horizontal rules/dividers

The code required to render these horizontal rules (and this differs from the proposed Inky <h-line> code, so that may need to be updated as well):

<table class="hr">
  <tr>
    <th>
      <table><tr><td>&nbsp;</td></tr></table>
    </th>
  </tr>
</table>

Also, in order for this to work, $hr-margin will need to be a single value rather than something like 20px auto; Outlook and others don't obey marginon tables, so this is instead handled with padding-bottom (on the outer th) and padding-top (on the inner td with border-bottom).

I've also added support for the table.h-line selector, which looks like it will be used in an upcoming Inky release when <h-line> is implemented. (foundation/inky#46)

Also addresses #496 and #554, for which some of my Issues above are potential duplicates.

[jsit]

Margin (with capital M) not required, since Outlook won't obey this anyway.

[jsit]

Tried without !important, went to 100% width.

[jsit]

Support table.h-line as per foundation/inky#46

[ncoden]

Poke @kball

[jsit]

To emulate the behavior in menus, maybe the structure ought to be a <td> on the outside, and a <th> on the inside? I'm not sure of the rationale for using one or the other in the rest of Inky. So:

<table class="hr">
  <tr>
    <td>
      <table><tr><th>&nbsp;</th></tr></table>
    </td>
  </tr>
</table>

[rmnturov]

Merge please

[callaginn]

I ended up fixing this by putting together a pretty simple partial called "hr.hbs". As far as I know, this works in all email clients, including Outlook 2016. Normal <hr>s do not work, of course. Cause it's Outlook. And Outlook is TERRIBLE.

Divider Partial

{{#if underscore}}
    <table width="65" cellpadding="0" cellspacing="0" border="0" class="underscore">
        <tr><td height="4">&nbsp;</td></tr>
    </table>
{{else}}
    {{#if margin}}<spacer size="{{margin}}"></spacer>{{/if}}
    <table width="{{#if width}}{{width}}{{else}}100%{{/if}}" cellpadding="0" cellspacing="0" border="0" class="divider">
        <tr>
            <td height="1" style="{{#if height}}border-top-width:{{height}}px;{{/if}} {{#if color}}border-color:{{color}}{{/if}}">&nbsp;</td>
        </tr>
    </table>
{{/if}}

{{#if margin}}<spacer size="{{margin}}"></spacer>{{/if}}

Divider CSS

table.underscore {
    width: 65px !important;
    Margin-left: auto;
    Margin-right: auto;
}

table.divider td, table.underscore td {
    border-top: $hr-border;
    font-size: $hr-height;
    height: $hr-height;
    line-height: $hr-height;
}

hr.underscore, table.underscore td {
    border-top: 4px solid $black;
}

table.underscore td {
    font-size: 4px;
    height: 4px;
    line-height: 4px;
}

This partial accepts variables for margins, color, height, and width. Here's a few examples of how to add it to your templates.

Simplest Init

Note: If you don't provide any values, it will use the values from $hr-border, $hr-height, etc.
{{> hr }}

Passing Values

You can pass values to it as well. For example:
{{> hr margin=60 height=4 color="#000000" }}

Title Underscores

You can add an underscore value, to add nice little underscores beneath titles.

<h1>Start the New Year off right!</h1>
{{> hr underscore=true }}

I have not added all of the width, height, and color variables to the "title underscores", because these are controlled by different color email themes. For example, here's a dead simple css theme I set up. You'll need to add these classes to your templates:

html.theme-blue, html.theme-blue body, html.theme-blue .body .content {
    background: lighten($blue, 35%);
    background-color: lighten($blue, 35%);
    h1, .text-color {color: $blue;}
    hr.underscore, .underscore td {border-top-color: $blue;}
}