<div class="arrow prev"><span class="sr-only">Previous</span></div>
<div class="arrow {{arrows_type}}"><span class="sr-only">{{arrows_text}}</span></div>
{
  "arrows_type": "prev",
  "arrows_text": "Previous"
}
  • Content:
    $arrow-height:2rem !default;
    $arrow-width:$arrow-height;
    $arrow-timing:0.25s !default;
    
    .arrow {
      cursor:pointer;
      display:inline-block;
      height:$arrow-height;
      overflow:hidden;
      transition:all $arrow-timing;
      white-space:nowrap;
      width:$arrow-width;
      &::before {
        background-color:rgba(black,0.4);
        clip-path:polygon(20% 11%, 31% 0%, 81% 50%, 31% 100%, 20% 89%, 51% 58%, 52% 57%, 59% 50%, 52% 43%, 51% 42%);
        content:"";
        display:block;
        height:$arrow-height;
        position:relative;
        transition:all $arrow-timing;
        width:$arrow-width;
      }
      &:hover {
        &::before {
          background-color:var(--primary);
          clip-path:polygon(39% 11%, 50% 0%, 100% 50%, 50% 100%, 39% 89%, 70% 58%, 0% 58%, 0% 50%, 0% 42%, 70% 42%);  
        }
      }
      &.prev {
        &::before {
          transform:rotate(180deg);
        }
      }
      &[disabled],
      &:disabled {
        cursor:default;
        &::before {
          background-color:rgba(black,0.2);
          clip-path:polygon(20% 11%, 31% 0%, 81% 50%, 31% 100%, 20% 89%, 51% 58%, 52% 57%, 59% 50%, 52% 43%, 51% 42%);
        }
      }
    }
  • URL: /components/raw/arrows/arrows.scss
  • Filesystem Path: source/patterns/atoms/buttons/arrows/arrows.scss
  • Size: 1.1 KB

There are no notes for this item.