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

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

// Ionic Button
// -------------------------------------------------------------------------------
:host {
  --overflow: hidden;
  --border-width: initial;
  --border-color: initial;
  --border-style: initial;
  --color-activated: var(--color);
  --color-focused: var(--color);
  --color-hover: var(--color);
  --box-shadow: none;
  --padding-bottom: var(--padding-top);
  --padding-end: #{globals.$ionic-space-400};
  --padding-start: var(--padding-end);
  --padding-top: #{globals.$ionic-space-300};
  --focus-ring-color: #{globals.$ionic-state-focus-1};
  --focus-ring-width: #{globals.$ionic-border-size-050};

  display: inline-block;

  position: relative;

  width: auto;

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

  color: var(--color);

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

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

  text-align: center;
  text-decoration: none;

  white-space: normal;

  user-select: none;
  vertical-align: top; // the better option for most scenarios
  vertical-align: -webkit-baseline-middle; // the best for those that support it

  font-kerning: none;

  // 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;
  }

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

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

// Button Colors
// --------------------------------------------------

// Solid Button with Color
:host(.button-solid.ion-color) .button-native {
  background: globals.current-color(base);
  color: globals.current-color(contrast);
}

// Outline Button with Color
:host(.button-outline.ion-color) .button-native {
  border-color: globals.current-color(base);

  background: transparent;
  color: globals.current-color(base);
}

// Clear Button with Color
:host(.button-clear.ion-color) .button-native {
  background: transparent;
  color: globals.current-color(base);
}

// 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
// -------------------------------------------------------------------------------

: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};
}

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

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

// Button Focused
// -------------------------------------------------------------------------------

// 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;
}

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

:host(.button-solid) {
  --background-activated: #{globals.$ionic-color-primary-base};
}

:host(.button-solid.ion-activated) .button-native::after {
  background: #{globals.$ionic-color-primary-900};
}

// Fill 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-activated-opacity: 1;
  --background-focused: transparent;
  --background-hover: transparent;
  --background-focused-opacity: 0.1;
  --color-activated: #{globals.$ionic-color-primary-base};
}

:host(.button-outline.ion-focused) {
  --border-color: transparent;
}

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

:host(.button-clear) {
  --background-activated: #{globals.$ionic-color-neutral-200};
  --background-activated-opacity: 1;
  --background-focused: transparent;
  --background-hover: transparent;
}

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

:host(.button-solid) {
  --background-hover: #{globals.$ionic-color-primary-800};
}

:host(.button-outline),
:host(.button-clear) {
  --background-hover: #{globals.$ionic-color-neutral-100};
}

/**
 * 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: #{current-color(contrast)};
}

:host(.button-clear.ion-color.ion-focused) .button-native::after,
:host(.button-outline.ion-color.ion-focused) .button-native::after {
  background: #{current-color(base)};
}

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

  :host(.button-clear.ion-color:hover) .button-native::after,
  :host(.button-outline.ion-color:hover) .button-native::after {
    background: #{current-color(base)};
  }
}

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

:host(.button-disabled) {
  --background: #{globals.$ionic-state-disabled};
  --border-color: var(--color);

  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

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

// Default Solid Color
:host(.button-solid) {
  --background: #{globals.$ionic-color-primary-base};
  --color: #{globals.$ionic-color-base-white};
}

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

// Default Outline Color
:host(.button-outline) {
  --border-color: #{globals.ion-color(primary, base)};
  --background: #{globals.$ionic-color-base-white};
  --color: #{globals.ion-color(primary, base)};
}

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

// Default Clear Color
:host(.button-clear) {
  --border-width: #{globals.$ionic-border-size-0};
  --background: transparent;
  --color: #{globals.$ionic-color-primary-base};
}

// Block Button
// --------------------------------------------------

:host(.button-block) {
  display: block;
}

:host(.button-block) .button-native {
  @include globals.margin-horizontal(0);

  width: 100%;

  clear: both;

  contain: content;
}

:host(.button-block) .button-native::after {
  clear: both;
}

// Full Button
// --------------------------------------------------

:host(.button-full) {
  display: block;
}

:host(.button-full) .button-native {
  @include globals.margin-horizontal(0);

  width: 100%;

  contain: content;
}

:host(.button-full:not(.button-round)) .button-native {
  @include globals.border-radius(0);

  border-right-width: 0;
  border-left-width: 0;
}

.button-native {
  @include globals.border-radius(var(--border-radius));
  @include globals.font-smoothing();
  @include globals.margin(0);
  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
  @include globals.text-inherit();

  display: flex;

  position: relative;

  align-items: center;

  width: 100%;
  height: 100%;

  min-height: inherit;

  transition: var(--transition);

  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);

  outline: none;

  background: var(--background);

  line-height: 1;

  box-shadow: var(--box-shadow);

  contain: layout style;
  cursor: pointer;

  opacity: var(--opacity);
  overflow: var(--overflow);

  z-index: 0;
  box-sizing: border-box;
  appearance: none;
}

.button-native::-moz-focus-inner {
  border: 0;
}

.button-inner {
  display: flex;
  position: relative;

  flex-flow: row nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  z-index: 1;
}

// Button Slots
// --------------------------------------------------

::slotted([slot="start"]),
::slotted([slot="end"]) {
  flex-shrink: 0;
}

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

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

// Button: States
// --------------------------------------------------

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

// Button Focused
:host(.ion-focused) {
  color: var(--color-focused);
}

:host(.ion-focused) .button-native::after {
  background: var(--background-focused);

  opacity: var(--background-focused-opacity);
}

// Button Hover
@media (any-hover: hover) {
  :host(:hover) {
    color: var(--color-hover);
  }

  :host(:hover) .button-native::after {
    background: var(--background-hover);

    opacity: var(--background-hover-opacity);
  }
}

// Button Activated
:host(.ion-activated) {
  color: var(--color-activated);
}

:host(.ion-activated) .button-native::after {
  background: var(--background-activated);

  opacity: var(--background-activated-opacity);
}