From: Tim Hartwick Date: Tue, 2 Feb 2016 00:15:42 +0000 (-0800) Subject: intital pass at buttons X-Git-Tag: v2.0.0-rc.1~30 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cd6e83dfb783623c64941647ad05be798cbef944;p=thirdparty%2Ffoundation%2Ffoundation-emails.git intital pass at buttons --- diff --git a/gulpfile.js b/gulpfile.js index dea02397..a1b4e860 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -58,7 +58,7 @@ gulp.task('sass:foundation', function() { gulp.task('settings', function() { octophant('scss/**/*.scss', { title: 'Foundation for Emails Settings', - output: 'foundation-emails-template/src/assets/scss/_settings.scss', + output: 'testing/src/assets/scss/_settings.scss', sort: ['global', 'grid'] }); }); diff --git a/scss/ink/components/_button.scss b/scss/ink/components/_button.scss index dde705b3..27ca257a 100755 --- a/scss/ink/components/_button.scss +++ b/scss/ink/components/_button.scss @@ -10,19 +10,19 @@ /// Default padding for button. /// @type List -$button-padding: 12px 0 12px 0 !default; +$button-padding: 12px 10px 12px 10px !default; /// Default padding for a tiny button. /// @type List -$button-padding-tiny: 5px 0 4px 0 !default; +$button-padding-tiny: 5px 4px 4px 4px !default; /// Default padding for a small button. /// @type List -$button-padding-small: 8px 0 7px !default; +$button-padding-small: 8px 3px 7px 3px !default; /// Default padding for a large button. /// @type List -$button-padding-large: 21px 0 18px !default; +$button-padding-large: 13px 26px 12px 26px!default; /// Default color of the font in a button. /// @type Color @@ -58,31 +58,31 @@ $button-background-color: $primary-color !default; /// Default border color for a button. /// @type Color -$button-border: 1px solid darken($button-background-color, 10%); +$button-border: 1px solid $button-background-color !default; -table.button { +table.expanded { width: 100%; - overflow: visible; +} + +table.button { + margin-bottom: 10px; td { - display: block; width: auto !important; - text-align: center; + text-align: left; background: $button-background-color; border: $button-border; color: $button-font-color; - padding: $button-padding; a { font-weight: $button-font-weight; text-decoration: none; font-family: $global-font-family; color: $button-font-color; - display: block; - height: 100%; - width: 100%; + display: inline-block; padding: $button-padding; font-size: $button-font-size; + border: $button-border; } } @@ -104,8 +104,8 @@ table.button { } &.large { - td, a { - padding: $button-padding-large 0; + a { + padding: $button-padding-large; font-size: $button-font-size-large; } } @@ -113,17 +113,17 @@ table.button { &:hover td, &:visited td, &:active td { - background: $button-background-color !important; + background: darken($button-background-color, 10%); color: $button-font-color !important; } - &:hover td - &.tiny:hover td, - &.small:hover td, - &.large:hover td { - background: darken($button-background-color, 10%); + &:hover a, + &:visited a, + &:active a { + border: 1px solid darken($button-background-color, 10%); } + &:hover td a, &:active td a, & td a:visited, @@ -141,11 +141,12 @@ table.button { &.secondary td { background: $secondary-color; - border: lighten($secondary-color, 10%); color: $button-font-color-alt; + border: 1px solid $secondary-color; a { color: $button-font-color-alt; + border: 1px solid $secondary-color; } } @@ -154,6 +155,10 @@ table.button { color: $button-font-color-alt; } + &.secondary:hover a { + border: 1px solid lighten($secondary-color, 10%) !important; + } + &.secondary:hover td a, &.secondary td a:visited, &.secondary:active td a { @@ -162,19 +167,35 @@ table.button { &.success td { background: $success-color; - border-color: 1px solid darken($success-color, 10%); + border: 1px solid $success-color !important; + + a { + border: 1px solid $success-color !important; + } } &.success:hover td { background: darken($success-color, 10%) !important; } + &.success:hover a { + border: 1px solid darken($success-color, 10%) !important; + } + &.alert td { background: $alert-color; - border-color: 1px solid darken($alert-color, 10%); + border: 1px solid $alert-color !important; + + a { + border: 1px solid $alert-color !important; + } } &.alert:hover td { background: darken($alert-color, 10%) !important; } + + &.alert:hover a { + border: 1px solid darken($alert-color, 10%) !important; + } } diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss index bfd0a1f5..4de97618 100644 --- a/testing/src/assets/scss/_settings.scss +++ b/testing/src/assets/scss/_settings.scss @@ -8,10 +8,11 @@ // 3. Block Grid // 4. Button // 5. Callout -// 6. Media Query -// 7. Normalize -// 8. Thumbnail -// 9. Typography +// 6. Inline List +// 7. Media Query +// 8. Normalize +// 9. Thumbnial +// 10. Typography // 1. Global @@ -28,10 +29,11 @@ $dark-gray: #8a8a8a; $black: #0a0a0a; $white: #fefefe; $pre-color: #ff6908; -$column-gutter: 20px; $container-width: 580px; +$container-background-color: $white; $global-radius: 3px; $global-rounded: 500px; +$grid-column-gutter: 16px; // 2. Grid // ------- @@ -39,21 +41,21 @@ $global-rounded: 500px; $grid-column-count: 12; $wrapper-padding-top: 10px; $column-padding-bottom: 10px; -$sub-column-padding-right: $column-gutter / 2; +$sub-column-padding-right: $grid-column-gutter / 2; // 3. Block Grid // ------------- $block-grid-elements: 8; -$block-grid-spacing: $column-gutter; +$block-grid-spacing: $grid-column-gutter; // 4. Button // --------- -$button-padding: 12px 0 12px 0; -$button-padding-tiny: 5px 0 4px 0; -$button-padding-small: 8px 0 7px; -$button-padding-large: 21px 0 18px; +$button-padding: 12px 10px 12px 10px; +$button-padding-tiny: 5px 4px 4px 4px; +$button-padding-small: 8px 3px 7px 3px; +$button-padding-large: 13px 26px 12px 26px!default; $button-font-color: $white; $button-font-color-alt: $medium-gray; $button-font-weight: bold; @@ -62,7 +64,7 @@ $button-font-size-tiny: 12px; $button-font-size-small: 16px; $button-font-size-large: 24px; $button-background-color: $primary-color; -$button-border: 1px solid darken($button-background-color, 10%); +$button-border: 1px solid $button-background-color; // 5. Callout // ---------- @@ -74,19 +76,25 @@ $callout-border-success: 1px solid darken($success-color, 20%); $callout-border-warning: 1px solid darken($warning-color, 20%); $callout-border-alert: 1px solid darken darken($alert-color, 20%); -// 6. Media Query +// 6. Inline List +// -------------- + +$menu-item-padding: 20px; +$menu-simple-item-gutter: 10px; + +// 7. Media Query // -------------- $small-container-width: 95%; $small-range: $container-width; -// 7. Normalize +// 8. Normalize // ------------ $hr-color: $medium-gray; $hr-height: 1px; -// 8. Thumbnail +// 9. Thumbnial // ------------ $thumbnail-shadow-h: 0; @@ -96,8 +104,8 @@ $thumbnail-shadow-spread: 1px; $thumbnail-shadow-color: $primary-color; $thumbnail-shadow-opacity: 0.5; -// 9. Typography -// ------------- +// 10. Typography +// -------------- $global-font-color: $black; $global-font-family: Helvetica, Arial, sans-serif; @@ -105,7 +113,7 @@ $global-font-weight: normal; $global-line-height: 1.3; $body-font-size: 14px; $body-line-height: 19px; -$header-font-family: Georgia, Times, serif; +$header-font-family: $global-font-family; $h1-font-size: 40px; $h2-font-size: 36px; $h3-font-size: 32px; diff --git a/testing/src/pages/index.html b/testing/src/pages/index.html index c5c2f09a..a97e0bfa 100644 --- a/testing/src/pages/index.html +++ b/testing/src/pages/index.html @@ -4,30 +4,111 @@ - - - -
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.

- 		-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, sequi! Velit laboriosam aliquam mollitia quas dignissimos possimus ipsa aspernatur quod fugiat maxime, veniam veritatis! Ipsa esse enim sunt voluptatum nostrum.

-
+ + + + +
+ + + + +
+ I am a button +
+
+ + + + + + +
+ + + + +
+ I am a button +
+
+ + + + + +
+ + + + +
+ I am a button +
+
+ + + + + +
+ + + + +
+ I am a button +
+
+ + + + + +
+ + + + +
+ I am a button +
+
+ + + + + +
+ + + + +
+ I am a button +
+
+ + + + + +
+ + + + +
+ I am a button +
+
- - - - -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure natus culpa optio, saepe expedita repellendus libero reiciendis, sit explicabo consectetur sint, repudiandae, vero iusto laboriosam eum voluptate quae officiis maxime!

-
- - -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.

 @@ -36,13 +117,6 @@
- - - - -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure natus culpa optio, saepe expedita repellendus libero reiciendis, sit explicabo consectetur sint, repudiandae, vero iusto laboriosam eum voluptate quae officiis maxime!

-