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