<hr class="Separator-room u-background-50" />
<hr class="Separator Separator--up u-background-grey-20" />
  • Content:
    /* @define .Separator */
    
    :root {
      --Separator-skewY: skewY(2deg);
      --Separator-height: 10rem;
      --Separator-offset: 4rem;
      --Separator-skewY: 2deg;
    }
    
    /*
     *  1. avoid body overflow
     */
    
    .Separator {
      @extend .u-border-none;
      @extend .u-margin-all-none;
      @extend .u-posRelative;
      @extend .u-zindex-30;
    
      height: var(--Separator-height);
      left: 0;
      margin-bottom: -var(--Separator-height) !important;
      margin-left: -1em;
      top: -var(--Separator-offset);
      width: 99.999999%; /* [1] */
    }
    
    .Separator--down {
      transform: skewX(0) skewY(var(--Separator-skewY));
    }
    
    .Separator--up {
      transform: skewX(0) skewY(-var(--Separator-skewY));
    }
    
    .Separator-room {
      @extend .u-block;
      @extend .u-border-none;
      @extend .u-margin-all-none;
      @extend .u-posRelative;
    
      padding-bottom: var(--Separator-height);
    }
    
  • URL: /components/raw/separator/index.css
  • Filesystem Path: src\components\separator\index.css
  • Size: 856 Bytes

There are no notes for this item.