Davidson Styleguide

Sidebar: Default 

<div class="with-sidebar with-sidebar--major-right">
    <div class="with-sidebar__main">
        <div class="nc-placeholder ">
            <p>Placeholder</p>
        </div>
    </div>
    <div class="with-sidebar__sidebar">
        <div class="nc-placeholder ">
            <p>Placeholder</p>
        </div>
    </div>
</div>
 
<div class="with-sidebar {{ sidebar.variant }}">
    <div class="with-sidebar__main">
      {% block sidebar_main %}
        {% include sidebar.main %}
      {% endblock %}
    </div>
    <div class="with-sidebar__sidebar">
      {% block sidebar_side %}
        {% include sidebar.side %}
      {% endblock %}
    </div>
</div>
 
{
  "sidebar": {
    "main": "@placeholder",
    "side": "@placeholder",
    "variant": "with-sidebar--major-right"
  }
}
  • Content: 
    .with-sidebar {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;

  > .with-sidebar__sidebar {
    order: -1;
    margin-top: 2rem;
  }

  &.with-sidebar--major-right {
    > .with-sidebar__sidebar {
      order: -1;
      margin-top: 0;
      margin-bottom: 2rem;
    }
  }

  &.with-sidebar--major-left,
  &.with-sidebar--major-left-small-sidebar {
    > .with-sidebar__sidebar {
      order: 2;
    }
  }

  @include rr-break-directive(l) {
    flex-direction: row;
    flex-wrap: nowrap;

    > .with-sidebar__main {
      flex: 0 1 100%;
      //margin-right: rr-gridbase(9);
      max-width: calc(100% - #{rr-gridbase(38)});
      padding-right: rr-gridbase(9);
    }

    > .with-sidebar__sidebar {
      flex: 0 0 rr-gridbase(29);
    }

    &.with-sidebar--major-right {
      > .with-sidebar__main {
        padding-right: 0;
        padding-left: rr-gridbase(9);
      }
    }

    &.with-sidebar--major-left,
    &.with-sidebar--major-left-small-sidebar {
      > .with-sidebar__main {
        max-width: calc(100% - #{rr-gridbase(54)});
      }
      > .with-sidebar__sidebar {
        flex: 0 0 rr-gridbase(45);
      }
    }

    &.with-sidebar--major-left-small-sidebar {
      > .with-sidebar__sidebar {
        flex: 0 0 rem(200px);
      }
    }
  }
}
  • URL: /components/raw/sidebar/sidebar.scss
  • Filesystem Path: patterns/molecules/layouts/sidebar/sidebar.scss
  • Size: 1.3 KB

There are no notes for this item.