University of Staffordshire Pattern Library

Button: Style: Outline Grey

No notes defined.

<a href="#" class="button  button--outline-grey">

    Grey Outline Style Button
</a>
 
{{ spaceless }}
{% set classString = '' %}
{% for class in classes %}
  {% set classString = classString ~ '  ' ~ class %}
{% endfor %}

<a href="{{ link }}" class="button{% if classString %}{{ classString }}{% endif %}">
  {% if icon %}
    <i class="icon | icon-{{ icon }}"></i>
  {% endif %}
  {{ text }}
</a>
{{ endspaceless }}
  • Content: 
    .button {
  // For the moment, these are defined as little mixins over in __vars/mixins so they can be included elsewhere

  @include button;

  // Sizes

  &--xs {
    @include button--xs;
  }

  &--sm {
    @include button--sm;
  }

  &--lg {
    @include button--lg;
  }

  &--xl {
    @include button--xl;
  }

  // Layout

  &--block {
    @include button--block;
    line-height: 1.5;
  }

  &--pointy {
    @include button--pointy;
  }

  &--caps {
    text-transform: uppercase;
  }

  // Colours

  &--dark-blue {
    @include button--dark-blue;
  }

  &--digital-blue {
    @include button--digital-blue;
  }

  &--granite {
    @include button--granite;
  }

  &--grey {
    @include button--grey;
  }

  &--outline {
    @include button--outline;

    .slab--bg-slate &, .slab--bg-teal & {
      color: white;
    }
  }

  &--outline-dark-blue {
    @include button--outline-dark-blue;
  }

  &--outline-grey {
    @include button--outline-grey;
  }

  &--outline-slate {
    @include button--outline-dark-blue;
  }

  &[disabled] {
    @include button--disabled;
  }
}
  • URL: /components/raw/button/_buttons.scss
  • Filesystem Path: src\components\button\_buttons.scss
  • Size: 1.2 KB