ZK LESS Variables"
Line 136: | Line 136: | ||
= Component Independent Variables = | = Component Independent Variables = | ||
− | Above described are common variables that are shared among every component. Below we will define independent variables that uniquely belongs to each component. | + | Above described are common variables that are shared among every component. Below we will define independent variables that uniquely belongs to each individual component. |
== Button, Input, Table == | == Button, Input, Table == |
Revision as of 07:24, 22 November 2013
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
Above described are common variables that are shared among every component. Below we will define independent variables that uniquely belongs to each individual component.
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 |
---|---|---|