// ------------------------------------------------------------------------------ // // # Additional variables // // Custom additions to BS variables and other content variations // // Version: 1.0 // Latest update: May 25, 2015 // // ------------------------------------------------------------------------------ // // Typography // ------------------------------ // //** 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: 5px; //** 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: 7px; // // Content // ------------------------------ // //** 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: @content-padding-base; // // 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-large * @line-height-large) + (@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 // // 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; // // 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; //** Navigation active link background colors @navigation-dark-active-bg: @color-teal-400; @navigation-light-active-bg: @color-teal-400; // // Custom components // ------------------------------ // //** Timeline @timeline-icon-size: 48px; @timeline-line-color: #ccc; @timeline-line-width: 2px; @timeline-icon-border-width: 4px;