colors

variables

am-theme-primary

$am-theme-primary: #009688 !default;

Description

Primary theme color. This is the main admin theme color, showing itself on the main header, buttons, and other elements that command attention. If you want to change the main theme colors, this is the value you want.

am-theme-primary-700

$am-theme-primary-700: #0D3C55 !default;

Description

A darker primary theme color for contrast when overlaying important items containers that are already treated with primary color.

am-theme-accent

$am-theme-accent: #cddc39 !default;

Description

Used for primary action button and components like switches or sliders.

am-theme-error

$am-theme-error: #f44336 !default;

Description

The color treatment of error messages.

am-theme-error-400

$am-theme-error-400: #FF695E !default;

Description

A lighter treatment for errors to draw contrast to the main error color.

am-theme-backdrop

$am-theme-backdrop: #eeeeee !default;

Description

The background color of the document.

am-theme-paper

$am-theme-paper: white !default;

Description

The background color of Material Design "paper" elements such as cards. And other elements that overlap content.

am-theme-divider

$am-theme-divider: #efefef !default;

Description

The color of tooling lines used to aid the eye when breaking down content.

am-theme-hint-text

$am-theme-hint-text: rgba(black, 0.26) !default;

Description

The text color for hints. Displays itself in helper text under inputs and other guiding copy.

am-theme-secondary-text

$am-theme-secondary-text: rgba(black, 0.54) !default;

Description

A lighter text color for less important content.

am-theme-secondary-text-reverse

$am-theme-secondary-text-reverse: rgba(white, 0.54) !default;

Description

A lighter text color for less important content on dark backgrounds.

am-theme-tertiary-text

$am-theme-tertiary-text: rgba(black, 0.4) !default;

Description

An even lighter text treatment for content less important than secondary text.

am-theme-icon

$am-theme-icon: $am-theme-secondary-text !default;

Description

The default color of icons.

am-theme-text

$am-theme-text: rgba(black, 0.70) !default;

Description

The default color for all text.

am-theme-text-reverse

$am-theme-text-reverse: white !default;

Description

The default color for all text on dark backgrounds.

am-state-focus

Deprecated!
$am-state-focus: rgba(#999, 0.2) !default;

Description

A color for focus states.

am-state-active

Deprecated!
$am-state-active: rgba(#999, 0.4) !default;

Description

A color for active states.

am-state-disabled

Deprecated!
$am-state-disabled: rgba(#999, 0.1) !default;

Description

A color for disabled states.

theme-primary

Deprecated!
$theme-primary: $am-theme-primary !default;

Description

An old variable for primary colors maintained for legacy support on other projects.

theme-divider

Deprecated!
$theme-divider: $am-theme-divider !default;

Description

An old variable for divider colors maintained for legacy support on other projects.

theme-accent

Deprecated!
$theme-accent: $am-theme-accent !default;

Description

An old variable for accent colors maintained for legacy support on other projects.

theme-error

Deprecated!
$theme-error: $am-theme-error !default;

Description

An old variable for error colors maintained for legacy support on other projects.

datepicker

variables

am-datepicker-width

$am-datepicker-width: am-unit(35) !default;

Description

The width of the datepicker.

am-datepicker-shadow

$am-datepicker-shadow: (0 1px 2px rgba(#000, 0.25), 0 -1px 1px rgba(#000, 0.12)) !default;

Description

The shadow cast below the datepicker.

am-datepicker-border-radius

$am-datepicker-border-radius: 2px !default;

Description

The border radius of the picker.

am-datepicker-cell-size

$am-datepicker-cell-size: am-unit(4) !default;

Description

The size of an individual cell in the calendar. Square.

fonts

variables

am-font-sans

$am-font-sans: 'RobotoDraft', sans-serif !default;

Description

The default sans-serif font

menu

sortable

variables

am-sortable-icon

$am-sortable-icon: asset-url("active_material/icons/reorder.svg") !default;

Description

The icon displayed within a sortable element's drag handle

textfield

variables

am-textfield-input-type

$am-textfield-input-type: normal am-sp(14)/24px $am-font-sans !default;

Description

Textfield input typography.

am-textfield-label-type

$am-textfield-label-type: 400 am-sp(12)/am-unit(2) $am-font-sans !default;

Description

Textfield label typography.

am-textfield-margin

$am-textfield-margin: am-unit(1) 0 !default;

Description

Textfield margin.

am-textfield-padding

$am-textfield-padding: am-unit(1) am-unit(2) !default;

Description

Textfield padding.

am-textfield-error-color

$am-textfield-error-color: $am-theme-error !default;

Description

Textfield error color.

am-textfield-color

$am-textfield-color: rgba(#000, 0.70) !default;

Description

Textfield color.

am-textfield-primary

$am-textfield-primary: am-color(primary) !default;

Description

Textfield highlight color.

am-textfield-email-icon

$am-textfield-email-icon: asset-url("active_material/icons/email.svg") !default;

Description

Icon for email fields.

am-textfield-password-icon

$am-textfield-password-icon: asset-url("active_material/icons/secret.svg") !default;

Description

Icon for password fields.

am-textfield-date-icon

$am-textfield-date-icon: asset-url("active_material/icons/event.svg") !default;

Description

Icon for date fields.

General

mixins

am-clearfix

@mixin am-clearfix() { ... }

Description

Injects standard clearfix rules

Parameters

None.

am-color

@mixin am-color($key) { ... }

Description

Injects a color property given a key within $am-color.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$key

A key within $am-color

Anynone

Requires

Used by

am-font-family

@mixin am-font-family($key) { ... }

Description

Injects a font-family property given a key within $am-font-family.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$key

A key within $am-font-family

Anynone

Requires

Used by

am-fill

@mixin am-fill($key) { ... }

Description

Injects a background-color property given a key within $am-color.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$key

A key within $am-color

Anynone

Requires

Used by

am-hidden

@mixin am-hidden() { ... }

Description

Injects rules to visually hide an element

Parameters

None.

am-list-blank

@mixin am-list-blank() { ... }

Description

Nullify default list rules

Parameters

None.

am-list-inline

@mixin am-list-inline() { ... }

Description

Inject a rule for child

  • tags to use inline-block.
  • Parameters

    None.

    am-min-breakpoint

    @mixin am-min-breakpoint() { ... }

    Description

    Standard logic for management of breakpoints

    Parameters

    None.

    Content

    This mixin allows extra content to be passed (through the @content directive).

    am-font-size

    @mixin am-font-size($size) { ... }

    Description

    Assign a given font size in rems, falling back to pixel values in older browsers.

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $size

    Font size in pixels

    Numbernone

    Requires

    Used by

    am-web-font

    @mixin am-web-font() { ... }

    Description

    When using the Webfont.js font loader, only show the loaded font-family when the loader indicates it is active (via the .wf-active) class.

    Parameters

    None.

    Requires

    am-paper

    @mixin am-paper() { ... }

    Description

    Inject rules for generic, elevated surfaces. This is used for elements that overlap other content, such as panels and sidebars.

    Parameters

    None.

    Requires

    am-type-subheader

    @mixin am-type-subheader() { ... }

    Description

    Applies rules for subheader text.

    Parameters

    None.

    Requires

    am-type-body-2

    @mixin am-type-body-2() { ... }

    Description

    Applies rules for heavier, more emphasized, body text.

    Parameters

    None.

    Requires

    am-type-body-1

    @mixin am-type-body-1() { ... }

    Description

    Applies rules for standard body text.

    Parameters

    None.

    Requires

    am-type-caption

    @mixin am-type-caption() { ... }

    Description

    Applies rules for caption text.

    Parameters

    None.

    Requires

    am-type-btn

    @mixin am-type-btn() { ... }

    Description

    Applies rules for button text.

    Parameters

    None.

    Requires

    am-type-smooth

    @mixin am-type-smooth() { ... }

    Description

    Applies rules for smooth text anti-aliasing.

    Parameters

    None.

    functions

    am-tracking

    @function am-tracking($amount) { ... }

    Description

    Emulates letter tracking in Adobe Photoshop, which is used for adjusting the space between letters in text.

    Follows the guidance of https://scotch.io/quick-tips/converting-photoshop-letter-spacing-to-css.

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $amount

    An integer value, such as 100

    Numbernone

    Returns

    Number

    The amount of letter-spacing in ems.

    Used by

    am-strip-units

    @function am-strip-units($number) { ... }

    Description

    Removes units (px, em, etc...) from a given number.

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $number

    The numeric value to strip units from.

    Numbernone

    Returns

    Number

    A unitless number value.

    Used by

    am-sp

    @function am-sp($value, $baseline: 16) { ... }

    Description

    Calculates "scalable pixel" values. This is implemented using rems. Within material design, scalable pixel values are those that respect the user's font settings.

    According to the Google Material Design Specification:

    "Users who have larger text settings for accessibility will see the font size matched to their text size preferences."

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $value

    A pixel value to be converted into rems.

    Numbernone
    $baseline

    The assumed base font size.

    Number16

    Returns

    Number

    Scalable pixel value in rems.

    Requires

    Used by

    am-unit

    @function am-unit($step) { ... }

    Description

    Calculates measurements along the base unit grid defined under $am-unit-base. This provides an easy way to align elements upon a baseline mesh grid.

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $step

    The scale of units

    Numbernone

    Returns

    Number

    A pixel value representing the number of units along the mesh grid.

    am-type-unit

    @function am-type-unit($step) { ... }

    Description

    Calculates measurements along the base type grid defined under $am-unit-base. This provides an easy way to align elements upon a baseline typographic mesh grid.

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $step

    The scale of units

    Numbernone

    Returns

    Number

    A pixel value representing the number of units along the typographic mesh grid.

    am-color

    @function am-color($key) { ... }

    Description

    Extracts a color out of the $am-color map. Throws an error if that key is not defined.

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $key

    The desired key in $am-colors.

    Anynone

    Returns

    Color

    A color value from $am-colors.

    Throws

    • Unknown color value

    Used by

    am-lighten

    @function am-lighten($key, $amount) { ... }

    Description

    Extracts a color out of the $am-color map and lightens it using the built-in Sass function.

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $key

    The desired key in $am-colors.

    Anynone
    $amount

    The degree of lightness.

    Numbernone

    Returns

    Color

    A lightened color value from $am-colors.

    Requires

    am-darken

    @function am-darken($key, $amount) { ... }

    Description

    Extracts a color out of the $am-color map and darkens it using the built-in Sass function.

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $key

    The desired key in $am-colors.

    Anynone
    $amount

    The degree of darkness.

    Numbernone

    Returns

    Color

    A darkened color value from $am-colors.

    Requires

    am-font-family

    @function am-font-family($key) { ... }

    Description

    Extracts a font family out of the $am-fonts map. Throws an error if that key is not defined.

    Parameters

    parameterNameparameterDescriptionparameterTypeparameterDefault value
    $key

    The desired key in $am-colors.

    Anynone

    Returns

    Font

    A font family from $am-colors.

    Throws

    • Unknown font value

    Used by

    csss

    /// Applies rules for subheader text. @mixin am-type-subheader

    @css /// Applies rules for subheader text.
    @mixin am-type-subheader() { ... }