Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Go Top 

<div class=" go-top -bg-gray-lighter">
    <a href="#" class="go-top__link"></a>
</div>
 
<div class="{{mixes}} go-top {{modifiers}}">
  <a href="#" class="go-top__link"></a>
</div>
 
{
  "modifiers": "-bg-gray-lighter"
}
  • Content: 
    .go-top {
  $symbol: map-get($icons, 'chevron-up');

  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 16.5rem;
  padding-bottom: 2rem;

  &__link {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    background-color: $white;
    text-align: center;

    &,
    &:hover,
    &:active {
      text-decoration: none;
    }

    &::before {
      @include icon-content-extended($symbol, block, 4.5rem);
    }
  }
}
  • URL: /components/raw/atoms-go-top/_go-top.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/05-go-top/_go-top.scss
  • Size: 453 Bytes

There are no notes for this item.