UCI

Levels: Medium 

<div class="levels medium">
    <div class="levels__wrap"><label class="label-m" for="">Nivel de seguridad:</label>

        <label class="label-m" for="">Medio</label>
    </div>
    <ul>
        <li class="medium"></li>
        <li class="medium"></li>
        <li class="medium"></li>
        <li class=""></li>
        <li class=""></li>
    </ul>
</div>
 
<div class="levels{{#if ok}} ok{{/if}}{{#if ko}} ko{{/if}}{{#if medium}} medium{{/if}}">
    <div class="levels__wrap">{{> @label-m label }}
    {{> @label-m label-result }}</div>
    <ul>
        {{#each listitem}}
        <li class="{{#if ok}}ok{{/if}}{{#if ko}}ko{{/if}}{{#if medium}}medium{{/if}}"></li>
        {{/each}}
    </ul>
</div>
 
{
  "label": {
    "text": "Nivel de seguridad:"
  },
  "listitem": [
    {
      "medium": true
    },
    {
      "medium": true
    },
    {
      "medium": true
    },
    {},
    {}
  ],
  "medium": true,
  "label-result": {
    "text": "Medio"
  }
}
  • Content: 
    .levels {
    margin-top: 18px;
    margin-top: 10px;

    .label-m {
        color: var(--color-text-subtle);
        margin-bottom: 24px;
        display: block;
    }

    &__wrap {
        display: flex;
        flex-direction: row;

    }

    ul {
        display: flex;
        width: 100%;
        gap: 16px;

        li {
            background-color: var(--color-background-accent);
            width: 20%;
            height: 10px;

            &.ok {
                background-color: var(--color-icon-success);
            }

            &.ko {
                background-color: var(--color-icon-error);
            }

            &.medium {
                background-color: var(--color-icon-alert);
            }
        }
    }

    &.ok {
        .label-m:last-of-type {
            color: var(--color-icon-success);
            margin-left: 5px;
        }
    }

    &.ko {
        .label-m:last-of-type{
            color: var(--color-icon-error);
            margin-left: 5px;
        }
    }

    &.medium {
        .label-m:last-of-type{
            color: var(--color-icon-alert);
            margin-left: 5px;
        }
    }

}
  • URL: /components/raw/levels/levels.css
  • Filesystem Path: src/02-molecules/levels/levels.css
  • Size: 1.2 KB

No notes defined.