diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-08-30 23:32:12 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-09-06 18:06:13 +0300 |
commit | b6b96c174bff4b27800fb9ddec75328d1ef30322 (patch) | |
tree | 2de944e0e0ada9fee70eaa59c158f18a09b7143a /site/static/docs | |
parent | d6945d5e8fa66a84cf363d9ff710684971bdea85 (diff) |
Docs tweaks
- Simplify display headings example markup
- Simplify footer styles
- Remove z-indices hacks in the docs
- Remove redundant modal styling in docs
- Use `escape-svg()` to escape docs sidebar chevron
- Simplify sidebar chevron code
- Cleanup masthead css & fix column width between `md` & `lg`
- Easier to download logo's with the `download` attribute.
- Changed some color codes into variables
- Cleanup brands css
Diffstat (limited to 'site/static/docs')
-rw-r--r-- | site/static/docs/4.3/assets/scss/_ads.scss | 4 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_algolia.scss | 2 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_brand.scss | 27 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_callouts.scss | 2 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_clipboard-js.scss | 4 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_component-examples.scss | 53 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_footer.scss | 6 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_masthead.scss | 26 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_sidebar.scss | 9 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_subnav.scss | 2 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_toc.scss | 2 | ||||
-rw-r--r-- | site/static/docs/4.3/assets/scss/_variables.scss | 1 |
12 files changed, 20 insertions, 118 deletions
diff --git a/site/static/docs/4.3/assets/scss/_ads.scss b/site/static/docs/4.3/assets/scss/_ads.scss index da682b952f..026d1a17a7 100644 --- a/site/static/docs/4.3/assets/scss/_ads.scss +++ b/site/static/docs/4.3/assets/scss/_ads.scss @@ -17,7 +17,7 @@ background-color: rgba(0, 0, 0, .05); a { - color: #333; + color: $gray-800; text-decoration: none; } @@ -35,5 +35,5 @@ .carbon-poweredby { display: block; margin-top: .75rem; - color: #777 !important; + color: $gray-700 !important; } diff --git a/site/static/docs/4.3/assets/scss/_algolia.scss b/site/static/docs/4.3/assets/scss/_algolia.scss index 23781da12a..f86d2fb4b9 100644 --- a/site/static/docs/4.3/assets/scss/_algolia.scss +++ b/site/static/docs/4.3/assets/scss/_algolia.scss @@ -128,7 +128,7 @@ padding: .75rem 1rem 0; @include font-size(.75rem, true); line-height: 1 !important; - color: #767676 !important; + color: $gray-600 !important; border-top: 1px solid rgba(0, 0, 0, .1); } diff --git a/site/static/docs/4.3/assets/scss/_brand.scss b/site/static/docs/4.3/assets/scss/_brand.scss index c3ba73c3e3..be6aa91ffb 100644 --- a/site/static/docs/4.3/assets/scss/_brand.scss +++ b/site/static/docs/4.3/assets/scss/_brand.scss @@ -4,13 +4,7 @@ // Logo series wrapper .bd-brand-logos { - display: table; - width: 100%; - margin-bottom: 1rem; - overflow: hidden; color: $bd-purple; - background-color: #f9f9f9; - @include border-radius(); .inverse { color: $white; @@ -20,32 +14,18 @@ // Individual items .bd-brand-item { - padding: 4rem 0; - text-align: center; + width: 100%; + padding: 4rem 1rem; + .bd-brand-item { border-top: 1px solid $white; } - // Heading content within - h1, - h3 { - margin-top: 0; - margin-bottom: 0; - } - @include media-breakpoint-up(md) { - display: table-cell; - width: 1%; - + .bd-brand-item { border-top: 0; border-left: 1px solid $white; } - - h1 { - @include font-size(4rem); - } } } @@ -55,8 +35,8 @@ // .color-swatches { + display: flex; margin: 0 -5px; - overflow: hidden; // clearfix // Docs colors .bd-purple { @@ -74,7 +54,6 @@ } .color-swatch { - float: left; width: 4rem; height: 4rem; margin-right: .25rem; diff --git a/site/static/docs/4.3/assets/scss/_callouts.scss b/site/static/docs/4.3/assets/scss/_callouts.scss index da7cf87303..a468235573 100644 --- a/site/static/docs/4.3/assets/scss/_callouts.scss +++ b/site/static/docs/4.3/assets/scss/_callouts.scss @@ -6,7 +6,7 @@ padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; - border: 1px solid #eee; + border: 1px solid $gray-200; border-left-width: .25rem; @include border-radius(); diff --git a/site/static/docs/4.3/assets/scss/_clipboard-js.scss b/site/static/docs/4.3/assets/scss/_clipboard-js.scss index 569094321b..c893533973 100644 --- a/site/static/docs/4.3/assets/scss/_clipboard-js.scss +++ b/site/static/docs/4.3/assets/scss/_clipboard-js.scss @@ -24,13 +24,13 @@ display: block; padding: .25rem .5rem; @include font-size(.75em); - color: #818a91; + color: $gray-800; background-color: transparent; border: 0; @include border-radius(); &:hover { color: $white; - background-color: #027de7; + background-color: $primary; } } diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss index 41aa04fb71..71822578f8 100644 --- a/site/static/docs/4.3/assets/scss/_component-examples.scss +++ b/site/static/docs/4.3/assets/scss/_component-examples.scss @@ -125,29 +125,6 @@ } } -// Typography -.bd-example-type { - .table { - td { - padding: 1rem 0; - border-color: #eee; - } - tr:first-child td { - border-top: 0; - } - } - - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: 0; - margin-bottom: 0; - } -} - // Images .bd-example { > svg + svg, @@ -172,6 +149,7 @@ .bd-example > .list-group { max-width: 400px; } + .bd-example > [class*="list-group-horizontal"] { max-width: 100%; } @@ -183,6 +161,7 @@ position: static; margin: -1rem -1rem 1rem; } + .fixed-bottom { position: static; margin: 1rem -1rem -1rem; @@ -205,38 +184,13 @@ margin-bottom: .5rem; } -// Example modals -.modal { - z-index: 1072; - - .tooltip, - .popover { - z-index: 1073; - } -} - -.modal-backdrop { - z-index: 1071; -} - .bd-example-modal { background-color: #fafafa; .modal { - position: relative; - top: auto; - right: auto; - bottom: auto; - left: auto; - z-index: 1; + position: static; display: block; } - - .modal-dialog { - left: auto; - margin-right: auto; - margin-left: auto; - } } // Tooltips @@ -308,6 +262,7 @@ background-color: transparent; border: 0; } + pre code { @include font-size(inherit); color: $gray-900; // Effectively the base text color diff --git a/site/static/docs/4.3/assets/scss/_footer.scss b/site/static/docs/4.3/assets/scss/_footer.scss index 29d31df3a2..c5f9c1b100 100644 --- a/site/static/docs/4.3/assets/scss/_footer.scss +++ b/site/static/docs/4.3/assets/scss/_footer.scss @@ -4,8 +4,6 @@ .bd-footer { @include font-size(.875rem); - text-align: center; - background-color: #f7f7f7; a { font-weight: 600; @@ -20,10 +18,6 @@ p { margin-bottom: 0; } - - @include media-breakpoint-up(sm) { - text-align: left; - } } .bd-footer-links { diff --git a/site/static/docs/4.3/assets/scss/_masthead.scss b/site/static/docs/4.3/assets/scss/_masthead.scss index 261f37eb49..71121746cd 100644 --- a/site/static/docs/4.3/assets/scss/_masthead.scss +++ b/site/static/docs/4.3/assets/scss/_masthead.scss @@ -1,8 +1,7 @@ // stylelint-disable declaration-no-important .bd-masthead { - position: relative; - padding: 3rem ($grid-gutter-width / 2); + padding: 3rem 0; background-image: linear-gradient(45deg, #fafafa, #f5f5f5); h1 { @@ -17,27 +16,10 @@ .btn { padding: .8rem 2rem; font-weight: 600; - @include font-size(1.25rem); - } - - .carbonad { - margin-top: 0 !important; - margin-bottom: -3rem !important; } @include media-breakpoint-up(sm) { - padding-top: 5rem; - padding-bottom: 5rem; - - .carbonad { - margin-bottom: 0 !important; - } - } - - @include media-breakpoint-up(md) { - .carbonad { - margin-top: 3rem !important; - } + padding: 5rem 0; } } @@ -74,7 +56,3 @@ width: 6rem; margin: 2rem 0; } - -.masthead-followup { - .bd-clipboard { display: none; } -} diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss index bd88c1cb27..5cb25bbc36 100644 --- a/site/static/docs/4.3/assets/scss/_sidebar.scss +++ b/site/static/docs/4.3/assets/scss/_sidebar.scss @@ -40,14 +40,9 @@ .bd-sidenav-group { &.has-children .bd-sidenav-group-link::before { display: inline-block; - width: .875rem; - height: .875rem; margin-right: .25rem; - content: ""; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center center; - opacity: .5; + line-height: 0; // Align in the middle + content: escape-svg($sidebar-colapse-icon); } &.active { diff --git a/site/static/docs/4.3/assets/scss/_subnav.scss b/site/static/docs/4.3/assets/scss/_subnav.scss index 38cb628ae4..7f9696b279 100644 --- a/site/static/docs/4.3/assets/scss/_subnav.scss +++ b/site/static/docs/4.3/assets/scss/_subnav.scss @@ -18,7 +18,7 @@ @supports (position: sticky) { position: sticky; top: 0; - z-index: 1071; // over everything in bootstrap + z-index: $zindex-sticky; } } } diff --git a/site/static/docs/4.3/assets/scss/_toc.scss b/site/static/docs/4.3/assets/scss/_toc.scss index c4f26e67a7..2ad4f8338d 100644 --- a/site/static/docs/4.3/assets/scss/_toc.scss +++ b/site/static/docs/4.3/assets/scss/_toc.scss @@ -3,7 +3,7 @@ .bd-toc nav { padding-top: .125em; padding-bottom: .125em; - border-left: .25em solid #eee; + border-left: .25em solid $gray-200; > ul { padding-left: .5rem; diff --git a/site/static/docs/4.3/assets/scss/_variables.scss b/site/static/docs/4.3/assets/scss/_variables.scss index a71fd77c9b..b558796544 100644 --- a/site/static/docs/4.3/assets/scss/_variables.scss +++ b/site/static/docs/4.3/assets/scss/_variables.scss @@ -10,6 +10,7 @@ $bd-info: #5bc0de; $bd-warning: #f0ad4e; $bd-danger: #d9534f; $dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>"); +$sidebar-colapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>"); // Enable responsive font sizes for font sizes defined in the docs // The weird if test is made as a workaround to prevent a false fusv error. |