@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); } }