Skip to content
Permalink
Browse files

fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108
  • Loading branch information...
abennouna authored and brandyscarney committed Apr 25, 2019
1 parent 3cdab10 commit ae0ecccd2e7131ea69bdc43ca528c668e48478f1
Showing with 19 additions and 12 deletions.
  1. +12 −12 core/src/components/button/button.ios.scss
  2. +7 −0 core/src/components/button/test/standalone/index.html
@@ -71,18 +71,6 @@
}


// iOS Round Button
// --------------------------------------------------

:host(.button-round) {
--border-radius: #{$button-ios-round-border-radius};
--padding-top: #{$button-ios-round-padding-top};
--padding-start: #{$button-ios-round-padding-start};
--padding-end: #{$button-ios-round-padding-end};
--padding-bottom: #{$button-ios-round-padding-bottom};
}


// iOS Button Sizes
// --------------------------------------------------

@@ -111,6 +99,18 @@
}


// iOS Round Button
// --------------------------------------------------

:host(.button-round) {
--border-radius: #{$button-ios-round-border-radius};
--padding-top: #{$button-ios-round-padding-top};
--padding-start: #{$button-ios-round-padding-start};
--padding-end: #{$button-ios-round-padding-end};
--padding-bottom: #{$button-ios-round-padding-bottom};
}


// iOS strong Button
// --------------------------------------------------

@@ -24,6 +24,13 @@ <h3>Default</h3>
<ion-button fill="clear" expand="block">Block Clear</ion-button>
</p>

<h3>Round button combinations</h3>
<p>
<ion-button shape="round" size="small">Round & Small</ion-button>
<ion-button shape="round" size="large">Round & Large</ion-button>
<ion-button shape="round" fill="outline">Round & Outline</ion-button>
</p>

<h3>Colors</h3>
<p>
<ion-button color="primary">Primary</ion-button>

0 comments on commit ae0eccc

Please sign in to comment.
You can’t perform that action at this time.