mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-26 21:17:20 +00:00
a2b9988eb9
Grid classes have been changed to account for a fourth set of classes, meaning we now have XS, S, M, and L options. Specifically, we made the following changes: * Renames `.col-` to `.col-xs-` * Adds `.col-md-` for devices 992px wide and up * Remaps `.col-lg-` for devices 1200px wide and up Alongside that, we've updated our media queries to better handle advanced grid layouts: * All column classes now kick in when they hit a `min-width`, undoing the #9128 fix in https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb c690f3a65 * All column offsets, pushes, and pulls are scoped to an appropriate range, meaning a `min-width` and `max-width` (thanks for the idea, @eratzlaff) We've also modified the widths of our grid containers for the small device grid (now a max 720px instead of 728px) and large device grid (now a max 1140px instead of 1170px) to avoid horizontal scrollbar problems in Firefox (likely due to box-sizing, which is why we didn't see it in 2.x). Similarly, we've updated the responsive ultility classes to match the new four media query approach of the grid system. That means we've: * Added new `.visible-xs` and `.hidden-xs` classes * Reassigns visible and hidden classes for small, medium, and large to matching grid system media queries * Updates docs examples to match grid system and account for fourth utility range ----- Fixes the following: * #9135: fourth grid tier * #9302: undoes previous range change for small grid system, so no need to update any docs here * #8755: consistent grid and responsive utilities schemas) * #9195, #9216, and #9227: no more horizontal scrollbars
606 lines
18 KiB
Plaintext
606 lines
18 KiB
Plaintext
//
|
|
// Variables
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Global values
|
|
// --------------------------------------------------
|
|
|
|
// Grays
|
|
// -------------------------
|
|
|
|
@gray-darker: lighten(#000, 13.5%); // #222
|
|
@gray-dark: lighten(#000, 20%); // #333
|
|
@gray: lighten(#000, 33.5%); // #555
|
|
@gray-light: lighten(#000, 60%); // #999
|
|
@gray-lighter: lighten(#000, 93.5%); // #eee
|
|
|
|
// Brand colors
|
|
// -------------------------
|
|
|
|
@brand-primary: #428bca;
|
|
@brand-success: #5cb85c;
|
|
@brand-warning: #f0ad4e;
|
|
@brand-danger: #d9534f;
|
|
@brand-info: #5bc0de;
|
|
|
|
// Scaffolding
|
|
// -------------------------
|
|
|
|
@body-bg: #fff;
|
|
@text-color: @gray-dark;
|
|
|
|
// Links
|
|
// -------------------------
|
|
|
|
@link-color: @brand-primary;
|
|
@link-hover-color: darken(@link-color, 15%);
|
|
|
|
// Typography
|
|
// -------------------------
|
|
|
|
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
|
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
|
|
@font-family-base: @font-family-sans-serif;
|
|
|
|
@font-size-base: 14px;
|
|
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
|
|
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
|
|
|
|
@line-height-base: 1.428571429; // 20/14
|
|
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
|
|
|
|
@headings-font-family: @font-family-base;
|
|
@headings-font-weight: 500;
|
|
@headings-line-height: 1.1;
|
|
|
|
|
|
// Components
|
|
// -------------------------
|
|
// Based on 14px font-size and 1.428 line-height (~20px to start)
|
|
|
|
@padding-base-vertical: 6px;
|
|
@padding-base-horizontal: 12px;
|
|
|
|
@padding-large-vertical: 10px;
|
|
@padding-large-horizontal: 16px;
|
|
|
|
@padding-small-vertical: 5px;
|
|
@padding-small-horizontal: 10px;
|
|
|
|
@line-height-large: 1.33;
|
|
@line-height-small: 1.5;
|
|
|
|
@border-radius-base: 4px;
|
|
@border-radius-large: 6px;
|
|
@border-radius-small: 3px;
|
|
|
|
@component-active-bg: @brand-primary;
|
|
|
|
@caret-width-base: 4px;
|
|
@caret-width-large: 5px;
|
|
|
|
// Tables
|
|
// -------------------------
|
|
|
|
@table-cell-padding: 8px;
|
|
@table-condensed-cell-padding: 5px;
|
|
|
|
@table-bg: transparent; // overall background-color
|
|
@table-bg-accent: #f9f9f9; // for striping
|
|
@table-bg-hover: #f5f5f5;
|
|
@table-bg-active: @table-bg-hover;
|
|
|
|
@table-border-color: #ddd; // table and cell border
|
|
|
|
|
|
// Buttons
|
|
// -------------------------
|
|
|
|
@btn-font-weight: bold;
|
|
|
|
@btn-default-color: #333;
|
|
@btn-default-bg: #fff;
|
|
@btn-default-border: #ccc;
|
|
|
|
@btn-primary-color: #fff;
|
|
@btn-primary-bg: @brand-primary;
|
|
@btn-primary-border: darken(@btn-primary-bg, 5%);
|
|
|
|
@btn-success-color: #fff;
|
|
@btn-success-bg: @brand-success;
|
|
@btn-success-border: darken(@btn-success-bg, 5%);
|
|
|
|
@btn-warning-color: #fff;
|
|
@btn-warning-bg: @brand-warning;
|
|
@btn-warning-border: darken(@btn-warning-bg, 5%);
|
|
|
|
@btn-danger-color: #fff;
|
|
@btn-danger-bg: @brand-danger;
|
|
@btn-danger-border: darken(@btn-danger-bg, 5%);
|
|
|
|
@btn-info-color: #fff;
|
|
@btn-info-bg: @brand-info;
|
|
@btn-info-border: darken(@btn-info-bg, 5%);
|
|
|
|
@btn-link-disabled-color: @gray-light;
|
|
|
|
|
|
// Forms
|
|
// -------------------------
|
|
|
|
@input-bg: #fff;
|
|
@input-bg-disabled: @gray-lighter;
|
|
|
|
@input-color: @gray;
|
|
@input-border: #ccc;
|
|
@input-border-radius: @border-radius-base;
|
|
@input-border-focus: #66afe9;
|
|
|
|
@input-color-placeholder: @gray-light;
|
|
|
|
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
|
@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
|
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
|
|
|
@legend-color: @gray-dark;
|
|
@legend-border-color: #e5e5e5;
|
|
|
|
@input-group-addon-bg: @gray-lighter;
|
|
@input-group-addon-border-color: @input-border;
|
|
|
|
|
|
// Dropdowns
|
|
// -------------------------
|
|
|
|
@dropdown-bg: #fff;
|
|
@dropdown-border: rgba(0,0,0,.15);
|
|
@dropdown-fallback-border: #ccc;
|
|
@dropdown-divider-bg: #e5e5e5;
|
|
|
|
@dropdown-link-active-color: #fff;
|
|
@dropdown-link-active-bg: @component-active-bg;
|
|
|
|
@dropdown-link-color: @gray-dark;
|
|
@dropdown-link-hover-color: #fff;
|
|
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
|
|
|
@dropdown-link-disabled-color: @gray-light;
|
|
|
|
@dropdown-header-color: @gray-light;
|
|
|
|
@dropdown-caret-color: #000;
|
|
|
|
|
|
// COMPONENT VARIABLES
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Z-index master list
|
|
// -------------------------
|
|
// Used for a bird's eye view of components dependent on the z-axis
|
|
// Try to avoid customizing these :)
|
|
|
|
@zindex-dropdown: 1000;
|
|
@zindex-popover: 1010;
|
|
@zindex-tooltip: 1030;
|
|
@zindex-navbar-fixed: 1030;
|
|
@zindex-modal-background: 1040;
|
|
@zindex-modal: 1050;
|
|
|
|
// Media queries breakpoints
|
|
// --------------------------------------------------
|
|
|
|
// Extra small screen / phone
|
|
@screen-xsmall: 480px;
|
|
@screen-phone: @screen-xsmall;
|
|
|
|
// Small screen / tablet
|
|
@screen-small: 768px;
|
|
@screen-tablet: @screen-small;
|
|
|
|
// Medium screen / desktop
|
|
@screen-medium: 992px;
|
|
@screen-desktop: @screen-medium;
|
|
|
|
// Large screen / wide desktop
|
|
@screen-large: 1200px;
|
|
@screen-large-desktop: @screen-large;
|
|
|
|
// So media queries don't overlap when required, provide a maximum
|
|
@screen-phone-max: (@screen-small - 1);
|
|
@screen-small-max: (@screen-medium - 1);
|
|
@screen-tablet-max: (@screen-desktop - 1);
|
|
@screen-desktop-max: (@screen-large-desktop - 1);
|
|
|
|
|
|
// Grid system
|
|
// --------------------------------------------------
|
|
|
|
// Number of columns in the grid system
|
|
@grid-columns: 12;
|
|
// Padding, to be divided by two and applied to the left and right of all columns
|
|
@grid-gutter-width: 30px;
|
|
// Point at which the navbar stops collapsing
|
|
@grid-float-breakpoint: @screen-tablet;
|
|
|
|
|
|
// Navbar
|
|
// -------------------------
|
|
|
|
// Basics of a navbar
|
|
@navbar-height: 50px;
|
|
@navbar-color: #777;
|
|
@navbar-bg: #eee;
|
|
@navbar-margin-bottom: @line-height-computed;
|
|
@navbar-border-radius: @border-radius-base;
|
|
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
|
|
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
|
|
|
// Navbar links
|
|
@navbar-link-color: #777;
|
|
@navbar-link-hover-color: #333;
|
|
@navbar-link-hover-bg: transparent;
|
|
@navbar-link-active-color: #555;
|
|
@navbar-link-active-bg: darken(@navbar-bg, 10%);
|
|
@navbar-link-disabled-color: #ccc;
|
|
@navbar-link-disabled-bg: transparent;
|
|
|
|
// Navbar brand label
|
|
@navbar-brand-color: @navbar-link-color;
|
|
@navbar-brand-hover-color: darken(@navbar-link-color, 10%);
|
|
@navbar-brand-hover-bg: transparent;
|
|
|
|
// Navbar toggle
|
|
@navbar-toggle-hover-bg: #ddd;
|
|
@navbar-toggle-icon-bar-bg: #ccc;
|
|
@navbar-toggle-border-color: #ddd;
|
|
|
|
|
|
// Inverted navbar
|
|
//
|
|
// Reset inverted navbar basics
|
|
@navbar-inverse-color: @gray-light;
|
|
@navbar-inverse-bg: #222;
|
|
|
|
// Inverted navbar links
|
|
@navbar-inverse-link-color: @gray-light;
|
|
@navbar-inverse-link-hover-color: #fff;
|
|
@navbar-inverse-link-hover-bg: transparent;
|
|
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
|
|
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
|
|
@navbar-inverse-link-disabled-color: #444;
|
|
@navbar-inverse-link-disabled-bg: transparent;
|
|
|
|
// Inverted navbar brand label
|
|
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
|
@navbar-inverse-brand-hover-color: #fff;
|
|
@navbar-inverse-brand-hover-bg: transparent;
|
|
|
|
// Inverted navbar search
|
|
// Normal navbar needs no special styles or vars
|
|
@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
|
|
@navbar-inverse-search-bg-focus: #fff;
|
|
@navbar-inverse-search-border: @navbar-inverse-bg;
|
|
@navbar-inverse-search-placeholder-color: #ccc;
|
|
|
|
// Inverted navbar toggle
|
|
@navbar-inverse-toggle-hover-bg: #333;
|
|
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
|
@navbar-inverse-toggle-border-color: #333;
|
|
|
|
|
|
// Navs
|
|
// -------------------------
|
|
|
|
@nav-link-hover-bg: @gray-lighter;
|
|
|
|
@nav-disabled-link-color: @gray-light;
|
|
@nav-disabled-link-hover-color: @gray-light;
|
|
|
|
@nav-open-link-hover-color: #fff;
|
|
@nav-open-caret-border-color: #fff;
|
|
|
|
// Tabs
|
|
@nav-tabs-border-color: #ddd;
|
|
|
|
@nav-tabs-link-hover-border-color: @gray-lighter;
|
|
|
|
@nav-tabs-active-link-hover-bg: @body-bg;
|
|
@nav-tabs-active-link-hover-color: @gray;
|
|
@nav-tabs-active-link-hover-border-color: #ddd;
|
|
|
|
@nav-tabs-justified-link-border-color: #ddd;
|
|
@nav-tabs-justified-active-link-border-color: @body-bg;
|
|
|
|
// Pills
|
|
@nav-pills-active-link-hover-bg: @component-active-bg;
|
|
@nav-pills-active-link-hover-color: #fff;
|
|
|
|
|
|
// Pagination
|
|
// -------------------------
|
|
|
|
@pagination-bg: #fff;
|
|
@pagination-border: #ddd;
|
|
@pagination-active-bg: #f5f5f5;
|
|
@pagination-active-color: @gray-light;
|
|
@pagination-disabled-color: @gray-light;
|
|
|
|
// Pager
|
|
// -------------------------
|
|
|
|
@pager-border-radius: 15px;
|
|
@pager-disabled-color: @gray-light;
|
|
|
|
|
|
// Jumbotron
|
|
// -------------------------
|
|
|
|
@jumbotron-bg: @gray-lighter;
|
|
@jumbotron-heading-color: inherit;
|
|
@jumbotron-lead-color: inherit;
|
|
|
|
|
|
// Form states and alerts
|
|
// -------------------------
|
|
|
|
@state-warning-text: #c09853;
|
|
@state-warning-bg: #fcf8e3;
|
|
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
|
|
|
@state-danger-text: #b94a48;
|
|
@state-danger-bg: #f2dede;
|
|
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
|
|
|
@state-success-text: #468847;
|
|
@state-success-bg: #dff0d8;
|
|
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
|
|
|
@state-info-text: #3a87ad;
|
|
@state-info-bg: #d9edf7;
|
|
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
|
|
|
|
|
// Tooltips
|
|
// -------------------------
|
|
@tooltip-max-width: 200px;
|
|
@tooltip-color: #fff;
|
|
@tooltip-bg: #000;
|
|
|
|
@tooltip-arrow-width: 5px;
|
|
@tooltip-arrow-color: @tooltip-bg;
|
|
|
|
|
|
// Popovers
|
|
// -------------------------
|
|
@popover-bg: #fff;
|
|
@popover-max-width: 276px;
|
|
@popover-border-color: rgba(0,0,0,.2);
|
|
@popover-fallback-border-color: #ccc;
|
|
|
|
@popover-title-bg: darken(@popover-bg, 3%);
|
|
|
|
@popover-arrow-width: 10px;
|
|
@popover-arrow-color: #fff;
|
|
|
|
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
|
@popover-arrow-outer-color: rgba(0,0,0,.25);
|
|
@popover-arrow-outer-fallback-color: #999;
|
|
|
|
|
|
// Labels
|
|
// -------------------------
|
|
|
|
@label-default-bg: @gray-light;
|
|
@label-success-bg: @brand-success;
|
|
@label-info-bg: @brand-info;
|
|
@label-warning-bg: @brand-warning;
|
|
@label-danger-bg: @brand-danger;
|
|
|
|
@label-color: #fff;
|
|
@label-link-hover-color: #fff;
|
|
|
|
|
|
// Modals
|
|
// -------------------------
|
|
@modal-inner-padding: 20px;
|
|
|
|
@modal-title-padding: 15px;
|
|
@modal-title-line-height: @line-height-base;
|
|
|
|
@modal-content-bg: #fff;
|
|
@modal-content-border-color: rgba(0,0,0,.2);
|
|
@modal-content-fallback-border-color: #999;
|
|
|
|
@modal-backdrop-bg: #000;
|
|
@modal-header-border-color: #e5e5e5;
|
|
@modal-footer-border-color: @modal-header-border-color;
|
|
|
|
|
|
// Alerts
|
|
// -------------------------
|
|
@alert-padding: 15px;
|
|
@alert-border-radius: @border-radius-base;
|
|
@alert-link-font-weight: bold;
|
|
|
|
@alert-bg: @state-warning-bg;
|
|
@alert-text: @state-warning-text;
|
|
@alert-border: @state-warning-border;
|
|
|
|
@alert-success-bg: @state-success-bg;
|
|
@alert-success-text: @state-success-text;
|
|
@alert-success-border: @state-success-border;
|
|
|
|
@alert-danger-bg: @state-danger-bg;
|
|
@alert-danger-text: @state-danger-text;
|
|
@alert-danger-border: @state-danger-border;
|
|
|
|
@alert-info-bg: @state-info-bg;
|
|
@alert-info-text: @state-info-text;
|
|
@alert-info-border: @state-info-border;
|
|
|
|
|
|
// Progress bars
|
|
// -------------------------
|
|
@progress-bg: #f5f5f5;
|
|
@progress-bar-color: #fff;
|
|
|
|
@progress-bar-bg: @brand-primary;
|
|
@progress-bar-success-bg: @brand-success;
|
|
@progress-bar-warning-bg: @brand-warning;
|
|
@progress-bar-danger-bg: @brand-danger;
|
|
@progress-bar-info-bg: @brand-info;
|
|
|
|
|
|
// List group
|
|
// -------------------------
|
|
@list-group-bg: #fff;
|
|
@list-group-border: #ddd;
|
|
@list-group-border-radius: @border-radius-base;
|
|
|
|
@list-group-hover-bg: #f5f5f5;
|
|
@list-group-active-color: #fff;
|
|
@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;
|
|
|
|
|
|
// Panels
|
|
// -------------------------
|
|
@panel-bg: #fff;
|
|
@panel-border: #ddd;
|
|
@panel-border-radius: @border-radius-base;
|
|
@panel-heading-bg: #f5f5f5;
|
|
@panel-footer-bg: #f5f5f5;
|
|
|
|
@panel-primary-text: #fff;
|
|
@panel-primary-border: @brand-primary;
|
|
@panel-primary-heading-bg: @brand-primary;
|
|
|
|
@panel-success-text: @state-success-text;
|
|
@panel-success-border: @state-success-border;
|
|
@panel-success-heading-bg: @state-success-bg;
|
|
|
|
@panel-warning-text: @state-warning-text;
|
|
@panel-warning-border: @state-warning-border;
|
|
@panel-warning-heading-bg: @state-warning-bg;
|
|
|
|
@panel-danger-text: @state-danger-text;
|
|
@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
|
|
// -------------------------
|
|
@thumbnail-padding: 4px;
|
|
@thumbnail-bg: @body-bg;
|
|
@thumbnail-border: #ddd;
|
|
@thumbnail-border-radius: @border-radius-base;
|
|
|
|
@thumbnail-caption-color: @text-color;
|
|
@thumbnail-caption-padding: 9px;
|
|
|
|
|
|
// Wells
|
|
// -------------------------
|
|
@well-bg: #f5f5f5;
|
|
|
|
|
|
// Accordion
|
|
// -------------------------
|
|
@accordion-border-color: #e5e5e5;
|
|
|
|
|
|
// Badges
|
|
// -------------------------
|
|
@badge-color: #fff;
|
|
@badge-link-hover-color: #fff;
|
|
@badge-bg: @gray-light;
|
|
|
|
@badge-active-color: @link-color;
|
|
@badge-active-bg: #fff;
|
|
|
|
@badge-font-weight: bold;
|
|
@badge-line-height: 1;
|
|
@badge-border-radius: 10px;
|
|
|
|
|
|
// Breadcrumbs
|
|
// -------------------------
|
|
@breadcrumb-bg: #f5f5f5;
|
|
@breadcrumb-color: #ccc;
|
|
@breadcrumb-active-color: @gray-light;
|
|
|
|
|
|
// Carousel
|
|
// ------------------------
|
|
|
|
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
|
|
|
@carousel-control-color: #fff;
|
|
@carousel-control-width: 15%;
|
|
@carousel-control-opacity: .5;
|
|
@carousel-control-font-size: 20px;
|
|
|
|
@carousel-indicator-active-bg: #fff;
|
|
@carousel-indicator-border-color: #fff;
|
|
|
|
@carousel-caption-color: #fff;
|
|
|
|
|
|
// Close
|
|
// ------------------------
|
|
@close-color: #000;
|
|
@close-font-weight: bold;
|
|
@close-text-shadow: 0 1px 0 #fff;
|
|
|
|
|
|
// Code
|
|
// ------------------------
|
|
@code-color: #c7254e;
|
|
@code-bg: #f9f2f4;
|
|
|
|
@pre-bg: #f5f5f5;
|
|
@pre-color: @gray-dark;
|
|
@pre-border-color: #ccc;
|
|
@pre-scrollable-max-height: 340px;
|
|
|
|
// Type
|
|
// ------------------------
|
|
@text-muted: @gray-light;
|
|
@abbr-border-color: @gray-light;
|
|
@headings-small-color: @gray-light;
|
|
@blockquote-small-color: @gray-light;
|
|
@blockquote-border-color: @gray-lighter;
|
|
@page-header-border-color: @gray-lighter;
|
|
|
|
// Miscellaneous
|
|
// -------------------------
|
|
|
|
// Hr border color
|
|
@hr-border: @gray-lighter;
|
|
|
|
// Horizontal forms & lists
|
|
@component-offset-horizontal: 180px;
|
|
|
|
|
|
// Container sizes
|
|
// --------------------------------------------------
|
|
|
|
// Small screen / tablet
|
|
@container-tablet: 720px;
|
|
|
|
// Medium screen / desktop
|
|
@container-desktop: 940px;
|
|
|
|
// Large screen / wide desktop
|
|
@container-large-desktop: 1140px;
|