From 1b8ba0d15925a02e1522590423e38a7c888ea062 Mon Sep 17 00:00:00 2001 From: syed Date: Fri, 26 Jul 2013 17:04:15 +0500 Subject: [PATCH] move things around :) Moved pager, pagination, popovers, tooltip, progress bars & type properties to variables.less --- _includes/nav-customize.html | 2 + customize.html | 2563 ++++++++++++++++++---------------- less/pager.less | 4 +- less/pagination.less | 4 +- less/popovers.less | 16 +- less/progress-bars.less | 4 +- less/tooltip.less | 2 +- less/type.less | 14 +- less/variables.less | 29 +- 9 files changed, 1379 insertions(+), 1259 deletions(-) diff --git a/_includes/nav-customize.html b/_includes/nav-customize.html index 26dbd3b039..661a2607e7 100644 --- a/_includes/nav-customize.html +++ b/_includes/nav-customize.html @@ -27,9 +27,11 @@
  • Thumbnails
  • Progress bars
  • Pagination
    • +
  • Pager
  • Labels
  • Tooltips and popovers
  • Close button
    • +
  • Type
  • Other
    • diff --git a/customize.html b/customize.html index f38152f164..4f8ec294bb 100644 --- a/customize.html +++ b/customize.html @@ -5,1334 +5,1427 @@ slug: customize lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version. --- - -
    + +
    -
    - -

    LESS files

    -
    -

    Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the CSS and Components pages in the docs

    +
    + +

    LESS files

    +
    +

    Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the CSS and Components pages in the docs

    -

    Basics

    -
    -
    -

    Layout

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    +

    Basics

    +
    +
    +

    Layout

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +

    Global CSS

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +

    Utility classes

    +
    + +
    +
    + +
    +
    + +
    +
    -
    -

    Global CSS

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -

    Utility classes

    -
    - -
    -
    - -
    -
    - -
    -
    -
    -

    Components

    -
    -
    -

    Navigation

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    +

    Components

    +
    +
    +

    Navigation

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +

    Content blocks

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +

    Behavioral (requires JS)

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    -

    Content blocks

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -

    Behavioral (requires JS)

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -

    Media

    -
    - -
    -
    - -
    -
    - -
    +
    +
    +

    Media

    +
    + +
    +
    + +
    +
    + +
    +
    +
    +

    Miscellaneous

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    -

    Miscellaneous

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -

    jQuery plugins

    -
    -

    Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the JavaScript page in the docs.

    -
    -
    -

    Linked to components

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    +
    + +

    jQuery plugins

    -
    -

    Magic

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    +

    Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the JavaScript page in the docs.

    +
    +
    +

    Linked to components

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +

    Magic

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    -
    -

    Produces two files

    -

    All checked plugins will be compiled into a readable bootstrap.js and a minified bootstrap.min.js. We recommend you use the minified version in production.

    -
    +
    +

    Produces two files

    +

    All checked plugins will be compiled into a readable bootstrap.js and a minified bootstrap.min.js. We recommend you use the minified version in production.

    +
    -
    -

    jQuery required

    -

    All plugins require the latest version of jQuery to be included.

    -
    +
    +

    jQuery required

    +

    All plugins require the latest version of jQuery to be included.

    +
    -
    - -

    LESS variables

    -
    -

    Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.

    +
    + +

    LESS variables

    +
    +

    Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.

    -

    Basics

    +

    Basics

    -

    Body background

    -
    -
    - - -

    Background color applied to <body>.

    +

    Body background

    +
    +
    + + +

    Background color applied to <body>.

    +
    -
    -

    Typography

    -
    -
    - - -

    Default sans-serif fonts.

    - - -

    Default serif fonts.

    - - -

    Default monospace fonts for <code> and <pre>.

    +

    Typography

    +
    +
    + + +

    Default sans-serif fonts.

    + + +

    Default serif fonts.

    + + +

    Default monospace fonts for <code> and <pre>.

    +
    +
    + + +

    Used to globally set font-family in Bootstrap.

    + + +

    Used to calculate font-size throughout Bootstrap.

    + + +

    Used to calculate line-height throughout Bootstrap.

    +
    -
    - - -

    Used to globally set font-family in Bootstrap.

    - - -

    Used to calculate font-size throughout Bootstrap.

    - - -

    Used to calculate line-height throughout Bootstrap.

    -
    -
    -

    Code blocks

    -
    -
    - - - - +

    Code blocks

    +
    +
    + + + + +
    +
    + + + + +
    -
    - - - - -
    -
    -

    Headings

    -
    -
    - - -

    Choose a separate font-family for headings.

    - - -

    Choose a separate font-weight for headings.

    +

    Headings

    +
    +
    + + +

    Choose a separate font-family for headings.

    + + +

    Choose a separate font-weight for headings.

    +
    +
    + + +

    Choose a separate line-height for headings.

    +
    -
    - - -

    Choose a separate line-height for headings.

    -
    -
    -

    Colors

    -
    -
    -

    Define custom colors used in several contexts.

    - - -

    Used for primary buttons, panels and more.

    - - -

    Used to indicate success.

    - - -

    Used to indicate a warning.

    - - -

    Used to indicate danger.

    - - -

    Used to indicate informational content.

    +

    Colors

    +
    +
    +

    Define custom colors used in several contexts.

    + + +

    Used for primary buttons, panels and more.

    + + +

    Used to indicate success.

    + + +

    Used to indicate a warning.

    + + +

    Used to indicate danger.

    + + +

    Used to indicate informational content.

    +
    +
    +

    Define your preferred colors for standard text and links.

    + + +

    Global color set on the body.

    + + +

    Global link color for text.

    + + +

    Automatically darken links on hover via color function.

    +
    -
    -

    Define your preferred colors for standard text and links.

    - - -

    Global color set on the body.

    - - -

    Global link color for text.

    - - -

    Automatically darken links on hover via color function.

    -
    -
    -

    Media queries breakpoints

    -

    Define the breakpoints at which your layout will change, adapting to different screen sizes.

    -
    -
    - - - - +

    Media queries breakpoints

    +

    Define the breakpoints at which your layout will change, adapting to different screen sizes.

    +
    +
    + + + + +
    +
    + + + + +
    -
    - - - - -
    -
    -

    Container sizes

    -

    Define the maximum width of .container for different screen sizes.

    -
    -
    - - -

    For @screen-small and up.

    - - -

    For @screen-medium and up.

    +

    Container sizes

    +

    Define the maximum width of .container for different screen sizes.

    +
    +
    + + +

    For @screen-small and up.

    + + +

    For @screen-medium and up.

    +
    +
    + + +

    For @screen-large and up.

    +
    -
    - - -

    For @screen-large and up.

    -
    -
    -

    Grid system

    -

    Define your custom responsive grid.

    -
    -
    - - -

    Number of columns in the grid.

    - - -

    Padding between columns.

    +

    Grid system

    +

    Define your custom responsive grid.

    +
    +
    + + +

    Number of columns in the grid.

    + + +

    Padding between columns.

    +
    +
    + + +

    Point at which the navbar stops collapsing.

    +
    -
    - - -

    Point at which the navbar stops collapsing.

    -
    -
    -

    Components

    -

    Define common padding and border radius sizes and more.

    -
    -
    -

    Padding

    - - - - - - - - - - - - +

    Components

    +

    Define common padding and border radius sizes and more.

    +
    +
    +

    Padding

    + + + + + + + + + + + + +
    +
    +

    Border radius sizes

    + + + + + + +

    Active background color

    + + +

    Used for active or hovered items in places like navs or dropdowns.

    +
    -
    -

    Border radius sizes

    - - - - - - -

    Active background color

    - - -

    Used for active or hovered items in places like navs or dropdowns.

    -
    -
    -

    Buttons

    -

    For each of Bootstrap's buttons, define text, background and border color.

    -
    -
    -

    Default

    - - - - - - -

    Primary

    - - - - - - -

    Info

    - - - - - - -

    Button hover

    - - +

    Buttons

    +

    For each of Bootstrap's buttons, define text, background and border color.

    +
    +
    +

    Default

    + + + + + + +

    Primary

    + + + + + + +

    Info

    + + + + + + +

    Button hover

    + + +
    +
    +

    Success

    + + + + + + +

    Warning

    + + + + + + +

    Danger

    + + + + + + +
    -
    -

    Success

    - - - - - - -

    Warning

    - - - - - - -

    Danger

    - - - - - - -
    -
    -

    Form states and alerts

    -

    Define colors for form feedback states and, by default, alerts.

    -
    -
    -

    Success

    - - - - - - -

    Warning

    - - - - - - +

    Form states and alerts

    +

    Define colors for form feedback states and, by default, alerts.

    +
    +
    +

    Success

    + + + + + + +

    Warning

    + + + + + + +
    +
    +

    Danger

    + + + + + + +

    Info

    + + + + + + +
    -
    -

    Danger

    - - - - - - -

    Info

    - - - - - - -
    -
    -

    Alerts

    -

    Define alert colors and border radius.

    -

    Border radius

    - - -
    -
    -

    Success

    - - - - - - -

    Warning

    - - - - - - +

    Alerts

    +

    Define alert colors and border radius.

    +

    Border radius

    + + +
    +
    +

    Success

    + + + + + + +

    Warning

    + + + + + + +
    +
    +

    Danger

    + + + + + + +

    Info

    + + + + + + +
    -
    -

    Danger

    - - - - - - -

    Info

    - - - - - - -
    -
    -

    Navbar

    -
    -
    -

    Default navbar

    -

    Basics

    - - - - - - -

    Links

    - - - - - - - - - - - - - - -

    Brand

    - - - - - - -

    Toggle

    - - - - - - +

    Navbar

    +
    +
    +

    Default navbar

    +

    Basics

    + + + + + + +

    Links

    + + + + + + + + + + + + + + +

    Brand

    + + + + + + +

    Toggle

    + + + + + + +
    +
    +

    Inverted navbar

    +

    Basics

    + + + + +

    Links

    + + + + + + + + + + + + + + +

    Brand

    + + + + + + +

    Toggle

    + + + + + + +
    -
    -

    Inverted navbar

    -

    Basics

    - - - - -

    Links

    - - - - - - - - - - - - - - -

    Brand

    - - - - - - -

    Toggle

    - - - - - - -
    -
    -

    Nav

    -
    -
    -

    Default nav

    -

    Basics

    - - - - - - - - - - -

    Tabs

    - - - - - - - - - - - - - - -

    Pills

    - - - - +

    Nav

    +
    +
    +

    Default nav

    +

    Basics

    + + + + + + + + + + +

    Tabs

    + + + + + + + + + + + + + + +

    Pills

    + + + + +
    -
    -

    Tables

    -
    -
    - - -

    Default background color used for all tables.

    - - -

    Background color used for .table-striped.

    +

    Tables

    +
    +
    + + +

    Default background color used for all tables.

    + + +

    Background color used for .table-striped.

    +
    +
    + + +

    Background color used for .table-hover.

    + + +

    Border color for table and cell borders.

    +
    -
    - - -

    Background color used for .table-hover.

    - - -

    Border color for table and cell borders.

    -
    -
    -

    Forms

    -
    -
    -

    Inputs

    - - -

    <input> background color

    - - -

    <input> border color

    - - -

    <input> border radius

    - - -

    <input disabled> background color

    -
    -
    -

    Placeholder

    - - -

    Placeholder text color

    +

    Forms

    +
    +
    +

    Inputs

    + + +

    <input> background color

    + + +

    <input> border color

    + + +

    <input> border radius

    + + +

    <input disabled> background color

    +
    +
    +

    Placeholder

    + + +

    Placeholder text color

    -

    Legend

    - - -

    <legend> border color

    +

    Legend

    + + +

    <legend> border color

    -

    Input groups

    - - -

    Border color for textual input addons

    +

    Input groups

    + + +

    Border color for textual input addons

    +
    -
    -

    Dropdowns

    -
    -
    -

    Dropdown menu

    - - -

    Dropdown menu background color

    - - -

    Dropdown menu border color

    - - -

    Dropdown menu border color for IE8

    - - -

    Indicator arrow for showing an element has a dropdown

    - - -

    Dropdown divider top border color

    +

    Dropdowns

    +
    +
    +

    Dropdown menu

    + + +

    Dropdown menu background color

    + + +

    Dropdown menu border color

    + + +

    Dropdown menu border color for IE8

    + + +

    Indicator arrow for showing an element has a dropdown

    + + +

    Dropdown divider top border color

    +
    +
    +

    Dropdown items

    + + +

    Dropdown text color

    + + +

    Active dropdown menu entry text color

    + + +

    Hovered dropdown menu entry text color

    + + +

    Active dropdown menu entry background color

    + + +

    Hovered dropdown menu entry background color

    +
    -
    -

    Dropdown items

    - - -

    Dropdown text color

    - - -

    Active dropdown menu entry text color

    - - -

    Hovered dropdown menu entry text color

    - - -

    Active dropdown menu entry background color

    - - -

    Hovered dropdown menu entry background color

    -
    -
    -

    Panels and wells

    -

    Default panel styles

    -
    -
    - - -

    Panel body background color

    - - -

    Panel heading background color

    - - -

    Panel footer background color

    +

    Panels and wells

    +

    Default panel styles

    +
    +
    + + +

    Panel body background color

    + + +

    Panel heading background color

    + + +

    Panel footer background color

    +
    +
    + + +

    Panel border color

    + + +

    Panel border radius

    +
    -
    - - -

    Panel border color

    - - -

    Panel border radius

    +

    Contextual panel colors

    +
    +
    +

    Primary

    + + +

    Primary text color

    + + +

    Primary border color

    + + +

    Primary heading background color

    +

    Success

    + + +

    Success text color

    + + +

    Success border color

    + + +

    Success heading background color

    +

    Info

    + + +

    Info text color

    + + +

    Info border color

    + + +

    Info heading background color

    +
    +
    +

    Warning

    + + +

    Warning text color

    + + +

    Warning border color

    + + +

    Warning heading background color

    +

    Danger

    + + +

    Danger text color

    + + +

    Danger border color

    + + +

    Danger heading background color

    +
    -
    -

    Contextual panel colors

    -
    -
    -

    Primary

    - - -

    Primary text color

    - - -

    Primary border color

    - - -

    Primary heading background color

    -

    Success

    - - -

    Success text color

    - - -

    Success border color

    - - -

    Success heading background color

    -

    Info

    - - -

    Info text color

    - - -

    Info border color

    - - -

    Info heading background color

    -
    -
    -

    Warning

    - - -

    Warning text color

    - - -

    Warning border color

    - - -

    Warning heading background color

    -

    Danger

    - - -

    Danger text color

    - - -

    Danger border color

    - - -

    Danger heading background color

    -
    -
    -

    Wells

    - - +

    Wells

    + + -

    Accordion

    - - +

    Accordion

    + + -

    Badges

    -
    -
    - - -

    Badge text color

    - - -

    Badge background color

    - - -

    Linked badge text color on hover

    +

    Badges

    +
    +
    + + +

    Badge text color

    + + +

    Badge background color

    + + +

    Linked badge text color on hover

    +
    +
    + + +

    Badge text color in active nav link

    + + +

    Badge text color in active nav link

    +
    -
    - - -

    Badge text color in active nav link

    - - -

    Badge text color in active nav link

    -
    -
    -

    Breadcrumbs

    -
    -
    - - -

    Breadcrumb text color

    +

    Breadcrumbs

    +
    +
    + + +

    Breadcrumb text color

    +
    +
    + + +

    Breadcrumb background color

    +
    +
    + + +

    Text color of current page in the breadcrumb

    +
    -
    - - -

    Breadcrumb background color

    -
    -
    - - -

    Text color of current page in the breadcrumb

    -
    -
    -

    Jumbotron

    -
    -
    - - -

    Jumbotron background color

    +

    Jumbotron

    +
    +
    + + +

    Jumbotron background color

    +
    +
    + + +

    Jumbotron heading color

    +
    +
    + + +

    Jumbotron lead paragraph color

    +
    -
    - - -

    Jumbotron heading color

    -
    -
    - - -

    Jumbotron lead paragraph color

    -
    -
    -

    Modals

    -
    -
    - - -

    Padding applied to the modal body

    +

    Modals

    +
    +
    + + +

    Padding applied to the modal body

    +
    +
    + + +

    Padding applied to the modal title

    +
    +
    + + +

    Modal title line-height

    +
    +
    + + +

    Background color of modal content area

    +
    +
    + + +

    Modal content border color

    +
    +
    + + +

    Modal content border color for IE8

    +
    +
    + + +

    Modal backdrop background color

    +
    +
    + + +

    Modal header border color

    +
    +
    + + +

    Modal footer border color

    +
    -
    - - -

    Padding applied to the modal title

    -
    -
    - - -

    Modal title line-height

    -
    -
    - - -

    Background color of modal content area

    -
    -
    - - -

    Modal content border color

    -
    -
    - - -

    Modal content border color for IE8

    -
    -
    - - -

    Modal backdrop background color

    -
    -
    - - -

    Modal header border color

    -
    -
    - - -

    Modal footer border color

    -
    -
    - - - - - - - - - - - + + + + + + + + + + + -

    List group

    -

    Background

    -
    -
    - - -

    Default background color

    +

    List group

    +

    Background

    +
    +
    + + +

    Default background color

    +
    +
    + + +

    Background color of single list elements on hover

    +
    +
    + + +

    Background color of active list elements

    +
    -
    - - -

    Background color of single list elements on hover

    +

    Borders

    +
    +
    + + +

    Default border color

    +
    +
    + + +

    List group border radius

    +
    +
    + + +

    Border color of active list elements

    +
    -
    - - -

    Background color of active list elements

    + + +

    Text color of active list elements

    +

    Thumbnails

    +
    +
    + + +

    Custom text color for thumbnail captions

    + + +

    Thumbnail background color

    +
    +
    + + +

    Thumbnail border color

    + + +

    Thumbnail border radius

    +
    -
    -

    Borders

    -
    -
    - - -

    Default border color

    +

    Progress bars

    +
    +
    + + +

    Background color of the whole progress component

    +
    +
    + + +

    Default progress bar color

    +
    +
    + + +

    Success progress bar color

    +
    -
    - - -

    List group border radius

    +
    +
    + + +

    Warning progress bar color

    +
    +
    + + +

    Danger progress bar color

    +
    +
    + + +

    Info progress bar color

    +
    +
    + + +

    Info progress bar text color

    +
    +
    + + +

    Info progress bar text shadow

    +
    -
    - - -

    Border color of active list elements

    +

    Pagination

    +
    +
    + + +

    Background color

    +
    +
    + + +

    Border color

    +
    +
    + + +

    Active background color

    +
    +
    + + +

    Active text color

    +
    +
    + + +

    Disabled text color

    +
    -
    - - -

    Text color of active list elements

    -

    Thumbnails

    -
    -
    - - -

    Custom text color for thumbnail captions

    - - -

    Thumbnail background color

    +

    Pager

    +
    +
    + + +

    Pager border radius

    +
    +
    + + +

    Pager disabled state color

    +
    -
    - - -

    Thumbnail border color

    - - -

    Thumbnail border radius

    -
    -
    -

    Progress bars

    -
    -
    - - -

    Background color of the whole progress component

    -
    -
    - - -

    Default progress bar color

    -
    -
    - - -

    Success progress bar color

    -
    -
    -
    -
    - - -

    Warning progress bar color

    -
    -
    - - -

    Danger progress bar color

    -
    -
    - - -

    Info progress bar color

    -
    -
    -

    Pagination

    -
    -
    - - -

    Background color

    -
    -
    - - -

    Border color

    -
    -
    - - -

    Active background color

    -
    -
    -

    Labels

    -
    -
    - - -

    Success label background color

    - - -

    Info label background color

    +

    Labels

    +
    +
    + + +

    Success label background color

    + + +

    Info label background color

    +
    +
    + + +

    Warning label background color

    + + +

    Danger label background color

    +
    -
    - - -

    Warning label background color

    - - -

    Danger label background color

    +

    Tooltips and popovers

    +

    Tooltip styles

    +
    +
    + + +

    Tooltip text color

    + + +

    Tooltip background color

    +
    +
    + + +

    Tooltip arrow width

    + + +

    Tooltip arrow color

    +
    +
    + + +

    Tooltip max width

    +
    -
    -

    Tooltips and popovers

    -

    Tooltip styles

    -
    -
    - - -

    Tooltip text color

    - - -

    Tooltip background color

    +

    Popover styles

    +
    +
    + + +

    Popover body background color

    + + +

    Popover title background color

    +
    +
    + + +

    Popover arrow width

    + + +

    Popover arrow color

    +
    -
    - - -

    Tooltip arrow width

    - - -

    Tooltip arrow color

    +
    +
    + + +

    Popover outer arrow width

    +
    +
    + + +

    Popover outer arrow color

    +
    +
    + + +

    Popover outer arrow fallback color

    +
    -
    -

    Popover styles

    -
    -
    - - -

    Popover body background color

    - - -

    Popover title background color

    +
    +
    + + +

    Popover maximum width

    +
    +
    + + +

    Popover border color

    +
    +
    + + +

    Popover fallback border color

    +
    -
    - - -

    Popover arrow width

    - - -

    Popover arrow color

    -
    -
    -
    -
    - - -

    Popover outer arrow width

    -
    -
    - - -

    Popover outer arrow color

    -
    -
    -

    Close button

    - - - - +

    Close button

    + + + + -

    Other

    -
    -
    - - -

    Horizontal line color

    +

    Type

    +
    +
    + + +

    Text muted color

    +
    +
    + + +

    Abbreviations and acronyms border color

    +
    +
    + + +

    Headings small color

    +
    +
    + + +

    Blockquote small color

    +
    +
    + + +

    Blockquote border color

    +
    +
    + + +

    Pag header border color

    +
    -
    - - -

    Horizontal offset for forms and lists

    +

    Other

    +
    +
    + + +

    Horizontal line color

    +
    +
    + + +

    Horizontal offset for forms and lists

    +
    -
    -
    -

    Download

    -
    -

    Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.

    -
    - Customize and Download -
    -
    -

    What's included?

    -

    Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

    -
    +
    +

    Download

    +
    +

    Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.

    +
    + Customize and Download +
    +
    +

    What's included?

    +

    Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

    +
    - + diff --git a/less/pager.less b/less/pager.less index a4030c4aba..04585a3a7f 100644 --- a/less/pager.less +++ b/less/pager.less @@ -17,7 +17,7 @@ padding: 5px 14px; background-color: @pagination-bg; border: 1px solid @pagination-border; - border-radius: 15px; + border-radius: @pager-border-radius; } > a:hover, @@ -46,7 +46,7 @@ > a:hover, > a:focus, > span { - color: @gray-light; + color: @pager-disabled-color; background-color: @pagination-bg; cursor: not-allowed; } diff --git a/less/pagination.less b/less/pagination.less index dcab667b40..83b72e47ee 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -42,7 +42,7 @@ } > .active > a, > .active > span { - color: @gray-light; + color: @pagination-active-color; cursor: default; } @@ -51,7 +51,7 @@ > a, > a:hover, > a:focus { - color: @gray-light; + color: @pagination-disabled-color; background-color: @pagination-bg; cursor: not-allowed; } diff --git a/less/popovers.less b/less/popovers.less index 33488e885e..c07350f95a 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -9,16 +9,16 @@ left: 0; z-index: @zindex-popover; display: none; - max-width: 276px; + max-width: @popover-max-width; padding: 1px; text-align: left; // Reset given new insertion method background-color: @popover-bg; -webkit-bg-clip: padding-box; -moz-bg-clip: padding; background-clip: padding-box; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); - border-radius: 6px; + border: 1px solid @popover-fallback-border-color; + border: 1px solid @popover-border-color; + border-radius: @border-radius-large; .box-shadow(0 5px 10px rgba(0,0,0,.2)); // Overrides for proper insertion @@ -74,7 +74,7 @@ left: 50%; margin-left: -@popover-arrow-outer-width; border-bottom-width: 0; - border-top-color: #999; // IE8 fallback + border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-top-color: @popover-arrow-outer-color; bottom: -@popover-arrow-outer-width; &:after { @@ -90,7 +90,7 @@ left: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width; border-left-width: 0; - border-right-color: #999; // IE8 fallback + border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-right-color: @popover-arrow-outer-color; &:after { content: " "; @@ -104,7 +104,7 @@ left: 50%; margin-left: -@popover-arrow-outer-width; border-top-width: 0; - border-bottom-color: #999; // IE8 fallback + border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-bottom-color: @popover-arrow-outer-color; top: -@popover-arrow-outer-width; &:after { @@ -121,7 +121,7 @@ right: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width; border-right-width: 0; - border-left-color: #999; // IE8 fallback + border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-left-color: @popover-arrow-outer-color; &:after { content: " "; diff --git a/less/progress-bars.less b/less/progress-bars.less index 59f81048f0..6e059e934d 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -57,9 +57,9 @@ width: 0%; height: 100%; font-size: @font-size-small; - color: #fff; + color: @progress-bar-color; text-align: center; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); + text-shadow: @progress-bar-text-shadow; background-color: @progress-bar-bg; .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .transition(width .6s ease); diff --git a/less/tooltip.less b/less/tooltip.less index fef430900a..819b9dffde 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -22,7 +22,7 @@ // Wrapper for the tooltip content .tooltip-inner { - max-width: 200px; + max-width: @tooltip-max-width; padding: 3px 8px; color: @tooltip-color; text-align: center; diff --git a/less/type.less b/less/type.less index bf7ec7ec94..5c5dc5cc6c 100644 --- a/less/type.less +++ b/less/type.less @@ -27,7 +27,7 @@ small { font-size: 85%; } cite { font-style: normal; } // Contextual emphasis -.text-muted { color: @gray-light; } +.text-muted { color: @text-muted; } .text-primary { color: @brand-primary; } .text-warning { color: @state-warning-text; } .text-danger { color: @state-danger-text; } @@ -51,7 +51,7 @@ h1, h2, h3, h4, h5, h6, small { font-weight: normal; line-height: 1; - color: @gray-light; + color: @headings-small-color; } } @@ -87,7 +87,7 @@ h4 small, .h4 small { font-size: @font-size-base; } .page-header { padding-bottom: ((@line-height-computed / 2) - 1); margin: (@line-height-computed * 2) 0 @line-height-computed; - border-bottom: 1px solid @gray-lighter; + border-bottom: 1px solid @page-header-border-color; } @@ -160,7 +160,7 @@ abbr[title], // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 abbr[data-original-title] { cursor: help; - border-bottom: 1px dotted @gray-light; + border-bottom: 1px dotted @abbr-border-color; } abbr.initialism { font-size: 90%; @@ -171,7 +171,7 @@ abbr.initialism { blockquote { padding: (@line-height-computed / 2) @line-height-computed; margin: 0 0 @line-height-computed; - border-left: 5px solid @gray-lighter; + border-left: 5px solid @blockquote-border-color; p { font-size: (@font-size-base * 1.25); font-weight: 300; @@ -183,7 +183,7 @@ blockquote { small { display: block; line-height: @line-height-base; - color: @gray-light; + color: @blockquote-small-color; &:before { content: '\2014 \00A0';// EM DASH, NBSP } @@ -194,7 +194,7 @@ blockquote { float: right; padding-right: 15px; padding-left: 0; - border-right: 5px solid @gray-lighter; + border-right: 5px solid @blockquote-border-color; border-left: 0; p, small { diff --git a/less/variables.less b/less/variables.less index 2d93aceed2..1be593701b 100644 --- a/less/variables.less +++ b/less/variables.less @@ -272,6 +272,14 @@ @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 @@ -309,14 +317,21 @@ @tooltip-arrow-width: 5px; @tooltip-arrow-color: @tooltip-bg; +@tooltip-max-width: 200px; + @popover-bg: #fff; @popover-arrow-width: 10px; @popover-arrow-color: #fff; @popover-title-bg: darken(@popover-bg, 3%); // Special enhancement for popovers -@popover-arrow-outer-width: (@popover-arrow-width + 1); -@popover-arrow-outer-color: rgba(0,0,0,.25); +@popover-arrow-outer-width: (@popover-arrow-width + 1); +@popover-arrow-outer-color: rgba(0,0,0,.25); +@popover-arrow-outer-fallback-color: #999; + +@popover-max-width: 276px; +@popover-border-color: rgba(0,0,0,.2) +@popover-fallback-border-color: #ccc; // Labels @@ -374,6 +389,8 @@ @progress-bar-warning-bg: @brand-warning; @progress-bar-danger-bg: @brand-danger; @progress-bar-info-bg: @brand-info; +@progress-bar-color: #fff; +@progress-bar-text-shadow: 0 -1px 0 rgba(0,0,0,.25); // List group @@ -481,6 +498,14 @@ @pre-bg: #f5f5f5; @pre-border-color: #ccc; +// 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 // -------------------------