173 lines
3.4 KiB
SCSS
Executable File
173 lines
3.4 KiB
SCSS
Executable File
// 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:not(.button) {
|
|
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;
|
|
}
|