JMT Alimentation Animal
Project version : 1.0.3

Unstyled list 

<ul class="list-unstyled">
    <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 class="list-unstyled">
    {{#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 {
    padding: 0 1.5rem;
    & > li { line-height: 1.5; }
}

.wysiwyg {
    ul, ol {
        li + li { margin-top: .5rem }
    }
}

ul {
    list-style-type: disc;

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

ol{
    list-style-type: decimal;

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

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

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

.list {
    &--products-list {
        list-style-type: none;
        margin: 0;
        padding: .5rem 0;

        background: $c-white;
        border-radius: $border-radius-s;
        border: 2px solid $c-brown-medium;
        box-shadow: 0 8px 12px 0 rgba(51,45,45,0.2);

        text-align: left;

        > li > a {
            padding: .5rem 1rem!important;
            font-weight: 700;
            font-size: rem(18);
        }

        &::before {
            content: '';
            position: absolute;
            top: -8px;
            right: 28px;
            width: 14px;
            height: 14px;
            transform: rotate(-45deg);
            background: $c-white;
            border-top: 2px solid $c-brown-medium;
            border-right: 2px solid $c-brown-medium;
        }
    }

    &--dropdown {
        position: absolute;
        top: calc(100%);
        right: 0;
        left: initial;
        width: 100%;
        max-width: 330px;
        height: auto;
        z-index: 300;
        padding: .5rem 0;
        background-color: $c-white;
        border: 2px solid $c-brown-lighter;
        border-radius: 8px;

        &::before {
            content: '';
            position: absolute;
            top: -8px;
            right: 25px;
            width: 14px;
            height: 14px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            background: #fff;
            border-top: 2px solid $c-brown-lighter;
            border-right: 2px solid $c-brown-lighter;
        }

        li {
            padding: 0;
            margin: 0;
        }

        li a {
            display: block;
            padding: .3rem 1rem;
            text-decoration: none;
            color: $c-font-color;
            font-weight: 700;

            &:hover, &:focus {
                background-color: $c-yellow;
            }
        }

        &--arrow-center {
            &::before {
                content: '';
                position: absolute;
                top: -8px;
                left: 50%;
                margin-left: -7px;
                right: initial;
            }
        }

        &--max-height > span {
            display: block;
            max-height: 250px;
            overflow-y: auto;
        }

        &.active-list--dropdown {
            display: block!important;
        }
    }
}
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: components/04-elements/01-typography/05-list/_list.scss
  • Size: 2.9 KB

There are no notes for this item.