// Foundation for Emails by ZURB // zurb.com/ink/ // Licensed under MIT Open Source
//// /// @group button ////
/// 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,
) !default;
/// Font sizes of buttons at various sizes. /// @type Map $button-font-size: (
tiny: 10px, small: 12px, default: 16px, large: 20px,
) !default;
/// Text color of buttons. /// @type Color $button-color: $white !default;
/// Text color of buttons with a light background. /// @type Color $button-color-alt: $medium-gray !default;
/// Font weight of buttons. /// @type Weight $button-font-weight: bold !default;
/// Margin around buttons. /// @type List $button-margin: 0 0 $global-margin 0 !default;
/// Background color of buttons. /// @type Color $button-background: $primary-color !default;
/// Border around buttons. /// @type Border $button-border: 2px solid $button-background !default;
/// Border radius of buttons. Not supported by all email clients. /// @type Number $button-radius: $global-radius !default;
/// Border radius of rounded buttons. Not supported by all email clients. /// @type Number $button-rounded: $global-rounded !default;
table.button {
width: auto; margin: $button-margin; Margin: $button-margin; table { td { text-align: left; color: $button-color; background: $button-background; border: $button-border; a { font-family: $body-font-family; font-size: map-get($button-font-size, default); font-weight: $button-font-weight; color: $button-color; text-decoration: none; text-align: left; display: inline-block; padding: map-get($button-padding, default); border: 0 solid $button-background; border-radius: $button-radius; } } } &.radius table td { border-radius: $button-radius; border: none; } &.rounded table td { border-radius: $button-rounded; border: none; }
}
table.button:hover table tr td a, table.button:active table tr td a, table.button table tr td a:visited, table.button.tiny:hover table tr td a, table.button.tiny:active table tr td a, table.button.tiny table tr td a:visited, table.button.small:hover table tr td a, table.button.small:active table tr td a, table.button.small table tr td a:visited, table.button.large:hover table tr td a, table.button.large:active table tr td a, table.button.large table tr td a:visited {
color: $button-color;
}
table.button.tiny {
table { td, a { padding: map-get($button-padding, tiny); } a { font-size: map-get($button-font-size, tiny); font-weight: normal; } }
}
table.button.small {
table { td, a { padding: map-get($button-padding, small); font-size: map-get($button-font-size, small); } }
}
table.button.large {
table { a { padding: map-get($button-padding, large); font-size: map-get($button-font-size, large); } }
}
table.button.expand, table.button.expanded {
width: 100%; table { width: 100%; a { text-align: center; width: 100%; padding-left: 0; padding-right: 0; } } center { min-width: 0; }
}
table.button:hover, table.button:visited, table.button:active {
table { td { background: darken($button-background, 10%); color: $button-color; } }
}
table.button:hover, table.button:visited, table.button:active {
table { a { border: 0 solid darken($button-background, 10%); } }
}
table.button.secondary {
table { td { background: $secondary-color; color: $button-color; border: 0px solid $secondary-color; } a { color: $button-color; border: 0 solid $secondary-color; } }
}
table.button.secondary:hover {
table { td { background: lighten($secondary-color, 10%); color: $button-color; } a { border: 0 solid lighten($secondary-color, 10%); } }
}
table.button.secondary:hover {
table { td a { color: $button-color; } }
}
table.button.secondary:active {
table { td a { color: $button-color; } }
}
table.button.secondary {
table { td a:visited { color: $button-color; } }
}
table.button.success {
table { td { background: $success-color; border: 0px solid $success-color; } a { border: 0 solid $success-color; } }
}
table.button.success:hover {
table { td { background: darken($success-color, 10%); } a { border: 0 solid darken($success-color, 10%); } }
}
table.button.alert {
table { td { background: $alert-color; border: 0px solid $alert-color; } a { border: 0 solid $alert-color; } }
}
table.button.alert:hover {
table { td { background: darken($alert-color, 10%); } a { border: 0 solid darken($alert-color, 10%); } }
}
table.button.warning {
table { td { background: $warning-color; border: 0px solid $warning-color; } a { border: 0px solid $warning-color; } }
}
table.button.warning:hover {
table { td { background: darken($warning-color, 10%); } a { border: 0px solid darken($warning-color, 10%); } }
}