// This file will be placed in the head of the document and will not be inlined $spacer: 16px; $spacers: ( 0: 0, 1: ($spacer * .25), 2: ($spacer * .5), 3: $spacer, 4: ($spacer * 1.5), 5: ($spacer * 3) ) !default; $widths: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) !default; // Forces Outlook.com to display emails at full width .ExternalClass { width: 100%; } // Forces Outlook.com to display normal line spacing, here is more on that: http://www.emailonacid.com/forum/viewthread/43/ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 150%; } a { text-decoration: none; } /* Gmail inserts the following 2 rules above this file in and this overrides them body, td, input, textarea, select { margin: 0; font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif } input, textarea, select { font-size: 100% } */ body, td, input, textarea, select { margin: unset; font-family: unset; } input, textarea, select { font-size: unset; } @media screen and (max-width: 600px) { // Grid table.row { th.col-lg-1, th.col-lg-2, th.col-lg-3, th.col-lg-4, th.col-lg-5, th.col-lg-6, th.col-lg-7, th.col-lg-8, th.col-lg-9, th.col-lg-10, th.col-lg-11, th.col-lg-12{ display: block; width: 100% !important; } } // Display .d-mobile { display: block !important; } .d-desktop { display: none !important; } // Width @each $size, $percentage in $widths { .w-lg-#{$size} { width: auto !important; & > tbody > tr > td { width: auto !important; } } } @each $size, $percentage in $widths { .w-#{$size} { width: $percentage !important; & > tbody > tr > td { width: $percentage !important; } } } // Spacing // Reset large padding to 0 on small device @each $size, $length in $spacers { .p-lg-#{$size} { & > tbody > tr > td { padding: 0 !important; } } .pt-lg-#{$size}, .py-lg-#{$size} { & > tbody > tr > td { padding-top: 0 !important; } } .pr-lg-#{$size}, .px-lg-#{$size} { & > tbody > tr > td { padding-right: 0 !important; } } .pb-lg-#{$size}, .py-lg-#{$size} { & > tbody > tr > td { padding-bottom: 0 !important; } } .pl-lg-#{$size}, .px-lg-#{$size} { & > tbody > tr > td { padding-left: 0 !important; } } } // Set proper padding on small devices @each $size, $length in $spacers { .p-#{$size} { & > tbody > tr > td { padding: $length !important; } } .pt-#{$size}, .py-#{$size} { & > tbody > tr > td { padding-top: $length !important; } } .pr-#{$size}, .px-#{$size} { & > tbody > tr > td { padding-right: $length !important; } } .pb-#{$size}, .py-#{$size} { & > tbody > tr > td { padding-bottom: $length !important; } } .pl-#{$size}, .px-#{$size} { & > tbody > tr > td { padding-left: $length !important; } } } // Spacers .s-lg-1 > tbody > tr > td, .s-lg-2 > tbody > tr > td, .s-lg-3 > tbody > tr > td, .s-lg-4 > tbody > tr > td, .s-lg-5 > tbody > tr > td { font-size: 0 !important; line-height: 0 !important; height: 0 !important; } @each $size, $length in $spacers { .s-#{$size} > tbody > tr > td { font-size: $length !important; line-height: $length !important; height: $length !important; } } } // Yahoo specific media query to revert above @media yahoo { // Display .d-mobile { display: none !important; } .d-desktop { display: block !important; } // Width @each $size, $percentage in $widths { .w-lg-#{$size} { width: $percentage !important; & > tbody > tr > td { width: $percentage !important; } } } // Spacing // Set proper spacing again on Yahoo @each $size, $length in $spacers { .p-lg-#{$size} { & > tbody > tr > td { padding: $length !important; } } .pt-lg-#{$size}, .py-lg-#{$size} { & > tbody > tr > td { padding-top: $length !important; } } .pr-lg-#{$size}, .px-lg-#{$size} { & > tbody > tr > td { padding-right: $length !important; } } .pb-lg-#{$size}, .py-lg-#{$size} { & > tbody > tr > td { padding-bottom: $length !important; } } .pl-lg-#{$size}, .px-lg-#{$size} { & > tbody > tr > td { padding-left: $length !important; } } } // Spacing @each $size, $length in $spacers { .s-lg-#{$size} > tbody > tr > td { font-size: $length !important; line-height: $length !important; height: $length !important; } } }