```html_example
<a class="button disabled" href="#" aria-disabled>Disabled</a>
-<button type="button" class="button primary hollow" disabled>Disabled</button>
+<button type="button" class="button primary" disabled>Disabled</button>
<button type="button" class="button secondary" disabled>Disabled</button>
-<button type="button" class="button success hollow" disabled>Disabled</button>
+<button type="button" class="button success" disabled>Disabled</button>
<button type="button" class="button alert" disabled>Disabled</button>
<button type="button" class="button warning" disabled>Disabled</button>
```
&:hover, &:focus {
border-color: $color-hover;
color: $color-hover;
- &.disabled,
- &[disabled] {
- border: $border-width solid $color;
- color: $color;
- }
}
}
}
}
- // Disabled style
- &.disabled,
- &[disabled] {
- @include button-disabled;
-
- @each $name, $color in $button-palette {
- &.#{$name} {
- @include button-disabled($color, auto);
- }
- }
- }
-
// Hollow style
@if $button-fill != hollow {
&.hollow {
@include button-hollow;
@include button-hollow-style;
- &.disabled,
- &[disabled] {
- &, &:hover, &:focus {
- background-color: transparent;
- }
- }
-
@each $name, $color in $button-palette {
&.#{$name} {
@include button-hollow-style($color);
}
}
}
-
+
// Dropdown arrow
&.dropdown {
@include button-dropdown;