Fractal Starter
Project version : 0.1.2

List 

<ul>
    <li>This is a list item
        <ul>
            <li>This is a list sub item</li>
            <li>This is a list sub item</li>
            <li>This is a list sub item</li>
        </ul>
    </li>
    <li>This is a list item
    </li>
    <li>This is a list item
        <ul>
            <li>This is a list sub item</li>
            <li>This is a list sub item</li>
        </ul>
    </li>
    <li>This is a list item
    </li>
</ul>
 
<ul>
    {{#each list.item}}
    <li>{{text}}
        {{#if item}}
        <ul>
            {{#each item}}
            <li>{{text}}</li>
            {{/each}}
        </ul>
        {{/if}}
    </li>
    {{/each}}
</ul>
 
{
  "list": {
    "item": [
      {
        "text": "This is a list item",
        "item": [
          {
            "text": "This is a list sub item"
          },
          {
            "text": "This is a list sub item"
          },
          {
            "text": "This is a list sub item"
          }
        ]
      },
      {
        "text": "This is a list item"
      },
      {
        "text": "This is a list item",
        "item": [
          {
            "text": "This is a list sub item"
          },
          {
            "text": "This is a list sub item"
          }
        ]
      },
      {
        "text": "This is a list item"
      }
    ]
  }
}
  • Content: 
    ul, ol{
    & > li{
        line-height: 1.3;
    }
}

ul{
    list-style-type: disc;

    & > li > ul{
        list-style-type: circle;
    }
}

ol{
    list-style-type: decimal;

    & > li > ol{
        list-style-type: lower-alpha;
    }
}

.lst__unstyled, .list--unstyled {
    list-style-type: none;
    margin: 0;
    padding: 0;

    & ul { list-style-type: none }
} 

.lst__inline, .list--inline {
    @include mediaWQuery($media-query-m) {
        & > li { display: inline-block }
    }
}
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: components/04-elements/01-typography/05-list/_list.scss
  • Size: 498 Bytes

There are no notes for this item.