variables-custom.less

// ------------------------------------------------------------------------------
//
//  # Additional variables
//
//  Custom additions to BS variables and other content variations
//
//  Version: 1.0
//  Latest update: May 25, 2015
//
// ------------------------------------------------------------------------------


//
// Shadows
// ------------------------------
//

//** Material design shadows
@shadow-depth1: 						     0 1px 3px fade(#000, 12%), 0 1px 2px fade(#000, 24%);
@shadow-depth1-reversed: 				     0 -1px 2px fade(#000, 24%);
@shadow-depth2: 						     0 3px 6px fade(#000, 16%), 0 3px 6px fade(#000, 23%);
@shadow-depth3:							     0 10px 20px fade(#000, 19%), 0 6px 6px fade(#000, 23%);
@shadow-depth4:							     0 14px 28px fade(#000, 25%), 0 10px 10px fade(#000, 22%);
@shadow-depth5:							     0 19px 38px fade(#000, 30%), 0 15px 12px fade(#000, 22%);



//
// Typography
// ------------------------------
//

//** XLarge computed line height
@line-height-computed-xlarge:    		     floor((@font-size-xlarge * @line-height-base)); // ~20px
@line-height-computed-large: 			     floor((@font-size-large * @line-height-base));
@line-height-computed-small: 			     floor((@font-size-small * @line-height-base));
@line-height-computed-mini: 			     floor((@font-size-mini * @line-height-base));


//** XLarge font size (v. 1.3)
@font-size-xlarge:                           @font-size-h6;

//** XLarge line height (v. 1.3)
@line-height-xlarge:                         1.333334;


//** Mini font size
@font-size-mini: 						     ceil((@font-size-base * 0.8)); // ~11px

//** Mini line height, for the smallest size
@line-height-mini: 						     1.82;


//** Adding negative letter spacing to headings
@heading-letter-spacing:				     -0.015em;

//** Vertical list padding, mainly used in navigation and dropdowns
@list-spacing: 							     @padding-base-vertical;

//** Font size used in icons. Icomoon icon set is based on 16px grid
@icon-font-size: 						     16px;

//** Additional element's horizontal spacing for inline elements
@element-horizontal-spacing: 			     @padding-base-vertical;



//
// Content
// ------------------------------
//

//** Page header backgrounds (v. 1.3)
@page-header-default-bg:                     #fff;
@page-header-inverse-bg:                     #273246;


//** Required additional padding options, integrated to other less files
@content-padding-large: 					20px;
@content-padding-base: 						15px;
@content-padding-small: 					10px;


//** Extra large padding for inputs and buttons
@padding-xlarge-vertical:    				10px;
@padding-xlarge-horizontal:  				16px;


//** Floating button padding
@btn-float-padding: 						16px;



//
// Components
// ------------------------------
//

//** Primary form state
@state-primary-bg:               			@color-primary-50;
@state-primary-text:             			@color-primary-800;
@state-primary-border:           			@color-primary-600;

//** Progress bar height (4px step)
@progress-base-height: 						18px;

@progress-large-height: 					(@progress-base-height + 4); // ~ 22px
@progress-small-height: 					(@progress-base-height - 4); // ~ 14px
@progress-mini-height: 						(@progress-base-height - 8); // ~ 10px
@progress-tiny-height: 						(@progress-base-height - 12); // ~ 6px
@progress-micro-height: 					(@progress-base-height - 16); // ~ 2px

//** Additional "Primary" alert contextual class
@alert-primary-bg: 							@state-primary-bg;
@alert-primary-text: 						@state-primary-text;
@alert-primary-border: 						@state-primary-border;

//** Slider sizes for jQuery UI and NoUI sliders
@slider-base-size: 							6px;
@slider-large-size: 						@slider-base-size + 2;
@slider-small-size: 						@slider-base-size - 2;
@slider-mini-size: 							@slider-base-size - 4;

//** Color for menu and dropdown menu highlight background
@dropdown-annotation-bg: 					#f8f8f8;



//
// Tables
// ------------------------------
//

//** Header and footer border color
@table-border-highlight: 					#bbb;

//** Optional sizes
@table-xlarge-cell-padding: 				20px;
@table-large-cell-padding: 					15px 20px;
@table-small-cell-padding: 					10px 20px;
@table-mini-cell-padding: 					8px 20px;
@table-micro-cell-padding: 					6px 15px;



//
// Forms
// ------------------------------
//

//** Placeholder text color
@input-placeholder-light: 					#fff;


//** Extra large `.form-control` height
@input-height-xlarge: 						(floor(@font-size-xlarge * @line-height-xlarge) + (@padding-xlarge-vertical * 2) + 2); // ~ 42px

//** Mini `.form-control` height
@input-height-mini: 						(floor(@font-size-base * @line-height-base) + (@padding-xs-vertical * 2) + 2); // ~ 32px


//** Checkbox and radio sizes
@checkbox-size: 							18px;
@checkbox-border-width: 					2px;

//** Switchery toggle sizes
@switchery-base-size: 						22px;

@switchery-large-size: 						@switchery-base-size + 4; // ~ 26px
@switchery-small-size: 						@switchery-base-size - 4; // ~ 18px
@switchery-mini-size:						@switchery-base-size - 8; // ~ 14px


//** Spacing for tags (v. 1.3)
@tags-spacing:                              2px;

@tags-color:                                @text-color;
@tags-hover-color:                          #fff;

@tags-bg:                                   #eee;
@tags-hover-bg:                             @color-blue-500;


//** Summernote editor (v. 1.3)
@summernote-font-path:                      "../css/icons/summernote/";



//
// Navbar component
// ------------------------------
//

//** Padding
@navbar-padding-vertical-large:				((@navbar-height-large - @line-height-computed) / 2); // ~ 13px
@navbar-padding-vertical-small:				((@navbar-height-small - @line-height-computed) / 2); // ~ 11px
@navbar-padding-vertical-mini:				((@navbar-height-mini - @line-height-computed) / 2); // ~ 10px

//** Sizing
@navbar-height-large:						(@navbar-height + 4); // ~ 48px
@navbar-height-small:						(@navbar-height - 2); // ~ 42px
@navbar-height-mini:						(@navbar-height - 4); // ~ 40px



//
// Nav components
// ------------------------------
//

//** Additional paddings
@nav-link-padding-large:					(@padding-base-vertical + 4) @content-padding-large;
@nav-link-padding-small:					@padding-base-vertical @content-padding-base;
@nav-link-padding-mini:						(@padding-base-vertical - 2) @content-padding-small;



//
// FAB menu component
// ------------------------------
//

//** Calculate floating button size
@fab-main-btn-size:                         ((@btn-float-padding + (@icon-font-size / 2)) * 2);

//** Difference between main and inner buttons. Each side
@fab-btn-difference:                        2px;

//** Calculate inner button size
@fab-inner-btn-size:                        ((@btn-float-padding - @fab-btn-difference) * 2) + @icon-font-size;

//** Spacing between menu items
@fab-inner-btn-spacing:                     @line-height-computed;



//
// Modal components
// ------------------------------
//

//** Sizing
@modal-full:                 				94%;
@modal-xs:                    				300px;



//
// Sidebar
// ------------------------------
//

//** Default sidebar width
@sidebar-base-width: 						260px;

//** Mini sidebar width
@sidebar-mini-width:                    	((@content-padding-large * 2) + @icon-font-size);

//** Sidebar colors
@sidebar-light-bg: 							#fff;
@sidebar-dark-bg: 							@color-slate-900;



//
// Main vertical navigation
// ------------------------------
//

//** Main navigation sizing
@navigation-padding-base-vertical: 			12px;

@navigation-padding-large-vertical:			(@navigation-padding-base-vertical + 2); // ~ 14px
@navigation-padding-small-vertical:			(@navigation-padding-base-vertical - 2); // ~ 10px
@navigation-padding-mini-vertical: 			(@navigation-padding-base-vertical - 4); // ~ 8px

@navigation-padding-base-horizontal: 		@content-padding-large;


//** Dark sidebar navigation styles
@navigation-dark-color: 					fade(#fff, 75%);

@navigation-dark-hover-bg: 					fade(#000, 10%);
@navigation-dark-hover-color: 				#fff;

@navigation-dark-active-bg: 				@color-teal-400;
@navigation-dark-active-border: 			@navigation-dark-active-bg;
@navigation-dark-active-color: 				#fff;
@navigation-dark-active-label-bg: 		    @navigation-dark-active-bg;
@navigation-dark-active-label-color: 		@navigation-dark-active-color;


//** Light sidebar navigation styles
@navigation-light-color: 					@text-color;

@navigation-light-hover-bg: 				#f8f8f8;
@navigation-light-hover-color: 				@text-color;

@navigation-light-active-bg: 				#f5f5f5;
@navigation-light-active-border: 			@panel-default-border;
@navigation-light-active-color: 			@text-color;
@navigation-light-active-label-bg: 		    @navigation-light-active-bg;
@navigation-light-active-label-color: 		@text-color;



//
// Custom components
// ------------------------------
//

//** Timeline 
@timeline-icon-size: 						48px;
@timeline-line-color: 						#ccc;
@timeline-line-width: 						2px;
@timeline-icon-border-width: 				4px;


//** Timeline 
@list-feed-circle-radius: 					8px; // must be even
@list-feed-circle-border-width: 			2px;
@list-feed-circle-position: 				(@line-height-computed - (@list-feed-circle-radius + @list-feed-circle-border-width)) / 2;