ionic-framework/core/src/components/button/button.ionic.scss

@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./button.common";

// Ionic Button
// -------------------------------------------------------------------------------
:host {
  --padding-top: #{globals.$ion-space-0};
  --padding-end: #{globals.$ion-space-0};
  --padding-bottom: var(--padding-top);
  --padding-start: var(--padding-end);
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-size-050};

  position: relative;

  // Target area
  &::after {
    @include globals.position(50%, 0, null, 0);
    position: absolute;

    height: 100%;
    min-height: globals.$ion-scale-1200;

    transform: translateY(-50%);

    content: "";

    cursor: pointer;

    z-index: 1;
  }
}

// Button Fills
// -------------------------------------------------------------------------------

// Default Clear Color
:host(.button-clear) {
  --color: #{globals.ion-color(primary, foreground)};
}

// Solid Button
// --------------------------------------------------

:host(.button-solid) {
  --background-activated: #{globals.ion-color(primary, shade)};
  --background-hover: #{globals.ion-color(primary, shade)};
  --background-focused: transparent;
  --background-hover-opacity: 1;
  --background: #{globals.ion-color(primary, base)};
  --color: #{globals.ion-color(primary, contrast)};
  --ripple-opacity: var(--background-activated-opacity, 1);
  --ripple-color: var(--background-activated);
}

// Outline Button
// --------------------------------------------------

:host(.button-outline) {
  --border-width: #{globals.$ion-border-size-025};
  --border-style: #{globals.$ion-border-style-solid};
  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
  --background-focused: transparent;
  --background-hover: #{globals.ion-color(primary, shade, $subtle: true)};
  --background-hover-opacity: 1;
  --border-color: #{globals.ion-color(primary, base)};
  --color: #{globals.ion-color(primary, base)};
  --ripple-opacity: var(--background-activated-opacity, 1);
  --ripple-color: var(--background-activated);
}

// Warning Outline Button - use foreground color for text and border
:host(.button-outline.ion-color-warning) .button-native {
  border-color: globals.ion-color(warning, foreground);

  color: globals.ion-color(warning, foreground);
}

// Clear Button
// --------------------------------------------------

:host(.button-clear) {
  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
  --background-focused: transparent;
  --background-hover: #{globals.ion-color(primary, shade, $subtle: true)};
  --background-hover-opacity: 1;
  --color: #{globals.ion-color(primary, foreground)};
  --ripple-opacity: var(--background-activated-opacity, 1);
  --ripple-color: var(--background-activated);
}

// Ripple Effect
// -------------------------------------------------------------------------------

:host(.button-solid.ion-color) ion-ripple-effect {
  color: globals.current-color(shade);
}

:host(.button-outline.ion-color) ion-ripple-effect,
:host(.button-clear.ion-color) ion-ripple-effect {
  color: globals.current-color(shade, $subtle: true);
}

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

/* Small Button */
:host(.button-small) {
  --padding-end: #{globals.$ion-space-400};

  @include globals.typography(globals.$ion-body-action-sm);
  min-width: globals.$ion-scale-1600;

  min-height: #{globals.$ion-scale-1000};
}

/* Medium Button */
:host(.button-medium) {
  --padding-end: #{globals.$ion-space-500};

  @include globals.typography(globals.$ion-body-action-md);
  min-width: globals.$ion-scale-1800;

  min-height: #{globals.$ion-scale-1200};
}

/* Large Button */
:host(.button-large) {
  --padding-end: #{globals.$ion-space-700};

  @include globals.typography(globals.$ion-body-action-lg);
  min-width: globals.$ion-scale-2000;

  min-height: #{globals.$ion-scale-1400};
}

// Button with Icons
// -------------------------------------------------------------------------------

/* Button containing only an icon */
:host(.button-small),
:host(.button-medium) {
  ::slotted(ion-icon[slot="start"]),
  ::slotted(ion-icon[slot="end"]),
  ::slotted(ion-icon[slot="icon-only"]) {
    width: globals.$ion-scale-500;
    height: globals.$ion-scale-500;
  }
}

:host(.button-large) {
  ::slotted(ion-icon[slot="start"]),
  ::slotted(ion-icon[slot="end"]),
  ::slotted(ion-icon[slot="icon-only"]) {
    width: globals.$ion-scale-600;
    height: globals.$ion-scale-600;
  }
}

:host(.button-has-icon-only) {
  --padding-end: var(--padding-top);
  min-width: unset;

  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-scale-500;
  height: globals.$ion-scale-500;
}

// Button Shapes
// -------------------------------------------------------------------------------

// Soft Button
// --------------------------------------------------

:host(.button-soft) {
  --border-radius: #{globals.$ion-border-radius-200};
}

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

:host(.button-round) {
  --border-radius: #{globals.$ion-border-radius-full};
}

// Rectangular Button
// --------------------------------------------------

:host(.button-rectangular) {
  --border-radius: #{globals.$ion-border-radius-0};
}

// Button: Focus
// -------------------------------------------------------------------------------

// Only show the focus ring when the button is focused
:host(.ion-focused) .button-native {
  outline: var(--focus-ring-width) globals.$ion-border-style-solid var(--focus-ring-color);
  outline-offset: globals.$ion-border-size-050;
}

// Button: Activated
// --------------------------------------------------

:host(.button-solid.ion-color.ion-activated) .button-native::after {
  background: globals.current-color(shade);
}

:host(.button-outline.ion-color.ion-activated) .button-native::after,
:host(.button-clear.ion-color.ion-activated) .button-native::after {
  background: globals.current-color(shade, $subtle: true);
}

:host(.ion-activated) .button-native:has(ion-ripple-effect)::after,
:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
:host(.button-outline.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
:host(.button-clear.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after {
  background: transparent;
}

// Button: Hover
// --------------------------------------------------

@media (any-hover: hover) {
  :host(.button-solid.ion-color:hover) .button-native::after {
    background: globals.current-color(shade);
  }

  :host(.button-outline.ion-color:hover) .button-native::after,
  :host(.button-clear.ion-color:hover) .button-native::after {
    background: globals.current-color(shade, $subtle: true);
  }
}

// Button: Disabled
// --------------------------------------------------

:host(.button-disabled) .button-native::after {
  @include globals.disabled-state();

  width: inherit;
  height: inherit;
}

// Button Icons
// --------------------------------------------------

::slotted(ion-icon) {
  font-size: globals.$ion-font-size-500;
}

: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-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-spinner[slot="start"]) {
  @include globals.margin-horizontal(null, globals.$ion-space-300);
}

: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-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-spinner[slot="end"]) {
  @include globals.margin-horizontal(globals.$ion-space-300, null);
}

// Button with Badge
// --------------------------------------------------

:host(.button-has-badge) {
  --padding-top: #{globals.$ion-space-0};
  --padding-bottom: #{globals.$ion-space-0};
}

:host(.button-small) ::slotted(ion-badge) {
  @include globals.position(null, calc(-1 * globals.$ion-space-050), null, null);
}

:host(.button-medium) {
  ::slotted(ion-badge.long-badge.badge-vertical-top) {
    @include globals.position($top: globals.$ion-space-100);
  }
  ::slotted(ion-badge.long-badge.badge-vertical-bottom) {
    @include globals.position($bottom: globals.$ion-space-100);
  }

  ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
    @include globals.position(globals.$ion-space-100, globals.$ion-space-150, null, null);
  }
  ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
    @include globals.position(null, globals.$ion-space-150, globals.$ion-space-100, null);
  }
}

:host(.button-large) {
  ::slotted(ion-badge.long-badge.badge-vertical-top) {
    @include globals.position($top: globals.$ion-space-200);
  }
  ::slotted(ion-badge.long-badge.badge-vertical-bottom) {
    @include globals.position($bottom: globals.$ion-space-200);
  }

  ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
    @include globals.position(globals.$ion-space-200, globals.$ion-space-200, null, null);
  }
  ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
    @include globals.position(null, globals.$ion-space-200, globals.$ion-space-200, null);
  }
}