diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index 114b16243a..da0d9e7202 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -149,16 +149,6 @@ margin-left: .5rem; } } -// .bd-example > .img-circle, -// .bd-example > .img-rounded, -// .bd-example > .img-thumbnail { -// margin: .25rem; -// } - -// Tables -// .bd-example > .table-responsive > .table { -// background-color: #fff; -// } // Buttons .bd-example > .btn-group { diff --git a/docs/assets/scss/_layout.scss b/docs/assets/scss/_content.scss similarity index 58% rename from docs/assets/scss/_layout.scss rename to docs/assets/scss/_content.scss index 1c4ad62224..017dad413f 100644 --- a/docs/assets/scss/_layout.scss +++ b/docs/assets/scss/_content.scss @@ -1,3 +1,7 @@ +// +// Automatically style Markdown-based tables like a Bootstrap `.table`. +// + .bd-content { > table { display: block; @@ -32,61 +36,6 @@ } } - -.bd-pageheader { - padding: 2rem .75rem; - margin-bottom: 1.5rem; - color: $bd-purple-light; - text-align: center; - background-color: $bd-purple; - - .container { - position: relative; - } - - h1 { - font-size: 3rem; - font-weight: normal; - color: #fff; - } - - p { - margin-bottom: 0; - font-size: 1.5rem; - } - - @include media-breakpoint-up(sm) { - padding-top: 4rem; - padding-bottom: 4rem; - margin-bottom: 3rem; - text-align: left; - - .carbonad { - margin: 2rem 0 0 !important; - } - } - - @include media-breakpoint-up(md) { - h1 { - font-size: 4rem; - } - } - - @include media-breakpoint-up(lg) { - h1, - p { - margin-right: 380px; - } - - .carbonad { - position: absolute; - top: 0; - right: .75rem; // offset from the .container's padding - margin: 0 !important; - } - } -} - // // Docs sections // diff --git a/docs/assets/scss/_featured-sites.scss b/docs/assets/scss/_featured-sites.scss new file mode 100644 index 0000000000..b1671c3832 --- /dev/null +++ b/docs/assets/scss/_featured-sites.scss @@ -0,0 +1,21 @@ +.bd-featured-sites { + margin-right: -1px; + margin-left: -1px; +} +.bd-featured-sites .col-xs-6 { + padding: 1px; +} +.bd-featured-sites .img-responsive { + margin-top: 0; +} + +@media (min-width: 768px) { + .bd-featured-sites .col-sm-3:first-child img { + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; + } + .bd-featured-sites .col-sm-3:last-child img { + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; + } +} diff --git a/docs/assets/scss/_featurettes.scss b/docs/assets/scss/_featurettes.scss new file mode 100644 index 0000000000..ba0c734388 --- /dev/null +++ b/docs/assets/scss/_featurettes.scss @@ -0,0 +1,81 @@ +.bd-featurette { + padding-top: 3rem; + padding-bottom: 3rem; + font-size: 1rem; + line-height: 1.5; + color: #555; + // text-align: center; + background-color: #fff; + border-top: 1px solid #eee; + + .highlight { + text-align: left; + } + + @include media-breakpoint-up(md) { + .col-sm-6:first-child { + padding-right: ($grid-gutter-width * 1.5); + }; + .col-sm-6:last-child { + padding-left: ($grid-gutter-width * 1.5); + } + } +} + +.bd-featurette-title { + margin-bottom: .5rem; + font-size: 2rem; + font-weight: normal; + color: #333; + + + .lead { + font-size: 1.5rem; + margin-bottom: 2rem; + } +} +.half-rule { + width: 6rem; + margin: 2.5rem 0; +} +.bd-featurette h4 { + margin-top: 1rem; + margin-bottom: .5rem; + font-weight: normal; + color: #333; +} +.bd-featurette-img { + display: block; + margin-bottom: 1.25rem; + color: #333; +} +.bd-featurette-img:hover { + color: $brand-primary; + text-decoration: none; +} +.bd-featurette-img img { + display: block; + margin-bottom: 1rem; +} + +@media (min-width: 480px) { + .bd-featurette .img-responsive { + margin-top: 2rem; + } +} +@media (min-width: 768px) { + .bd-featurette { + padding-top: 6rem; + padding-bottom: 6rem; + } + .bd-featurette-title { + font-size: 2.5rem; + } + .bd-featurette .lead { + max-width: 80%; + // margin-right: auto; + // margin-left: auto; + } + .bd-featurette .img-responsive { + margin-top: 0; + } +} diff --git a/docs/assets/scss/_homepage.scss b/docs/assets/scss/_homepage.scss deleted file mode 100644 index fddae50ef3..0000000000 --- a/docs/assets/scss/_homepage.scss +++ /dev/null @@ -1,236 +0,0 @@ -// -// Main navbar -// - -.bd-navbar { - padding-top: 1rem; - padding-bottom: 1rem; - margin-bottom: 0; - // background-color: $bd-graphite; - - .nav-link { - color: $bd-graphite-light; - - &.active, - &:hover, - &:focus { - color: $gray-dark; - background-color: transparent; - } - - &.active { - font-weight: 500; - } - } -} - - -// -// Masthead (headings and download button) -// - -.bd-masthead { - position: relative; - padding: ($grid-gutter-width / 2); - color: $bd-purple-light; - text-align: center; - background: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%)); - background: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%)); - - .bd-booticon { - margin: 0 auto 2rem; - color: $bd-purple-light; - border-color: $bd-purple-light; - } - - h1 { - font-weight: 300; - line-height: 1; - } - - .lead { - margin-left: auto; - margin-right: auto; - margin-bottom: 2rem; - font-size: 1rem; - color: #fff; - } - - .version { - margin-top: -1rem; - margin-bottom: 2rem; - } - - .btn { - width: 100%; - padding: 1rem 2rem; - font-size: 1.25rem; - font-weight: 500; - color: $bd-yellow; - border-color: $bd-yellow; - - &:hover { - color: $bd-graphite; - background-color: $bd-yellow; - border-color: $bd-yellow; - } - } - - .carbonad { - margin-bottom: -2rem !important; - } - - @include media-breakpoint-up(sm) { - padding-top: 8rem; - padding-bottom: 2rem; - - .btn { - width: auto; - } - - .carbonad { - margin-bottom: 0 !important; - } - } - - @include media-breakpoint-up(md) { - padding-bottom: 4rem; - - .bd-header { - margin-bottom: 4rem; - } - - h1 { - font-size: 4rem; - } - - .lead { - font-size: 1.5rem; - } - - .carbonad { - margin-top: 3rem !important; - } - } - - @include media-breakpoint-up(lg) { - .lead { - width: 85%; - font-size: 2rem; - } - } -} - - -// -// Homepage featurettes -// - -.bd-featurette { - padding-top: 3rem; - padding-bottom: 3rem; - font-size: 1rem; - line-height: 1.5; - color: #555; - // text-align: center; - background-color: #fff; - border-top: 1px solid #eee; - - .highlight { - text-align: left; - } - - @include media-breakpoint-up(md) { - .col-sm-6:first-child { - padding-right: ($grid-gutter-width * 1.5); - }; - .col-sm-6:last-child { - padding-left: ($grid-gutter-width * 1.5); - } - } -} - -.bd-featurette-title { - margin-bottom: .5rem; - font-size: 2rem; - font-weight: normal; - color: #333; - - + .lead { - font-size: 1.5rem; - margin-bottom: 2rem; - } -} -.half-rule { - width: 6rem; - margin: 2.5rem 0; -} -.bd-featurette h4 { - margin-top: 1rem; - margin-bottom: .5rem; - font-weight: normal; - color: #333; -} -.bd-featurette-img { - display: block; - margin-bottom: 1.25rem; - color: #333; -} -.bd-featurette-img:hover { - color: $brand-primary; - text-decoration: none; -} -.bd-featurette-img img { - display: block; - margin-bottom: 1rem; -} - -@media (min-width: 480px) { - .bd-featurette .img-responsive { - margin-top: 2rem; - } -} -@media (min-width: 768px) { - .bd-featurette { - padding-top: 6rem; - padding-bottom: 6rem; - } - .bd-featurette-title { - font-size: 2.5rem; - } - .bd-featurette .lead { - max-width: 80%; - // margin-right: auto; - // margin-left: auto; - } - .bd-featurette .img-responsive { - margin-top: 0; - } -} - - -// -// Featured Expo sites -// - -.bd-featured-sites { - margin-right: -1px; - margin-left: -1px; -} -.bd-featured-sites .col-xs-6 { - padding: 1px; -} -.bd-featured-sites .img-responsive { - margin-top: 0; -} - -@media (min-width: 768px) { - .bd-featured-sites .col-sm-3:first-child img { - border-top-left-radius: .25rem; - border-bottom-left-radius: .25rem; - } - .bd-featured-sites .col-sm-3:last-child img { - border-top-right-radius: .25rem; - border-bottom-right-radius: .25rem; - } -} diff --git a/docs/assets/scss/_masthead.scss b/docs/assets/scss/_masthead.scss new file mode 100644 index 0000000000..a0dfe09e17 --- /dev/null +++ b/docs/assets/scss/_masthead.scss @@ -0,0 +1,91 @@ +.bd-masthead { + position: relative; + padding: ($grid-gutter-width / 2); + color: $bd-purple-light; + text-align: center; + background: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%)); + background: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%)); + + .bd-booticon { + margin: 0 auto 2rem; + color: $bd-purple-light; + border-color: $bd-purple-light; + } + + h1 { + font-weight: 300; + line-height: 1; + } + + .lead { + margin-left: auto; + margin-right: auto; + margin-bottom: 2rem; + font-size: 1rem; + color: #fff; + } + + .version { + margin-top: -1rem; + margin-bottom: 2rem; + } + + .btn { + width: 100%; + padding: 1rem 2rem; + font-size: 1.25rem; + font-weight: 500; + color: $bd-yellow; + border-color: $bd-yellow; + + &:hover { + color: $bd-graphite; + background-color: $bd-yellow; + border-color: $bd-yellow; + } + } + + .carbonad { + margin-bottom: -2rem !important; + } + + @include media-breakpoint-up(sm) { + padding-top: 8rem; + padding-bottom: 2rem; + + .btn { + width: auto; + } + + .carbonad { + margin-bottom: 0 !important; + } + } + + @include media-breakpoint-up(md) { + padding-bottom: 4rem; + + .bd-header { + margin-bottom: 4rem; + } + + h1 { + font-size: 4rem; + } + + .lead { + font-size: 1.5rem; + } + + .carbonad { + margin-top: 3rem !important; + } + } + + @include media-breakpoint-up(lg) { + .lead { + width: 85%; + font-size: 2rem; + } + } +} diff --git a/docs/assets/scss/_nav.scss b/docs/assets/scss/_nav.scss new file mode 100644 index 0000000000..95638014b5 --- /dev/null +++ b/docs/assets/scss/_nav.scss @@ -0,0 +1,25 @@ +// +// Main navbar +// + +.bd-navbar { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 0; + // background-color: $bd-graphite; + + .nav-link { + color: $bd-graphite-light; + + &.active, + &:hover, + &:focus { + color: $gray-dark; + background-color: transparent; + } + + &.active { + font-weight: 500; + } + } +} diff --git a/docs/assets/scss/_page-header.scss b/docs/assets/scss/_page-header.scss index 0eecc563af..66f8257669 100644 --- a/docs/assets/scss/_page-header.scss +++ b/docs/assets/scss/_page-header.scss @@ -1,45 +1,53 @@ -// -// Page headers -// +.bd-pageheader { + padding: 2rem .75rem; + margin-bottom: 1.5rem; + color: $bd-purple-light; + text-align: center; + background-color: $bd-purple; -// .bd-header { -// padding-top: 2rem; -// padding-bottom: 2rem; -// margin-bottom: 2rem; -// text-align: center; -// background-color: $bd-purple; + .container { + position: relative; + } -// .container { -// position: relative; -// } + h1 { + font-size: 3rem; + font-weight: normal; + color: #fff; + } -// h1 { -// margin-top: 0; -// color: #fff; -// } + p { + margin-bottom: 0; + font-size: 1.5rem; + } -// p { -// margin-bottom: 0; -// font-weight: 300; -// color: rgba(255,255,255,.65); -// } + @include media-breakpoint-up(sm) { + padding-top: 4rem; + padding-bottom: 4rem; + margin-bottom: 3rem; + text-align: left; -// @media (min-width: 768px) { -// text-align: left; + .carbonad { + margin: 2rem 0 0 !important; + } + } -// h1 { -// font-size: 4rem; -// line-height: 1; -// } -// } + @include media-breakpoint-up(md) { + h1 { + font-size: 4rem; + } + } -// @media (min-width: 992px) { -// padding-top: 4rem; -// padding-bottom: 4rem; + @include media-breakpoint-up(lg) { + h1, + p { + margin-right: 380px; + } -// h1, -// p { -// margin-right: 380px; -// } -// } -// } + .carbonad { + position: absolute; + top: 0; + right: .75rem; // offset from the .container's padding + margin: 0 !important; + } + } +} diff --git a/docs/assets/scss/_social-buttons.scss b/docs/assets/scss/_social-buttons.scss deleted file mode 100644 index 36a678c4ec..0000000000 --- a/docs/assets/scss/_social-buttons.scss +++ /dev/null @@ -1,31 +0,0 @@ -// -// Social buttons -// - -.bd-social { - margin-bottom: 1.5rem; - margin-left: -.5rem; -} -.bd-social-buttons { - display: inline-block; - padding-left: 0; - margin-bottom: 0; - list-style: none; -} -.bd-social-buttons li { - display: inline-block; - padding: .25rem .5rem; - line-height: 1; -} -.bd-social-buttons .twitter-follow-button { - width: 225px !important; -} -.bd-social-buttons .twitter-share-button { - width: 98px !important; -} - -// Style the GitHub buttons via CSS instead of inline attributes -.github-btn { - overflow: hidden; - border: 0; -} diff --git a/docs/assets/scss/_team.scss b/docs/assets/scss/_team.scss index d42bd0778f..5b386d99fc 100644 --- a/docs/assets/scss/_team.scss +++ b/docs/assets/scss/_team.scss @@ -1,7 +1,3 @@ -// -// Team members -// - .bd-team { margin-bottom: 1.5rem; @@ -21,7 +17,7 @@ height: 1.25rem; margin-top: .25rem; } - + img { float: left; width: 2rem; diff --git a/docs/assets/scss/_zeroclipboard.scss b/docs/assets/scss/_zeroclipboard.scss index a1c987d92d..0b6b3e77ae 100644 --- a/docs/assets/scss/_zeroclipboard.scss +++ b/docs/assets/scss/_zeroclipboard.scss @@ -1,6 +1,6 @@ +// ZeroClipboard // -// ZeroClipboard styles -// +// Flash-based `Copy` buttons for code snippets. .zero-clipboard { position: relative; diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 47d7ebc9f2..437207d4d5 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -38,14 +38,16 @@ $bd-warning: #f0ad4e; $bd-info: #5bc0de; // Load docs components -@import "layout"; -@import "sidebar"; @import "booticon"; -@import "homepage"; +@import "nav"; +@import "masthead"; +@import "featurettes"; +@import "featured-sites"; @import "ads"; -@import "footer"; -@import "social-buttons"; +@import "content"; @import "page-header"; +@import "sidebar"; +@import "footer"; @import "component-examples"; @import "responsive-tests"; @import "buttons";