responsivewebframework/src/less/component_variables.less

Jalasoft Foundation Front End Framework ========================================

//== component variables
//
//## set color
@primary-color: rgb(33,33,33);
@body-color: rgb(77,77,77);
@secondary-color: rgb(117, 117, 117);
@placeholder-color: rgb(155, 155, 155);
@dividers-color: rgb(224,224,224);
@lines-color: rgb(189,189,189);
@disabled-color: rgb(189,189,189);
@link-color: rgb(50,135,255);
@background-scrollbar: rgb(235, 235, 235);

@opacity-up: 0.75;
@opacity-over: 0.50;
@opacity-down: 1.0;
@opacity-disabled: 0.50;

//** font-family component
@font-size-base-component: @font-size-base - 2;
@font-family-base-component: @font-family-Regular;

//** component height
@height-component: 32px;
//** border component
@border-radius-component: 4px;
//** margin component
@margin-component : 5px 10px;
//** line height component
@line-height-component: @height-component + 3px;

//** Buttons
@button-bg: @link-color;
@button-font-color: #ffffff;
@button-font-size: @font-size-base-component;
@button-letter-space: @letter-space-normal;
@button-text-transform: @text-uppercase;
@button-border-radius: 5px;
@button-disabled: rgba(50, 135, 255, 0.5);
@button-height: @height-component;
@button-min-width: 64px;
@button-line-height: @line-height-component;

//** Checkboxes
@checkbox-margin  : 40px;
@checkbox-boxsize : 10px;
@checkbox-padding : -23px;
@checkbox-border  : 2px;

//** Radio buttons
@base-size-radio-button: 10px;
@external-size-radio-button: 12px;
@inner-size-radio-button: 6px;
@stroke-radio-button: 2px;
@area-selectable-radio-button: 30px;

//variables for buttons and icon button
@icon-font-size: 30px;
@buton-icon-width:  84px;
@button-icon-height: 84px;

//** Tables
@table-font-size: @font-size-base-component;
@table-border-color: @disabled-color;
@table-padding-left: 24px;
@table-thead-padding-bottom: 16px;
@table-tbody-padding-bottom: 12px;
@table-tbody-tr-hover-color: @dividers-color;
@table-tbody-min-width: 80px;
@table-height-tbody-td: @height-component;
@table-second-column-padding-left: 12px;
@table-min-width-first-column: 60px;
@table-padding-left-first-column: 8px;
@table-line-height: 1px;


//** list boxes
@listbox-hover-color: rgb(239, 239, 239);
@listbox-selected-hover-color: rgb(215,215,215);

//** Drop down list
//** Head drop down list
@padding-left-head-menu: 11px;
@icon-size-menu: 16px;
@icon-padding-left-right-menu: 12px;
@icon-padding-top-bottom-menu: 7px;

//** drop down menu
@padding-left-menu: 12px;
@padding-right-menu: 12px;
@margin-spacing-top-bottom: 4px;
@hover-color: @dividers-color;
@max-item-menu: 5;
@height-menu: (@height-component * @max-item-menu) + (@margin-spacing-top-bottom * 2);//to scroll bar

//** Context menu
@context-menu-background-color: rgb(255, 255, 255);

//** Tree view
@tree-view-font-size: @font-size-base-component;
@tree-view-max-width: 206px;
@tree-view-ul-li-position: relative;
@tree-view-space-ul: 3px;
@tree-view-item-disabled-opacity: 0.5;
@tree-view-adjust-position-a: -6px;
@tree-view-adjust-position-icon: -10px;
@tree-view-adjust-li: -18px;
@tree-view-adjust-padding-a: 0 0 0 20px;
@tree-view-adjust-padding-icon: 0 10px 0 0;
@tree-view-child-adjust-position-icon: -20px;
@tree-view-child-adjust-padding-icon: 0 10px 0 0;

//** Pager
@height-component-arrow: 16px;
@width-component-arrow:  16px;
@margin-component-arrow: 4px;
@padding-item-pager:     8px;
@height-item-pager:      16px;
@line-height-item:       16px;

//** Search box
@search-box-heigth: 30px;
@search-box-color: #fff;
@search-box-border-radius: 8px;
@search-box-padding: 8px;
@search-box-place-holder-style: italic;
@search-box-padding-input: 12px;
@search-box-style-show: table;

//** Label
@color-label-font: rgb(255, 255, 255);
@label-font: 18px;
@label-opacity-hover: 0.85;
@label-icon-color-hover: #FF1325;

//** Text box
@text-box-padding: 0px 12px 0px 12px;
@text-box-border: 1px solid @placeholder-color !important;
@text-box-text-color: @body-color;
@text-box-base-font-size: @font-size-base-component;
@text-box-position: relative;
@text-box-outline: 0;
@text-box-margin: 0;
@text-box-height: 30px;
@text-box-width: 32%;
@text-box-disabled-background-color: rgb(255,255,255) !important;
@text-box-placeholder-style: italic;
@text-box-placeholder-background-color: transparent;
@tex-box-placeholder-opacity: 0;
@text-box-placeholder-color: @placeholder-color;
@text-box-placeholder-transition: opacity 0.5s ease;
@text-box-increasing-rate: 10%;

//** Text area
@text-area-base-size-height: 150px;
@text-area-base-size: 35%;
@text-area-padding: 12px;
@text-area-resize: none;
@text-area-border: 1px solid;
@text-area-border: 1px solid @placeholder-color !important;
@text-area-outline: 0;
@text-area-disabled-background-color: rgb(255,255,255) !important;
@text-are-placeholder-transition: opacity 0.5s ease;
@text-area-placeholder-font-color: @placeholder-color;
@text-area-base-font-size: @font-size-base-component;
@text-area-base-font-color: @body-color;
@text-area-increasing-rate: 10;
@text-area-scrollbar-width: 12px;
@text-area-scrollbar-thumb-width: 8px;
@text-area-scrollbar-border: 2px solid @background-scrollbar;
@text-area-scrollbar-track-background-color: @background-scrollbar;
@text-area-scrollbar-thumb-color: @placeholder-color;
@text-area-scrollbar-thumb-hover-color: @secondary-color;

//** Tooltip
@zindex-tooltip: 100;
@tooltip-opacity: 1;
@tooltip-arrow-width: 4px;
@tooltip-min-width: 155px;
@tooltip-max-width: 250px;
@tooltip-color: @dividers-color;
@tooltip-bg: @body-color;
@border-radius-base: 4px;
@tooltip-arrow-color: @body-color;
@tooltip-icon-warning-color: rgb(230, 185, 95);
@tooltip-icon-info-color: #F5F5DC;
@tooltip-icon-error-color: #FFA07A;
@tooltip-padding: 12px;

//**perfil-list-card
@card-width: 78px;
@card-height: 78px;
@card-border-radius: 50px;
@card-border-radius-gray: 60px;
@card-background-color: white;
@container-card-height: 80px;
@container-card-width: 322px;
@container-card-color: #303030;
@containerinformation-height: 80px;
@containerinformation-padding-left: 16px;

//** timeline Component
@timeline-height: 3px;
@timeline-background: rgb(220, 220, 220);
@timeline-point: rgb(188, 188, 188);
@timeline-point-hover: rgb(109, 170, 110);