ionic-framework/ionic/components/button/button-outline.scss

@import "../../ionic.globals";

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

button,
[button] {

  &[outline] {
    border: 1px solid $button-color;
    background: transparent;
    color: $button-color;

    &.activated {
      opacity: 1;
      color: $background-color;
      background-color: $button-color;
    }
  }

}


// Outline Button Color Mixin
// --------------------------------------------------

@mixin button-outline($fg-color) {

  &[outline] {
    border-color: $fg-color;
    background: transparent;
    color: $fg-color;

    &.activated {
      color: $background-color;
      background-color: $fg-color;
    }
  }

}


// Outline Clear Button Colors
// --------------------------------------------------

@each $color-name, $color-value in auxiliary-colors() {

  button[#{$color-name}],
  [button][#{$color-name}] {

    $fg-color: color-shade($color-value, 5%);
    @include button-outline($fg-color);

  }

}