FAA Pattern Library - Music

Crooked Line 

<div class="crooked-line " data-crooked-line></div>
 
<div class="crooked-line {{ ultraWide ? 'crooked-line--ultra-wide' }}" data-crooked-line></div>
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light"
}
  • Content: 
    .crooked-line
    @extends $contentContainer
    width 100%
    position relative
    z-index 2
    transition transform 1000ms ease-out
    transform rotate(-3deg) translateX(-50%)
    &--animate
        transform rotate(-3deg) translateX(0)
    &:after
        content ''
        width 100%
        height 2px
        background-color illiniOrange
        display flex
        margin-top -2px
    &--ultra-wide
        &:before
            content: '';
            width: 50%;
            position: absolute;
            left: 0;
            height: 2px;
            transform: translateX(calc(-100% + 48px));
            background-color: #ff552e;
            display: flex;
  • URL: /components/raw/crooked-line/crooked-line.styl
  • Filesystem Path: components/bits/crooked-line/crooked-line.styl
  • Size: 678 Bytes

There are no notes for this item.