Utilize scss nesting in /styles/dartdoc (#4003)

Author: parlough

lib/resources/styles.css

@@ -1 +1 @@
-8863C34F7B0AA9147CD23809CF67E875
+6AD77EE4737CB53C3F7994D7BCC1E463

web/sig.txt

@@ -2,40 +2,6 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
-.category.linked {
-  font-weight: bold;
-  opacity: 1;
-}
-
-/* Colors for category based on categoryOrder in dartdoc_options.config. */
-.category.cp-0 {
-  background-color: #54b7c4
-}
-
-.category.cp-1 {
-  background-color: #54c47f
-}
-
-.category.cp-2 {
-  background-color: #c4c254
-}
-
-.category.cp-3 {
-  background-color: #c49f54
-}
-
-.category.cp-4 {
-  background-color: #c45465
-}
-
-.category.cp-5 {
-  background-color: #c454c4
-}
-
-.category a {
-  color: white;
-}
-
 .category {
   padding: 2px 4px;
   font-size: 12px;
@@ -44,8 +10,42 @@
   text-transform: uppercase;
   color: white;
   opacity: .5;
-}
 
-h1 .category {
-  vertical-align: middle;
+  a {
+    color: white;
+  }
+
+  h1 & {
+    vertical-align: middle;
+  }
+
+  &.linked {
+    font-weight: bold;
+    opacity: 1;
+  }
+
+  /* Colors for category based on categoryOrder in dartdoc_options.config. */
+  &.cp-0 {
+    background-color: #54b7c4
+  }
+
+  &.cp-1 {
+    background-color: #54c47f
+  }
+
+  &.cp-2 {
+    background-color: #c4c254
+  }
+
+  &.cp-3 {
+    background-color: #c49f54
+  }
+
+  &.cp-4 {
+    background-color: #c45465
+  }
+
+  &.cp-5 {
+    background-color: #c454c4
+  }
 }

web/styles/dartdoc/_category.scss

@@ -14,13 +14,13 @@
   font-size: 12px;
   padding: 1px 6px;
   margin: 0 8px 0 0;
+
+  h1 & {
+    vertical-align: middle;
+    margin: 0 -2px 0 0;
+  }
 }
 
 a.feature:hover {
   border-color: #13B9FD;
 }
-
-h1 .feature {
-  vertical-align: middle;
-  margin: 0 -2px 0 0;
-}

web/styles/dartdoc/_feature.scss

@@ -2,42 +2,52 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
-.markdown.desc {
-  margin-bottom: 1em;
-  max-width: 700px;
-}
-
-.markdown h1 {
-  font-size: 24px;
-  margin-bottom: 8px;
-}
-
-.markdown h2 {
-  font-size: 20px;
-  margin-top: 24px;
-  margin-bottom: 8px;
-}
-
-.markdown h3 {
-  font-size: 18px;
-  margin-bottom: 8px;
-  color: var(--main-text-color);
-}
-
-.markdown h4 {
-  font-size: 16px;
-  margin-bottom: 0;
-}
-
-.markdown li p {
-  margin: 0;
+.markdown {
+  &.desc {
+    margin-bottom: 1em;
+    max-width: 700px;
+  }
+
+  h1 {
+    font-size: 24px;
+    margin-bottom: 8px;
+  }
+
+  h2 {
+    font-size: 20px;
+    margin-top: 24px;
+    margin-bottom: 8px;
+  }
+
+  h3 {
+    font-size: 18px;
+    margin-bottom: 8px;
+    color: var(--main-text-color);
+  }
+
+  h4 {
+    font-size: 16px;
+    margin-bottom: 0;
+  }
+
+  li p {
+    margin: 0;
+  }
 }
 
 /* Note that the generated HTML for pub packages may have `section` tags
    transformed into `div` tags, so we have two selectors here. */
-section#setter, div#setter {
-  border-top: 1px solid #ddd;
-  padding-top: 36px;
+section, div {
+  &#setter {
+    border-top: 1px solid #ddd;
+    padding-top: 36px;
+  }
+
+  /* indents wrapped lines */
+  &.summary dt {
+    margin-left: 24px;
+    text-indent: -24px;
+  }
 }
 
 li.inherited a {
@@ -51,33 +61,31 @@ dt.constant + dd p {
   margin-bottom: 1em;
 }
 
-/* indents wrapped lines */
-/* Note that the generated HTML for pub packages may have `section` tags
-   transformed into `div` tags, so we have two selectors here. */
-section.summary dt, div.summary dt {
-  margin-left: 24px;
-  text-indent: -24px;
-}
-
-.dl-horizontal dd {
-  margin-left: initial;
-}
-
-dl.dl-horizontal dt {
-  font-style: normal;
-  text-align: left;
-  color: #727272;
-  margin-right: 20px;
-  width: initial;
-}
-
-dt .name {
-  font-weight: 500;
-}
-
-dl dt.callable .name {
-  float: none;
-  width: auto;
+dl {
+  &.dl-horizontal {
+    dd {
+      margin-left: initial;
+    }
+
+    dt {
+      font-style: normal;
+      text-align: left;
+      color: #727272;
+      margin-right: 20px;
+      width: initial;
+    }
+  }
+
+  dt {
+    &.callable .name {
+      float: none;
+      width: auto;
+    }
+
+    .name {
+      font-weight: 500;
+    }
+  }
 }
 
 /* Do not display "provided by X extension" text on extension pages. */

web/styles/dartdoc/_members.scss

@@ -12,10 +12,8 @@
   padding: 18px 4px;
   font-size: 18px;
   vertical-align: middle;
-}
 
-@media (max-width: 840px) {
-  .source-link {
+  @media (max-width: 840px) {
     padding: 7px 2px;
     font-size: 10px;
   }

web/styles/dartdoc/_misc.scss

@@ -6,39 +6,34 @@
   white-space: nowrap;
 }
 
-.multi-line-signature .type-parameter .parameter {
-  margin-left: 0;
-  display: unset;
-}
-
 .parameter-list {
   display: table-cell;
   margin-left: 10px;
   list-style-type: none;
   padding-inline-start: unset;
-}
 
-.parameter-list.single-line {
-  display: inline;
-  margin-left: 0;
-}
+  &.single-line {
+    display: inline;
+    margin-left: 0;
 
-.parameter-list.single-line > li {
-  display: inline;
-}
+    > li {
+      display: inline;
 
-.parameter-list.single-line > li > .parameter {
-  display: inline;
-  margin-left: 0;
-  text-indent: 0;
+      > .parameter {
+        display: inline;
+        margin-left: 0;
+        text-indent: 0;
+      }
+    }
+  }
 }
 
 .signature {
   color: var(--main-text-color);
-}
 
-.signature a {
-  color: var(--main-hyperlinks-color);
+  a {
+    color: var(--main-hyperlinks-color);
+  }
 }
 
 .deprecated {
@@ -48,12 +43,17 @@
 .multi-line-signature {
   font-size: 17px;
   color: #727272;
-}
 
-.multi-line-signature .parameter {
-  margin-left: 60px;
-  display: block;
-  text-indent: -36px;
+  .type-parameter .parameter {
+    margin-left: 0;
+    display: unset;
+  }
+
+  .parameter {
+    margin-left: 60px;
+    display: block;
+    text-indent: -36px;
+  }
 }
 
 .annotation-list {
@@ -66,18 +66,14 @@
   list-style: none;
   padding: 0;
   display: inline;
-}
 
-.comma-separated li {
-  display: inline;
-}
-
-.comma-separated li:after {
-  content: ", ";
-}
+  li {
+    display: inline;
 
-.comma-separated li:last-child:after {
-  content: "";
+    &:not(:last-child):after {
+      content: ", ";
+    }
+  }
 }
 
 .container > section:first-child {
@@ -90,20 +86,21 @@
 
 /* Note that the generated HTML for pub packages may have `section` tags
    transformed into `div` tags, so we have two selectors here. */
-section.multi-line-signature div.parameters,
-div.multi-line-signature div.parameters {
-  margin-left: 24px;
-}
-
-#instance-methods dt.inherited .name,
-#instance-properties dt.inherited .name,
-#operators dt.inherited .name {
-  font-weight: 400;
-  font-style: italic;
-}
-
-#instance-methods dt.inherited .signature,
-#instance-properties dt.inherited .signature,
-#operators dt.inherited .signature {
-  font-weight: 400;
+section, div {
+  .multi-line-signature div.parameters {
+    margin-left: 24px;
+  }
+}
+
+#instance-methods, #instance-properties, #operators {
+  dt.inherited {
+    .name {
+      font-weight: 400;
+      font-style: italic;
+    }
+
+    .signature {
+      font-weight: 400;
+    }
+  }
 }