diff --git a/README.md b/README.md
index 7b38f9aec4fd25b0fb82cab0e0e6b7e414cd0387..7e451bc22db7ca51e3cdb37d42802ffdc9a82207 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ Documentation search is powered by [Algolia's DocSearch](https://community.algol
### Running documentation locally
-1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
+1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
2. Run `npm run test` (or a specific NPM script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
3. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
4. Open <http://localhost:9001> in your browser, and voilĂ .
diff --git a/_includes/scripts.html b/_includes/scripts.html
index b9a83876b9b153d1ec367c0c13c6366aa3910213..bc411c2265fe81b8fd7a6eccaf88bfc3153e51b2 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -31,7 +31,7 @@
inputSelector: '#search-input',
transformData: function (hits) {
return hits.map(function (hit) {
- hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', 'http://localhost:9001/docs/4.0');
+ hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
return hit;
});
},
diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index 3e18b01c74759d6caca70ab8f69bad0f7c61d7ef..eaf2f5693ac246bdea5591362647c3d43fcdb54e 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -33,7 +33,7 @@
position: -webkit-sticky;
position: sticky;
top: 0;
- z-index: 1030; // over everything in bootstrap
+ z-index: 1071; // over everything in bootstrap
}
.navbar-nav {
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 5425b35073e346dd9b2d82358204cffa5b6bce58..4632e894a5fda3fc51ee611a8ce61bb971cf0422 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -44,7 +44,7 @@
</div>
</div>
- <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/alert.js"></script>
</body>
diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index 79cfa0248000ade45a269cacafb845cf201e40f1..9aaf08d44f205c9aca1dc409c2629bab5a460d7f 100644
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
@@ -44,7 +44,7 @@
</div>
</div>
- <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/button.js"></script>
</body>
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 27a21efd6963bad5777e90dc5dcd5cce50f81ae6..eae9df705baf51839224644b936d93e146511df2 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -40,7 +40,7 @@
</div>
</div>
- <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/carousel.js"></script>
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index fee096c6c8677e500088b232cc6dc5571c33bc91..da0c1e4a67f5c18b6450e3f6ffa5a511c9638719 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -117,8 +117,8 @@
</div>
</div>
- <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
- <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+ <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/dropdown.js"></script>
<script src="../../dist/collapse.js"></script>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index def62b031f8d9f986f69cba17bcc1989b2760d69..1a607744ff7ccecab73539816bf738ef5655c62d 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -169,8 +169,8 @@
</div>
</div>
- <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
- <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+ <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/modal.js"></script>
<script src="../../dist/collapse.js"></script>
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index 2354abf4250179d77eac9c3f6218cf80b078e1ba..e26dca49133f5a79589aaed1745ad0fa98e82bdf 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -32,8 +32,8 @@
</button>
</div>
- <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
- <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+ <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/tooltip.js"></script>
<script src="../../dist/popover.js"></script>
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 0f115e03549e62eada86cdf4649714a57f723edb..e305bcbdbab6cac31b3f587d483975b0c7f751b7 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -86,8 +86,8 @@
<p>Ad leggings keytar, brunch id art party dolor labore.</p>
</div>
- <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
- <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+ <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/scrollspy.js"></script>
<script src="../../dist/dropdown.js"></script>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index e747302db4b4bbfb5c0b974f7e222552b09f3a97..37730e591734faf6810af213ccea016774368b8f 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -224,7 +224,8 @@
</div>
</div>
</div>
- <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/tab.js"></script>
<script src="../../dist/dropdown.js"></script>
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 172cb29ad30ecedebb0e03129abd1e795fe0b8ab..fa84a20e4b38cc4db0fe79090e9bfd212c9948ec 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -53,8 +53,8 @@
<div id="target" title="Test tooltip on transformed element"></div>
</div>
- <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
- <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+ <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+ <script src="../../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/tooltip.js"></script>
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index d4c79ab60b457b643d75a8acd5d2b40225ec7c38..30a14d88333674e8b45b4aaac603a58b58931ecd 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -12,7 +12,7 @@
flex: 0 1 auto;
margin-bottom: 0;
- // Bring the hover, focused, and "active" buttons to the fron to overlay
+ // Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
@include hover {
z-index: 2;
diff --git a/scss/_card.scss b/scss/_card.scss
index 7be2aaf8b54f7a7714b8033f216e9159d1a74f08..e45af7bc7866778ed1ffb5cdcf399e730c4868d0 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -6,6 +6,8 @@
position: relative;
display: flex;
flex-direction: column;
+ min-width: 0;
+ word-wrap: break-word;
background-color: $card-bg;
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
@@ -20,7 +22,6 @@
.card-title {
margin-bottom: $card-spacer-y;
- word-break: break-all;
}
.card-subtitle {
@@ -68,7 +69,7 @@
border-bottom: $card-border-width solid $card-border-color;
&:first-child {
- @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+ @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
}
}
@@ -78,7 +79,7 @@
border-top: $card-border-width solid $card-border-color;
&:last-child {
- @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
+ @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
}
}
@@ -170,18 +171,18 @@
.card-img {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
- @include border-radius($card-border-radius-inner);
+ @include border-radius($card-inner-border-radius);
}
// Card image caps
.card-img-top {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
- @include border-top-radius($card-border-radius-inner);
+ @include border-top-radius($card-inner-border-radius);
}
.card-img-bottom {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
- @include border-bottom-radius($card-border-radius-inner);
+ @include border-bottom-radius($card-inner-border-radius);
}
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 1d3ce2f183818dccf0538402ebf80a03ae595460..b58fffb8f5fafce4c7c950bd27954e7f7f05e1d1 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -23,29 +23,29 @@
opacity: 0;
&:checked ~ .custom-control-indicator {
- color: $custom-control-checked-indicator-color;
- background-color: $custom-control-checked-indicator-bg;
- @include box-shadow($custom-control-checked-indicator-box-shadow);
+ color: $custom-control-indicator-checked-color;
+ background-color: $custom-control-indicator-checked-bg;
+ @include box-shadow($custom-control-indicator-checked-box-shadow);
}
&:focus ~ .custom-control-indicator {
// the mixin is not used here to make sure there is feedback
- box-shadow: $custom-control-focus-indicator-box-shadow;
+ box-shadow: $custom-control-indicator-focus-box-shadow;
}
&:active ~ .custom-control-indicator {
- color: $custom-control-active-indicator-color;
- background-color: $custom-control-active-indicator-bg;
- @include box-shadow($custom-control-active-indicator-box-shadow);
+ color: $custom-control-indicator-active-color;
+ background-color: $custom-control-indicator-active-bg;
+ @include box-shadow($custom-control-indicator-active-box-shadow);
}
&:disabled {
~ .custom-control-indicator {
- background-color: $custom-control-disabled-indicator-bg;
+ background-color: $custom-control-indicator-disabled-bg;
}
~ .custom-control-description {
- color: $custom-control-disabled-description-color;
+ color: $custom-control-description-disabled-color;
}
}
}
@@ -76,16 +76,16 @@
.custom-checkbox {
.custom-control-indicator {
- @include border-radius($custom-checkbox-radius);
+ @include border-radius($custom-checkbox-border-radius);
}
.custom-control-input:checked ~ .custom-control-indicator {
- background-image: $custom-checkbox-checked-icon;
+ background-image: $custom-checkbox-icon-checked;
}
.custom-control-input:indeterminate ~ .custom-control-indicator {
background-color: $custom-checkbox-indeterminate-bg;
- background-image: $custom-checkbox-indeterminate-icon;
+ background-image: $custom-checkbox-icon-indeterminate;
@include box-shadow($custom-checkbox-indeterminate-box-shadow);
}
}
@@ -96,11 +96,11 @@
.custom-radio {
.custom-control-indicator {
- border-radius: $custom-radio-radius;
+ border-radius: $custom-radio-border-radius;
}
.custom-control-input:checked ~ .custom-control-indicator {
- background-image: $custom-radio-checked-icon;
+ background-image: $custom-radio-icon-checked;
}
}
diff --git a/scss/_forms.scss b/scss/_forms.scss
index c56cfd0686d438a894faf5217fbcd43abe0a95fe..4b04c7d225804ba7023da7ac4796361adf687231 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -42,7 +42,7 @@
// Placeholder
&::placeholder {
- color: $input-color-placeholder;
+ color: $input-placeholder-color;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
@@ -54,7 +54,7 @@
// don't honor that edge case; we style them as disabled anyway.
&:disabled,
&[readonly] {
- background-color: $input-bg-disabled;
+ background-color: $input-disabled-bg;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 9d2a86776da60bd0c5ed98723b8941901d10ec19..c0c406716215a180596d39ed4608b968635739e9 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -54,7 +54,7 @@
background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($border-radius-lg);
- @include box-shadow($modal-content-xs-box-shadow);
+ @include box-shadow($modal-content-box-shadow-xs);
// Remove focus outline from opened modal
outline: 0;
}
@@ -127,11 +127,11 @@
// Automatically set modal's width for larger viewports
.modal-dialog {
max-width: $modal-md;
- margin: $modal-dialog-sm-up-margin-y auto;
+ margin: $modal-dialog-margin-y-sm-up auto;
}
.modal-content {
- @include box-shadow($modal-content-sm-up-box-shadow);
+ @include box-shadow($modal-content-box-shadow-sm-up);
}
.modal-sm { max-width: $modal-sm; }
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 973679eee74476036690eafdef028a557876fb24..b76e3e968b3cdb4b91edf96baba58460a8bd2701 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -21,7 +21,7 @@
// Disabled state lightens text
&.disabled {
- color: $nav-disabled-link-color;
+ color: $nav-link-disabled-color;
}
}
@@ -45,7 +45,7 @@
}
&.disabled {
- color: $nav-disabled-link-color;
+ color: $nav-link-disabled-color;
background-color: transparent;
border-color: transparent;
}
@@ -53,9 +53,9 @@
.nav-link.active,
.nav-item.show .nav-link {
- color: $nav-tabs-active-link-color;
- background-color: $nav-tabs-active-link-bg;
- border-color: $nav-tabs-active-link-border-color $nav-tabs-active-link-border-color $nav-tabs-active-link-bg;
+ color: $nav-tabs-link-active-color;
+ background-color: $nav-tabs-link-active-bg;
+ border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
}
.dropdown-menu {
@@ -77,8 +77,8 @@
&.active,
.show & {
- color: $nav-pills-active-link-color;
- background-color: $nav-pills-active-link-bg;
+ color: $nav-pills-link-active-color;
+ background-color: $nav-pills-link-active-bg;
}
}
}
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 36c3dab77a2a36d4fd9b0a86a4cc8004b513fc0c..90a5e69bb970c60a086e3d521cf686835c202198 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -37,7 +37,7 @@
.table-sm {
th,
td {
- padding: $table-sm-cell-padding;
+ padding: $table-cell-padding-sm;
}
}
@@ -69,7 +69,7 @@
.table-striped {
tbody tr:nth-of-type(odd) {
- background-color: $table-bg-accent;
+ background-color: $table-accent-bg;
}
}
@@ -81,7 +81,7 @@
.table-hover {
tbody tr {
@include hover {
- background-color: $table-bg-hover;
+ background-color: $table-hover-bg;
}
}
}
@@ -93,7 +93,7 @@
// inheritance to nested tables.
// Generate the contextual variants
-@include table-row-variant(active, $table-bg-active);
+@include table-row-variant(active, $table-active-bg);
@include table-row-variant(success, $state-success-bg);
@include table-row-variant(info, $state-info-bg);
@include table-row-variant(warning, $state-warning-bg);
@@ -134,14 +134,14 @@
&.table-striped {
tbody tr:nth-of-type(odd) {
- background-color: $table-inverse-bg-accent;
+ background-color: $table-inverse-accent-bg;
}
}
&.table-hover {
tbody tr {
@include hover {
- background-color: $table-inverse-bg-hover;
+ background-color: $table-inverse-hover-bg;
}
}
}
diff --git a/scss/_type.scss b/scss/_type.scss
index fc9c791c4daa4d4ad352a659aa19d76b2a78da9f..5ecc336aef61dbfba2a4b23dad584b23e76c7011 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -11,12 +11,12 @@ h1, h2, h3, h4, h5, h6,
color: $headings-color;
}
-h1, .h1 { font-size: $font-size-h1; }
-h2, .h2 { font-size: $font-size-h2; }
-h3, .h3 { font-size: $font-size-h3; }
-h4, .h4 { font-size: $font-size-h4; }
-h5, .h5 { font-size: $font-size-h5; }
-h6, .h6 { font-size: $font-size-h6; }
+h1, .h1 { font-size: $h1-font-size; }
+h2, .h2 { font-size: $h2-font-size; }
+h3, .h3 { font-size: $h3-font-size; }
+h4, .h4 { font-size: $h4-font-size; }
+h5, .h5 { font-size: $h5-font-size; }
+h6, .h6 { font-size: $h6-font-size; }
.lead {
font-size: $lead-font-size;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e0111d0c93411b1f1c5f3dd8a8cd1813dcee411c..5bd938c6b0235e2d16c4792dce6866b22a353778 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2,6 +2,9 @@
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Table of Contents
@@ -259,12 +262,12 @@ $font-weight-bold: bold !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
-$font-size-h1: 2.5rem !default;
-$font-size-h2: 2rem !default;
-$font-size-h3: 1.75rem !default;
-$font-size-h4: 1.5rem !default;
-$font-size-h5: 1.25rem !default;
-$font-size-h6: 1rem !default;
+$h1-font-size: 2.5rem !default;
+$h2-font-size: 2rem !default;
+$h3-font-size: 1.75rem !default;
+$h4-font-size: 1.5rem !default;
+$h5-font-size: 1.25rem !default;
+$h6-font-size: 1rem !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
@@ -313,12 +316,12 @@ $list-inline-padding: 5px !default;
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default;
-$table-sm-cell-padding: .3rem !default;
+$table-cell-padding-sm: .3rem !default;
$table-bg: transparent !default;
-$table-bg-accent: rgba($black,.05) !default;
-$table-bg-hover: rgba($black,.075) !default;
-$table-bg-active: $table-bg-hover !default;
+$table-accent-bg: rgba($black,.05) !default;
+$table-hover-bg: rgba($black,.075) !default;
+$table-active-bg: $table-hover-bg !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-lighter !default;
@@ -327,8 +330,8 @@ $table-head-bg: $gray-lighter !default;
$table-head-color: $gray !default;
$table-inverse-bg: $gray-dark !default;
-$table-inverse-bg-accent: rgba($white, .05) !default;
-$table-inverse-bg-hover: rgba($white, .075) !default;
+$table-inverse-accent-bg: rgba($white, .05) !default;
+$table-inverse-hover-bg: rgba($white, .075) !default;
$table-inverse-border-color: lighten($gray-dark, 7.5%) !default;
$table-inverse-color: $body-bg !default;
@@ -393,7 +396,7 @@ $btn-transition: all .2s ease-in-out !default;
// Forms
$input-bg: $white !default;
-$input-bg-disabled: $gray-lighter !default;
+$input-disabled-bg: $gray-lighter !default;
$input-color: $gray !default;
$input-border-color: rgba($black,.15) !default;
@@ -404,12 +407,12 @@ $input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
-$input-bg-focus: $input-bg !default;
-$input-border-color-focus: lighten($brand-primary, 25%) !default;
-$input-box-shadow-focus: $input-box-shadow, $btn-focus-box-shadow !default;
-$input-color-focus: $input-color !default;
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: lighten($brand-primary, 25%) !default;
+$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default;
+$input-focus-color: $input-color !default;
-$input-color-placeholder: $gray-light !default;
+$input-placeholder-color: $gray-light !default;
$input-height-border: $input-btn-border-width * 2 !default;
@@ -448,29 +451,29 @@ $custom-control-indicator-bg: #ddd !default;
$custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
-$custom-control-disabled-indicator-bg: $gray-lighter !default;
-$custom-control-disabled-description-color: $gray-light !default;
+$custom-control-indicator-disabled-bg: $gray-lighter !default;
+$custom-control-description-disabled-color: $gray-light !default;
-$custom-control-checked-indicator-color: $white !default;
-$custom-control-checked-indicator-bg: $brand-primary !default;
-$custom-control-checked-indicator-box-shadow: none !default;
+$custom-control-indicator-checked-color: $white !default;
+$custom-control-indicator-checked-bg: $brand-primary !default;
+$custom-control-indicator-checked-box-shadow: none !default;
-$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default;
+$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default;
-$custom-control-active-indicator-color: $white !default;
-$custom-control-active-indicator-bg: lighten($brand-primary, 35%) !default;
-$custom-control-active-indicator-box-shadow: none !default;
+$custom-control-indicator-active-color: $white !default;
+$custom-control-indicator-active-bg: lighten($brand-primary, 35%) !default;
+$custom-control-indicator-active-box-shadow: none !default;
-$custom-checkbox-radius: $border-radius !default;
-$custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-checkbox-border-radius: $border-radius !default;
+$custom-checkbox-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indeterminate-bg: $brand-primary !default;
-$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
-$custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
+$custom-checkbox-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indeterminate-box-shadow: none !default;
-$custom-radio-radius: 50% !default;
-$custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-radio-border-radius: 50% !default;
+$custom-radio-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-padding-y: .375rem !default;
$custom-select-padding-x: .75rem !default;
@@ -569,19 +572,19 @@ $zindex-tooltip: 1070 !default;
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
-$nav-disabled-link-color: $gray-light !default;
+$nav-link-disabled-color: $gray-light !default;
$nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
-$nav-tabs-active-link-color: $gray !default;
-$nav-tabs-active-link-bg: $body-bg !default;
-$nav-tabs-active-link-border-color: #ddd !default;
+$nav-tabs-link-active-color: $gray !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-border-color: #ddd !default;
$nav-pills-border-radius: $border-radius !default;
-$nav-pills-active-link-color: $component-active-color !default;
-$nav-pills-active-link-bg: $component-active-bg !default;
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
// Navbar
@@ -676,7 +679,7 @@ $card-spacer-x: 1.25rem !default;
$card-border-width: 1px !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black,.125) !default;
-$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg: $gray-lightest !default;
$card-bg: $white !default;
@@ -761,15 +764,15 @@ $badge-pill-border-radius: 10rem !default;
$modal-inner-padding: 15px !default;
$modal-dialog-margin: 10px !default;
-$modal-dialog-sm-up-margin-y: 30px !default;
+$modal-dialog-margin-y-sm-up: 30px !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black,.2) !default;
$modal-content-border-width: $border-width !default;
-$modal-content-xs-box-shadow: 0 3px 9px rgba($black,.5) !default;
-$modal-content-sm-up-box-shadow: 0 5px 15px rgba($black,.5) !default;
+$modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5) !default;
+$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 972c9e104509930b10904f7315d2ff0731503bc2..4a1e0bc311464dd58912ce0b8d96750a16087306 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -12,11 +12,11 @@
// contrast against a dark gray background.
@mixin form-control-focus() {
&:focus {
- color: $input-color-focus;
- background-color: $input-bg-focus;
- border-color: $input-border-color-focus;
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
outline: none;
- @include box-shadow($input-box-shadow-focus);
+ @include box-shadow($input-focus-box-shadow);
}
}