University of Derby

Button 

<a href="" class="button-outline" role="button" tabindex="0" data-scroll><span class="button-overlay"><span></span></span></a>
 
{% spaceless %}
<a href="{{ href }}" class="{% if scheme %}button-{{scheme}}{% else %}button-outline{% endif %}{% if size %} button-{{size}}{% endif %}" role="button" tabindex="0" data-scroll>
    {% if icon %}<i class="button-icon uod-icons uod-icons-{{ icon }}"></i>{% endif %}
    {{ label }}
    {% if external %}<i class="button-icon uod-icons uod-icons-external-link"></i>{% endif %}
    {% if hideOverlay != true %}
    <span class="button-overlay">
        <span>
            {% if icon %}<i class="button-icon uod-icons uod-icons-{{ icon }}"></i>{% endif %}
            {{ label }}
            {% if external %}<i class="button-icon uod-icons uod-icons-external-link"></i>{% endif %}
        </span>
    </span>
    {% endif %}
</a>
{% endspaceless %}
 
/* No context defined for this component. */
  • Content: 
    /**
 *  Global styling for buttons
 *
 *  Variants:
 *      primary (yellow), 
 *      secondary (blue),
 *      black (black),
 *      outline (mid-blue outline, white inset)
 *      inverse (white outline, mid-blue inset)
 *
 *  Sizes:
 *      large,
 *      default,
 *      small
 */
%button {
    @include disable-underlines;
    // to make the make targetting a specific button height easier, 
    // here's some math to work out the padding needed for the button variants
    $line-height: 1.3;
    $small-vertical-padding: (43 - 4 - 16 * $line-height) / 16 / 2 + 0em;
    $normal-vertical-padding: (49 - 4 - 18 * $line-height) / 18 / 2 + 0em;
    $large-vertical-padding: (54 - 4 - 18 * $line-height) / 18 / 2 + 0em;

    display: inline-block;
    position: relative;
    // this ensures that buttons placed next to other elements and themselves
    // are spaced slightly apart from each other
    margin-right: 10px;
    margin-bottom: 10px;
    border: solid 2px;
    border-radius: 2px;
    padding: $small-vertical-padding 1em;
    text-align: center;
    line-height: $line-height;
    font-family: $header-font;
    font-size: responsive 17px 18px;
    font-range: $mobile-portrait $tablet-landscape;
    font-weight: bold;
    overflow: hidden;
    padding-top: $small-vertical-padding;
    padding-bottom: $small-vertical-padding;

    @include for-tablet-portrait-up {
        padding-top: $normal-vertical-padding;
        padding-bottom: $normal-vertical-padding;
    }

    &:last-child {
        margin-right: 0;
    }

    &,
    &:link {
        text-decoration: none;
    }
}

.button {

    &-outline {
        @extend %button;
        border-color: $mid-blue;
        background: transparent;

        &,
        &:link {
            color: $mid-blue;
        }
    }

    &-blue {
        @extend %button;
        border-color: $mid-blue;
        background: $mid-blue;

        &,
        &:link {
            color: $white;
        }
    }

    &-black {
        @extend %button;
        border-color: $black;

        &,
        &:link {
            color: $black;
        }
    }

    &-white {
        @extend %button;
        border-color: $white;

        &,
        &:link {
            color: $white;
        }
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: components/atoms/button/button.scss
  • Size: 2.3 KB
  • Content: 
    /**
 * Additional styles for button elements that we don't want to include in the TinyMCE editor file
 * The easiest way to exclude them is to include them in a separate file. Minfication tasks still
 * merge it into the same output!
 */
%button-overlay {
    &:hover,
    &:focus,
    &:active {
        .button-overlay {
            transform: translateX(0);

            span {
                transform: translateX(0);
            }
        }
    }

    .uod-icons {
        margin-right: 10px;
        vertical-align: text-top;

        &-external-link {
            margin-right: 0;
            margin-left: 10px;
        }
    }
}

.button {
    // to make the make targetting a specific button height easier, 
    // here's some math to work out the padding needed for the button variants
    $line-height: 1.3;
    $small-vertical-padding: (43 - 4 - 16 * $line-height) / 16 / 2 + 0em;
    $normal-vertical-padding: (49 - 4 - 18 * $line-height) / 18 / 2 + 0em;
    $large-vertical-padding: (54 - 4 - 18 * $line-height) / 18 / 2 + 0em;

    &-overlay {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform .3s $default-animation-curve;
        background: $white;
        padding-top: $small-vertical-padding;
        padding-bottom: $small-vertical-padding;
        width: 100%;
        height: 100%;
        overflow: hidden;
        color: $text-black;

        span {
            display: inline-block !important; //overwrites display: inline !important on spans with in p tags
            transform: translateX(100%);
            transition: transform .3s $default-animation-curve;
            margin: 0;
            padding: 0 1em;
        }

        &::before {
            content: '';
            display: block;
            margin: 0 -1em;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    
        @include for-tablet-portrait-up {
            padding-top: $normal-vertical-padding;
            padding-bottom: $normal-vertical-padding;
        }
    }

    &-large {
        font-size: responsive 17px 18px;
        font-range: $mobile-portrait $tablet-landscape;
        padding-top: $large-vertical-padding;
        padding-bottom: $large-vertical-padding;

        .button-overlay {
            padding-top: $large-vertical-padding;
            padding-bottom: $large-vertical-padding;
        }
    }

    &-small {
        font-size: responsive 14px 16px;
        font-range: $mobile-portrait $tablet-landscape;
        padding-top: $small-vertical-padding;
        padding-bottom: $small-vertical-padding;

        .button-overlay {
            padding-top: $small-vertical-padding;
            padding-bottom: $small-vertical-padding;
        }
    }

    &-yellow {
        @extend %button;
        @extend %button-overlay;
        border-color: $yellow;
        background: $yellow;

        &,
        &:link {
            color: $black;
        }
    }

    &-outline {
        @extend %button-overlay;

        .button-overlay {
            background: $mid-blue;
            color: $white;
        }
    }

    &-blue {
        @extend %button-overlay;

        .button-overlay {
            background: $white;
            color: $mid-blue;
        }
    }

    &-black {
        @extend %button-overlay;

        .button-overlay {
            background: $black;
            color: $white;
        }
    }

    &-white {
        @extend %button-overlay;

        .button-overlay {
            background: $white;
            color: $black;
        }
    }
}
  • URL: /components/raw/button/button.tinymce-excludes.scss
  • Filesystem Path: components/atoms/button/button.tinymce-excludes.scss
  • Size: 3.7 KB

There are no notes for this item.