Download

# Mixins

# animation-timing-function

View Source

Sets animation timing function

Arguments

Name Type Default Description
$_functions map This sets which timing functions you want to use

# background-color

View Source

Sets background color from color map

Arguments

Name Type Default Description
$_color map Set the color of the background
$_alpha map Set the alpha of the background

# drop-shadow

View Source

Set drop shadow based on default

Arguments

Name Type Default Description
$_color string Set the color of the drop shadow
$_elevation string Set the level of visible appearance of distance from the ground
$_inset string Set if the drop shadow show be inset

# grid-gaps

View Source

Arguments

Name Type Default Description
$_key string Set the grid gap

# hover

View Source

This creates the styles for a hover effect

Arguments

Name Type Default Description

# line-height

View Source

Sets line height responsively

Arguments

Name Type Default Description
$_value string Set the line height type
$_size string

# linear-gradient

View Source

Multi color gradients

Arguments

Name Type Default Description
$_direction string Set the gradient direction
$_color-stops map Set the color stop values

# text-transform

View Source

Sets text transform responsively

Arguments

Name Type Default Description
$_value string Set the text transform type
$_size string

# transition-timing-function

View Source

Sets transition timing function

Arguments

Name Type Default Description
$_functions map Set the transition timing function

# transition

View Source

Sets transition based on defaults

Arguments

Name Type Default Description
$_properties properties This sets which transition functions you want to use

# triangle

View Source

Make a triangle

Arguments

Name Type Default Description
$_position string Set the position of the triangle
$_color string Set the color of the triangle
$_size string Set the size of the triangle
$_scale string Set the scale of the triangle

# log

View Source

Wrapper mixin for the log function so it can be used with a more friendly API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function within functions because it is not possible to include a mixin in a function and use the mixin everywhere else because it's much more elegant.

Arguments

Name Type Default Description
$message String Message to log

# media-context

View Source

This mixin aims at redefining the configuration just for the scope of the call. It is helpful when having a component needing an extended configuration such as custom breakpoints (referred to as tweakpoints) for instance.

Arguments

Name Type Default Description
$tweakpoints Map Map of tweakpoints to be merged with `$breakpoints`
$tweak-media-expressions Map Map of tweaked media expressions to be merged with `$media-expression`

# media

View Source

Generates a media query based on a list of conditions

Arguments

Name Type Default Description
$conditions Arglist Media query conditions

# button-colors

View Source

Sets the color for a button

Arguments

Name Type Default Description
$background-color String Background color applied to the button; defaults to $buttons-background-color
$border-color String Border color applied to the button; defaults to $buttons-border-color
$text-color String Text color applied to the button; defaults to $buttons-text-color

# button-size

View Source

Sets the size for a button

Arguments

Name Type Default Description
$height String Height applied to the button
$padding String Horizontal padding applied to the button
$border-width String Border width applied to the button
$radius String Border radius applied to the button using either a unit value or the string "rounded"

# color

View Source

Sets text color based on key in $colors map

Arguments

Name Type Default Description
$color String Key of color in $colors map
$alpha Number Alpha value that should be applied to color

# font-size

View Source

Responsively sets font-size based on key in $font-size map

Arguments

Name Type Default Description
$key String Key defined in $font-size map
$breakpoint String If defined as a sub value, will only apply the specific breakpoint value

# font-weight

View Source

Responsively sets font-weight based on key in $font-weight map

Arguments

Name Type Default Description
$key String Key defined in $font-weight map
$breakpoint String If defined as a sub value, will only apply the specific breakpoint value

# font

View Source

Responsively sets all font properties based on key in their respective maps

Arguments

Name Type Default Description
$key String Key defined in font property maps
$breakpoint String If defined as a sub value, will only apply the specific breakpoint value

# letter-spacing

View Source

Responsively sets letter-spacing based on key in $letter-spacing map

Arguments

Name Type Default Description
$key String Key defined in $letter-spacing map
$breakpoint String If defined as a sub value, will only apply the specific breakpoint value