diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 0ae64d8380..4aa6d978c2 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -91,6 +91,19 @@ input.button.button-block { margin-top: 0; } +.icon-left:before { + font-size: 1.5em; + margin-top: -0.1em; + margin-right: 0.25em; +} + +.icon-right:before { + @include flex-order(2); + font-size: 1.5em; + margin-top: -0.1em; + margin-left: 0.25em; +} + // Button Misc diff --git a/src/components/button/extensions/ios.scss b/src/components/button/extensions/ios.scss index 3788c92435..9acad95dfa 100644 --- a/src/components/button/extensions/ios.scss +++ b/src/components/button/extensions/ios.scss @@ -4,18 +4,18 @@ $button-ios-font-size: 1.4rem !default; $button-ios-padding: 0 10px !default; -$button-ios-height: 29px !default; +$button-ios-height: 42px !default; $button-ios-border-width: 1px !default; $button-ios-border-radius: 5px !default; $button-ios-large-font-size: 2rem !default; $button-ios-large-height: 54px !default; -$button-ios-large-padding: 16px !default; +$button-ios-large-padding: 14px !default; $button-ios-large-icon-size: 32px !default; $button-ios-small-font-size: 1.2rem !default; $button-ios-small-height: 28px !default; -$button-ios-small-padding: 4px !default; +$button-ios-small-padding: 6px !default; $button-ios-small-icon-size: 16px !default; @@ -67,7 +67,7 @@ $button-ios-small-icon-size: 16px !default; .button-ios { padding: $button-ios-padding; - height: $button-ios-height; + min-height: $button-ios-height; font-size: $button-ios-font-size; border-radius: $button-ios-border-radius; diff --git a/src/components/button/test/icons/e2e.js b/src/components/button/test/icons/e2e.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/button/test/icons/e2e.js @@ -0,0 +1 @@ + diff --git a/src/components/button/test/icons/main.html b/src/components/button/test/icons/main.html new file mode 100644 index 0000000000..1895928fbe --- /dev/null +++ b/src/components/button/test/icons/main.html @@ -0,0 +1,58 @@ + +
+ + + Left Icon + +
+ ++ + + Right Icon + +
+ ++ + + Left, Large + +
+ ++ + + Right, Large + +
+ ++ + + Left Icon, Small + +
+ ++ + + Right Icon, Small + +
+ +