From a7623cdb62e1d0eed92957563c0c30e0959515b1 Mon Sep 17 00:00:00 2001 From: Kevin Heis Date: Mon, 26 Apr 2021 09:18:25 -0700 Subject: [PATCH] Reorganize SCSS without changing any of the properties or values (#18963) * Reorganize SCSS without changing any of the properties or values * Mis-moved a few files * Split up "other" --- stylesheets/alerts.scss | 13 ++ stylesheets/article.scss | 142 ------------------ stylesheets/breadcrumbs.scss | 18 +++ stylesheets/bump-link.scss | 22 +++ stylesheets/code.scss | 47 ++++++ stylesheets/deprecation-banner.scss | 24 +++ stylesheets/extended-markdown.scss | 17 +++ stylesheets/featured-links.scss | 16 ++ stylesheets/{new-mktg.scss => font-mktg.scss} | 41 ----- stylesheets/headings.scss | 37 +++++ stylesheets/helpfulness.scss | 8 + stylesheets/images.scss | 28 ++++ stylesheets/index.scss | 37 +++-- stylesheets/lists.scss | 77 ++++++++++ stylesheets/overrides.scss | 134 ----------------- stylesheets/summary.scss | 23 +++ stylesheets/syntax-highlighting.scss | 13 -- stylesheets/tables.scss | 7 + stylesheets/type.scss | 41 ----- stylesheets/underline-dashed.scss | 13 ++ 20 files changed, 374 insertions(+), 384 deletions(-) create mode 100644 stylesheets/alerts.scss create mode 100644 stylesheets/breadcrumbs.scss create mode 100644 stylesheets/bump-link.scss create mode 100644 stylesheets/code.scss create mode 100644 stylesheets/deprecation-banner.scss create mode 100644 stylesheets/extended-markdown.scss create mode 100644 stylesheets/featured-links.scss rename stylesheets/{new-mktg.scss => font-mktg.scss} (63%) create mode 100644 stylesheets/headings.scss create mode 100644 stylesheets/helpfulness.scss create mode 100644 stylesheets/images.scss create mode 100644 stylesheets/lists.scss delete mode 100644 stylesheets/overrides.scss create mode 100644 stylesheets/summary.scss delete mode 100644 stylesheets/type.scss create mode 100644 stylesheets/underline-dashed.scss diff --git a/stylesheets/alerts.scss b/stylesheets/alerts.scss new file mode 100644 index 000000000000..e98d25eb78e4 --- /dev/null +++ b/stylesheets/alerts.scss @@ -0,0 +1,13 @@ +/* Notes, tips, warning, and danger styles +------------------------------------------------------------------------------*/ + +.note, +.tip, +.warning, +.danger { + // remove extra space under lists inside of notes + ul, + ol { + margin-bottom: 0; + } +} diff --git a/stylesheets/article.scss b/stylesheets/article.scss index f7fdf6349a67..c4da64df2e41 100644 --- a/stylesheets/article.scss +++ b/stylesheets/article.scss @@ -41,145 +41,3 @@ .article-grid-body { grid-area: bottom; } - -/* Deprecation banner -------------------------------------------------------------------------------*/ -.deprecation-banner { - & + .alert { - margin-top: 5px; - } - - & > *:first-child { - margin-top: 0; - } - - & > *:last-child { - margin-bottom: 0; - } - - b, - strong { - font-weight: bold; - } - - p { - margin: 0; - } -} - -/* Code style overrides -------------------------------------------------------------------------------*/ - -.markdown-body .highlight pre, -.markdown-body pre { - margin-top: 10px; -} - -.height-constrained-code-block pre { - max-height: 500px; - overflow: auto; -} - -/* Breadcrumbs -------------------------------------------------------------------------------*/ - -.breadcrumbs-wrapper { - @include breakpoint(xl) { - height: 39px; - } -} - -.breadcrumbs a:not(:last-child)::after, -.breadcrumbs span:not(:last-child)::after { - content: "/"; - color: var(--color-auto-gray-4); - padding-right: $spacer-1; - padding-left: $spacer-2; - display: inline-block; -} - -/* Numbered procedures (step 1, step 2, ...) -------------------------------------------------------------------------------*/ - -.markdown-body ol { - counter-reset: li; - list-style: none; - position: relative; - padding-bottom: 10px; - padding-left: 0; -} - -.markdown-body ol > li { - padding: 15px 0 15px 55px; - position: relative; - margin-bottom: 5px; - border-top: 3px solid var(--color-auto-gray-2); -} - -.markdown-body ol > li:before { - content: counter(li); - counter-increment: li; - position: absolute; - top: 10px; - left: 0; - height: 100%; - width: 30px; - padding: 0 10px 0 0; - color: var(--color-auto-gray-4); - font-size: 22px; - font-weight: bold; - line-height: 35px; - text-align: right; -} - -.markdown-body ol > li > p { - margin: 0; -} - -.markdown-body ol > li > p:first-child { - margin-top: 0; -} - -.markdown-body ol > li:after { - content: "."; - display: block; - clear: both; - visibility: hidden; - line-height: 0; - height: 0; -} - -.procedural-image-wrapper { - display: block; - padding: 10px 0; - margin: 20px auto 0 auto; -} - -.procedural-image-wrapper img { - border-radius: 5px; - border: 2px solid var(--color-auto-gray-2); - width: auto; - height: auto; - max-height: 500px; -} - -// make sure images that contain emoji render at the expected size -img[src*="https://github.githubassets.com/images/icons/emoji"] { - height: 20; - width: 20; - align: absmiddle; -} - -/* Notes, tips, warning, and danger styles -------------------------------------------------------------------------------*/ - -.note, -.tip, -.warning, -.danger { - // remove extra space under lists inside of notes - ul, - ol { - margin-bottom: 0; - } -} diff --git a/stylesheets/breadcrumbs.scss b/stylesheets/breadcrumbs.scss new file mode 100644 index 000000000000..417904233092 --- /dev/null +++ b/stylesheets/breadcrumbs.scss @@ -0,0 +1,18 @@ + +/* Breadcrumbs +------------------------------------------------------------------------------*/ + +.breadcrumbs-wrapper { + @include breakpoint(xl) { + height: 39px; + } +} + +.breadcrumbs a:not(:last-child)::after, +.breadcrumbs span:not(:last-child)::after { + content: "/"; + color: var(--color-auto-gray-4); + padding-right: $spacer-1; + padding-left: $spacer-2; + display: inline-block; +} diff --git a/stylesheets/bump-link.scss b/stylesheets/bump-link.scss new file mode 100644 index 000000000000..df07edc7988b --- /dev/null +++ b/stylesheets/bump-link.scss @@ -0,0 +1,22 @@ +// Arrow links +.Bump-link-symbol { + display: inline-block; + transition: $transition-time / 2; + transform: translateX(0); +} + +.Bump-link:hover .Bump-link-symbol { + transform: translateX(3px); +} + +.Bump-link--hover .Bump-link-symbol { + color: inherit; + opacity: 0; + transition: $transition-time / 2; + transform: translateX(0); +} + +.Bump-link--hover:hover .Bump-link-symbol { + opacity: 1; + transform: translateX(3px); +} diff --git a/stylesheets/code.scss b/stylesheets/code.scss new file mode 100644 index 000000000000..3ba21f542da1 --- /dev/null +++ b/stylesheets/code.scss @@ -0,0 +1,47 @@ +/* Code style overrides +------------------------------------------------------------------------------*/ + +.markdown-body .highlight pre, +.markdown-body pre { + margin-top: 10px; +} + +.height-constrained-code-block pre { + max-height: 500px; + overflow: auto; +} + +.markdown-body .code-extra { + margin-top: $spacer-4; + + pre { + margin-top: 0 !important; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + border-left: 1px var(--color-auto-gray-2) solid !important; + border-bottom: 1px var(--color-auto-gray-2) solid !important; + border-right: 1px var(--color-auto-gray-2) solid !important; + } +} + +/* code styles */ +pre .redbox { + border: 2px solid var(--color-auto-red-5); + padding: 2px; + border-radius: 2px; + margin-right: 2px; +} + +pre .greenbox { + border: 2px solid var(--color-auto-green-5); + padding: 2px; + border-radius: 2px; + margin-right: 2px; +} + +pre .bluebox { + border: 2px solid var(--color-auto-blue-5); + padding: 2px; + border-radius: 2px; + margin-right: 2px; +} diff --git a/stylesheets/deprecation-banner.scss b/stylesheets/deprecation-banner.scss new file mode 100644 index 000000000000..64d365eed1ba --- /dev/null +++ b/stylesheets/deprecation-banner.scss @@ -0,0 +1,24 @@ +/* Deprecation banner +------------------------------------------------------------------------------*/ +.deprecation-banner { + & + .alert { + margin-top: 5px; + } + + & > *:first-child { + margin-top: 0; + } + + & > *:last-child { + margin-bottom: 0; + } + + b, + strong { + font-weight: bold; + } + + p { + margin: 0; + } +} diff --git a/stylesheets/extended-markdown.scss b/stylesheets/extended-markdown.scss new file mode 100644 index 000000000000..80f930bc877f --- /dev/null +++ b/stylesheets/extended-markdown.scss @@ -0,0 +1,17 @@ +.extended-markdown p { + margin: 0; +} + +.extended-markdown p:not(:first-child) { + margin-top: 15px; +} + +.extended-markdown.note pre { + background: none; + padding: 10px 10px 10px 0; + margin-bottom: 0; +} + +.extended-markdown.note pre code { + color: var(--color-text-primary); +} diff --git a/stylesheets/featured-links.scss b/stylesheets/featured-links.scss new file mode 100644 index 000000000000..8c2def48f201 --- /dev/null +++ b/stylesheets/featured-links.scss @@ -0,0 +1,16 @@ +/* Getting Started and Popular Articles sections in article layout */ +.markdown-body div.featured-links { + padding-bottom: 30px; +} + +.markdown-body div.featured-links-heading { + padding-top: 24px; +} + +.markdown-body div.featured-links p.link-with-intro-intro { + margin-bottom: 5px; +} + +.markdown-body div.featured-links h4.link-with-intro-title { + margin-top: 0; +} diff --git a/stylesheets/new-mktg.scss b/stylesheets/font-mktg.scss similarity index 63% rename from stylesheets/new-mktg.scss rename to stylesheets/font-mktg.scss index ecef50779a2b..5c67076e51f3 100644 --- a/stylesheets/new-mktg.scss +++ b/stylesheets/font-mktg.scss @@ -1,45 +1,4 @@ -/* Styles not incorporated into Primer yet -------------------------------------------------------------------------------*/ - -// Text styling -.underline-dashed { - display: inline; - padding-bottom: $spacer-1; - background-image: linear-gradient( - to right, - var(--color-auto-gray-3) 50%, - transparent 0% - ); - background-repeat: repeat-x; - background-position: bottom; - background-size: 10px 1px; -} - -// Arrow links -.Bump-link-symbol { - display: inline-block; - transition: $transition-time / 2; - transform: translateX(0); -} - -.Bump-link:hover .Bump-link-symbol { - transform: translateX(3px); -} - -.Bump-link--hover .Bump-link-symbol { - color: inherit; - opacity: 0; - transition: $transition-time / 2; - transform: translateX(0); -} - -.Bump-link--hover:hover .Bump-link-symbol { - opacity: 1; - transform: translateX(3px); -} - // stylelint-disable primer/no-unused-vars - // Typography $marketing-font-path: "/assets/fonts/alliance/"; diff --git a/stylesheets/headings.scss b/stylesheets/headings.scss new file mode 100644 index 000000000000..2a20f81cbb3f --- /dev/null +++ b/stylesheets/headings.scss @@ -0,0 +1,37 @@ +h1, +h2, +h3, +h4 { + a { + color: var(--color-auto-gray-9); + } +} + +// all h3 headers that are links should be blue-500 +// except those on each product's toc +h3 a { + color: var(--color-auto-blue-5); +} + +.markdown-body { + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: $font-mktg; + font-weight: $font-weight-semibold; + padding-top: $spacer-3; + } +} + +// needs specificity to override +.markdown-body .lead-mktg p { + color: var(--color-auto-gray-9); +} + +.product-callout p, +.contributor-callout p { + margin: 0; +} diff --git a/stylesheets/helpfulness.scss b/stylesheets/helpfulness.scss new file mode 100644 index 000000000000..a5ad0f41a3f4 --- /dev/null +++ b/stylesheets/helpfulness.scss @@ -0,0 +1,8 @@ +/* Helpfulness survey override */ +:checked + .x-radio-label { + background: var(--color-auto-blue-5); + + svg { + fill: var(--color-auto-inverse); + } +} diff --git a/stylesheets/images.scss b/stylesheets/images.scss new file mode 100644 index 000000000000..b243c4a7b276 --- /dev/null +++ b/stylesheets/images.scss @@ -0,0 +1,28 @@ +.procedural-image-wrapper { + display: block; + padding: 10px 0; + margin: 20px auto 0 auto; +} + +.procedural-image-wrapper img { + border-radius: 5px; + border: 2px solid var(--color-auto-gray-2); + width: auto; + height: auto; + max-height: 500px; +} + +// make sure images that contain emoji render at the expected size +img[src*="https://github.githubassets.com/images/icons/emoji"] { + height: 20; + width: 20; + align: absmiddle; +} + +.markdown-body li img { + max-width: calc(100% - 32px); +} + +.markdown-body img { + max-height: 600px; +} diff --git a/stylesheets/index.scss b/stylesheets/index.scss index 839832056c81..338ece7d7d72 100644 --- a/stylesheets/index.scss +++ b/stylesheets/index.scss @@ -7,24 +7,35 @@ $marketing-font-path: "/dist/fonts/"; @import "@primer/css/marketing/index.scss"; +@import "font-mktg.scss"; -// Additional styles -@import "new-mktg.scss"; -@import "type.scss"; -@import "nav.scss"; +@import "alerts.scss"; @import "article.scss"; -@import "search.scss"; -@import "overrides.scss"; -@import "sidebar.scss"; -@import "scroll-button.scss"; +@import "breadcrumbs.scss"; +@import "bump-link.scss"; +@import "code.scss"; +@import "deprecation-banner.scss"; +@import "dev-toc.scss"; @import "explorer.scss"; -@import "syntax-highlighting.scss"; -@import "tables.scss"; +@import "extended-markdown.scss"; +@import "featured-links.scss"; +@import "font-mktg.scss"; +@import "gradient.scss"; +@import "headings.scss"; +@import "helpfulness.scss"; +@import "images.scss"; +@import "lists.scss"; +@import "nav.scss"; @import "opacity.scss"; @import "print.scss"; -@import "shadows.scss"; @import "product-landing.scss"; -@import "dev-toc.scss"; -@import "gradient.scss"; @import "product-sublanding.scss"; @import "release-notes.scss"; +@import "scroll-button.scss"; +@import "search.scss"; +@import "shadows.scss"; +@import "sidebar.scss"; +@import "summary.scss"; +@import "syntax-highlighting.scss"; +@import "tables.scss"; +@import "underline-dashed.scss"; diff --git a/stylesheets/lists.scss b/stylesheets/lists.scss new file mode 100644 index 000000000000..05d488dc87e1 --- /dev/null +++ b/stylesheets/lists.scss @@ -0,0 +1,77 @@ +/* Numbered procedures (step 1, step 2, ...) +------------------------------------------------------------------------------*/ + +.markdown-body ol { + counter-reset: li; + list-style: none; + position: relative; + padding-bottom: 10px; + padding-left: 0; +} + +.markdown-body ol > li { + padding: 15px 0 15px 55px; + position: relative; + margin-bottom: 5px; + border-top: 3px solid var(--color-auto-gray-2); +} + +.markdown-body ol > li:before { + content: counter(li); + counter-increment: li; + position: absolute; + top: 10px; + left: 0; + height: 100%; + width: 30px; + padding: 0 10px 0 0; + color: var(--color-auto-gray-4); + font-size: 22px; + font-weight: bold; + line-height: 35px; + text-align: right; +} + +.markdown-body ol > li > p { + margin: 0; +} + +.markdown-body ol > li > p:first-child { + margin-top: 0; +} + +.markdown-body ol > li:after { + content: "."; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} + +.markdown-body ol > li { + padding: $spacer-2 0 $spacer-2 $spacer-7; + border: 0; + + &:before { + top: 2px; + font-size: $spacer-3; + width: $spacer-4; + } + + p:not(:first-child) { + margin-top: 15px; + } + + .extended-markdown { + margin-top: 15px; + } +} + +.markdown-body ul ul, +.markdown-body ul ol, +.markdown-body ol ol, +.markdown-body ol ul { + margin-top: 15px; + margin-bottom: 15px; +} diff --git a/stylesheets/overrides.scss b/stylesheets/overrides.scss deleted file mode 100644 index 30f3389ca67f..000000000000 --- a/stylesheets/overrides.scss +++ /dev/null @@ -1,134 +0,0 @@ -/* Override Primer styles -------------------------------------------------------------------------------*/ - -.markdown-body { - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: $font-mktg; - font-weight: $font-weight-semibold; - padding-top: $spacer-3; - } -} - -// NB: Note that there's also overlapping styling in "article.scss" -.markdown-body ol > li { - padding: $spacer-2 0 $spacer-2 $spacer-7; - border: 0; - - &:before { - top: 2px; - font-size: $spacer-3; - width: $spacer-4; - } - - p:not(:first-child) { - margin-top: 15px; - } - - .extended-markdown { - margin-top: 15px; - } -} - -.markdown-body ul ul, -.markdown-body ul ol, -.markdown-body ol ol, -.markdown-body ol ul { - margin-top: 15px; - margin-bottom: 15px; -} - -// needs specificity to override -.markdown-body .lead-mktg p { - color: var(--color-auto-gray-9); -} - -.extended-markdown p { - margin: 0; -} - -.extended-markdown p:not(:first-child) { - margin-top: 15px; -} - -.extended-markdown.note pre { - background: none; - padding: 10px 10px 10px 0; - margin-bottom: 0; -} - -.extended-markdown.note pre code { - color: var(--color-text-primary); -} - -.product-callout p, -.contributor-callout p { - margin: 0; -} - -// Largely overwritten in tables.scss -.markdown-body table { - display: table; - table-layout: fixed; - line-height: 1.5; -} - -/* Getting Started and Popular Articles sections in article layout */ -.markdown-body div.featured-links { - padding-bottom: 30px; -} - -.markdown-body div.featured-links-heading { - padding-top: 24px; -} - -.markdown-body div.featured-links p.link-with-intro-intro { - margin-bottom: 5px; -} - -.markdown-body div.featured-links h4.link-with-intro-title { - margin-top: 0; -} - -/* code styles */ -pre .redbox { - border: 2px solid var(--color-auto-red-5); - padding: 2px; - border-radius: 2px; - margin-right: 2px; -} - -pre .greenbox { - border: 2px solid var(--color-auto-green-5); - padding: 2px; - border-radius: 2px; - margin-right: 2px; -} - -pre .bluebox { - border: 2px solid var(--color-auto-blue-5); - padding: 2px; - border-radius: 2px; - margin-right: 2px; -} - -/* Helpfulness survey override */ -:checked + .x-radio-label { - background: var(--color-auto-blue-5); - - svg { - fill: var(--color-auto-inverse); - } -} - -.markdown-body li img { - max-width: calc(100% - 32px); -} - -.markdown-body img { - max-height: 600px; -} diff --git a/stylesheets/summary.scss b/stylesheets/summary.scss new file mode 100644 index 000000000000..58f276feaaec --- /dev/null +++ b/stylesheets/summary.scss @@ -0,0 +1,23 @@ +summary { + outline: none; +} + +.markdown-body { + summary { + h1, + h2, + h3, + h4, + h5, + h6 { + display: inline-block; + margin-top: 10px; + margin-bottom: 10px; + + p { + margin: 0; + padding: 0; + } + } + } +} diff --git a/stylesheets/syntax-highlighting.scss b/stylesheets/syntax-highlighting.scss index 1f3a59d14421..67f23d5a3618 100644 --- a/stylesheets/syntax-highlighting.scss +++ b/stylesheets/syntax-highlighting.scss @@ -5,19 +5,6 @@ from https://unpkg.com/highlight.js@9.15.8/styles/github.css */ -.markdown-body .code-extra { - margin-top: $spacer-4; - - pre { - margin-top: 0 !important; - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; - border-left: 1px var(--color-auto-gray-2) solid !important; - border-bottom: 1px var(--color-auto-gray-2) solid !important; - border-right: 1px var(--color-auto-gray-2) solid !important; - } -} - .hljs { display: block; overflow-x: auto; diff --git a/stylesheets/tables.scss b/stylesheets/tables.scss index f402041bf29c..16767c20501d 100644 --- a/stylesheets/tables.scss +++ b/stylesheets/tables.scss @@ -1,3 +1,10 @@ +// Largely overwritten in tables.scss +.markdown-body table { + display: table; + table-layout: fixed; + line-height: 1.5; +} + .markdown-body table { border-collapse: collapse; position: relative; diff --git a/stylesheets/type.scss b/stylesheets/type.scss deleted file mode 100644 index 9811628ba1f0..000000000000 --- a/stylesheets/type.scss +++ /dev/null @@ -1,41 +0,0 @@ -/* Global type styles -------------------------------------------------------------------------------*/ - -h1, -h2, -h3, -h4 { - a { - color: var(--color-auto-gray-9); - } -} - -summary { - outline: none; -} - -.markdown-body { - summary { - h1, - h2, - h3, - h4, - h5, - h6 { - display: inline-block; - margin-top: 10px; - margin-bottom: 10px; - - p { - margin: 0; - padding: 0; - } - } - } -} - -// all h3 headers that are links should be blue-500 -// except those on each product's toc -h3 a { - color: var(--color-auto-blue-5); -} diff --git a/stylesheets/underline-dashed.scss b/stylesheets/underline-dashed.scss new file mode 100644 index 000000000000..3d831447ef1b --- /dev/null +++ b/stylesheets/underline-dashed.scss @@ -0,0 +1,13 @@ +// Text styling +.underline-dashed { + display: inline; + padding-bottom: $spacer-1; + background-image: linear-gradient( + to right, + var(--color-auto-gray-3) 50%, + transparent 0% + ); + background-repeat: repeat-x; + background-position: bottom; + background-size: 10px 1px; +}