Color used for elements like badges, errors, and "decline" UIs (eg. on buttons).

Defaults to: red

The primary color variable from which most elements derive their color scheme.

Defaults to: #1985D0

The primary gradient variable from which most elements derive their color scheme.

See background-gradient mixin.

Defaults to: if ( $include-highlights , matte , null )

Optionally remove CSS3 effects from the slider component for improved performance.

Defaults to: false

Color used for elements like success messages, and "confirm" UIs (eg. on buttons).

Defaults to: #92cf00

The font-family to be used throughout the theme.

See background-gradient mixin.

Defaults to: "Helvetica Neue" , HelveticaNeue , "Helvetica-Neue" , Helvetica , "BBAlpha Sans" , sans-serif

The minimum row height for items like toolbars.

Defaults to: 46px

The minimum row height for items like toolbars.

Defaults to: 2.6em

Optionally disable all border-radius. Useful for CSS debugging, non-performant browsers, or minimalist designs.

Defaults to: true

Optionally remove the default icon set which includes the following toolbar and tab bar icons: action, add, arrow_down, arrow_left, arrow_right, arrow_up, bookmarks, compose, delete, download, favorites, home, info, locate, maps, more, organize, refresh, reply, search, settings, star, team, time, trash, and user. Set to false to reduce CSS weight.

Defaults to: true

Decides whether or not to include the default UIs for all components.

Defaults to: true

Decides if default HTML styles are included (for components with styleHtmlContent: true). Class is applied to .x-html.

Defaults to: true

Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging, non-performant browsers, or minimalist designs.

Defaults to: true

Optionally remove the default Pictos font. This will reduce the size of your compiled CSS files, however icons will no longer be available unless you provide your own.

Defaults to: true

Background-color for the bars in the loading spinner.

Defaults to: #aaa

Color used for the neautral ui for Toolbars and Tabbars.

Defaults to: #e0e0e0

Background color for fullscreen components.

Defaults to: #eee

Space between items in a toolbar (like buttons and fields)

Defaults to: .2em

Bevels the text based on its background.

Parameters

• $bg-color : color

  Background color of element.

  See bevel-text.

Adds a small text shadow (or highlight) to give the impression of beveled text.

Parameters

• $type : string

  Either shadow or highlight, decides whether to apply a light shadow or dark.

Makes the element text overflow to use ellipsis.

Includes an icon to be used on Button or Tab components. The $name is the name of the icon, or the character of the font being used.

@include icon('attachment');

Parameters

• $name : string

  The name of the icon to be included. This is then usable as the iconCls in your app.

• $character : string

  The character

• $font-family : string

  The font-family used for this icon. Defaults to the Pictos font.

Adds basic styles to :before or :after pseudo-elements.

.my-element:after {
  @include insertion(50px, 50px);
}

Parameters

• $width : measurement

  Height of pseudo-element.

• $height : measurement

  Height of pseudo-element.

• $top : measurement

  Top positioning of pseudo-element.

• $left : measurement

  Left positioning of pseudo-element.

Creates a background gradient for masked elements, based on the lightness of their background.

Parameters

• $bg-color : color

  Background color of element.

• $percent : percent

  Contrast of the new gradient to its background.

• $style : percent

  Gradient style of the gradient.

  See background-gradient mixin.

Includes the default styles for toolbar buttons, mostly used as a helper function.

Parameters

• $bg-color : color

  Base color to be used for the button.

• $type : color

  Gradient style for the button, will automatically use "recessed" when pressed.