github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/variables.less (about)

     1  //
     2  // Variables
     3  // --------------------------------------------------
     4  
     5  
     6  //== Colors
     7  //
     8  //## Gray and brand colors for use across Bootstrap.
     9  
    10  @gray-darker:            lighten(#000, 13.5%); // #222
    11  @gray-dark:              lighten(#000, 20%);   // #333
    12  @gray:                   lighten(#000, 33.5%); // #555
    13  @gray-light:             lighten(#000, 60%);   // #999
    14  @gray-lighter:           lighten(#000, 93.5%); // #eee
    15  
    16  @brand-primary:         #3498db;
    17  @brand-success:         #2ecc71;
    18  @brand-info:            #9b59b6;
    19  @brand-warning:         #f1c40f;
    20  @brand-danger:          #e74c3c;
    21  
    22  
    23  //== Scaffolding
    24  //
    25  // ## Settings for some of the most global styles.
    26  
    27  //** Background color for `<body>`.
    28  @body-bg:               #fff;
    29  //** Global text color on `<body>`.
    30  @text-color:            @gray-dark;
    31  
    32  //** Global textual link color.
    33  @link-color:            @brand-primary;
    34  //** Link hover color set via `darken()` function.
    35  @link-hover-color:      darken(@link-color, 15%);
    36  
    37  
    38  //== Typography
    39  //
    40  //## Font, line-height, and color for body text, headings, and more.
    41  
    42  @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    43  @font-family-serif:       Georgia, "Times New Roman", Times, serif;
    44  //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
    45  @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
    46  @font-family-base:        @font-family-sans-serif;
    47  
    48  @font-size-base:          16px;
    49  @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
    50  @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
    51  
    52  @font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
    53  @font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
    54  @font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
    55  @font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
    56  @font-size-h5:            @font-size-base;
    57  @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
    58  
    59  //** Unit-less `line-height` for use in components like buttons.
    60  @line-height-base:        1.428571429; // 20/14
    61  //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
    62  @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
    63  
    64  //** By default, this inherits from the `<body>`.
    65  @headings-font-family:    inherit;
    66  @headings-font-weight:    400;
    67  @headings-line-height:    1.1;
    68  @headings-color:          inherit;
    69  
    70  
    71  //-- Iconography
    72  //
    73  //## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
    74  
    75  @icon-font-path:          "../fonts/";
    76  @icon-font-name:          "glyphicons-halflings-regular";
    77  @icon-font-svg-id:        "glyphicons_halflingsregular";
    78  
    79  //== Components
    80  //
    81  //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
    82  
    83  @padding-base-vertical:     6px;
    84  @padding-base-horizontal:   12px;
    85  
    86  @padding-large-vertical:    10px;
    87  @padding-large-horizontal:  16px;
    88  
    89  @padding-small-vertical:    5px;
    90  @padding-small-horizontal:  10px;
    91  
    92  @padding-xs-vertical:       1px;
    93  @padding-xs-horizontal:     5px;
    94  
    95  @line-height-large:         1.33;
    96  @line-height-small:         1.5;
    97  
    98  @border-radius-base:        3px;
    99  @border-radius-large:       3px;
   100  @border-radius-small:       0px;
   101  
   102  //** Global color for active items (e.g., navs or dropdowns).
   103  @component-active-color:    #fff;
   104  //** Global background color for active items (e.g., navs or dropdowns).
   105  @component-active-bg:       @brand-primary;
   106  
   107  //** Width of the `border` for generating carets that indicator dropdowns.
   108  @caret-width-base:          4px;
   109  //** Carets increase slightly in size for larger components.
   110  @caret-width-large:         5px;
   111  
   112  
   113  //== Tables
   114  //
   115  //## Customizes the `.table` component with basic values, each used across all table variations.
   116  
   117  //** Padding for `<th>`s and `<td>`s.
   118  @table-cell-padding:            8px;
   119  //** Padding for cells in `.table-condensed`.
   120  @table-condensed-cell-padding:  3px;
   121  
   122  //** Default background color used for all tables.
   123  @table-bg:                      transparent;
   124  //** Background color used for `.table-striped`.
   125  @table-bg-accent:               #f9f9f9;
   126  //** Background color used for `.table-hover`.
   127  @table-bg-hover:                #f5f5f5;
   128  @table-bg-active:               @table-bg-hover;
   129  
   130  //** Border color for table and cell borders.
   131  @table-border-color:            #ddd;
   132  
   133  
   134  //== Buttons
   135  //
   136  //## For each of Bootstrap's buttons, define text, background and border color.
   137  
   138  @btn-font-weight:                normal;
   139  
   140  @btn-default-color:              #333;
   141  @btn-default-bg:                 #fff;
   142  @btn-default-border:             #ccc;
   143  
   144  @btn-primary-color:              #fff;
   145  @btn-primary-bg:                 @brand-primary;
   146  @btn-primary-border:             darken(@btn-primary-bg, 5%);
   147  
   148  @btn-success-color:              #fff;
   149  @btn-success-bg:                 @brand-success;
   150  @btn-success-border:             darken(@btn-success-bg, 5%);
   151  
   152  @btn-info-color:                 #fff;
   153  @btn-info-bg:                    @brand-info;
   154  @btn-info-border:                darken(@btn-info-bg, 5%);
   155  
   156  @btn-warning-color:              #fff;
   157  @btn-warning-bg:                 @brand-warning;
   158  @btn-warning-border:             darken(@btn-warning-bg, 5%);
   159  
   160  @btn-danger-color:               #fff;
   161  @btn-danger-bg:                  @brand-danger;
   162  @btn-danger-border:              darken(@btn-danger-bg, 5%);
   163  
   164  @btn-link-disabled-color:        @gray-light;
   165  
   166  
   167  //== Forms
   168  //
   169  //##
   170  
   171  //** `<input>` background color
   172  @input-bg:                       #fff;
   173  //** `<input disabled>` background color
   174  @input-bg-disabled:              @gray-lighter;
   175  
   176  //** Text color for `<input>`s
   177  @input-color:                    @gray;
   178  //** `<input>` border color
   179  @input-border:                   #ccc;
   180  //** `<input>` border radius
   181  @input-border-radius:            @border-radius-base;
   182  //** Border color for inputs on focus
   183  @input-border-focus:             #66afe9;
   184  
   185  //** Placeholder text color
   186  @input-color-placeholder:        @gray-light;
   187  
   188  //** Default `.form-control` height
   189  @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
   190  //** Large `.form-control` height
   191  @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
   192  //** Small `.form-control` height
   193  @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
   194  
   195  @legend-color:                   @gray-dark;
   196  @legend-border-color:            #e5e5e5;
   197  
   198  //** Background color for textual input addons
   199  @input-group-addon-bg:           @gray-lighter;
   200  //** Border color for textual input addons
   201  @input-group-addon-border-color: @input-border;
   202  
   203  
   204  //== Dropdowns
   205  //
   206  //## Dropdown menu container and contents.
   207  
   208  //** Background for the dropdown menu.
   209  @dropdown-bg:                    #fff;
   210  //** Dropdown menu `border-color`.
   211  @dropdown-border:                rgba(0,0,0,.15);
   212  //** Dropdown menu `border-color` **for IE8**.
   213  @dropdown-fallback-border:       #ccc;
   214  //** Divider color for between dropdown items.
   215  @dropdown-divider-bg:            #e5e5e5;
   216  
   217  //** Dropdown link text color.
   218  @dropdown-link-color:            @gray-dark;
   219  //** Hover color for dropdown links.
   220  @dropdown-link-hover-color:      darken(@gray-dark, 5%);
   221  //** Hover background for dropdown links.
   222  @dropdown-link-hover-bg:         #f5f5f5;
   223  
   224  //** Active dropdown menu item text color.
   225  @dropdown-link-active-color:     @component-active-color;
   226  //** Active dropdown menu item background color.
   227  @dropdown-link-active-bg:        @component-active-bg;
   228  
   229  //** Disabled dropdown menu item background color.
   230  @dropdown-link-disabled-color:   @gray-light;
   231  
   232  //** Text color for headers within dropdown menus.
   233  @dropdown-header-color:          @gray-light;
   234  
   235  // Note: Deprecated @dropdown-caret-color as of v3.1.0
   236  @dropdown-caret-color:           #000;
   237  
   238  
   239  //-- Z-index master list
   240  //
   241  // Warning: Avoid customizing these values. They're used for a bird's eye view
   242  // of components dependent on the z-axis and are designed to all work together.
   243  //
   244  // Note: These variables are not generated into the Customizer.
   245  
   246  @zindex-navbar:            1000;
   247  @zindex-dropdown:          1000;
   248  @zindex-popover:           1010;
   249  @zindex-tooltip:           1030;
   250  @zindex-navbar-fixed:      1030;
   251  @zindex-modal-background:  1040;
   252  @zindex-modal:             1050;
   253  
   254  
   255  //== Media queries breakpoints
   256  //
   257  //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
   258  
   259  // Extra small screen / phone
   260  // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
   261  @screen-xs:                  480px;
   262  @screen-xs-min:              @screen-xs;
   263  @screen-phone:               @screen-xs-min;
   264  
   265  // Small screen / tablet
   266  // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
   267  @screen-sm:                  768px;
   268  @screen-sm-min:              @screen-sm;
   269  @screen-tablet:              @screen-sm-min;
   270  
   271  // Medium screen / desktop
   272  // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
   273  @screen-md:                  992px;
   274  @screen-md-min:              @screen-md;
   275  @screen-desktop:             @screen-md-min;
   276  
   277  // Large screen / wide desktop
   278  // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
   279  @screen-lg:                  1200px;
   280  @screen-lg-min:              @screen-lg;
   281  @screen-lg-desktop:          @screen-lg-min;
   282  
   283  // So media queries don't overlap when required, provide a maximum
   284  @screen-xs-max:              (@screen-sm-min - 1);
   285  @screen-sm-max:              (@screen-md-min - 1);
   286  @screen-md-max:              (@screen-lg-min - 1);
   287  
   288  
   289  //== Grid system
   290  //
   291  //## Define your custom responsive grid.
   292  
   293  //** Number of columns in the grid.
   294  @grid-columns:              12;
   295  //** Padding between columns. Gets divided in half for the left and right.
   296  @grid-gutter-width:         30px;
   297  // Navbar collapse
   298  //** Point at which the navbar becomes uncollapsed.
   299  @grid-float-breakpoint:     @screen-xs-min;
   300  //** Point at which the navbar begins collapsing.
   301  @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
   302  
   303  
   304  //== Container sizes
   305  //
   306  //## Define the maximum width of `.container` for different screen sizes.
   307  
   308  // Small screen / tablet
   309  @container-tablet:             ((720px + @grid-gutter-width));
   310  //** For `@screen-sm-min` and up.
   311  @container-sm:                 @container-tablet;
   312  
   313  // Medium screen / desktop
   314  @container-desktop:            ((940px + @grid-gutter-width));
   315  //** For `@screen-md-min` and up.
   316  @container-md:                 @container-desktop;
   317  
   318  // Large screen / wide desktop
   319  @container-large-desktop:      ((1140px + @grid-gutter-width));
   320  //** For `@screen-lg-min` and up.
   321  @container-lg:                 @container-large-desktop;
   322  
   323  
   324  //== Navbar
   325  //
   326  //##
   327  
   328  // Basics of a navbar
   329  @navbar-height:                    50px;
   330  @navbar-margin-bottom:             @line-height-computed;
   331  @navbar-border-radius:             @border-radius-base;
   332  @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
   333  @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
   334  @navbar-collapse-max-height:       340px;
   335  
   336  @navbar-default-color:             #555;
   337  @navbar-default-bg:                #f8f8f8;
   338  @navbar-default-border:            darken(@navbar-default-bg, 6.5%);
   339  
   340  // Navbar links
   341  @navbar-default-link-color:                #555;
   342  @navbar-default-link-hover-color:          #333;
   343  @navbar-default-link-hover-bg:             transparent;
   344  @navbar-default-link-active-color:         #555;
   345  @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
   346  @navbar-default-link-disabled-color:       #ccc;
   347  @navbar-default-link-disabled-bg:          transparent;
   348  
   349  // Navbar brand label
   350  @navbar-default-brand-color:               @navbar-default-link-color;
   351  @navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
   352  @navbar-default-brand-hover-bg:            transparent;
   353  
   354  // Navbar toggle
   355  @navbar-default-toggle-hover-bg:           #ddd;
   356  @navbar-default-toggle-icon-bar-bg:        #888;
   357  @navbar-default-toggle-border-color:       #ddd;
   358  
   359  
   360  // Inverted navbar
   361  // Reset inverted navbar basics
   362  @navbar-inverse-color:                      @gray-light;
   363  @navbar-inverse-bg:                         #222;
   364  @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
   365  
   366  // Inverted navbar links
   367  @navbar-inverse-link-color:                 @gray-light;
   368  @navbar-inverse-link-hover-color:           #fff;
   369  @navbar-inverse-link-hover-bg:              transparent;
   370  @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
   371  @navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
   372  @navbar-inverse-link-disabled-color:        #444;
   373  @navbar-inverse-link-disabled-bg:           transparent;
   374  
   375  // Inverted navbar brand label
   376  @navbar-inverse-brand-color:                @navbar-inverse-link-color;
   377  @navbar-inverse-brand-hover-color:          #fff;
   378  @navbar-inverse-brand-hover-bg:             transparent;
   379  
   380  // Inverted navbar toggle
   381  @navbar-inverse-toggle-hover-bg:            #333;
   382  @navbar-inverse-toggle-icon-bar-bg:         #fff;
   383  @navbar-inverse-toggle-border-color:        #333;
   384  
   385  
   386  //== Navs
   387  //
   388  //##
   389  
   390  //=== Shared nav styles
   391  @nav-link-padding:                          10px 15px;
   392  @nav-link-hover-bg:                         @gray-lighter;
   393  
   394  @nav-disabled-link-color:                   @gray-light;
   395  @nav-disabled-link-hover-color:             @gray-light;
   396  
   397  @nav-open-link-hover-color:                 #fff;
   398  
   399  //== Tabs
   400  @nav-tabs-border-color:                     #ddd;
   401  
   402  @nav-tabs-link-hover-border-color:          @gray-lighter;
   403  
   404  @nav-tabs-active-link-hover-bg:             @body-bg;
   405  @nav-tabs-active-link-hover-color:          @gray;
   406  @nav-tabs-active-link-hover-border-color:   #ddd;
   407  
   408  @nav-tabs-justified-link-border-color:            #ddd;
   409  @nav-tabs-justified-active-link-border-color:     @body-bg;
   410  
   411  //== Pills
   412  @nav-pills-border-radius:                   @border-radius-base;
   413  @nav-pills-active-link-hover-bg:            @component-active-bg;
   414  @nav-pills-active-link-hover-color:         @component-active-color;
   415  
   416  
   417  //== Pagination
   418  //
   419  //##
   420  
   421  @pagination-color:                     @link-color;
   422  @pagination-bg:                        #fff;
   423  @pagination-border:                    #ddd;
   424  
   425  @pagination-hover-color:               @link-hover-color;
   426  @pagination-hover-bg:                  @gray-lighter;
   427  @pagination-hover-border:              #ddd;
   428  
   429  @pagination-active-color:              #fff;
   430  @pagination-active-bg:                 @brand-primary;
   431  @pagination-active-border:             @brand-primary;
   432  
   433  @pagination-disabled-color:            @gray-light;
   434  @pagination-disabled-bg:               #fff;
   435  @pagination-disabled-border:           #ddd;
   436  
   437  
   438  //== Pager
   439  //
   440  //##
   441  
   442  @pager-bg:                             @pagination-bg;
   443  @pager-border:                         @pagination-border;
   444  @pager-border-radius:                  15px;
   445  
   446  @pager-hover-bg:                       @pagination-hover-bg;
   447  
   448  @pager-active-bg:                      @pagination-active-bg;
   449  @pager-active-color:                   @pagination-active-color;
   450  
   451  @pager-disabled-color:                 @pagination-disabled-color;
   452  
   453  
   454  //== Jumbotron
   455  //
   456  //##
   457  
   458  @jumbotron-padding:              30px;
   459  @jumbotron-color:                inherit;
   460  @jumbotron-bg:                   @gray-lighter;
   461  @jumbotron-heading-color:        inherit;
   462  @jumbotron-font-size:            ceil((@font-size-base * 1.5));
   463  
   464  
   465  //== Form states and alerts
   466  //
   467  //## Define colors for form feedback states and, by default, alerts.
   468  
   469  @state-success-text:             darken(spin(@brand-success, -10), 5%);
   470  @state-success-bg:               @brand-success;
   471  @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
   472  
   473  @state-info-text:                darken(spin(@brand-info, -10), 5%);
   474  @state-info-bg:                  @brand-info;
   475  @state-info-border:              darken(spin(@state-info-bg, -10), 5%);
   476  
   477  @state-warning-text:             darken(spin(@brand-warning, -10), 5%);
   478  @state-warning-bg:               @brand-warning;
   479  @state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
   480  
   481  @state-danger-text:              darken(spin(@brand-danger, -10), 5%);
   482  @state-danger-bg:                @brand-danger;
   483  @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
   484  
   485  
   486  //== Tooltips
   487  //
   488  //##
   489  
   490  //** Tooltip max width
   491  @tooltip-max-width:           200px;
   492  //** Tooltip text color
   493  @tooltip-color:               #fff;
   494  //** Tooltip background color
   495  @tooltip-bg:                  #000;
   496  @tooltip-opacity:             .9;
   497  
   498  //** Tooltip arrow width
   499  @tooltip-arrow-width:         5px;
   500  //** Tooltip arrow color
   501  @tooltip-arrow-color:         @tooltip-bg;
   502  
   503  
   504  //== Popovers
   505  //
   506  //##
   507  
   508  //** Popover body background color
   509  @popover-bg:                          #fff;
   510  //** Popover maximum width
   511  @popover-max-width:                   276px;
   512  //** Popover border color
   513  @popover-border-color:                rgba(0,0,0,.2);
   514  //** Popover fallback border color
   515  @popover-fallback-border-color:       #ccc;
   516  
   517  //** Popover title background color
   518  @popover-title-bg:                    darken(@popover-bg, 3%);
   519  
   520  //** Popover arrow width
   521  @popover-arrow-width:                 10px;
   522  //** Popover arrow color
   523  @popover-arrow-color:                 #fff;
   524  
   525  //** Popover outer arrow width
   526  @popover-arrow-outer-width:           (@popover-arrow-width + 1);
   527  //** Popover outer arrow color
   528  @popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
   529  //** Popover outer arrow fallback color
   530  @popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
   531  
   532  
   533  //== Labels
   534  //
   535  //##
   536  
   537  //** Default label background color
   538  @label-default-bg:            @gray-light;
   539  //** Primary label background color
   540  @label-primary-bg:            @brand-primary;
   541  //** Success label background color
   542  @label-success-bg:            @brand-success;
   543  //** Info label background color
   544  @label-info-bg:               @brand-info;
   545  //** Warning label background color
   546  @label-warning-bg:            @brand-warning;
   547  //** Danger label background color
   548  @label-danger-bg:             @brand-danger;
   549  
   550  //** Default label text color
   551  @label-color:                 #fff;
   552  //** Default text color of a linked label
   553  @label-link-hover-color:      #fff;
   554  
   555  
   556  //== Modals
   557  //
   558  //##
   559  
   560  //** Padding applied to the modal body
   561  @modal-inner-padding:         20px;
   562  
   563  //** Padding applied to the modal title
   564  @modal-title-padding:         15px;
   565  //** Modal title line-height
   566  @modal-title-line-height:     @line-height-base;
   567  
   568  //** Background color of modal content area
   569  @modal-content-bg:                             #fff;
   570  //** Modal content border color
   571  @modal-content-border-color:                   rgba(0,0,0,.2);
   572  //** Modal content border color **for IE8**
   573  @modal-content-fallback-border-color:          #999;
   574  
   575  //** Modal backdrop background color
   576  @modal-backdrop-bg:           #000;
   577  //** Modal backdrop opacity
   578  @modal-backdrop-opacity:      .5;
   579  //** Modal header border color
   580  @modal-header-border-color:   #e5e5e5;
   581  //** Modal footer border color
   582  @modal-footer-border-color:   @modal-header-border-color;
   583  
   584  @modal-lg:                    900px;
   585  @modal-md:                    600px;
   586  @modal-sm:                    300px;
   587  
   588  
   589  //== Alerts
   590  //
   591  //## Define alert colors, border radius, and padding.
   592  
   593  @alert-padding:               15px;
   594  @alert-border-radius:         @border-radius-base;
   595  @alert-link-font-weight:      bold;
   596  
   597  @alert-success-bg:            @state-success-bg;
   598  @alert-success-text:          #fff;
   599  @alert-success-border:        @state-success-border;
   600  
   601  @alert-info-bg:               @state-info-bg;
   602  @alert-info-text:             #fff;
   603  @alert-info-border:           @state-info-border;
   604  
   605  @alert-warning-bg:            @state-warning-bg;
   606  @alert-warning-text:          #fff;
   607  @alert-warning-border:        @state-warning-border;
   608  
   609  @alert-danger-bg:             @state-danger-bg;
   610  @alert-danger-text:           #fff;
   611  @alert-danger-border:         @state-danger-border;
   612  
   613  
   614  //== Progress bars
   615  //
   616  //##
   617  
   618  //** Background color of the whole progress component
   619  @progress-bg:                 #f5f5f5;
   620  //** Progress bar text color
   621  @progress-bar-color:          #fff;
   622  
   623  //** Default progress bar color
   624  @progress-bar-bg:             @brand-primary;
   625  //** Success progress bar color
   626  @progress-bar-success-bg:     @brand-success;
   627  //** Warning progress bar color
   628  @progress-bar-warning-bg:     @brand-warning;
   629  //** Danger progress bar color
   630  @progress-bar-danger-bg:      @brand-danger;
   631  //** Info progress bar color
   632  @progress-bar-info-bg:        @brand-info;
   633  
   634  
   635  //== List group
   636  //
   637  //##
   638  
   639  //** Background color on `.list-group-item`
   640  @list-group-bg:                 #fff;
   641  //** `.list-group-item` border color
   642  @list-group-border:             #ddd;
   643  //** List group border radius
   644  @list-group-border-radius:      @border-radius-base;
   645  
   646  //** Background color of single list elements on hover
   647  @list-group-hover-bg:           #f5f5f5;
   648  //** Text color of active list elements
   649  @list-group-active-color:       @component-active-color;
   650  //** Background color of active list elements
   651  @list-group-active-bg:          @component-active-bg;
   652  //** Border color of active list elements
   653  @list-group-active-border:      @list-group-active-bg;
   654  @list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
   655  
   656  @list-group-link-color:         #555;
   657  @list-group-link-heading-color: #333;
   658  
   659  
   660  //== Panels
   661  //
   662  //##
   663  
   664  @panel-bg:                    #fff;
   665  @panel-body-padding:          15px;
   666  @panel-border-radius:         @border-radius-base;
   667  
   668  //** Border color for elements within panels
   669  @panel-inner-border:          #ddd;
   670  @panel-footer-bg:             #f5f5f5;
   671  
   672  @panel-default-text:          @gray-dark;
   673  @panel-default-border:        #ddd;
   674  @panel-default-heading-bg:    #f5f5f5;
   675  
   676  @panel-primary-text:          #fff;
   677  @panel-primary-border:        @brand-primary;
   678  @panel-primary-heading-bg:    @brand-primary;
   679  
   680  @panel-success-text:          #fff;
   681  @panel-success-border:        @state-success-border;
   682  @panel-success-heading-bg:    @state-success-bg;
   683  
   684  @panel-info-text:             #fff;
   685  @panel-info-border:           @state-info-border;
   686  @panel-info-heading-bg:       @state-info-bg;
   687  
   688  @panel-warning-text:          #fff;
   689  @panel-warning-border:        @state-warning-border;
   690  @panel-warning-heading-bg:    @state-warning-bg;
   691  
   692  @panel-danger-text:           #fff;
   693  @panel-danger-border:         @state-danger-border;
   694  @panel-danger-heading-bg:     @state-danger-bg;
   695  
   696  
   697  //== Thumbnails
   698  //
   699  //##
   700  
   701  //** Padding around the thumbnail image
   702  @thumbnail-padding:           4px;
   703  //** Thumbnail background color
   704  @thumbnail-bg:                @body-bg;
   705  //** Thumbnail border color
   706  @thumbnail-border:            #ddd;
   707  //** Thumbnail border radius
   708  @thumbnail-border-radius:     @border-radius-base;
   709  
   710  //** Custom text color for thumbnail captions
   711  @thumbnail-caption-color:     @text-color;
   712  //** Padding around the thumbnail caption
   713  @thumbnail-caption-padding:   9px;
   714  
   715  
   716  //== Wells
   717  //
   718  //##
   719  
   720  @well-bg:                     #f5f5f5;
   721  @well-border:                 darken(@well-bg, 7%);
   722  
   723  
   724  //== Badges
   725  //
   726  //##
   727  
   728  @badge-color:                 #fff;
   729  //** Linked badge text color on hover
   730  @badge-link-hover-color:      #fff;
   731  @badge-bg:                    @gray-light;
   732  
   733  //** Badge text color in active nav link
   734  @badge-active-color:          @link-color;
   735  //** Badge background color in active nav link
   736  @badge-active-bg:             #fff;
   737  
   738  @badge-font-weight:           bold;
   739  @badge-line-height:           1;
   740  @badge-border-radius:         10px;
   741  
   742  
   743  //== Breadcrumbs
   744  //
   745  //##
   746  
   747  @breadcrumb-padding-vertical:   8px;
   748  @breadcrumb-padding-horizontal: 15px;
   749  //** Breadcrumb background color
   750  @breadcrumb-bg:                 #f5f5f5;
   751  //** Breadcrumb text color
   752  @breadcrumb-color:              #ccc;
   753  //** Text color of current page in the breadcrumb
   754  @breadcrumb-active-color:       @gray-light;
   755  //** Textual separator for between breadcrumb elements
   756  @breadcrumb-separator:          "/";
   757  
   758  
   759  //== Carousel
   760  //
   761  //##
   762  
   763  @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
   764  
   765  @carousel-control-color:                      #fff;
   766  @carousel-control-width:                      15%;
   767  @carousel-control-opacity:                    .5;
   768  @carousel-control-font-size:                  20px;
   769  
   770  @carousel-indicator-active-bg:                #fff;
   771  @carousel-indicator-border-color:             #fff;
   772  
   773  @carousel-caption-color:                      #fff;
   774  
   775  
   776  //== Close
   777  //
   778  //##
   779  
   780  @close-font-weight:           bold;
   781  @close-color:                 #000;
   782  @close-text-shadow:           0 1px 0 #fff;
   783  
   784  
   785  //== Code
   786  //
   787  //##
   788  
   789  @code-color:                  #c7254e;
   790  @code-bg:                     #f9f2f4;
   791  
   792  @kbd-color:                   #fff;
   793  @kbd-bg:                      #333;
   794  
   795  @pre-bg:                      #f5f5f5;
   796  @pre-color:                   @gray-dark;
   797  @pre-border-color:            #ccc;
   798  @pre-scrollable-max-height:   340px;
   799  
   800  
   801  //== Type
   802  //
   803  //##
   804  
   805  //** Text muted color
   806  @text-muted:                  @gray-light;
   807  //** Abbreviations and acronyms border color
   808  @abbr-border-color:           @gray-light;
   809  //** Headings small color
   810  @headings-small-color:        @gray-light;
   811  //** Blockquote small color
   812  @blockquote-small-color:      @gray-light;
   813  //** Blockquote font size
   814  @blockquote-font-size:        (@font-size-base * 1.25);
   815  //** Blockquote border color
   816  @blockquote-border-color:     @gray-lighter;
   817  //** Page header border color
   818  @page-header-border-color:    @gray-lighter;
   819  
   820  
   821  //== Miscellaneous
   822  //
   823  //##
   824  
   825  //** Horizontal line color.
   826  @hr-border:                   @gray-lighter;
   827  
   828  //** Horizontal offset for forms and lists.
   829  @component-offset-horizontal: 180px;