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

@import "./button";
@import "./button.ios.vars";
@import "../toolbar/toolbar.ios.vars";


// iOS Button
// --------------------------------------------------

:host {
  --border-radius: #{$button-ios-border-radius};
  --padding-top: #{$button-ios-padding-top};
  --padding-bottom: #{$button-ios-padding-bottom};
  --padding-start: #{$button-ios-padding-start};
  --padding-end: #{$button-ios-padding-end};
  --transition: background-color, opacity 100ms linear;

  @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);

  min-height: #{$button-ios-min-height};

  font-size: #{$button-ios-font-size};
  font-weight: #{$button-ios-font-weight};

  letter-spacing: #{$button-ios-letter-spacing};
}


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

:host(.button-solid) {
  --background-activated: #{ion-color(primary, shade)};
  --background-focused: #{ion-color(primary, shade)};
  --background-hover: #{ion-color(primary, tint)};
  --background-activated-opacity: 1;
  --background-focused-opacity: 1;
  --background-hover-opacity: 1;
}


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

:host(.button-outline) {
  --border-radius: #{$button-ios-outline-border-radius};
  --border-width: #{$button-ios-outline-border-width};
  --border-style: #{$button-ios-outline-border-style};
  --background-activated: #{ion-color(primary, base)};
  --background-focused: #{ion-color(primary, base)};
  --background-hover: transparent;
  --background-focused-opacity: .1;
  --color-activated: #{ion-color(primary, contrast)};
}


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

:host(.button-clear) {
  --background-activated: transparent;
  --background-activated-opacity: 0;
  --background-focused: #{ion-color(primary, base)};
  --background-hover: transparent;
  --background-focused-opacity: .1;

  font-size: #{$button-ios-clear-font-size};
  font-weight: #{$button-ios-clear-font-weight};
}


// iOS Toolbar Buttons
// --------------------------------------------------

/**
 * The default buttons in a toolbar
 * have a different font size/weight
 * than buttons outside of a toolbar on iOS.
 * However, we still want the "size"/"strong"
 * properties to be usable in a toolbar, so we add
 * the .in-buttons selector such that we
 * can add the different font size/weight in a toolbar
 * but still let "size"/"strong" override it.
 */
 :host(.in-buttons) {
   font-size: #{$toolbar-ios-button-font-size};
   font-weight: 400;
 }


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

:host(.button-large) {
  --border-radius: #{$button-ios-large-border-radius};
  --padding-top: #{$button-ios-large-padding-top};
  --padding-start: #{$button-ios-large-padding-start};
  --padding-end: #{$button-ios-large-padding-end};
  --padding-bottom: #{$button-ios-large-padding-bottom};

  min-height: #{$button-ios-large-min-height};

  font-size: #{$button-ios-large-font-size};
}

:host(.button-small) {
  --border-radius: #{$button-ios-small-border-radius};
  --padding-top: #{$button-ios-small-padding-top};
  --padding-start: #{$button-ios-small-padding-start};
  --padding-end: #{$button-ios-small-padding-end};
  --padding-bottom: #{$button-ios-small-padding-bottom};

  min-height: #{$button-ios-small-min-height};

  font-size: #{$button-ios-small-font-size};
}

:host(.button-has-icon-only) {
  --padding-top: 0;
  --padding-bottom: 0;
}


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

:host(.button-round) {
  --border-radius: #{$button-ios-round-border-radius};
  --padding-top: #{$button-ios-round-padding-top};
  --padding-start: #{$button-ios-round-padding-start};
  --padding-end: #{$button-ios-round-padding-end};
  --padding-bottom: #{$button-ios-round-padding-bottom};
}


// iOS Strong Button
// --------------------------------------------------

:host(.button-strong) {
  font-weight: #{$button-ios-strong-font-weight};
}


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

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

  &::after {
    background: current-color(base);
  }
}

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


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

@media (any-hover: hover) {
  // Clear and outline buttons use opacity so set
  // background to transparent, but this shouldn't
  // apply on top of activated
  :host(.button-clear:not(.ion-activated):hover),
  :host(.button-outline:not(.ion-activated):hover) {
    opacity: #{$button-ios-clear-opacity-hover};
  }

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

    &::after {
      background: transparent;
    }
  }

  // Solid buttons use the tint background
  :host(.button-solid.ion-color:hover) .button-native::after {
    background: #{current-color(tint)};
  }

  // Solid buttons inside of a toolbar should use a tint of the current
  // background so use white to tint it, but this should not apply
  // when activated
  :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after {
    background: #fff;

    opacity: 0.10;
  }
}


// iOS Button Activated
// --------------------------------------------------

:host(.button-clear.ion-activated) {
  opacity: #{$button-ios-clear-opacity-activated};
}

:host(.button-outline.ion-activated.ion-color) .button-native {
  color: current-color(contrast);

  &::after {
    background: current-color(base);
  }
}

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