Calcite Base

shadow ($level, $state)

Add a shadow to an element from one of calcite's two shadow levels

Parameters

avenir-light ()

Render text in a light weight (300)

avenir-light-italic ()

Render text in an italic light weight (300)

avenir-regular ()

Render text in a regular weight (400);

avenir-italic ()

Render text in italics

avenir-bold ()

Render text in a bold weight (700)

avenir-bold-italic ()

Render text in italic bold

code-face ()

Apply styles for monospace code font. Updates font-family, tracking, and style

code-italic ()

Apply styles for italic monospace code font.

tracking ($n)

Space characters in a word horizontally

Parameters

Example

@include tracking(100);

word-spacing ($n)

Add space between words

Parameters

Example

@include word-spacing(200); // add lots of space between each word

leading ($n)

Space lines of text vertically

Parameters

Example

@include leading(2); // twice as much vertical space

text-inline ()

Display element inline

text-center ()

align text in the center

text-left ()

align text to the left (right in rtl)

text-right ()

align text to the right (left in rtl)

text-light ()

lower the opacity of text to make it more subtle (be careful to retain accessible contrast ratio)

text-ellipsis ()

add overflow-ellipsis to the element when ther eis more text than will fit on one line

text-color ($value)

Apply a color to text

Parameters

Example

@include color($blue);

link-color ($value, $light-value)

Apply one color normally, and another on hover

Parameters

Example

@include link-color($blue, $light-blue); // text will be blue, but light blue while hovering

font-size ($n, $line-height)

Apply responsive text sizing to an element. Use only whole numbers to maintain proper typographic scale.

Parameters

Example

@include font-size(-1); // one step smaller on the scale
@include font-size(2, 1.25); // two steps larger on the scale, 1.25 line-height

clearfix ()

Adds a clearfix to the item via a psuedo element.

rtl ()

Used for overriding styles in right to left languages. Styles will be applied when html element is in right to left mode.

Example

.myClass { 
  margin-left: 1rem;
  @include rtl {
    margin-left: 0;
    margin-right: 1rem;
  }
}

left ()

Floats an element to the left. In right-to-left documents, will automatically switch to float right.

right ()

Floats an element to the right. In right-to-left documents, will automatically switch to float left.

visually-hidden ()

Hide an element visually, but leave it available to screen readers.

visually-hidden-focusable ()

Hide an element visually, but allow it to be focused (useful for things like skip-to-content links).

animation ($animations...)

Generate a prefixed version of the animation property

Parameters

animation-name ($names...)

Generate a prefixed version of the animation-name property

Parameters

animation-duration ($times...)

Generate a prefixed version of the animation-duration property

Parameters

animation-timing-function ($motions...)

Generate a prefixed version of the animation-timing-function property

Parameters

animation-iteration-count ($values...)

Generate a prefixed version of the animation-iteration-count property

Parameters

animation-direction ($directions...)

Generate a prefixed version of the animation-direction property

Parameters

animation-play-state ($states...)

Generate a prefixed version of the animation-play-state property

Parameters

animation-delay ($times...)

Generate a prefixed version of the animation-delay property

Parameters

animation-fill-mode ($modes...)

Generate a prefixed version of the animation-fill-mode property

Parameters

keyframes ($name)

Generate keyframes with browser prefixes

Parameters

Example

@include keyframes(out-up) {
  0%   { transform: translate3d(0, 0, 0);}
  100% { transform: translate3d(0, 100%, 0); }
}

fade-in ($duration, $name)

Apply the fade-in animation to an element

Parameters

fade-out ($duration, $name)

Apply the fade-out animation

Parameters

in-up ($duration, $name)

Apply the in-up animation

Parameters

in-down ($duration, $name)

Apply the in-down animation

Parameters

out-up ($duration, $name)

Apply the out-up animation

Parameters

out-down ($duration, $name)

Apply the out-down animation

Parameters

fade-in-keyframes ($name)

Generate keyframes for fade-in

Parameters

fade-out-keyframes ($name)

Generate keyframes for fade-out

Parameters

in-up-keyframes ($name)

Generate keyframes for in-up

Parameters

in-down-keyframes ($name)

Generate keyframes for in-down

Parameters

out-up-keyframes ($name)

Generate keyframes for out-up

Parameters

out-down-keyframes ($name)

Generate keyframes for out-down

Parameters

respond-to ($max, $min, $type)

Apply styles to an element at certain screen sizes

Parameters

Example

@include respond-to($viewport-small) {
  padding: 1rem; // element will have padding up to the small viewport
}

@include respond-to($viewport-small, $viewport-large) {
  padding: 1rem; // applied from small to large
}