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

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

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

  position: relative;

  min-height: globals.$ionic-scale-1000;

  font-family: globals.$ionic-font-family;
  font-size: globals.$ionic-font-size-350;

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

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

    transform: translateY(-50%);

    content: "";

    cursor: pointer;

    z-index: 1;
  }
}

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

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

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

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

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

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

:host(.button-clear) {
  --background-activated: #{globals.$ionic-color-neutral-200};
  --background-focused: transparent;
  --background-hover: #{globals.ion-color(primary, base)};
  --background-hover-opacity: 0.04;
  --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.$ionic-color-neutral-200;
}

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

/* Extra Small and Small Button */
:host(.button-xsmall),
:host(.button-small) {
  ::slotted(ion-icon[slot="start"]) {
    @include globals.margin-horizontal(null, globals.$ionic-space-100);
  }

  ::slotted(ion-icon[slot="end"]) {
    @include globals.margin-horizontal(globals.$ionic-space-100, null);
  }
}

/* Extra Small Button */
:host(.button-xsmall) {
  --padding-top: #{globals.$ionic-space-100};
  --padding-end: #{globals.$ionic-space-300};

  min-height: globals.$ionic-space-600;

  font-size: globals.$ionic-font-size-300;
}

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

  min-height: #{globals.$ionic-scale-800};

  font-size: #{globals.$ionic-font-size-300};
}

/* Large Button */
:host(.button-large) {
  --padding-top: #{globals.$ionic-space-400};
  --padding-end: #{globals.$ionic-space-600};

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

  font-size: #{globals.$ionic-font-size-400};
}

/* Extra Large Button */
:host(.button-xlarge) {
  --padding-top: #{globals.$ionic-space-400};
  --padding-end: #{globals.$ionic-space-800};

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

  font-size: #{globals.$ionic-font-size-500};
}

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

/* Button containing only an icon */
::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]),
::slotted(ion-icon[slot="icon-only"]) {
  font-size: globals.$ionic-font-size-400;
}

:host(.button-xsmall),
:host(.button-small),
:host(.button-large),
:host(.button-xlarge) {
  ::slotted(ion-icon[slot="start"]),
  ::slotted(ion-icon[slot="end"]),
  ::slotted(ion-icon[slot="icon-only"]) {
    font-size: inherit;
  }
}

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

  aspect-ratio: 1 / 1;
}

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

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

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

:host(.button-soft.button-xsmall),
:host(.button-soft.button-small) {
  --border-radius: #{globals.$ionic-border-radius-100};
}

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

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

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

:host(.button-rectangular) {
  --border-radius: #{globals.$ionic-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.$ionic-border-style-solid var(--focus-ring-color);
  outline-offset: globals.$ionic-border-size-050;
}

/**
 * Only allow overriding of opacity here
 * as developers should not be overriding
 * colors when using the color prop.
 */

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

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

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

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

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

:host(.button-disabled) {
  opacity: 0.6;
}

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

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

:host(.button-small) ::slotted(ion-icon[slot="start"]) {
  @include globals.margin-horizontal(null, globals.$ionic-space-200);
}

::slotted(ion-icon[slot="start"]) {
  @include globals.margin-horizontal(null, globals.$ionic-space-250);
}

:host(.button-large) ::slotted(ion-icon[slot="start"]) {
  @include globals.margin-horizontal(null, globals.$ionic-space-300);
}

:host(.button-small) ::slotted(ion-icon[slot="end"]) {
  @include globals.margin-horizontal(globals.$ionic-space-200, null);
}

::slotted(ion-icon[slot="end"]) {
  @include globals.margin-horizontal(globals.$ionic-space-250, null);
}

:host(.button-large) ::slotted(ion-icon[slot="end"]) {
  @include globals.margin-horizontal(globals.$ionic-space-300, null);
}