Reorganize SCSS without changing any of the properties or values (git…

…hub#18963) * Reorganize SCSS without changing any of the properties or values * Mis-moved a few files * Split up "other"
kriskhaira · Apr 26, 2021 · a7623cd · a7623cd
1 parent 68870cb
commit a7623cd
Show file tree

Hide file tree

Showing 20 changed files with 374 additions and 384 deletions.
diff --git a/stylesheets/alerts.scss 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → stylesheets/font-mktg.scss b/stylesheets/new-mktg.scss → 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
@@ -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;
+}