fix(TOC): update mobile sticky styles (carbon-design-system#4953)

IgnacioBecerra · Feb 22, 2021 · c2dbcd4 · c2dbcd4
1 parent 3efa49a
commit c2dbcd4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
@@ -7,7 +7,6 @@
 
 import { html } from 'lit-element';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
-import contentStyles from 'carbon-components/scss/components/ui-shell/_content.scss';
 import logosGroup from '../../../logo-grid/__stories__/data/logos.js';
 
 import imgSm16x9 from '../../../../../../storybook-images/assets/320/fpo--16x9--320x180--002.jpg';
@@ -91,9 +90,6 @@ const cardGroupItems = html`
 `;
 
 const StoryContent = () => html`
-  <style type="text/css">
-    ${contentStyles.cssText}
-  </style>
   <main class="bx--content dds-ce-demo-devenv--ui-shell-content">
     <div class="bx--grid">
       <div class="bx--row">
@@ -171,8 +167,8 @@ const StoryContent = () => html`
             <dds-callout-with-media>
               <dds-content-block-heading slot="heading">Mauris ultrices eros in cursus</dds-content-block-heading>
               <dds-content-item-copy
-                >Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. 
-                In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. 
+                >Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat.
+                In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in.
                 Vel facilisis volutpat est velit egestas dui.
               </dds-content-item-copy>
               <dds-callout-with-media-video video-id="1_9h94wo6b"></dds-callout-with-media-video>
@@ -206,7 +202,7 @@ const StoryContent = () => html`
                 ${Array.from([1, 2, 3]).map(() => cardGroupItems)}
               </dds-card-group>
             </dds-content-block-cards>
-            
+
             <dds-callout-quote>
               Duis aute irure dolor in reprehenderit
             <dds-quote-source-heading>

diff --git a/packages/web-components/src/components/masthead/__stories__/masthead.stories.scss b/packages/web-components/src/components/masthead/__stories__/masthead.stories.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020
+// Copyright IBM Corp. 2020, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -22,12 +22,16 @@
   }
 }
 
-.bx--content.dds-ce-demo-devenv--ui-shell-content {
-  h2 {
-    margin: 30px 0;
+.bx--content {
+  padding: 6rem 0 2rem;
 
-    &:first-of-type {
-      margin-top: 0;
+  &.dds-ce-demo-devenv--ui-shell-content {
+    h2 {
+      margin: 30px 0;
+
+      &:first-of-type {
+        margin-top: 0;
+      }
     }
   }
 }
diff --git a/packages/web-components/src/components/table-of-contents/table-of-contents.scss b/packages/web-components/src/components/table-of-contents/table-of-contents.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020
+// Copyright IBM Corp. 2020, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -28,6 +28,10 @@
 
 .#{$dds-prefix}-ce--table-of-contents__container {
   @include carbon--make-row();
+
+  .#{$prefix}--tableofcontents__sidebar {
+    top: 48px;
+  }
 }
 
 .#{$dds-prefix}-ce--table-of-contents__items-container {