Ionic/core/src/components/button/button.md.scss

@import "./button";
@import "./button.md.vars";

// Material Design Button
// --------------------------------------------------

:host {
  --border-radius: #{$button-md-border-radius};
  --padding-top: #{$button-md-padding-top};
  --padding-bottom: #{$button-md-padding-bottom};
  --padding-start: #{$button-md-padding-start};
  --padding-end: #{$button-md-padding-end};
  --transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
                background-color 15ms linear,
                color 15ms linear;

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

  height: #{$button-md-height};

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

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

  text-transform: #{$button-md-text-transform};
}

// Material Design Solid Button
// --------------------------------------------------

:host(.button-solid) {
  --background-activated: transparent;
  --background-hover: #{ion-color(primary, contrast)};
  --background-focused: #{ion-color(primary, contrast)};
  --background-activated-opacity: 0;
  --background-focused-opacity: .24;
  --background-hover-opacity: .08;
  --box-shadow: #{$button-md-box-shadow};
}

:host(.button-solid.ion-activated) {
  --box-shadow: #{$button-md-box-shadow-activated};
}

// Material Design Outline Button
// --------------------------------------------------

:host(.button-outline) {
  --border-width: 2px;
  --border-style: solid;
  --box-shadow: none;
  --background-activated: transparent;
  --background-focused: #{ion-color(primary, base)};
  --background-hover: #{ion-color(primary, base)};
  --background-activated-opacity: 0;
  --background-focused-opacity: .12;
  --background-hover-opacity: .04;
}

:host(.button-outline.ion-activated.ion-color) .button-native {
  background: transparent;
}


// Material Design Clear Button
// --------------------------------------------------

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


// Material Design Round Button
// --------------------------------------------------

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


// Material Design Button Sizes
// --------------------------------------------------

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

  height: #{$button-md-large-height};

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

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

  height: #{$button-md-small-height};

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


// MD strong Button
// --------------------------------------------------

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

::slotted(ion-icon[slot="icon-only"]) {
  @include padding(0);
}


// Material Design Button: Hover
// --------------------------------------------------

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

  opacity: .24;
}

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

  opacity: .12;
}

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

    opacity: .08;
  }

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

    opacity: .04;
  }
}