mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
fix(button): do not change border radius if round button in toolbar (#14941)
fixes #7661
This commit is contained in:
@ -107,7 +107,7 @@
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" color="secondary">
|
||||
<ion-button fill="solid" shape="round" color="secondary">
|
||||
Help
|
||||
<ion-icon name="help-circle" slot="end"></ion-icon>
|
||||
</ion-button>
|
||||
@ -126,7 +126,7 @@
|
||||
</ion-buttons>
|
||||
<ion-title>Solid Activated</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" color="secondary" class="activated">
|
||||
<ion-button fill="solid" shape="round" color="secondary" class="activated">
|
||||
Help
|
||||
<ion-icon name="help-circle" slot="end"></ion-icon>
|
||||
</ion-button>
|
||||
|
@ -10,13 +10,16 @@
|
||||
--pading-bottom: 0;
|
||||
--padding-start: 5px;
|
||||
--padding-end: 5px;
|
||||
--border-radius: #{$toolbar-ios-button-border-radius};
|
||||
--height: 32px;
|
||||
|
||||
font-size: #{$toolbar-ios-button-font-size};
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
::slotted(*) .button:not(.button-round) {
|
||||
--border-radius: #{$toolbar-ios-button-border-radius};
|
||||
}
|
||||
|
||||
:host-context(.ion-color)::slotted(*) .button {
|
||||
--ion-color-base: currentColor;
|
||||
}
|
||||
|
@ -13,7 +13,6 @@
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 8px;
|
||||
--padding-end: 8px;
|
||||
--border-radius: #{$toolbar-md-button-border-radius};
|
||||
--height: 32px;
|
||||
--box-shadow: none;
|
||||
|
||||
@ -21,6 +20,9 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
::slotted(*) .button:not(.button-round) {
|
||||
--border-radius: #{$toolbar-md-button-border-radius};
|
||||
}
|
||||
|
||||
// Material Design Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
|
@ -30,9 +30,6 @@ $toolbar-ios-button-background-color: $toolbar-ios-background-colo
|
||||
/// @prop - Background color of the toolbar button when activated
|
||||
$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
|
||||
$toolbar-ios-button-strong-font-weight: 600 !default;
|
||||
|
||||
|
@ -30,9 +30,6 @@ $toolbar-md-button-background-color: $toolbar-md-background-color !
|
||||
/// @prop - Background color of the toolbar button when activated
|
||||
$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
|
||||
$toolbar-md-button-icon-fill-color: currentColor !default;
|
||||
|
||||
|
Reference in New Issue
Block a user