diff --git a/site/docs/4.1/assets/scss/_algolia.scss b/site/docs/4.1/assets/scss/_algolia.scss index 7eca6c89cd..e523dec8ef 100644 --- a/site/docs/4.1/assets/scss/_algolia.scss +++ b/site/docs/4.1/assets/scss/_algolia.scss @@ -13,7 +13,7 @@ min-width: 0 !important; max-width: none !important; padding: .75rem 0 !important; - background-color: #fff; + background-color: $white; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); diff --git a/site/docs/4.1/assets/scss/_brand.scss b/site/docs/4.1/assets/scss/_brand.scss index 2d5c5a4cf4..c8c5c2d566 100644 --- a/site/docs/4.1/assets/scss/_brand.scss +++ b/site/docs/4.1/assets/scss/_brand.scss @@ -1,5 +1,3 @@ -// stylelint-disable no-duplicate-selectors - // // Brand guidelines // @@ -10,62 +8,44 @@ width: 100%; margin-bottom: 1rem; overflow: hidden; - color: #563d7c; + color: $bd-purple; background-color: #f9f9f9; border-radius: .25rem; + + .inverse { + color: $white; + background-color: $bd-purple; + } } // Individual items .bd-brand-item { padding: 4rem 0; text-align: center; -} -.bd-brand-item + .bd-brand-item { - border-top: 1px solid #fff; -} -.bd-brand-logos .inverse { - color: #fff; - background-color: #563d7c; -} -// Heading content within -.bd-brand-item h1, -.bd-brand-item h3 { - margin-top: 0; - margin-bottom: 0; -} -.bd-brand-item .bd-booticon { - margin-right: auto; - margin-left: auto; -} + + .bd-brand-item { + border-top: 1px solid $white; + } -// Make the icons stand out on what is/isn't okay -// .bd-brand-item .glyphicon { -// width: 30px; -// height: 30px; -// margin: 10px auto -10px; -// line-height: 30px; -// color: #fff; -// border-radius: 50%; -// } -// .bd-brand-item .glyphicon-ok { -// background-color: #5cb85c; -// } -// .bd-brand-item .glyphicon-remove { -// background-color: #d9534f; -// } + // Heading content within + h1, + h3 { + margin-top: 0; + margin-bottom: 0; + } -@media (min-width: 768px) { - .bd-brand-item { + @include media-breakpoint-up(md) { display: table-cell; width: 1%; - } - .bd-brand-item + .bd-brand-item { - border-top: 0; - border-left: 1px solid #fff; - } - .bd-brand-item h1 { - font-size: 4rem; + + + .bd-brand-item { + border-top: 0; + border-left: 1px solid $white; + } + + h1 { + font-size: 4rem; + } } } @@ -77,24 +57,8 @@ .color-swatches { margin: 0 -5px; overflow: hidden; // clearfix -} -.color-swatch { - float: left; - width: 4rem; - height: 4rem; - margin-right: .25rem; - margin-left: .25rem; - border-radius: .25rem; - - @media (min-width: 768px) { - width: 6rem; - height: 6rem; - } -} - -// Docs colors -.color-swatches { + // Docs colors .bd-purple { background-color: $bd-purple; } @@ -108,3 +72,17 @@ background-color: #f9f9f9; } } + +.color-swatch { + float: left; + width: 4rem; + height: 4rem; + margin-right: .25rem; + margin-left: .25rem; + border-radius: .25rem; + + @include media-breakpoint-up(md) { + width: 6rem; + height: 6rem; + } +} diff --git a/site/docs/4.1/assets/scss/_buttons.scss b/site/docs/4.1/assets/scss/_buttons.scss index 21765b5a99..25bcbbd4b0 100644 --- a/site/docs/4.1/assets/scss/_buttons.scss +++ b/site/docs/4.1/assets/scss/_buttons.scss @@ -9,7 +9,7 @@ &:hover, &:active { - color: #fff; + color: $white; background-color: $bd-purple-bright; border-color: $bd-purple-bright; } diff --git a/site/docs/4.1/assets/scss/_callouts.scss b/site/docs/4.1/assets/scss/_callouts.scss index 401bfd6f52..b11e370c64 100644 --- a/site/docs/4.1/assets/scss/_callouts.scss +++ b/site/docs/4.1/assets/scss/_callouts.scss @@ -9,23 +9,23 @@ border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem; -} -.bd-callout h4 { - margin-top: 0; - margin-bottom: .25rem; -} + h4 { + margin-top: 0; + margin-bottom: .25rem; + } -.bd-callout p:last-child { - margin-bottom: 0; -} + p:last-child { + margin-bottom: 0; + } -.bd-callout code { - border-radius: .25rem; -} + code { + border-radius: .25rem; + } -.bd-callout + .bd-callout { - margin-top: -.25rem; + + .bd-callout { + margin-top: -.25rem; + } } // Variations diff --git a/site/docs/4.1/assets/scss/_clipboard-js.scss b/site/docs/4.1/assets/scss/_clipboard-js.scss index e27d1d4f84..001a6b01e2 100644 --- a/site/docs/4.1/assets/scss/_clipboard-js.scss +++ b/site/docs/4.1/assets/scss/_clipboard-js.scss @@ -10,6 +10,10 @@ + .highlight { margin-top: 0; } + + @include media-breakpoint-up(md) { + display: block; + } } .btn-clipboard { @@ -27,13 +31,7 @@ border-radius: .25rem; &:hover { - color: #fff; + color: $white; background-color: #027de7; } } - -@media (min-width: 768px) { - .bd-clipboard { - display: block; - } -} diff --git a/site/docs/4.1/assets/scss/_examples.scss b/site/docs/4.1/assets/scss/_examples.scss deleted file mode 100644 index a4ec7a2998..0000000000 --- a/site/docs/4.1/assets/scss/_examples.scss +++ /dev/null @@ -1,24 +0,0 @@ -// -// Examples -// - -.bd-examples .img-thumbnail { - margin-bottom: .75rem; -} -.bd-examples h4 { - margin-bottom: .25rem; -} -.bd-examples p { - margin-bottom: 1.25rem; -} - -@media (max-width: 480px) { - .bd-examples { - margin-right: -.75rem; - margin-left: -.75rem; - } - .bd-examples > [class^="col-"] { - padding-right: .75rem; - padding-left: .75rem; - } -} diff --git a/site/docs/4.1/assets/scss/_nav.scss b/site/docs/4.1/assets/scss/_nav.scss index a815773814..6154ab3035 100644 --- a/site/docs/4.1/assets/scss/_nav.scss +++ b/site/docs/4.1/assets/scss/_nav.scss @@ -43,7 +43,7 @@ &.active, &:hover { - color: #fff; + color: $white; background-color: transparent; } diff --git a/site/docs/4.1/assets/scss/docs.scss b/site/docs/4.1/assets/scss/docs.scss index 0f77971034..046521f7f2 100644 --- a/site/docs/4.1/assets/scss/docs.scss +++ b/site/docs/4.1/assets/scss/docs.scss @@ -40,7 +40,6 @@ @import "component-examples"; @import "buttons"; @import "callouts"; -@import "examples"; @import "browser-bugs"; @import "brand"; @import "colors";