mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-29 21:52:22 +01:00
updated sass variables table of contents
This commit is contained in:
JPeer264
parent
028dd6bd48
commit
088b164a23
@ -6,16 +6,41 @@
|
|||||||
|
|
||||||
// Table of Contents
|
// Table of Contents
|
||||||
//
|
//
|
||||||
// Colors
|
// 1. Colors
|
||||||
// Options
|
// 2. Options
|
||||||
// Spacing
|
// 3. Spacing
|
||||||
// Body
|
// 4. Body
|
||||||
// Links
|
// 5. Links
|
||||||
// Grid breakpoints
|
// 6. Grid breakpoints
|
||||||
// Grid containers
|
// 7. Grid containers
|
||||||
// Grid columns
|
// 8. Grid columns
|
||||||
// Fonts
|
// 9. Fonts
|
||||||
// Components
|
// 10. Components
|
||||||
|
// 11. Tables
|
||||||
|
// 12. Buttons
|
||||||
|
// 13. Forms
|
||||||
|
// 14. Dropdowns
|
||||||
|
// 15. Z-index master list
|
||||||
|
// 16. Navbar
|
||||||
|
// 17. Navs
|
||||||
|
// 18. Pagination
|
||||||
|
// 19. Jumbotron
|
||||||
|
// 20. Form states and alerts
|
||||||
|
// 21. Cards
|
||||||
|
// 22. Tooltips
|
||||||
|
// 23. Popovers
|
||||||
|
// 24. Tags
|
||||||
|
// 25. Modals
|
||||||
|
// 26. Alerts
|
||||||
|
// 27. Progress bars
|
||||||
|
// 28. List group
|
||||||
|
// 29. Image thumbnails
|
||||||
|
// 30. Figures
|
||||||
|
// 31. Breadcrumbs
|
||||||
|
// 32. Media objects
|
||||||
|
// 33. Carousel
|
||||||
|
// 34. Close
|
||||||
|
// 35. Code
|
||||||
|
|
||||||
@mixin _assert-ascending($map, $map-name) {
|
@mixin _assert-ascending($map, $map-name) {
|
||||||
$prev-key: null;
|
$prev-key: null;
|
||||||
@ -38,7 +63,7 @@
|
|||||||
// Variable format should follow the `$component-modifier-state-property` order.
|
// Variable format should follow the `$component-modifier-state-property` order.
|
||||||
|
|
||||||
|
|
||||||
// Colors
|
// 1. Colors
|
||||||
//
|
//
|
||||||
// Grayscale and brand colors for use across Bootstrap.
|
// Grayscale and brand colors for use across Bootstrap.
|
||||||
|
|
||||||
@ -56,7 +81,7 @@ $brand-danger: #d9534f !default;
|
|||||||
$brand-inverse: $gray-dark !default;
|
$brand-inverse: $gray-dark !default;
|
||||||
|
|
||||||
|
|
||||||
// Options
|
// 2. Options
|
||||||
//
|
//
|
||||||
// Quickly modify global styling by enabling or disabling optional features.
|
// Quickly modify global styling by enabling or disabling optional features.
|
||||||
|
|
||||||
@ -70,7 +95,7 @@ $enable-grid-classes: true !default;
|
|||||||
$enable-print-styles: true !default;
|
$enable-print-styles: true !default;
|
||||||
|
|
||||||
|
|
||||||
// Spacing
|
// 3. Spacing
|
||||||
//
|
//
|
||||||
// Control the default styling of most Bootstrap elements by modifying these
|
// Control the default styling of most Bootstrap elements by modifying these
|
||||||
// variables. Mostly focused on spacing.
|
// variables. Mostly focused on spacing.
|
||||||
@ -100,7 +125,7 @@ $spacers: (
|
|||||||
$border-width: 1px !default;
|
$border-width: 1px !default;
|
||||||
|
|
||||||
|
|
||||||
// Body
|
// 4. Body
|
||||||
//
|
//
|
||||||
// Settings for the `<body>` element.
|
// Settings for the `<body>` element.
|
||||||
|
|
||||||
@ -108,7 +133,7 @@ $body-bg: #fff !default;
|
|||||||
$body-color: $gray-dark !default;
|
$body-color: $gray-dark !default;
|
||||||
|
|
||||||
|
|
||||||
// Links
|
// 5. Links
|
||||||
//
|
//
|
||||||
// Style anchor elements.
|
// Style anchor elements.
|
||||||
|
|
||||||
@ -118,7 +143,7 @@ $link-hover-color: darken($link-color, 15%) !default;
|
|||||||
$link-hover-decoration: underline !default;
|
$link-hover-decoration: underline !default;
|
||||||
|
|
||||||
|
|
||||||
// Grid breakpoints
|
// 6. Grid breakpoints
|
||||||
//
|
//
|
||||||
// Define the minimum dimensions at which your layout will change,
|
// Define the minimum dimensions at which your layout will change,
|
||||||
// adapting to different screen sizes, for use in media queries.
|
// adapting to different screen sizes, for use in media queries.
|
||||||
@ -133,7 +158,7 @@ $grid-breakpoints: (
|
|||||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||||
|
|
||||||
|
|
||||||
// Grid containers
|
// 7. Grid containers
|
||||||
//
|
//
|
||||||
// Define the maximum width of `.container` for different screen sizes.
|
// Define the maximum width of `.container` for different screen sizes.
|
||||||
|
|
||||||
@ -146,7 +171,7 @@ $container-max-widths: (
|
|||||||
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||||
|
|
||||||
|
|
||||||
// Grid columns
|
// 8. Grid columns
|
||||||
//
|
//
|
||||||
// Set the number of columns and specify the width of the gutters.
|
// Set the number of columns and specify the width of the gutters.
|
||||||
|
|
||||||
@ -160,7 +185,7 @@ $grid-gutter-widths: (
|
|||||||
xl: $grid-gutter-width-base
|
xl: $grid-gutter-width-base
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
// Typography
|
// 9. Fonts
|
||||||
//
|
//
|
||||||
// Font, line-height, and color for body text, headings, and more.
|
// Font, line-height, and color for body text, headings, and more.
|
||||||
|
|
||||||
@ -229,7 +254,7 @@ $nested-kbd-font-weight: bold !default;
|
|||||||
$list-inline-padding: 5px !default;
|
$list-inline-padding: 5px !default;
|
||||||
|
|
||||||
|
|
||||||
// Components
|
// 10. Components
|
||||||
//
|
//
|
||||||
// Define common padding and border radius sizes and more.
|
// Define common padding and border radius sizes and more.
|
||||||
|
|
||||||
@ -247,7 +272,7 @@ $caret-width: .3em !default;
|
|||||||
$caret-width-lg: $caret-width !default;
|
$caret-width-lg: $caret-width !default;
|
||||||
|
|
||||||
|
|
||||||
// Tables
|
// 11. Tables
|
||||||
//
|
//
|
||||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||||
|
|
||||||
@ -263,7 +288,7 @@ $table-border-width: $border-width !default;
|
|||||||
$table-border-color: $gray-lighter !default;
|
$table-border-color: $gray-lighter !default;
|
||||||
|
|
||||||
|
|
||||||
// Buttons
|
// 12. Buttons
|
||||||
//
|
//
|
||||||
// For each of Bootstrap's buttons, define text, background and border color.
|
// For each of Bootstrap's buttons, define text, background and border color.
|
||||||
|
|
||||||
@ -315,7 +340,7 @@ $btn-border-radius-lg: $border-radius-lg !default;
|
|||||||
$btn-border-radius-sm: $border-radius-sm !default;
|
$btn-border-radius-sm: $border-radius-sm !default;
|
||||||
|
|
||||||
|
|
||||||
// Forms
|
// 13. Forms
|
||||||
|
|
||||||
$input-padding-x: .75rem !default;
|
$input-padding-x: .75rem !default;
|
||||||
$input-padding-y: .5rem !default;
|
$input-padding-y: .5rem !default;
|
||||||
@ -447,7 +472,7 @@ $form-icon-danger-color: $brand-danger !default;
|
|||||||
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
|
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
|
||||||
|
|
||||||
|
|
||||||
// Dropdowns
|
// 14. Dropdowns
|
||||||
//
|
//
|
||||||
// Dropdown menu container and contents.
|
// Dropdown menu container and contents.
|
||||||
|
|
||||||
@ -474,7 +499,7 @@ $dropdown-item-padding-x: 1.5rem !default;
|
|||||||
$dropdown-header-color: $gray-light !default;
|
$dropdown-header-color: $gray-light !default;
|
||||||
|
|
||||||
|
|
||||||
// Z-index master list
|
// 15. Z-index master list
|
||||||
//
|
//
|
||||||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||||
// of components dependent on the z-axis and are designed to all work together.
|
// of components dependent on the z-axis and are designed to all work together.
|
||||||
@ -490,7 +515,7 @@ $zindex-modal-bg: 1040 !default;
|
|||||||
$zindex-modal: 1050 !default;
|
$zindex-modal: 1050 !default;
|
||||||
|
|
||||||
|
|
||||||
// Navbar
|
// 16. Navbar
|
||||||
|
|
||||||
$navbar-border-radius: $border-radius !default;
|
$navbar-border-radius: $border-radius !default;
|
||||||
$navbar-padding-x: $spacer !default;
|
$navbar-padding-x: $spacer !default;
|
||||||
@ -521,7 +546,7 @@ $navbar-light-disabled-color: rgba(0,0,0,.3) !default;
|
|||||||
$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
|
$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
|
||||||
$navbar-light-toggler-border: rgba(0,0,0,.1) !default;
|
$navbar-light-toggler-border: rgba(0,0,0,.1) !default;
|
||||||
|
|
||||||
// Navs
|
// 17. Navs
|
||||||
|
|
||||||
$nav-item-margin: .2rem !default;
|
$nav-item-margin: .2rem !default;
|
||||||
$nav-item-inline-spacer: 1rem !default;
|
$nav-item-inline-spacer: 1rem !default;
|
||||||
@ -546,7 +571,7 @@ $nav-pills-active-link-color: $component-active-color !default;
|
|||||||
$nav-pills-active-link-bg: $component-active-bg !default;
|
$nav-pills-active-link-bg: $component-active-bg !default;
|
||||||
|
|
||||||
|
|
||||||
// Pagination
|
// 18. Pagination
|
||||||
|
|
||||||
$pagination-padding-x: .75rem !default;
|
$pagination-padding-x: .75rem !default;
|
||||||
$pagination-padding-y: .5rem !default;
|
$pagination-padding-y: .5rem !default;
|
||||||
@ -574,13 +599,13 @@ $pagination-disabled-bg: #fff !default;
|
|||||||
$pagination-disabled-border: #ddd !default;
|
$pagination-disabled-border: #ddd !default;
|
||||||
|
|
||||||
|
|
||||||
// Jumbotron
|
// 19. Jumbotron
|
||||||
|
|
||||||
$jumbotron-padding: 2rem !default;
|
$jumbotron-padding: 2rem !default;
|
||||||
$jumbotron-bg: $gray-lighter !default;
|
$jumbotron-bg: $gray-lighter !default;
|
||||||
|
|
||||||
|
|
||||||
// Form states and alerts
|
// 20. Form states and alerts
|
||||||
//
|
//
|
||||||
// Define colors for form feedback states and, by default, alerts.
|
// Define colors for form feedback states and, by default, alerts.
|
||||||
|
|
||||||
@ -602,7 +627,7 @@ $state-danger-bg: #f2dede !default;
|
|||||||
$state-danger-border: darken($state-danger-bg, 5%) !default;
|
$state-danger-border: darken($state-danger-bg, 5%) !default;
|
||||||
|
|
||||||
|
|
||||||
// Cards
|
// 21. Cards
|
||||||
$card-spacer-x: 1.25rem !default;
|
$card-spacer-x: 1.25rem !default;
|
||||||
$card-spacer-y: .75rem !default;
|
$card-spacer-y: .75rem !default;
|
||||||
$card-border-width: 1px !default;
|
$card-border-width: 1px !default;
|
||||||
@ -621,7 +646,7 @@ $card-deck-margin: .625rem !default;
|
|||||||
$card-columns-sm-up-column-gap: 1.25rem !default;
|
$card-columns-sm-up-column-gap: 1.25rem !default;
|
||||||
|
|
||||||
|
|
||||||
// Tooltips
|
// 22. Tooltips
|
||||||
|
|
||||||
$tooltip-max-width: 200px !default;
|
$tooltip-max-width: 200px !default;
|
||||||
$tooltip-color: #fff !default;
|
$tooltip-color: #fff !default;
|
||||||
@ -635,7 +660,7 @@ $tooltip-arrow-width: 5px !default;
|
|||||||
$tooltip-arrow-color: $tooltip-bg !default;
|
$tooltip-arrow-color: $tooltip-bg !default;
|
||||||
|
|
||||||
|
|
||||||
// Popovers
|
// 23. Popovers
|
||||||
|
|
||||||
$popover-inner-padding: 1px !default;
|
$popover-inner-padding: 1px !default;
|
||||||
$popover-bg: #fff !default;
|
$popover-bg: #fff !default;
|
||||||
@ -658,7 +683,7 @@ $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
|
|||||||
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
||||||
|
|
||||||
|
|
||||||
// Tags
|
// 24. Tags
|
||||||
|
|
||||||
$tag-default-bg: $gray-light !default;
|
$tag-default-bg: $gray-light !default;
|
||||||
$tag-primary-bg: $brand-primary !default;
|
$tag-primary-bg: $brand-primary !default;
|
||||||
@ -679,7 +704,8 @@ $tag-pill-padding-x: .6em !default;
|
|||||||
// customizing padding or font-size on labels.
|
// customizing padding or font-size on labels.
|
||||||
$tag-pill-border-radius: 10rem !default;
|
$tag-pill-border-radius: 10rem !default;
|
||||||
|
|
||||||
// Modals
|
|
||||||
|
// 25. Modals
|
||||||
|
|
||||||
// Padding applied to the modal body
|
// Padding applied to the modal body
|
||||||
$modal-inner-padding: 15px !default;
|
$modal-inner-padding: 15px !default;
|
||||||
@ -708,7 +734,7 @@ $modal-md: 600px !default;
|
|||||||
$modal-sm: 300px !default;
|
$modal-sm: 300px !default;
|
||||||
|
|
||||||
|
|
||||||
// Alerts
|
// 26. Alerts
|
||||||
//
|
//
|
||||||
// Define alert colors, border radius, and padding.
|
// Define alert colors, border radius, and padding.
|
||||||
|
|
||||||
@ -735,7 +761,7 @@ $alert-danger-text: $state-danger-text !default;
|
|||||||
$alert-danger-border: $state-danger-border !default;
|
$alert-danger-border: $state-danger-border !default;
|
||||||
|
|
||||||
|
|
||||||
// Progress bars
|
// 27. Progress bars
|
||||||
|
|
||||||
$progress-bg: #eee !default;
|
$progress-bg: #eee !default;
|
||||||
$progress-bar-color: #0074d9 !default;
|
$progress-bar-color: #0074d9 !default;
|
||||||
@ -749,7 +775,7 @@ $progress-bar-danger-bg: $brand-danger !default;
|
|||||||
$progress-bar-info-bg: $brand-info !default;
|
$progress-bar-info-bg: $brand-info !default;
|
||||||
|
|
||||||
|
|
||||||
// List group
|
// 28. List group
|
||||||
|
|
||||||
$list-group-bg: #fff !default;
|
$list-group-bg: #fff !default;
|
||||||
$list-group-border-color: #ddd !default;
|
$list-group-border-color: #ddd !default;
|
||||||
@ -775,7 +801,7 @@ $list-group-item-padding-y: .75rem !default;
|
|||||||
$list-group-item-heading-margin-bottom: 5px !default;
|
$list-group-item-heading-margin-bottom: 5px !default;
|
||||||
|
|
||||||
|
|
||||||
// Image thumbnails
|
// 29. Image thumbnails
|
||||||
|
|
||||||
$thumbnail-padding: .25rem !default;
|
$thumbnail-padding: .25rem !default;
|
||||||
$thumbnail-bg: $body-bg !default;
|
$thumbnail-bg: $body-bg !default;
|
||||||
@ -785,12 +811,12 @@ $thumbnail-border-radius: $border-radius !default;
|
|||||||
$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default;
|
$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default;
|
||||||
|
|
||||||
|
|
||||||
// Figures
|
// 30. Figures
|
||||||
|
|
||||||
$figure-caption-font-size: 90% !default;
|
$figure-caption-font-size: 90% !default;
|
||||||
|
|
||||||
|
|
||||||
// Breadcrumbs
|
// 31. Breadcrumbs
|
||||||
|
|
||||||
$breadcrumb-padding-y: .75rem !default;
|
$breadcrumb-padding-y: .75rem !default;
|
||||||
$breadcrumb-padding-x: 1rem !default;
|
$breadcrumb-padding-x: 1rem !default;
|
||||||
@ -802,14 +828,14 @@ $breadcrumb-active-color: $gray-light !default;
|
|||||||
$breadcrumb-divider: "/" !default;
|
$breadcrumb-divider: "/" !default;
|
||||||
|
|
||||||
|
|
||||||
// Media objects
|
// 32. Media objects
|
||||||
|
|
||||||
$media-margin-top: 15px !default;
|
$media-margin-top: 15px !default;
|
||||||
$media-heading-margin-bottom: 5px !default;
|
$media-heading-margin-bottom: 5px !default;
|
||||||
$media-alignment-padding-x: 10px !default;
|
$media-alignment-padding-x: 10px !default;
|
||||||
|
|
||||||
|
|
||||||
// Carousel
|
// 33. Carousel
|
||||||
|
|
||||||
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
|
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
|
||||||
|
|
||||||
@ -833,14 +859,14 @@ $carousel-caption-color: #fff !default;
|
|||||||
$carousel-icon-width: 20px !default;
|
$carousel-icon-width: 20px !default;
|
||||||
|
|
||||||
|
|
||||||
// Close
|
// 34. Close
|
||||||
|
|
||||||
$close-font-weight: bold !default;
|
$close-font-weight: bold !default;
|
||||||
$close-color: #000 !default;
|
$close-color: #000 !default;
|
||||||
$close-text-shadow: 0 1px 0 #fff !default;
|
$close-text-shadow: 0 1px 0 #fff !default;
|
||||||
|
|
||||||
|
|
||||||
// Code
|
// 35. Code
|
||||||
|
|
||||||
$code-font-size: 90% !default;
|
$code-font-size: 90% !default;
|
||||||
$code-padding-x: .4rem !default;
|
$code-padding-x: .4rem !default;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user