<ul class="Linklist Linklist--padded u-layout-prose u-text-r-xs">
    <li>
        <a class="Linklist-link Linklist-link--lev1" href="">Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.</a>
    </li>
    <li><a class="Linklist-link Linklist-link--lev2 is-expanded" href="">Consequatur eligendi sit similique est est voluptatem labore consequatur sit.</a>
        <ul>
            <li><a href="" class="Linklist-link Linklist-link--lev3">Mollitia enim molestias dignissimos.</a></li>
            <li><a href="">Possimus quo repellendus quasi earum quos a.</a></li>
            <li><a href="">Temporibus assumenda ipsa et id pariatur cumque necessitatibus ut dicta.</a></li>
            <li><a href="">Et sit iure et iste et qui et.</a></li>
        </ul>
    </li>
    <li><a href="">Perferendis eaque quas ipsa.</a></li>
    <li><a href="">Quod facere ab.</a></li>
    <li><a href="" class="Linklist-link is-collapsed">Aut et debitis quas doloremque et et illum.</a></li>
    <li><a href="">Suscipit perferendis animi voluptas quibusdam qui.</a></li>
</ul>
  • Content:
    /** @define Linklist; weak; */
    
    :root {
      --Linklist-border-color: #d8d8d8;
      --Linklist-link-arrow-up: inline("icons/img/SVG/collapse.svg");
      --Linklist-link-arrow-down: inline("icons/img/SVG/expand.svg");
      --Linklist-link-padding: 0.5em;
      --Linklist-link-arrow-width: 0.8em;
    }
    
    /*
     *	FIXME:
     *	  -webkit-overflow-scrolling: touch;
     */
    
    .Linklist {
      @extend .u-color-grey-30;
    }
    
    .Linklist li {
      @extend .u-color-grey-30;
      @extend .u-border-top-xxs;
      @extend .u-block;
      @extend .u-nbfc;
    }
    
    .Linklist-link,
    .Linklist a {
      @extend .u-block;
      @extend .u-color-50;
      @extend .u-textClean;
      @extend .u-padding-r-bottom;
      @extend .u-padding-r-top;
    }
    
    .Linklist--padded > li > .Linklist-link,
    .Linklist--padded > li > a {
      @extend .u-padding-left-s;
    }
    
    .Linklist a:hover {
      @extend .u-background-5;
      @extend .u-color-95;
    }
    
    .Linklist ul ul ul > li > a {
      padding-left: 2.5em;
    }
    
    .Linklist ul ul > li > a {
      padding-left: 2em;
    }
    
    .Linklist ul > li > a {
      padding-left: 1.5em;
    }
    
    .Linklist-link.Linklist-link--lev1,
    .Linklist-link.Linklist-link--lev1:hover {
      @extend .u-color-white;
      @extend .u-background-90;
    }
    
    .Linklist-link.Linklist-link--lev2,
    .Linklist-link.Linklist-link--lev2:hover {
      @extend .u-color-95;
      @extend .u-background-20;
    }
    
    .Linklist-link.Linklist-link--lev3 {
      @extend .u-color-95;
      @extend .u-background-10;
    }
    
    .Linklist-link.is-expanded,
    .Linklist-link.is-collapsed {
      background-position: right var(--Linklist-link-padding) center;
      background-repeat: no-repeat;
      background-size: var(--Linklist-link-arrow-width);
      padding-right:
        calc(
          var(--Linklist-link-arrow-width) + (2 * var(--Linklist-link-padding))
        );
    }
    
    .Linklist-link.is-collapsed {
      background-image: var(--Linklist-link-arrow-down);
    }
    
    .Linklist-link.is-expanded {
      background-image: var(--Linklist-link-arrow-up);
    }
    
  • URL: /components/raw/linklist/index.css
  • Filesystem Path: src/components/linklist/index.css
  • Size: 1.8 KB

There are no notes for this item.