FAA Pattern Library - Music

Standard Button: Primary Button Disabled 

<button type="" disabled="disabled" aria-disabled="true" class="standard-button standard-button--music standard-button--light
            standard-button---width standard-button--primary">
        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">See more results</span><span class="standard-button__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16"><path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/></svg></span></span></div>    </button>
 
{% set newTab = button.isDownload %}

{% if button.isButton | default %}
    <button type="{{ button.buttonType | default }}"
            {% if button.id | default %} id="{{ button.id }}"{% endif %}
            {% if button.isDisabled | default %} disabled="disabled" aria-disabled="true"{% endif %}
            class="standard-button standard-button--{{ siteUnit }} standard-button--{{ background }}
            standard-button--{{ button.width }}-width standard-button--{{ button.type }}"
        {% if button.accessibleLabel | default %}
            aria-label="{{ button.accessibleLabel }}"
        {% endif %}
    >
        {% apply spaceless %}
            <div class="standard-button__container">
                <span class="standard-button__text-container">
                    <span class="standard-button__text">{{ button.text | trim }}</span>
                    {% if button.icon | default %}
                        <span class="standard-button__icon">{% include "bits/icons/" ~ button.icon ~ ".twig" %}</span>
                    {% endif %}
                </span>
            </div>
        {% endapply %}
    </button>
{% else %}
    <a href="{{ button.url }}"
       class="standard-button standard-button--{{ siteUnit }} standard-button--{{ background }}
            standard-button--{{ button.width }}-width standard-button--{{ button.type }}"
       {% if button.accessibleLabel | default %}
           aria-label="{{ button.accessibleLabel }}"
        {% endif %}
        {% if newTab %} target="_blank" {% endif %}>
        {% apply spaceless %}
            <div class="standard-button__container">
                <span class="standard-button__text-container">
                    <span class="standard-button__text">{{ button.text | trim }}</span>

                    {% if button.icon | default %}
                        <span class="standard-button__icon">{% include "bits/icons/" ~ button.icon ~ ".twig" %}</span>
                    {% endif %}
                </span>
            </div>
        {% endapply %}
    </a>
{% endif %}
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light",
  "button": {
    "icon": "right-chevron",
    "text": "See more results",
    "url": "#",
    "type": "primary",
    "isButton": true,
    "isDisabled": true
  }
}
  • Content: 
    .standard-button
    &--light&--primary
        --standardButtonBackgroundColor charcoalLighter
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled greyDarker
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled white
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonTextColor white
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled white

    &--dark&--primary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled greyDarker

    &--light&--secondary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled greyDarker

    &--dark&--secondary
        --standardButtonBackgroundColor charcoalLighter
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled greyDarker
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled white
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid white
        --standardButtonTextColor white
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled white

    &--light&--tertiary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled greyDarker

    &--dark&--tertiary
        --standardButtonBackgroundColor charcoalLighter
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled greyDarker
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled white
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid white
        --standardButtonTextColor white
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled white

    &--arch&--primary
        --standardButtonBackgroundColor industrialBlue
        --standardButtonBackgroundColorActive charcoalLight
        --standardButtonBackgroundColorDisabled greyDarker
        --standardButtonBorderRadius 0
        --standardButtonFontWeight bold
        --standardButtonIconFillColor white
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled white
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonTextColor white
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled white

    &--arch&--secondary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive industrialBlue
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 0
        --standardButtonFontWeight regular
        --standardButtonIconFillColor industrialBlue
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid industrialBlue
        --standardButtonOutlineBorderActive 2px solid industrialBlue
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled greyDarker

    &--arch&--tertiary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive industrialBlue
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 0
        --standardButtonFontWeight regular
        --standardButtonIconFillColor industrialBlue
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid industrialBlue
        --standardButtonOutlineBorderActive 2px solid industrialBlue
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled greyDarker

    &--art&--primary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive archesBlue
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor archesBlue
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid archesBlue
        --standardButtonOutlineBorderActive 2px solid archesBlue
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLighter
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled greyDarker

    &--art&--secondary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive archesBlue
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor archesBlue
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonOutlineBorderActive 2px solid cloudDarkest
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLighter
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled greyDarker

    &--art&--tertiary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive archesBlue
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor archesBlue
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid archesBlue
        --standardButtonOutlineBorderActive 2px solid archesBlue
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled greyDarker

    &--college&--light&--primary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 24px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor charcoalDarker
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--college&--light&--secondary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 24px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor charcoalDarker
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--college&--light&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 24px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor charcoalDarker
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--college&--dark&--primary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 24px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor white
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--college&--dark&--secondary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 24px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid white
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor white
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--college&--dark&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 24px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor white
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--dance&--primary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive archesBlue
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor archesBlue
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid archesBlue
        --standardButtonOutlineBorderActive 2px solid archesBlue
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLighter
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled greyDarker

    &--dance&--secondary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive archesBlue
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor archesBlue
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonOutlineBorderActive 2px solid cloudDarkest
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLighter
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled greyDarker

    &--dance&--tertiary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive archesBlue
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor archesBlue
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid archesBlue
        --standardButtonOutlineBorderActive 2px solid archesBlue
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled greyDarker

    &--durp&--light&--primary
        --standardButtonBackgroundColor charcoalLighter
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled greyDarker
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled white
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonTextColor white
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled white

    &--durp&--dark&--primary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder none
        --standardButtonOutlineBorderActive none
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled greyDarker

    &--durp&--light&--secondary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled greyDarker

    &--durp&--dark&--secondary
        --standardButtonBackgroundColor charcoalLighter
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled greyDarker
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled white
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid white
        --standardButtonTextColor white
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled white

    &--durp&--light&--tertiary
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled cloud
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid greyDarker
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled greyDarker

    &--durp&--dark&--tertiary
        --standardButtonBackgroundColor charcoalLighter
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBackgroundColorDisabled greyDarker
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive white
        --standardButtonIconFillColorDisabled white
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid white
        --standardButtonTextColor white
        --standardButtonTextColorActive white
        --standardButtonTextColorDisabled white

    &--landarch&--light&--primary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor charcoalDarker
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--landarch&--light&--secondary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor charcoalDarker
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--landarch&--light&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor charcoalDarker
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--landarch&--dark&--primary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor white
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--landarch&--dark&--secondary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight bold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid white
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor white
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--landarch&--dark&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive black
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor white
        --standardButtonTextColorActive black
        --standardButtonTextColorDisabled grey

    &--theatre&--light&--primary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid cloudDarkest
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled greyDarker

    &--theatre&--light&--secondary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid cloudDarkest
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled greyDarker

    &--theatre&--light&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid cloudDarkest
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled greyDarker

    &--theatre&--dark&--primary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid cloudDarkest
        --standardButtonTextColor white
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled greyDarker

    &--theatre&--dark&--secondary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid cloudDarkest
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled greyDarker

    &--theatre&--dark&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 28px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid cloudDarkest
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled greyDarker


    &--music&--light&--primary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled grey

    &--music&--light&--secondary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled grey

    &--music&--light&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled grey

    &--music&--dark&--primary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled grey

    &--music&--dark&--secondary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight extraBold
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled greyDarker
        --standardButtonOutlineBorder 2px solid white
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled grey

    &--music&--dark&--tertiary
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBackgroundColorDisabled transparent
        --standardButtonBorderRadius 8px
        --standardButtonFontWeight regular
        --standardButtonIconFillColor illiniOrange
        --standardButtonIconFillColorActive illiniBlue
        --standardButtonIconFillColorDisabled grey
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonOutlineBorderActive 2px solid illiniOrange
        --standardButtonOutlineBorderDisabled 2px solid grey
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue
        --standardButtonTextColorDisabled grey

    align-items center
    background-color var(--standardButtonBackgroundColor)
    border var(--standardButtonOutlineBorder)
    border-radius var(--standardButtonBorderRadius)
    color var(--standardButtonTextColor)
    display inline-block
    padding 8px 20px
    text-align center
    text-decoration none
    transition all 0.3s ease

    &:hover
    &:focus
        background-color var(--standardButtonBackgroundColorActive)
        border var(--standardButtonOutlineBorderActive)

    &:hover &__icon svg
    &:focus &__icon svg
        transform translateX(4px)

    &:hover &__icon > svg > path
    &:focus &__icon > svg > path
        fill var(--standardButtonIconFillColorActive)

    &:hover &__text
    &:focus &__text
        color var(--standardButtonTextColorActive)

    &--cta-component
        padding 10px 24px

    &--full-width
        width 100%

    &--full-width &__container
        justify-content center

    &__text-container
        bottom -1px
        position relative

    &__text
        @extends $primaryLink
        color var(--standardButtonTextColor)
        font-weight var(--standardButtonFontWeight)
        margin-right 16px

        &:first-child:last-child
            margin-right 0

    &--cta-component &__text
        font-size responsive 20px 24px

    &__icon
        display inline
        margin-left -8px
        position relative
        top -1px
        vertical-align text-top
        white-space nowrap

        & svg
            transition all 0.3s ease

            & path
                fill var(--standardButtonIconFillColor)

    &[disabled]
        background-color var(--standardButtonBackgroundColorDisabled)
        border var(--standardButtonOutlineBorderDisabled)

    &[disabled]:hover
    &[disabled]:focus
        background-color var(--standardButtonBackgroundColorDisabled)

    &[disabled]:hover &__icon svg
    &[disabled]:focus &__icon svg
        transform translateX(0)

    &[disabled]:hover &__icon > svg > path
    &[disabled]:focus &__icon > svg > path
        fill var(--standardButtonIconFillColorDisabled)

    &[disabled]:hover &__text
    &[disabled]:focus &__text
        color var(--standardButtonTextColorDisabled)

    &[disabled]  &__text
        color var(--standardButtonTextColorDisabled)

    &[disabled] &__icon
        & svg
            & path
                fill var(--standardButtonIconFillColorDisabled)
  • URL: /components/raw/standard-button/standard-button.styl
  • Filesystem Path: components/bits/standard-button/standard-button.styl
  • Size: 36.6 KB

There are no notes for this item.