refactor(docs-infra): cleanup lines in scss (#62438)

Cleans up some of the scss code.

PR Close #62438

adev/shared-docs/components/navigation-list/navigation-list.component.html

@@ -7,15 +7,20 @@
       <li class="docs-faceted-list-item">
         @if (item.path) {
           @if (item.isExternal) {
-            <a 
-              [href]="item.path" target="_blank"
+            <a
+              [href]="item.path"
+              target="_blank"
               [matTooltip]="item.label"
               [matTooltipDisabled]="item.label.length < 27"
               matTooltipPosition="after"
               [attr.aria-label]="item.label"
               [matTooltipClass]="'API-tooltip'"
             >
-              <span [class.docs-external-link]="item.isExternal" class="docs-faceted-list-item-text">{{ item.label }}</span>
+              <span
+                [class.docs-external-link]="item.isExternal"
+                class="docs-faceted-list-item-text"
+                >{{ item.label }}</span
+              >
               @if (item.children && item.level! > 1 && !item.isExpanded) {
                 <docs-icon>chevron_right</docs-icon>
               }
@@ -23,13 +28,6 @@
           } @else {
             <a
               [routerLink]="'/' + item.path"
-              
-              
-              
-              
-              
-              
-              
               routerLinkActive="docs-faceted-list-item-active"
               [routerLinkActiveOptions]="{ exact: true }"
               (click)="emitClickOnLink()"
@@ -48,7 +46,8 @@
         } @else {
           <!-- Nav Section Header -->
           @if (item.level !== collapsableLevel() && item.level !== expandableLevel()) {
-            <div class="docs-secondary-nav-header"
+            <div
+              class="docs-secondary-nav-header"
               [matTooltip]="item.label"
               [matTooltipDisabled]="item.label.length < 27"
               matTooltipPosition="after"

adev/shared-docs/styles/_anchor.scss

@@ -2,15 +2,14 @@
   &::after {
     content: '\e157'; // codepoint for "link"
     font-family: 'Material Symbols Outlined';
-
     opacity: 0;
     margin-left: 8px;
     vertical-align: middle;
-
     color: var(--quaternary-contrast);
     font-size: clamp(18px, 1.25em, 30px);
     transition: opacity 0.3s ease;
   }
+
   &:hover {
     &::after {
       opacity: 1;

adev/shared-docs/styles/_api-item-label.scss

@@ -2,12 +2,10 @@
   .docs-api-item-label {
     display: flex;
     --label-theme: var(--symbolic-purple);
-
     font-weight: 500;
     color: var(--label-theme);
     background: color-mix(in srgb, var(--label-theme) 10%, white);
     border-radius: 0.25rem;
-
     cursor: default;
 
     &:first-letter {
@@ -18,7 +16,6 @@
       display: flex;
       justify-content: center;
       align-items: center;
-
       height: 22px;
       width: 22px;
       flex: 0 0 22px;

adev/shared-docs/styles/_faceted-list.scss

@@ -29,20 +29,24 @@
         transform: scaleY(0.7);
         transition: transform 0.3s ease, opacity 0.3s ease;
       }
+
       &:hover {
         background-color: var(--primary-contrast);
         &::before {
           opacity: 0.3;
         }
       }
+
       &.docs-faceted-list-item-active {
         // font gradient
         background-image: var(--pink-to-purple-vertical-gradient);
+
         &::before {
           opacity: 1;
           transform: scaleY(1);
           background: var(--pink-to-purple-vertical-gradient);
         }
+
         &:hover {
           &::before {
             opacity: 1;
@@ -52,5 +56,4 @@
       }
     }
   }
-  // a or button
 }

adev/shared-docs/styles/_kbd.scss

@@ -4,7 +4,6 @@
     position: relative;
     color: var(---tertiary-contrast);
     border: 1px solid var(--quinary-contrast);
-
     box-shadow:
       0 1px 0 rgba(0, 0, 0, 0.2),
       0 0 0 2px var(--octonary-contrast) inset;

adev/shared-docs/styles/docs/_card.scss

@@ -37,7 +37,6 @@
       font-size: 0.875rem;
       font-weight: 500;
       margin-block: 0;
-
       position: relative;
     }
 

adev/shared-docs/styles/docs/_code.scss

@@ -109,7 +109,6 @@ $code-font-size: 0.875rem;
       width: 100%;
       overflow: auto;
       padding-block: 1rem;
-
       display: flex;
       flex-direction: column;
       font-size: $code-font-size;

adev/shared-docs/styles/docs/_pill.scss

@@ -14,7 +14,6 @@
     border-radius: 2.75rem;
     border: 0;
     transition: background 0.3s ease;
-
     font-family: var(--inter-font);
     font-size: 0.875rem;
     font-style: normal;

adev/shared-docs/styles/docs/_steps.scss

@@ -8,16 +8,19 @@
     padding-inline-start: var(--gutter);
     counter-reset: code-steps-list;
     list-style-type: none;
+
     li {
       position: relative;
     }
   }
+
   .docs-steps li h3 {
     font-size: 1.75rem;
     margin-block-start: 0;
     margin-block-end: 0.5rem;
     line-height: 2.5rem;
   }
+
   .docs-step-number {
     counter-increment: code-steps-list;
     display: block;
@@ -26,6 +29,7 @@
     left: calc(var(--gutter) * -1);
     top: 2.7rem;
     bottom: 0;
+
     &::before {
       display: flex;
       align-items: center;
@@ -41,10 +45,12 @@
       background-clip: content-box, border-box;
       position: sticky;
       top: 2rem;
+
       // adjust for tablet nav bar height
       @include mq.for-tablet-landscape-down {
         top: calc(1rem + 75px);
       }
+
       // adjust for mobile nav bar height
       @include mq.for-phone-only {
         top: calc(1rem + 55px);