TyBs Patterns

As Button 

<a href="#" class="btn btn-primary btn-close"><span class="sr-only">Close</span></a>
 
<a href="{{close_href}}" class="{{close_classes}}"><span class="sr-only">Close</span></a>
 
{
  "close_classes": "btn btn-primary btn-close",
  "close_href": "#"
}
  • Content: 
    $close-height:1.5rem !default;
$close-width:$close-height;
$close-timing:0.25s !default;

.btn-close {
  cursor:pointer;
  &::before {
    background-color:rgba(black,0.4);
    clip-path:polygon(79% 10%, 90% 21%, 61% 50%, 90% 79%, 79% 90%, 50% 61%, 21% 90%, 10% 79%, 39% 50%, 10% 21%, 21% 10%, 50% 39%);
    content:"";
    cursor:pointer;
    display:block;
    height:$close-height;
    transition:all $close-timing;
    width:$close-width;
  }
  &:hover {
    &::before {
      background-color:var(--primary);
    }
  }
  &.btn-primary {
    border:none;
    padding:0.5rem;
    &::before {
      background-color:white;
    }
    &:hover {
      &::before {
        background-color:white;
      }
    }  
  }
  &[disabled],
  &:disabled {
    cursor:default;
    &::before {
      background-color:rgba(black,0.2);
    }
  }
}
  • URL: /components/raw/close/close.scss
  • Filesystem Path: source/patterns/atoms/buttons/close/close.scss
  • Size: 832 Bytes

There are no notes for this item.