324 lines
9.0 KiB
Plaintext
324 lines
9.0 KiB
Plaintext
// ------------------------------------------------------------------------------
|
|
//
|
|
// # 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;
|
|
|