javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): do not change border radius if round button in toolbar (#14941)

Browse Source 
fixes #7661
This commit is contained in:
Brandy Carney
2018-07-30 15:59:33 -04:00
committed by GitHub
parent c05d672703
commit ad006dd1ee
5 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/button/test/toolbar/index.html
View File

@ -107,7 +107,7 @@
</ion-buttons> </ion-buttons>
<ion-title>Solid</ion-title> <ion-title>Solid</ion-title>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="solid" color="secondary"> <ion-button fill="solid" shape="round" color="secondary">
Help Help
<ion-icon name="help-circle" slot="end"></ion-icon> <ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button> </ion-button>
@ -126,7 +126,7 @@
</ion-buttons> </ion-buttons>
<ion-title>Solid Activated</ion-title> <ion-title>Solid Activated</ion-title>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button fill="solid" color="secondary" class="activated"> <ion-button fill="solid" shape="round" color="secondary" class="activated">
Help Help
<ion-icon name="help-circle" slot="end"></ion-icon> <ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button> </ion-button>

5
core/src/components/buttons/buttons.ios.scss
View File

@ -10,13 +10,16 @@
--pading-bottom: 0; --pading-bottom: 0;
--padding-start: 5px; --padding-start: 5px;
--padding-end: 5px; --padding-end: 5px;
--border-radius: #{$toolbar-ios-button-border-radius};
--height: 32px; --height: 32px;
font-size: #{$toolbar-ios-button-font-size}; font-size: #{$toolbar-ios-button-font-size};
font-weight: 400; font-weight: 400;
} }
::slotted(*) .button:not(.button-round) {
--border-radius: #{$toolbar-ios-button-border-radius};
}
:host-context(.ion-color)::slotted(*) .button { :host-context(.ion-color)::slotted(*) .button {
--ion-color-base: currentColor; --ion-color-base: currentColor;
} }

4
core/src/components/buttons/buttons.md.scss
View File

@ -13,7 +13,6 @@
--padding-bottom: 0; --padding-bottom: 0;
--padding-start: 8px; --padding-start: 8px;
--padding-end: 8px; --padding-end: 8px;
--border-radius: #{$toolbar-md-button-border-radius};
--height: 32px; --height: 32px;
--box-shadow: none; --box-shadow: none;
@ -21,6 +20,9 @@
font-weight: 500; font-weight: 500;
} }
::slotted(*) .button:not(.button-round) {
--border-radius: #{$toolbar-md-button-border-radius};
}
// Material Design Toolbar Button Icon // Material Design Toolbar Button Icon
// -------------------------------------------------- // --------------------------------------------------

3
core/src/components/toolbar/toolbar.ios.vars.scss
View File

@ -30,9 +30,6 @@ $toolbar-ios-button-background-color: $toolbar-ios-background-colo
/// @prop - Background color of the toolbar button when activated /// @prop - Background color of the toolbar button when activated
$toolbar-ios-button-background-color-activated: $toolbar-ios-color-active !default; $toolbar-ios-button-background-color-activated: $toolbar-ios-color-active !default;
/// @prop - Border radius of the toolbar button
$toolbar-ios-button-border-radius: 4px !default;
/// @prop - Font weight of the strong toolbar button /// @prop - Font weight of the strong toolbar button
$toolbar-ios-button-strong-font-weight: 600 !default; $toolbar-ios-button-strong-font-weight: 600 !default;

3
core/src/components/toolbar/toolbar.md.vars.scss
View File

@ -30,9 +30,6 @@ $toolbar-md-button-background-color: $toolbar-md-background-color !
/// @prop - Background color of the toolbar button when activated /// @prop - Background color of the toolbar button when activated
$toolbar-md-button-background-color-activated: $toolbar-md-color-active !default; $toolbar-md-button-background-color-activated: $toolbar-md-color-active !default;
/// @prop - Border radius of the toolbar button
$toolbar-md-button-border-radius: 2px !default;
/// @prop - Fill color of the toolbar button icon /// @prop - Fill color of the toolbar button icon
$toolbar-md-button-icon-fill-color: currentColor !default; $toolbar-md-button-icon-fill-color: currentColor !default;