You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

870 lines
27 KiB

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