diff options
Diffstat (limited to 'flatly/variables.less')
-rw-r--r-- | flatly/variables.less | 511 |
1 files changed, 348 insertions, 163 deletions
diff --git a/flatly/variables.less b/flatly/variables.less index ab9e7e9d..b3dfccd1 100644 --- a/flatly/variables.less +++ b/flatly/variables.less @@ -1,121 +1,139 @@ -// Flatly 3.0.3 +// Flatly 3.1.0 // Variables // -------------------------------------------------- -// Global values -// -------------------------------------------------- - -// Grays -// ------------------------- +//== Colors +// +//## Gray and brand colors for use across Bootstrap. @gray-darker: lighten(#000, 13.5%); // #222 -@gray-dark: #7b8a8b; -@gray: #95a5a6; -@gray-light: #b4bcc2; -@gray-lighter: #ecf0f1; - -// Brand colors -// ------------------------- +@gray-dark: #7b8a8b; // #333 +@gray: #95a5a6; // #555 +@gray-light: #b4bcc2; // #999 +@gray-lighter: #ecf0f1; // #eee @brand-primary: #2C3E50; @brand-success: #18BC9C; +@brand-info: #3498DB; @brand-warning: #F39C12; @brand-danger: #E74C3C; -@brand-info: #3498DB; -// Scaffolding -// ------------------------- +//== Scaffolding +// +// ## Settings for some of the most global styles. + +//** Background color for `<body>`. @body-bg: #fff; +//** Global text color on `<body>`. @text-color: @brand-primary; -// Links -// ------------------------- - +//** Global textual link color. @link-color: @brand-success; +//** Link hover color set via `darken()` function. @link-hover-color: @link-color; -// Typography -// ------------------------- + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. @font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; +//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 15px; -@font-size-large: ceil(@font-size-base * 1.25); // ~18px -@font-size-small: ceil(@font-size-base * 0.85); // ~12px +@font-size-large: ceil((@font-size-base * 1.25)); // ~18px +@font-size-small: ceil((@font-size-base * 0.85)); // ~12px -@font-size-h1: floor(@font-size-base * 2.6); // ~36px -@font-size-h2: floor(@font-size-base * 2.15); // ~30px -@font-size-h3: ceil(@font-size-base * 1.7); // ~24px -@font-size-h4: ceil(@font-size-base * 1.25); // ~18px +@font-size-h1: floor((@font-size-base * 2.6)); // ~36px +@font-size-h2: floor((@font-size-base * 2.15)); // ~30px +@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px +@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px @font-size-h5: @font-size-base; -@font-size-h6: ceil(@font-size-base * 0.85); // ~12px +@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px +//** Unit-less `line-height` for use in components like buttons. @line-height-base: 1.428571429; // 20/14 -@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px +//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. +@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px +//** By default, this inherits from the `<body>`. @headings-font-family: @font-family-base; @headings-font-weight: 500; @headings-line-height: 1.1; @headings-color: inherit; -// Iconography -// ------------------------- +//-- Iconography +// +//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower. @icon-font-path: "../fonts/"; @icon-font-name: "glyphicons-halflings-regular"; +@icon-font-svg-id: "glyphicons_halflingsregular"; +//== Components +// +//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). -// Components -// ------------------------- -// Based on 14px font-size and 1.428 line-height (~20px to start) +@padding-base-vertical: 10px; +@padding-base-horizontal: 15px; -@padding-base-vertical: 10px; -@padding-base-horizontal: 15px; +@padding-large-vertical: 18px; +@padding-large-horizontal: 27px; -@padding-large-vertical: 18px; -@padding-large-horizontal: 27px; +@padding-small-vertical: 6px; +@padding-small-horizontal: 9px; -@padding-small-vertical: 6px; -@padding-small-horizontal: 9px; +@padding-xs-vertical: 1px; +@padding-xs-horizontal: 5px; -@padding-xs-vertical: 1px; -@padding-xs-horizontal: 5px; +@line-height-large: 1.33; +@line-height-small: 1.5; -@line-height-large: 1.33; -@line-height-small: 1.5; +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; -@border-radius-base: 4px; -@border-radius-large: 6px; -@border-radius-small: 3px; +//** Global color for active items (e.g., navs or dropdowns). +@component-active-color: #fff; +//** Global background color for active items (e.g., navs or dropdowns). +@component-active-bg: @brand-primary; -@component-active-color: #fff; -@component-active-bg: @brand-primary; +//** Width of the `border` for generating carets that indicator dropdowns. +@caret-width-base: 4px; +//** Carets increase slightly in size for larger components. +@caret-width-large: 5px; -@caret-width-base: 4px; -@caret-width-large: 5px; -// Tables -// ------------------------- +//== Tables +// +//## Customizes the `.table` component with basic values, each used across all table variations. -@table-cell-padding: 8px; -@table-condensed-cell-padding: 5px; +//** Padding for `<th>`s and `<td>`s. +@table-cell-padding: 8px; +//** Padding for cells in `.table-condensed`. +@table-condensed-cell-padding: 5px; -@table-bg: transparent; // overall background-color -@table-bg-accent: #f9f9f9; // for striping -@table-bg-hover: @gray-lighter; -@table-bg-active: @table-bg-hover; +//** Default background color used for all tables. +@table-bg: transparent; +//** Background color used for `.table-striped`. +@table-bg-accent: #f9f9f9; +//** Background color used for `.table-hover`. +@table-bg-hover: @gray-lighter; +@table-bg-active: @table-bg-hover; -@table-border-color: @gray-lighter; // table and cell border +//** Border color for table and cell borders. +@table-border-color: @gray-lighter; -// Buttons -// ------------------------- +//== Buttons +// +//## For each of Bootstrap's buttons, define text, background and border color. @btn-font-weight: normal; @@ -131,6 +149,10 @@ @btn-success-bg: @brand-success; @btn-success-border: @btn-success-bg; +@btn-info-color: @btn-default-color; +@btn-info-bg: @brand-info; +@btn-info-border: @btn-info-bg; + @btn-warning-color: @btn-default-color; @btn-warning-bg: @brand-warning; @btn-warning-border: @btn-warning-bg; @@ -139,65 +161,87 @@ @btn-danger-bg: @brand-danger; @btn-danger-border: @btn-danger-bg; -@btn-info-color: @btn-default-color; -@btn-info-bg: @brand-info; -@btn-info-border: @btn-info-bg; - @btn-link-disabled-color: @gray-light; -// Forms -// ------------------------- +//== Forms +// +//## +//** `<input>` background color @input-bg: #fff; +//** `<input disabled>` background color @input-bg-disabled: @gray-lighter; +//** Text color for `<input>`s @input-color: @text-color; +//** `<input>` border color @input-border: #dce4ec; +//** `<input>` border radius @input-border-radius: @border-radius-base; +//** Border color for inputs on focus @input-border-focus: #1abc9c; +//** Placeholder text color @input-color-placeholder: #acb6c0; +//** Default `.form-control` height @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); +//** Large `.form-control` height @input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +//** Small `.form-control` height @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @legend-color: @text-color; @legend-border-color: #e5e5e5; +//** Background color for textual input addons @input-group-addon-bg: @gray-lighter; +//** Border color for textual input addons @input-group-addon-border-color: @input-border; -// Dropdowns -// ------------------------- +//== Dropdowns +// +//## Dropdown menu container and contents. +//** Background for the dropdown menu. @dropdown-bg: #fff; +//** Dropdown menu `border-color`. @dropdown-border: rgba(0,0,0,.15); +//** Dropdown menu `border-color` **for IE8**. @dropdown-fallback-border: #ccc; +//** Divider color for between dropdown items. @dropdown-divider-bg: #e5e5e5; +//** Dropdown link text color. @dropdown-link-color: @gray-dark; +//** Hover color for dropdown links. @dropdown-link-hover-color: #fff; +//** Hover background for dropdown links. @dropdown-link-hover-bg: @dropdown-link-active-bg; +//** Active dropdown menu item text color. @dropdown-link-active-color: #fff; +//** Active dropdown menu item background color. @dropdown-link-active-bg: @component-active-bg; +//** Disabled dropdown menu item background color. @dropdown-link-disabled-color: @text-muted; +//** Text color for headers within dropdown menus. @dropdown-header-color: @text-muted; - -// COMPONENT VARIABLES -// -------------------------------------------------- +// Note: Deprecated @dropdown-caret-color as of v3.1.0 +@dropdown-caret-color: #000; -// Z-index master list -// ------------------------- -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) +//-- Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. +// +// Note: These variables are not generated into the Customizer. @zindex-navbar: 1000; @zindex-dropdown: 1000; @@ -207,8 +251,10 @@ @zindex-modal-background: 1040; @zindex-modal: 1050; -// Media queries breakpoints -// -------------------------------------------------- + +//== Media queries breakpoints +// +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @@ -240,31 +286,32 @@ @screen-md-max: (@screen-lg-min - 1); -// Grid system -// -------------------------------------------------- +//== Grid system +// +//## Define your custom responsive grid. -// Number of columns in the grid system +//** Number of columns in the grid. @grid-columns: 12; -// Padding, to be divided by two and applied to the left and right of all columns +//** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px; - // Navbar collapse - -// Point at which the navbar becomes uncollapsed +//** Point at which the navbar becomes uncollapsed. @grid-float-breakpoint: @screen-sm-min; -// Point at which the navbar begins collapsing +//** Point at which the navbar begins collapsing. @grid-float-breakpoint-max: (@grid-float-breakpoint - 1); -// Navbar -// ------------------------- +//== Navbar +// +//## // Basics of a navbar @navbar-height: 60px; @navbar-margin-bottom: @line-height-computed; @navbar-border-radius: @border-radius-base; -@navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px +@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); +@navbar-collapse-max-height: 340px; @navbar-default-color: #777; @navbar-default-bg: @brand-primary; @@ -291,7 +338,6 @@ // Inverted navbar -// // Reset inverted navbar basics @navbar-inverse-color: #fff; @navbar-inverse-bg: @brand-success; @@ -317,9 +363,11 @@ @navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%); -// Navs -// ------------------------- +//== Navs +// +//## +//=== Shared nav styles @nav-link-padding: 10px 15px; @nav-link-hover-bg: @gray-lighter; @@ -328,7 +376,7 @@ @nav-open-link-hover-color: #fff; -// Tabs +//== Tabs @nav-tabs-border-color: @gray-lighter; @nav-tabs-link-hover-border-color: @gray-lighter; @@ -340,45 +388,63 @@ @nav-tabs-justified-link-border-color: @gray-lighter; @nav-tabs-justified-active-link-border-color: @body-bg; -// Pills +//== Pills @nav-pills-border-radius: @border-radius-base; @nav-pills-active-link-hover-bg: @component-active-bg; @nav-pills-active-link-hover-color: @component-active-color; -// Pagination -// ------------------------- +//== Pagination +// +//## +@pagination-color: #fff; @pagination-bg: @brand-success; @pagination-border: transparent; +@pagination-hover-color: #fff; @pagination-hover-bg: darken(@brand-success, 15%); +@pagination-hover-border: transparent; -@pagination-active-bg: darken(@brand-success, 15%); @pagination-active-color: #fff; +@pagination-active-bg: darken(@brand-success, 15%); +@pagination-active-border: transparent; @pagination-disabled-color: @gray-lighter; +@pagination-disabled-bg: lighten(@brand-success, 15%);; +@pagination-disabled-border: transparent; -// Pager -// ------------------------- +//== Pager +// +//## +@pager-bg: @pagination-bg; +@pager-border: @pagination-border; @pager-border-radius: 15px; + +@pager-hover-bg: @pagination-hover-bg; + +@pager-active-bg: @pagination-active-bg; +@pager-active-color: @pagination-active-color; + @pager-disabled-color: #fff; -// Jumbotron -// ------------------------- +//== Jumbotron +// +//## @jumbotron-padding: 30px; @jumbotron-color: inherit; @jumbotron-bg: @gray-lighter; @jumbotron-heading-color: inherit; -@jumbotron-font-size: ceil(@font-size-base * 1.5); +@jumbotron-font-size: ceil((@font-size-base * 1.5)); -// Form states and alerts -// ------------------------- +//== Form states and alerts +// +//## Define colors for form feedback states and, by default, alerts. @state-success-text: #fff; @state-success-bg: @brand-success; @@ -397,65 +463,113 @@ @state-danger-border: @brand-danger; -// Tooltips -// ------------------------- +//== Tooltips +// +//## + +//** Tooltip max width @tooltip-max-width: 200px; +//** Tooltip text color @tooltip-color: #fff; +//** Tooltip background color @tooltip-bg: rgba(0,0,0,.9); +@tooltip-opacity: .9; +//** Tooltip arrow width @tooltip-arrow-width: 5px; +//** Tooltip arrow color @tooltip-arrow-color: @tooltip-bg; -// Popovers -// ------------------------- +//== Popovers +// +//## + +//** Popover body background color @popover-bg: #fff; +//** Popover maximum width @popover-max-width: 276px; +//** Popover border color @popover-border-color: rgba(0,0,0,.2); +//** Popover fallback border color @popover-fallback-border-color: #ccc; +//** Popover title background color @popover-title-bg: darken(@popover-bg, 3%); +//** Popover arrow width @popover-arrow-width: 10px; +//** Popover arrow color @popover-arrow-color: #fff; +//** Popover outer arrow width @popover-arrow-outer-width: (@popover-arrow-width + 1); +//** Popover outer arrow color @popover-arrow-outer-color: rgba(0,0,0,.25); +//** Popover outer arrow fallback color @popover-arrow-outer-fallback-color: #999; -// Labels -// ------------------------- +//== Labels +// +//## +//** Default label background color @label-default-bg: @btn-default-bg; +//** Primary label background color @label-primary-bg: @brand-primary; +//** Success label background color @label-success-bg: @brand-success; +//** Info label background color @label-info-bg: @brand-info; +//** Warning label background color @label-warning-bg: @brand-warning; +//** Danger label background color @label-danger-bg: @brand-danger; +//** Default label text color @label-color: #fff; +//** Default text color of a linked label @label-link-hover-color: #fff; -// Modals -// ------------------------- +//== Modals +// +//## + +//** Padding applied to the modal body @modal-inner-padding: 20px; +//** Padding applied to the modal title @modal-title-padding: 15px; +//** Modal title line-height @modal-title-line-height: @line-height-base; +//** Background color of modal content area @modal-content-bg: #fff; +//** Modal content border color @modal-content-border-color: rgba(0,0,0,.2); +//** Modal content border color **for IE8** @modal-content-fallback-border-color: #999; +//** Modal backdrop background color @modal-backdrop-bg: #000; +//** Modal backdrop opacity +@modal-backdrop-opacity: .5; +//** Modal header border color @modal-header-border-color: #e5e5e5; +//** Modal footer border color @modal-footer-border-color: @modal-header-border-color; +@modal-lg: 900px; +@modal-md: 600px; +@modal-sm: 300px; + + +//== Alerts +// +//## Define alert colors, border radius, and padding. -// Alerts -// ------------------------- @alert-padding: 15px; @alert-border-radius: @border-radius-base; @alert-link-font-weight: bold; @@ -477,38 +591,62 @@ @alert-danger-border: @state-danger-border; -// Progress bars -// ------------------------- +//== Progress bars +// +//## + +//** Background color of the whole progress component @progress-bg: @gray-lighter; +//** Progress bar text color @progress-bar-color: #fff; +//** Default progress bar color @progress-bar-bg: @brand-primary; +//** Success progress bar color @progress-bar-success-bg: @brand-success; +//** Warning progress bar color @progress-bar-warning-bg: @brand-warning; +//** Danger progress bar color @progress-bar-danger-bg: @brand-danger; +//** Info progress bar color @progress-bar-info-bg: @brand-info; -// List group -// ------------------------- -@list-group-bg: #fff; -@list-group-border: @gray-lighter; -@list-group-border-radius: @border-radius-base; - -@list-group-hover-bg: @gray-lighter; -@list-group-active-color: @component-active-color; -@list-group-active-bg: @component-active-bg; -@list-group-active-border: @list-group-active-bg; - -@list-group-link-color: #555; -@list-group-link-heading-color: #333; - +//== List group +// +//## + +//** Background color on `.list-group-item` +@list-group-bg: #fff; +//** `.list-group-item` border color +@list-group-border: @gray-lighter; +//** List group border radius +@list-group-border-radius: @border-radius-base; + +//** Background color of single list elements on hover +@list-group-hover-bg: @gray-lighter; +//** Text color of active list elements +@list-group-active-color: @component-active-color; +//** Background color of active list elements +@list-group-active-bg: @component-active-bg; +//** Border color of active list elements +@list-group-active-border: @list-group-active-bg; +@list-group-active-text-color: lighten(@list-group-active-bg, 40%); + +@list-group-link-color: #555; +@list-group-link-heading-color: #333; + + +//== Panels +// +//## -// Panels -// ------------------------- @panel-bg: #fff; -@panel-inner-border: @gray-lighter; +@panel-body-padding: 15px; @panel-border-radius: @border-radius-base; + +//** Border color for elements within panels +@panel-inner-border: @gray-lighter; @panel-footer-bg: @gray-lighter; @panel-default-text: @text-color; @@ -523,6 +661,10 @@ @panel-success-border: @state-success-border; @panel-success-heading-bg: @state-success-bg; +@panel-info-text: @state-info-text; +@panel-info-border: @state-info-border; +@panel-info-heading-bg: @state-info-bg; + @panel-warning-text: @state-warning-text; @panel-warning-border: @state-warning-border; @panel-warning-heading-bg: @state-warning-bg; @@ -531,34 +673,46 @@ @panel-danger-border: @state-danger-border; @panel-danger-heading-bg: @state-danger-bg; -@panel-info-text: @state-info-text; -@panel-info-border: @state-info-border; -@panel-info-heading-bg: @state-info-bg; +//== Thumbnails +// +//## -// Thumbnails -// ------------------------- +//** Padding around the thumbnail image @thumbnail-padding: 4px; +//** Thumbnail background color @thumbnail-bg: @body-bg; +//** Thumbnail border color @thumbnail-border: @gray-lighter; +//** Thumbnail border radius @thumbnail-border-radius: @border-radius-base; +//** Custom text color for thumbnail captions @thumbnail-caption-color: @text-color; +//** Padding around the thumbnail caption @thumbnail-caption-padding: 9px; -// Wells -// ------------------------- +//== Wells +// +//## + @well-bg: @gray-lighter; +@well-border: transparent; -// Badges -// ------------------------- +//== Badges +// +//## + @badge-color: #fff; +//** Linked badge text color on hover @badge-link-hover-color: #fff; @badge-bg: @gray; +//** Badge text color in active nav link @badge-active-color: @link-color; +//** Badge background color in active nav link @badge-active-bg: #fff; @badge-font-weight: bold; @@ -566,16 +720,25 @@ @badge-border-radius: 10px; -// Breadcrumbs -// ------------------------- -@breadcrumb-bg: @gray-lighter; -@breadcrumb-color: #ccc; -@breadcrumb-active-color: @gray; -@breadcrumb-separator: "/"; +//== Breadcrumbs +// +//## + +@breadcrumb-padding-vertical: 8px; +@breadcrumb-padding-horizontal: 15px; +//** Breadcrumb background color +@breadcrumb-bg: @gray-lighter; +//** Breadcrumb text color +@breadcrumb-color: #ccc; +//** Text color of current page in the breadcrumb +@breadcrumb-active-color: @gray; +//** Textual separator for between breadcrumb elements +@breadcrumb-separator: "/"; -// Carousel -// ------------------------ +//== Carousel +// +//## @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); @@ -590,53 +753,75 @@ @carousel-caption-color: #fff; -// Close -// ------------------------ +//== Close +// +//## + @close-font-weight: bold; @close-color: #000; @close-text-shadow: 0 1px 0 #fff; -// Code -// ------------------------ +//== Code +// +//## + @code-color: #c7254e; @code-bg: #f9f2f4; +@kbd-color: #fff; +@kbd-bg: #333; + @pre-bg: @gray-lighter; @pre-color: @gray-dark; @pre-border-color: #ccc; @pre-scrollable-max-height: 340px; -// Type -// ------------------------ + +//== Type +// +//## + +//** Text muted color @text-muted: @gray-light; +//** Abbreviations and acronyms border color @abbr-border-color: @gray-light; +//** Headings small color @headings-small-color: @gray-light; +//** Blockquote small color @blockquote-small-color: @gray-light; +//** Blockquote border color @blockquote-border-color: @gray-lighter; +//** Page header border color @page-header-border-color: @gray-lighter; -// Miscellaneous -// ------------------------- -// Hr border color +//== Miscellaneous +// +//## + +//** Horizontal line color. @hr-border: @gray-lighter; -// Horizontal forms & lists +//** Horizontal offset for forms and lists. @component-offset-horizontal: 180px; -// Container sizes -// -------------------------------------------------- +//== Container sizes +// +//## Define the maximum width of `.container` for different screen sizes. // Small screen / tablet @container-tablet: ((720px + @grid-gutter-width)); +//** For `@screen-sm-min` and up. @container-sm: @container-tablet; // Medium screen / desktop @container-desktop: ((940px + @grid-gutter-width)); +//** For `@screen-md-min` and up. @container-md: @container-desktop; // Large screen / wide desktop @container-large-desktop: ((1140px + @grid-gutter-width)); +//** For `@screen-lg-min` and up. @container-lg: @container-large-desktop; |