PAM

.button-states(@bg-color, @text-color)

Generates hover, focus, active and visited states for a button.

Parameters:

@bg-color

Base color for the states.
@text color

Color for visited state.

.fractions(@selector, @prefix, @fraction-list)

Generate a given number of fraction widths for a specified selector.

Parameters:

@selector

Selector name.
@prefix

Attribute value prefix.
Defaults to: ''
@fraction-list

Fractions to iterate.
Defaults to: @fractions

.fractions-responsive(@selector, @prefix, @fraction-list)

Generates responsive fractions for supported screen sizes. Uses .fractions to generate the fractions.

Parameters:

@selector

Selector name.
@modifier

Modifier name.
Defaults to: ""
@screens

List of screen sizes to generate fractions for.
Defaults to: @screen-sizes

.fraction-units(@selector, @prefix, @fraction-list)

Generate a given number of fraction units for a specified selector.

Parameters:

@fractions

Fractions to generate.
@selector

Selector name.
@prefix

Attribute value prefix.
Defaults to: ''
@index

What size to start on.
Defaults to: 1

.grid-control-space(@suffix, @size)

Applies spacing to grid.

Parameters:

@suffix

Set suffix (optional).
Defaults to: ""
@size

Set size (optional).
Defaults to: @grid-spacing

.grid-units(@columns, @startIndex, @prefix)

Generate number of requested columns starting from given number and optional adds a passed prefixed value.

Parameters:

@columns

Number of columns.
@startIndex

What number to start on.
Defaults to: 1
@prefix

Attribute value prefix.
Defaults to: ''

Media queries

Wrap a min-width, max-width or a min- to max-width media query around a selector context with provided rules. You can even use declared detached rulesets for properties and selectors.

 // Example
 @property-ruleset: { display: none; };
 @selector-ruleset: {
     [detached-ruleset] {
         display: none;
     };
 };

 body {
     .media-min-width(600px, @property-ruleset);
     .media-min-width(600px, @selector-ruleset);
 }

 // Output
 body {
     @media screen and (min-width: 600px) {
         display: none;

         [detached-ruleset] {
             display: none;
         }
     }
 }

.media-min-width(@breakpoint; @rules)

Wrap a min-width media query around a selector context with provided rules.

Parameters:

@breakpoint

Breakpoint for min-width.
@rules

What rules to apply to the media query.

.media-max-width(@breakpoint; @rules)

Wrap a max-width media query around a selector context with provided rules.

Parameters:

@breakpoint

Breakpoint for max-width.
@rules

What rules to apply to the media query.

.media-min-max-width(@breakpoint; @rules)

Wrap a min- to max-width media query around a selector context with provided rules.

Parameters:

@breakpoint-min

Breakpoint for max-width.
@breakpoint-max

Breakpoint for max-width.
@rules

What rules to apply to the media query.

.responsive-selector(@selector, @prefix, @fraction-list)

Generates responsive fractions for supported screen sizes. Uses .fractions to generate the fractions.

Parameters:

@selector

Selector name.
@modifier

Modifier name.
Defaults to: ""
@screens

List of screen sizes to generate selectors for.
Defaults to: @screen-sizes

.placeholder-color(@color)

Applies text color for placeholder.

Parameters:

@color =@skin-gray-600

Set placeholder color.

.shadows(@quantity, @prefix, @startIndex)

Generate number of requested shadows starting from a given number and adds a prefixed value.

Parameters:

@quantity

Number of shadows.
@prefix

Attribute value prefix.
Defaults to: 'z'
@startIndex

What number to start on.
Defaults to: 1

sizes(@selector, @property, @quantity, @prefix, @index)

Generate a given number of fixed sizes for a specified selector.

Parameters:

@selector

Selector name.
@property

Selector property.
@prefix

Attribute value prefix.
Defaults to: ''
@quantity

Number of size to generate.
@multiplier

Mmultiplier for size.
Defaults to: @space-16
@index

What size to start on.
Defaults to: 0

spacing(@property, @prefix, @spaces, @startIndex)

Generate a given number of spaces of a specific space type.

Parameters:

@property

Use margin or padding.
@prefix

Space attribute value prefix. Format {type}{side}:{size}
Defaults to: ''
@spaces

Number of spaces sizes to generate.
@startIndex

What size to start on.
Defaults to: 1

spacing-x(@property, @prefix, @spaces, @startIndex)

Generate a given number of spaces for the x axis (left and right).

Parameters:

@property

Use margin or padding.
@prefix

Space attribute value prefix. Format {type}{side}:{size}
Defaults to: ''
@spaces

Number of spaces sizes to generate.
@startIndex

What size to start on.
Defaults to: 1

spacing-y(@property, @prefix, @spaces, @startIndex)

Generate a given number of spaces for the y axis (top and bottom).

Parameters:

@property

Use margin or padding.
@prefix

Space attribute value prefix. Format {type}{side}:{size}
Defaults to: ''
@spaces

Number of spaces sizes to generate.
@startIndex

What size to start on.
Defaults to: 1

.zindex(@elementName, @elementList)

Handles z-index contextual by retrieving the elements position from a element list and returns the positon as a z-index value.

@z-index-global list is shipped with PAM and is empty by default. Add element names to appropriate z-index in the list and use the .zindex mixin to retrive the z-index value for that element in the given context. If more z-index contexts are needed add another @z-index-* list for that context.

 // Example
 @z-index-global: 'overlay', 'dialog', 'notification';
 zindex('notification', @z-index-global);
 output: z-index: 3;

Parameters:

@elementName

Find position for given name.
@elementList

Contextual z-index element list.