Ext JS 4.2.1 Sencha Docs

Global_CSS

Files

Available since: 4.1.1

Defined By

CSS Variables

Global_CSS
view source
: color
The base color to be used throughout the theme. ...

The base color to be used throughout the theme.

Defaults to: #808080

Available since: 4.1.1

Global_CSS
view source
: string
The base gradient to be used throughout the theme. ...

The base gradient to be used throughout the theme.

Defaults to: 'matte'

Available since: 4.1.1

Background color to apply to the body element ...

Background color to apply to the body element

Defaults to: transparent

Available since: 4.2.0

Global_CSS
view source
: color
The default text color to be used throughout the theme. ...

The default text color to be used throughout the theme.

Defaults to: #000

Available since: 4.2.0

Global_CSS
view source
: measurement
The border radius for CSS shadows ...

The border radius for CSS shadows

Defaults to: 5px

Available since: 4.2.0

Global_CSS
view source
: string
The default font-family to be used throughout the theme. ...

The default font-family to be used throughout the theme.

Defaults to: helvetica , arial , verdana , sans-serif

Available since: 4.1.1

Global_CSS
view source
: string
The default font-family to be used throughout the theme. ...

The default font-family to be used throughout the theme.

Defaults to: 13px

Available since: 4.2.0

Global_CSS
view source
: string
default file extension to use for images (defaults to 'png'). ...

default file extension to use for images (defaults to 'png').

Defaults to: 'png'

Available since: 4.2.0

Default search path for images ...

Default search path for images

Defaults to: '.'

Available since: 4.2.0

Global_CSS
view source
: boolean
True to include Chrome specific rules ...

True to include Chrome specific rules

Defaults to: true

Available since: 4.1.1

Global_CSS
view source
: boolean
True to include rules for browsers that do not support the border-box model (IE6 strict and IE7 strict) ...

True to include rules for browsers that do not support the border-box model (IE6 strict and IE7 strict)

Defaults to: $include-ie

Available since: Ext JS 4.2.1

Global_CSS
view source
: boolean
True to include the default UI for each component. ...

True to include the default UI for each component.

Defaults to: true

Available since: Ext JS 4.2.1

Global_CSS
view source
: boolean
True to include Firefox specific rules ...

True to include Firefox specific rules

Defaults to: true

Available since: 4.1.1

Global_CSS
view source
: boolean
True to include Internet Explorer specific rules ...

True to include Internet Explorer specific rules

Defaults to: true

Available since: 4.1.1

True to include files which are not found when compiling your SASS

True to include files which are not found when compiling your SASS

Available since: 4.1.1

Global_CSS
view source
: boolean
True to include Opera specific rules ...

True to include Opera specific rules

Defaults to: true

Available since: 4.1.1

Global_CSS
view source
: boolean
True to include right-to-left style rules. ...

True to include right-to-left style rules. This variable gets set to true automatically for rtl builds. You should not need to ever assign a value to this variable, however it can be used to suppress rtl-specific rules when they are not needed. For example: @if $include-rtl { .x-rtl.foo { margin-left: $margin-right; margin-right: $margin-left; } }

Defaults to: true

Available since: 4.2.0

Global_CSS
view source
: boolean
True to include Safari specific rules ...

True to include Safari specific rules

Defaults to: true

Available since: 4.1.1

True to include all shadow images. ...

True to include all shadow images.

Defaults to: true

Available since: 4.1.1

Global_CSS
view source
: boolean
True to include Webkit specific rules ...

True to include Webkit specific rules

Defaults to: true

Available since: 4.1.1

Global_CSS
view source
: color
The neutral color to be used throughout the theme. ...

The neutral color to be used throughout the theme.

Defaults to: #dcdcdc

Available since: 4.2.0

Global_CSS
view source
: string
The prefix to be applied to all CSS selectors. ...

The prefix to be applied to all CSS selectors. If this is changed, it must also be changed in your JavaScript application.

Defaults to: 'x-'

Available since: 4.1.1

Global_CSS
view source
: boolean/string
True to use a relative image path for all new UIs. ...

True to use a relative image path for all new UIs. If true, the path will be "../images/". It can also be a string of the path value. It defaults to false, which means it will look for the images in the ExtJS SDK folder.

Defaults to: false

Available since: 4.1.1

default file extension to use for slicer images (defaults to 'gif'). ...

default file extension to use for slicer images (defaults to 'gif').

Defaults to: 'gif'

Available since: 4.2.0

Global_CSS
view source
: string
The base path relative to the CSS output directory to use for theme resources. ...

The base path relative to the CSS output directory to use for theme resources. For example if the theme's images live one directory up from the generated CSS output in a directory named 'foo/images/', you would need to set this variable to '../foo/' in order for the image paths in the CSS output to be generated correctly. By default this is the same as the CSS output directory.

Defaults to: ''

Available since: Ext JS 4.2.1

Defined By

CSS Mixins

Global_CSS
view source
( $bg-color, [$type], [$direction] )
Creates a background gradient. ...

Creates a background gradient.

Example usage: .foo { @include background-gradient(#808080, matte, left); }

Available since: 4.1.1

Parameters

  • $bg-color : Color

    The background color of the gradient

  • $type : String/List (optional)

    The type of gradient to be used. Can either be a String which is a predefined gradient name, or it can can be a list of color stops. If null is passed, this mixin will still set the background-color to $bg-color. The available predefined gradient names are:

    • bevel
    • glossy
    • recessed
    • matte
    • matte-reverse
    • panel-header
    • tabbar
    • tab
    • tab-active
    • tab-over
    • tab-disabled
    • grid-header
    • grid-header-over
    • grid-row-over
    • grid-cell-special
    • glossy-button
    • glossy-button-over
    • glossy-button-pressed

    Each of these gradient names corresponds to a function named linear-gradient[name]. Themes can override these functions to customize the color stops that they return. For example, to override the glossy-button gradient function add a function named "linear-gradient-glossy-button" to a file named "sass/etc/mixins/background-gradient.scss" in your theme. The function should return the result of calling the Compass linear-gradient function with the desired direction and color-stop information for the gradient. For example:

    @function linear-gradient-glossy-button($direction, $bg-color) {
        @return linear-gradient($direction, color_stops(
            mix(#fff, $bg-color, 10%),
            $bg-color 50%,
            mix(#000, $bg-color, 5%) 51%,
            $bg-color
        ));
    }
    

    Defaults to: $base-gradient

  • $direction : String (optional)

    The direction of the gradient. Can either be top or left.

    Defaults to: top