/// @type String
$global-breakpoint: $global-width + $global-gutter !default;
-
.wrapper {
width: 100%;
}
text-align: right;
}
-img.float-center,
+img.float-center,
img.text-center {
margin: 0 auto;
Margin: 0 auto;
/// 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,
+ 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,
+ tiny: 10px,
+ small: 12px,
+ default: 16px,
+ large: 20px,
) !default;
/// Text color of buttons.
box-sizing: border-box;
padding-left: $global-gutter !important;
padding-right: $global-gutter !important;
-
+
// Nested columns won't double the padding
.column,
.columns {
@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.
+ //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;
}
//menu
table.menu {
width: 100% !important;
-
+
td,
th {
width: auto !important;
display: inline-block !important;
}
- &.vertical,
+ &.vertical,
&.small-vertical {
td,
th {
width: auto !important;
}
-
// expands buttons for small only
table.button.small-expand,
table.button.small-expanded {
/// @type Color
$menu-item-color: $primary-color !default;
-
table.menu {
width: $global-width;
td.menu-item,
- th.menu-item{
+ th.menu-item {
padding: $menu-item-padding;
padding-right: $menu-item-gutter;
a {
- color: $menu-item-color;
+ color: $menu-item-color;
}
}
}
// preheader styles
span.preheader {
- display:none !important;
- visibility:hidden;
- mso-hide:all !important;
- font-size:1px;
+ display: none !important;
+ visibility: hidden;
+ mso-hide: all !important;
+ font-size: 1px;
color: $body-background; // needs to match background color
- line-height:1px;
- max-height:0px;
- max-width:0px;
- opacity:0;
- overflow:hidden;
+ line-height: 1px;
+ max-height: 0px;
+ max-width: 0px;
+ opacity: 0;
+ overflow: hidden;
}
.hide-for-large {
display: none !important;
- width:0;
- mso-hide:all; // hide selected elements in Outlook 2007-2013
- overflow:hidden;
+ width: 0;
+ mso-hide: all; // hide selected elements in Outlook 2007-2013
+ overflow: hidden;
max-height: 0;
font-size: 0;
width: 0;
- line-height: 0;
+ line-height: 0;
@media only screen and (max-width: #{$global-breakpoint}) {
display: block !important;
width: auto !important;
overflow: visible !important;
- max-height: none !important;
+ max-height: none !important;
font-size: inherit !important;
line-height: inherit !important;
}
}
table.body table.container .hide-for-large * {
- mso-hide:all; // hide selected elements in Outlook 2007-2013
+ mso-hide: all; // hide selected elements in Outlook 2007-2013
}
table.body table.container .hide-for-large,
table.body table.container .show-for-large {
@media only screen and (max-width: #{$global-breakpoint}) {
display: none !important;
- width:0;
- mso-hide:all; // hide selected elements in Outlook 2007-2013
- overflow:hidden;
+ width: 0;
+ mso-hide: all; // hide selected elements in Outlook 2007-2013
+ overflow: hidden;
}
}
width: 100%;
position: relative;
}
-
+
&.spacer {
width: 100%;
td {
// 7. Menu
// 8. Thumbnail
-
// 1. Global
// ---------
// ---------
$button-padding: (
- tiny: 4px 8px 4px 8px,
- small: 5px 10px 5px 10px,
- default: 8px 16px 8px 16px,
- large: 10px 20px 10px 20px,
+ tiny: 4px 8px 4px 8px,
+ small: 5px 10px 5px 10px,
+ default: 8px 16px 8px 16px,
+ large: 10px 20px 10px 20px,
);
$button-font-size: (
- tiny: 10px,
- small: 12px,
- default: 16px,
- large: 20px,
+ tiny: 10px,
+ small: 12px,
+ default: 16px,
+ large: 20px,
);
$button-color: $white;
$button-color-alt: $medium-gray;