// Foundation for Emails by ZURB // zurb.com/ink/ // Licensed under MIT Open Source
//// /// @group grid ////
/// Default number of columns for an email. /// @type Number $grid-column-count: 12 !default;
/// Default padding for the bottom of a column. /// @type Number $column-padding-bottom: $global-padding !default;
/// Default border radius for the container. Use a px value /// @type Number $container-radius: 0 !default;
//For viewing email in browser @media only screen {
html { min-height: 100%; background: $body-background; }
}
table {
&.body { background: $body-background; height: 100%; width: 100%; } &.container { background: $container-background; width: $global-width; margin: 0 auto; Margin: 0 auto; text-align: inherit; } &.row { padding: 0; width: 100%; position: relative; } &.spacer { width: 100%; td { mso-line-height-rule: exactly; } }
}
table.container table.row {
display: table;
}
td.columns, td.column, th.columns, th.column {
margin: 0 auto; Margin: 0 auto; padding-left: $global-gutter; padding-bottom: $column-padding-bottom; // Prevents Nested columns from double the padding .column, .columns { padding-left: 0 !important; padding-right: 0 !important; center { min-width: none !important; } }
}
td.columns.last, td.column.last, th.columns.last, th.column.last {
padding-right: $global-gutter;
}
//makes sure nested tables are 100% width td.columns, td.column, th.columns, th.column {
table { width: 100%; &.button { width:auto; &.expanded{ width: 100%; } } }
}
@for $i from 1 through $grid-column-count {
td.large-#{$i}, th.large-#{$i} { width: -zf-grid-calc-px($i, $grid-column-count, $global-width); padding-left: $global-gutter / 2; padding-right: $global-gutter / 2; } td.large-#{$i}.first, th.large-#{$i}.first { padding-left: $global-gutter; } td.large-#{$i}.last, th.large-#{$i}.last { padding-right: $global-gutter; } //Collapsed logic .collapse { > tbody > tr > td.large-#{$i}, > tbody > tr > th.large-#{$i} { padding-right: 0; padding-left: 0; width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter; } //Gotta give it that extra love for the first and last columns. td.large-#{$i}.first, th.large-#{$i}.first, td.large-#{$i}.last, th.large-#{$i}.last { width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5); } } td.large-#{$i} center, th.large-#{$i} center { min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2); } .body .columns td.large-#{$i}, .body .column td.large-#{$i}, .body .columns th.large-#{$i}, .body .column th.large-#{$i} { width: -zf-grid-calc-pct($i, $grid-column-count); }
}
@for $i from 1 through ($grid-column-count - 1) {
td.large-offset-#{$i}, td.large-offset-#{$i}.first, td.large-offset-#{$i}.last, th.large-offset-#{$i}, th.large-offset-#{$i}.first, th.large-offset-#{$i}.last { //1.5 takes in effect a whole empty cell. padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2; }
}
td.expander, th.expander {
visibility: hidden; width: 0; padding: 0 !important;
}
// adds radius to container table.container.radius {
border-radius: $container-radius; border-collapse: separate;
}