You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
316 lines
8.7 KiB
316 lines
8.7 KiB
// ------------------------------------------------------------------------------ |
|
// |
|
// # 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;
|
|
|