ZK LESS Variables

LESS variables defined here are for ZK's default theme - Breeze. You can change these variables when customizing a theme with a new look and feel.

Typography

Define base font styles including font family, font size and line-height.

// Font Family
@baseTitleFontFamily:          "Helvetica Neue", Helvetica, Arial, sans-serif;
@baseContentFontFamily:        Arial, Sans-serif;

// Font Size
@baseFontSize:                 14px;
@fontSizeLarge:                floor(@baseFontSize * 1.15); // 16px
@fontSizeMedium:               ceil(@baseFontSize * 0.85); // 12px
@fontSizeSmall:                floor(@baseFontSize * 0.8); // 11px

// Line Height
@baseLineHeight:               14px;

Component sizing

Define base width and height.

// Component Height
@baseHeight:                   8px;
@baseIconHeight:               @baseHeight * 2; // 16px
@baseButtonHeight:             @baseHeight * 3; // 24px
@baseBarHeight:                @baseHeight * 4; // 32px
@baseTitleHeight:              @baseHeight * 5; // 40px

// Component Width
@baseWidth:                    8px;
@baseIconWidth:                @baseWidth * 2; // 16px
@baseButtonWidth:              @baseWidth * 3; // 24px
@baseBarWidth:                 @baseWidth * 4; // 32px

// Border Radius
@baseBorderRadius:             4px;
@borderRadiusLarge:            6px;
@borderRadiusSmall:            3px;

Component Basic Coloring

Define text color, border color, background color and gradient colors.

// Text color
@baseTextColor:                #000000;
@textColorGray:                #555555;
@textColorGrayDark:            #363636;
@textColorGrayLight:           #636363;

// Border color
@baseBorderColor:              #CFCFCF;
@headerBorderColor:            #9C9C9C;

// Background color
@baseBackgroundColor:          #FFFFFF;
@headerBackgroundColor:        @baseBackgroundColor;

// Gradient background
@baseGradientStart:            #FEFEFE;
@baseGradientEnd:              #EEEEEE;

Icon Font

Define icon's font color (all icon font used in ZK comes from font-awesome).

// Icon Font
@iconColor:                    #636363;
@iconHoverColor:               #636363;
@iconDisabledColor:            #AAAAAA;

Component State

Define style for component states: active, focus, hover, disabled, invalid, read-only, selected, selectedhover, checked, and collapsed.

// Active
@activeColor:                  @baseTextColor;
@activeBorderColor:            #499EB3;
@activeBackgroundColor:        #86E2F9;

// Focus
@focusColor:                   @baseTextColor;
@focusBorderColor:             #00B9FF;
@focusBackgroundColor:         @baseGradientEnd;

// Hover
@hoverColor:                   @textColorGrayLight;
@hoverBorderColor:             #8FB9D0;
@hoverBackgroundColor:         #D6F0FD;

// Disabled
@disabledColor:                #AAAAAA;
@disabledBackgroundColor:      #F0F0F0;

// Invalid
@invalidBorderColor:           #DD7777;

// Read-only
@readonlyBorderColor:          #E6E6E6;
@readonlyBackgroundColor:      #FAFAFA;

// Selected
@selectedColor:                @textColorGrayLight;
@selectedBorderColor:          @baseBorderColor;
@selectedBackgroundColor:      #BEE7FC;

// Selected Hover
@selectedHoverColor:           @textColorGrayLight;
@selectedHoverBorderColor:     @baseBorderColor;
@selectedHoverBackgroundColor: #C5E7F8;

// Checked
@checkedColor:                 #2184BA;
@checkedBorderColor:           #8E8F8F;
@checkedBackgroundColor:       #F8F8F8;

// Collapsed
@collapsedBorderColor:         @baseBorderColor;
@collapsedBackgroundColor:     #FCFCFC;

Component Independent Variables

Define independent variables for component unique to above variables.

Button, Input, Table

Define global border and background style for specific DOM element buttons, inputs, and tables.

// Button
@buttonBorderColor:            #A9A9A9;
@buttonGradientStart:          #FEFEFE;
@buttonGradientEnd:            #EEEEEE;
// Input
@inputBorderColor:             @baseBorderColor;
@inputBackgroundColor:         @baseBackgroundColor;
// Table
@tableTitleBorderColor:        @baseBorderColor;
@tableContentBorderColor:      #FFFFFF;
@tableBackgroundColor:         #FFFFFF;
@tableStripeBackgroundColor:   #F7F7F7;
@tableFootBackgroundColor:     #FAFAFA;

Layout Components

// window
@windowBorderColor:            #9C9C9C;
@windowBackgroundColor:        #D9E5EF;
@windowFramePadding:           4px;

// paging
@pagingColor:                  @textColorBlue;
@pagingBorderColor:            @baseBorderColor;
@pagingBackgroundColor:        #FAFAFA;

Version History

Version	Date	Content