<button class="bux-button bux-button--alt-disabled" aria-disabled="true">
Alternate Disabled
</button>
{#
Button
Available variables:
- modifier: Sets the button variant. These can be combined, e.g.:
'small-disabled'. Allowed values: null, disabled, alt, small,
icon.
- icon_class: Optional. Takes the machine name of an icon from the BUX Icon
library. Must have 'icon' set as the modifier.
- button_text: String for the label of the button.
#}
<button class="bux-button{% if modifier %} bux-button--{{ modifier }}{% endif %}" {% if "disabled" in modifier %} aria-disabled="true" {% endif %}>
{% if icon_class %}
<div class="bux-button__icon">
<span class="icon {{ icon_class }}" aria-hidden="true"></span>
</div>
{% endif %}
{{ button_text }}
</button>
button_text: Alternate Disabled
modifier: alt-disabled
@mixin button(
$bg-color: var(--scarlet),
$text-color: var(--white),
$border-color: var(--scarlet),
$bg-hover: var(--gray-dark-60),
$text-hover: var(--white),
$border-hover: var(--gray-dark-60)
) {
@include button-reset;
background-color: $bg-color;
color: $text-color;
border: 2px solid $border-color;
padding: rem-calc(10 20);
font-family: $sans;
font-size: $ts-base;
font-weight: 600;
text-align: center;
text-decoration: none;
transition-duration: .3s;
transition-property: background-color,border-color,color,fill,stroke;
transition-timing-function: cubic-bezier(.4,0,.2,1);
&:hover {
background-color: $bg-hover;
color: $text-hover;
border-color: $border-hover;
}
&:focus,
&:active {
background-color: $bg-color;
color: $text-color;
border: 2px solid $border-color;
outline: 2px solid var(--focus);
outline-offset: 1px;
}
}
// Default buttons.
button:not([class]),
.bux-button {
@include button();
}
.bux-button--disabled {
@include button(var(--gray-light-80), var(--gray-dark-20), var(--gray-light-80), var(--gray-light-80), var(--gray-dark-20), var(--gray-light-80));
cursor: not-allowed;
}
// Alt buttons.
.bux-button--alt {
@include button(var(--white), var(--scarlet), var(--scarlet));
@include dark-theme {
border-width: $sp-4;
}
}
.bux-button--alt-disabled {
@include button(var(--gray-light-80), var(--gray-dark-20), var(--gray-light-60), var(--gray-light-80), var(--gray-dark-20), var(--gray-light-60));
cursor: not-allowed;
@include dark-theme {
border-width: $sp-4;
}
}
// Small buttons.
.bux-button--small {
@include button();
font-size: $ts-sm;
padding: rem-calc(6 12);
}
.bux-button--small-disabled {
@include button(var(--gray-light-80), var(--gray-dark-20), var(--gray-light-80), var(--gray-light-80), var(--gray-dark-20), var(--gray-light-80));
cursor: not-allowed;
font-size: $ts-sm;
padding: rem-calc(6 12);
}
// Alternate Small buttons.
.bux-button--alt-small {
@include button(var(--white), var(--scarlet), var(--scarlet));
font-size: $ts-sm;
padding: rem-calc(6 12);
@include dark-theme {
border-width: $sp-4;
}
}
.bux-button--alt-small-disabled {
@include button(var(--gray-light-80), var(--gray-dark-20), var(--gray-light-60), var(--gray-light-80), var(--gray-dark-20), var(--gray-light-60));
cursor: not-allowed;
font-size: $ts-sm;
padding: rem-calc(6 12);
@include dark-theme {
border-width: $sp-4;
}
}
// Button with icon.
.bux-button--icon {
@include button(var(--gray-light-80), var(--scarlet), var(--gray-light-80), var(--gray-dark-60), var(--white), var(--gray-dark-60));
display: flex;
align-items: center;
text-align: left;
}
.bux-button__icon {
margin-right: $sp-16;
height: 28px;
width: 28px;
display: flex;
align-items: center;
.icon {
padding-top: 9px;
font-size: 28px;
}
}
// Use case for links styled as a button
a.bux-button {
display: inline-block;
}
// Dark Mode
.bux-button {
@include dark-theme {
color: var(--black);
&:hover {
color: var(--white);
}
}
.bux-button--alt, .bux-button--alt-small {
border-color: var(--black);
background-color: var(--white);
&:hover {
color: var(--white);
background-color: var(--black);
}
}
}
No notes defined.