@appearhere/bloom/styleguide/Styleguide.css

Appear Here's pattern library and styleguide

:global(html),
:global(body),
:global(#root) {
  height: 100%;
}

.root {
  position: relative;
}

.navigationSm {
  padding-top: var(--size-lg-ii);
  padding-bottom: var(--size-lg-i);
}

.navigationLg {
  display: none;
}

.body {
  padding-top: calc(3 * var(--size-regular));
  padding-bottom: var(--size-lg-ii);
  width: 100%;
}

.menuBtn {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--size-regular);
  color: var(--color-greyDarker);
}

@media(min-width: 56.25rem) {
  .root {
    display: flex;
    min-height: 100%;
  }

  .menuBtn {
    display: none;
  }

  .navigationSm {
    display: none;
  }

  .navigationLg {
    display: block;
    padding-top: var(--size-lg-ii);
    padding-left: var(--size-lg-i);
    padding-right: var(--size-lg-i);
    transform: translate3d(0, 0, 0);
    width: 30%;
    max-width: 25rem;
    position: relative;
    border-right: 1px solid var(--color-greyLighter);
    position: fixed;
    overflow-y: scroll;
    height: 100%;
  }

  .body {
    margin-top: 0;
    padding: var(--size-lg-ii);
    min-height: 100%;
    width: 70%;
    right: 0;
    position: absolute;
  }

  .wrapper {
    max-width: 50rem;
  }
}