140 lines
3.0 KiB
SCSS
Executable File
140 lines
3.0 KiB
SCSS
Executable File
// 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;
|
|
}
|
|
}
|
|
}
|
|
|