javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(button): add spinner sizes for ionic theme (#30233)

Browse Source
This commit is contained in:
Marta Carlos
2025-03-11 16:56:20 +00:00
committed by GitHub
parent ab81f3de7e
commit aa5d109fb1
8 changed files with 250 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
core/src/components/button/button.ionic.scss
View File

@ -93,18 +93,6 @@
// Button Sizes
// -------------------------------------------------------------------------------
/* Extra Small and Small Button */
:host(.button-xsmall),
:host(.button-small) {
::slotted(ion-icon[slot="start"]) {
@include globals.margin-horizontal(null, globals.$ion-space-100);
}
::slotted(ion-icon[slot="end"]) {
@include globals.margin-horizontal(globals.$ion-space-100, null);
}
}
/* Extra Small Button */
:host(.button-xsmall) {
--padding-top: #{globals.$ion-space-100};
@ -172,6 +160,25 @@
aspect-ratio: 1 / 1;
}
// Button with Spinner
// -------------------------------------------------------------------------------
::slotted(ion-spinner) {
--color: currentColor;
}
/* Button containing only a spinner */
::slotted(ion-spinner[slot="start"]),
::slotted(ion-spinner[slot="end"]),
::slotted(ion-spinner[slot="icon-only"]) {
width: globals.$ion-space-500;
height: globals.$ion-space-500;
}
:host(.button-xlarge) ::slotted(ion-spinner) {
width: globals.$ion-space-600;
height: globals.$ion-space-600;
}
// Button Shapes
// -------------------------------------------------------------------------------
@ -246,26 +253,40 @@
font-size: globals.$ion-font-size-500;
}
:host(.button-small) ::slotted(ion-icon[slot="start"]) {
:host(.button-xsmall) ::slotted(ion-icon[slot="start"]),
:host(.button-xsmall) ::slotted(ion-spinner[slot="start"]),
:host(.button-small) ::slotted(ion-icon[slot="start"]),
:host(.button-small) ::slotted(ion-spinner[slot="start"]) {
@include globals.margin-horizontal(null, globals.$ion-space-200);
}
::slotted(ion-icon[slot="start"]) {
::slotted(ion-icon[slot="start"]),
::slotted(ion-spinner[slot="start"]) {
@include globals.margin-horizontal(null, globals.$ion-space-250);
}
:host(.button-large) ::slotted(ion-icon[slot="start"]) {
:host(.button-large) ::slotted(ion-icon[slot="start"]),
:host(.button-large) ::slotted(ion-spinner[slot="start"]),
:host(.button-xlarge) ::slotted(ion-icon[slot="start"]),
:host(.button-xlarge) ::slotted(ion-spinner[slot="start"]) {
@include globals.margin-horizontal(null, globals.$ion-space-300);
}
:host(.button-small) ::slotted(ion-icon[slot="end"]) {
:host(.button-xsmall) ::slotted(ion-icon[slot="end"]),
:host(.button-xsmall) ::slotted(ion-spinner[slot="end"]),
:host(.button-small) ::slotted(ion-icon[slot="end"]),
:host(.button-small) ::slotted(ion-spinner[slot="end"]) {
@include globals.margin-horizontal(globals.$ion-space-200, null);
}
::slotted(ion-icon[slot="end"]) {
::slotted(ion-icon[slot="end"]),
::slotted(ion-spinner[slot="end"]) {
@include globals.margin-horizontal(globals.$ion-space-250, null);
}
:host(.button-large) ::slotted(ion-icon[slot="end"]) {
:host(.button-large) ::slotted(ion-icon[slot="end"]),
:host(.button-large) ::slotted(ion-spinner[slot="end"]),
:host(.button-xlarge) ::slotted(ion-icon[slot="end"]),
:host(.button-xlarge) ::slotted(ion-spinner[slot="end"]) {
@include globals.margin-horizontal(globals.$ion-space-300, null);
}