600 West

Main: Contains Sticky Component 

<main id="content" class="Main Main--hasSticky" style="">
    <section id="Cool-Section" class="section  " style=" ">
        <div class="row " style="">
            <div class="col _span-12  " style="">
                <p id="" class="">
                    Wow look at me im a main element
                </p>

            </div>

        </div>

    </section>

</main>
 
<main id="{{id}}" class="Main {{modifier}}" style="{{style}}">
    {{> @children}}
</main>
 
{
  "id": "content",
  "modifier": "Main--hasSticky",
  "style": null,
  "children": [
    {
      "component": "section",
      "context": {
        "id": "Cool-Section",
        "children": [
          {
            "component": "row",
            "context": {
              "children": [
                {
                  "component": "column",
                  "context": {
                    "span": 12,
                    "children": [
                      {
                        "component": "p",
                        "context": {
                          "text": "Wow look at me im a main element"
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}
  • Content: 
    .Main {
    overflow: hidden;
}
@supports (position: sticky) {
    .Main--hasSticky {
        //normally overlow: hidden isn't a problem, but it breaks our sticky elements.
        overflow: visible;
    }
}
  • URL: /components/raw/main/Main.scss
  • Filesystem Path: components/organisms/Main/Main.scss
  • Size: 208 Bytes

There are no notes for this item.