University of Adelaide Style guide: University of Adelaide Style guide

Animate opacity

Animates the opacity of pseudo elements, on hover.

Clearfix

Allows the bottom of an element to extend to the bottom of all floated children elements. See http://nicolasgallagher.com/micro-clearfix-hack/.

We use the micro-clearfix, optimized for use in @extend where fewer & is better.

define-css-arrow()

This mixin defines the css arrows, to use this mixin:

define-css-arrow($color, $top, $left, $direction, $size);

Options:

$direction: up, right
$size: small, large

Each of these variables are passed directly onto the build-arrow(); mixin to complete the styled arrow, along with the following variables defined in each array item:

$width, $height, $before-attribute-left, $before-attribute-top, $after-attribute-left, $after-attribute-top, $rotate

flexbox()

Custom flexbox mixins for 2012 syntax and cross browser support.

form-inputs @content mixin

Whenever an input is used, it can extend the selector to include all the html form input types.

eg: @include form-inputs { margin: 0; }

Inline block

Cross browser inline block mixin.

Responsive container

Shared container styles for responsive grid systems.

nib()

Shared triangle CSS icon used by accordions, sitenav and quicklinks.

swap-button-color()

Custom button colors for default, hover, focus and active states.

visually-hidden()

Make an element visually hidden, but accessible to screen readers, etc. @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

visually-hidden--focusable()

Makes an element visually hidden by default, but visible when receiving focus.

visually-hidden--off()

Turns off the visually-hidden effect.

widget-nib()

A little down triangle below the title on widgets and quicklinks etc. This mixin allows for one argument, which is the color for the nib.