dxw style

Details 

<div class="grid-container">
    <div class="column-two-thirds">
        <details>
            <summary>
                <span class="summary">If you’ve got more than 50 employees now</span>
            </summary>
            <div class="panel panel-border-narrow">
                <p>You can still complain as long as you had fewer than 50 employees:</p>
                <ul class="list list-bullet">
                    <li>on the day when payment was due</li>
                </ul>
                <p>or</p>
                <ul class="list list-bullet">
                    <li>on average for a set ‘assessment period’ (check the regulations to work this out)</li>
                </ul>
            </div>
        </details>
    </div>
</div>
 
<div class="grid-container">
  <div class="column-two-thirds">
    <details>
      <summary>
        <span class="summary">If you’ve got more than 50 employees now</span>
      </summary>
      <div class="panel panel-border-narrow">
        <p>You can still complain as long as you had fewer than 50 employees:</p>
        <ul class="list list-bullet">
          <li>on the day when payment was due</li>
        </ul>
        <p>or</p>
        <ul class="list list-bullet">
          <li>on average for a set ‘assessment period’ (check the regulations to work this out)</li>
        </ul>
      </div>
    </details>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    details {
  display: block;
  clear: both;

  summary {
    display: inline-block;
    color: $link-colour;
    cursor: pointer;
    position: relative;
    margin-bottom: em(5);

    &:hover {
      color: $link-hover-colour;
    }

    &:focus {
      outline: 3px solid $focus-colour;
    }
  }

  // Underline only summary text (not the arrow)
  .summary {
    text-decoration: underline;
  }

  // Match fallback arrow spacing with -webkit default
  .arrow {
    margin-right: .35em;
    font-style: normal;
  }

}
  • URL: /components/raw/details/details.scss
  • Filesystem Path: components/typography/details/details.scss
  • Size: 520 Bytes

There are no notes for this item.