UCI

Access Select: With Links 

<div class="access-select  ">
    <div class="access-select__chosen">
        <input class="access-select__chosen-option_hidden" value="" type="hidden">
        <div class="access-select__option access-select__chosen-option">Placeholder</div>
        <div class="access-select__chosen-icon">
            <svg class="icon icon-chebron-down     ">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
            </svg>

        </div>
    </div>
    <ul class="access-select__list">
        <li class="access-select__item">
            <p><a href="https://uci.com">Simulador Crédito Habitação</a></p>
        </li>
        <li class="access-select__item">
            <p><a href="https://uci.com">Simulador Quanto Posso Pedir</a></p>
        </li>
        <li class="access-select__item">
            <p><a href="https://uci.com">Simulador Quanto Posso Pedir</a></p>
        </li>
    </ul>
</div>
 
{{#if isAnchorsVersions}}
<div class="access-select{{#if disabled}} disabled{{/if}} {{extraclass}}" {{#if id}}id="{{ id }}"{{/if}}>
    <div class="access-select__chosen">
        <input class="access-select__chosen-option_hidden" value="" type="hidden"{{#if id}} id="{{ id }}"{{/if}}{{#if disabled}} disabled {{/if}}>
        <div class="access-select__option access-select__chosen-option">{{ chosen-placeholder }}</div>
        <div class="access-select__chosen-icon">
            {{ render '@icon--chebron-down' }}
        </div>
    </div>
    <ul class="access-select__list">
        {{#each option}}
        <li class="access-select__item">
           <a class="access-select__option" href="{{ this.href }}" id="{{ this.id }}">
            {{ this.text }}</a>
           
        </li>
        {{/each}}
    </ul>
</div>
{{else}}
<div class="access-select{{#if disabled}} disabled{{/if}}  {{extraclass}}" {{#if id}}id="{{ id }}"{{/if}}>
    <div class="access-select__chosen">
        <input class="access-select__chosen-option_hidden" value="" type="hidden" {{#if id}} id="{{ id }}" {{/if}}>
        <div class="access-select__option access-select__chosen-option">{{ chosen-placeholder }}</div>
        <div class="access-select__chosen-icon">
            {{ render '@icon--chebron-down' }}
        </div>
    </div>
    <ul class="access-select__list{{#if isOverflow}} overflow{{/if}}">
        {{#each option}}
        <li class="access-select__item{{#if disabled}} disabled{{/if}}">
            {{#if isHref}}
            <p><a href="{{ this.href }}">{{ this.text }}</a></p>
            {{else}}
            <input class="access-select__option access-select__input" id="{{ this.id }}" type="radio"
                title="{{ this.text }}" name="{{ this.select-name }}" value="{{ this.value }}" {{#if disabled}} disabled{{/if}}>
            <label class="access-select__option access-select__label" for="{{ this.id }}">
                {{ this.text }}
            </label>
            {{/if}}
        </li> 
        {{/each}}
    </ul>
</div>
{{/if}}
 
{
  "chosen-placeholder": "Placeholder",
  "option": [
    {
      "id": "option1",
      "isHref": true,
      "select-name": "Select group name",
      "href": "https://uci.com",
      "text": "Simulador Crédito Habitação",
      "isSimple": true
    },
    {
      "id": "option2",
      "isHref": true,
      "select-name": "Select group name",
      "href": "https://uci.com",
      "text": "Simulador Quanto Posso Pedir",
      "isSimple": true
    },
    {
      "id": "option3",
      "isHref": true,
      "select-name": "Select group name",
      "href": "https://uci.com",
      "text": "Simulador Quanto Posso Pedir",
      "isSimple": true
    }
  ]
}
  • Content: 
    .access-select {
    position: relative;

    &__option {
        display: block;
        width: 100%;
        padding: 15px 20px 15px 15px;
        outline: none;
        border-right: 1px solid var(--color-secondary-light);
        border-left: 1px solid var(--color-secondary-light);
        font-family: 'Jornada Sans Book';
        font-size: 14px;
        line-height: 24px;
        color: var(--color-text);
        background-color: transparent;

        @media (--viewport-ms-min) {
            padding-right: 30px;
        }
    }

    &__item:first-child {
        .access-select__option {
            padding-top: 25px;
        }
    }

    &__item:last-child {
        .access-select__option {
            padding-bottom: 25px;
        }
    }

    &__chosen {
        position: relative;
        cursor: pointer;

        &:hover {
            .access-select {
                &__chosen {
                    &-option {
                        border-color: var(--color-secondary);
                    }
                }
            }
        }

        &-option {
            height: 50px;
            padding-top: 14px;
            padding-right: 40px;
            border: 1px solid var(--color-grey3);
            transition: border-color 0.3s;
            opacity: 1;
            font-family: 'Jornada Sans Book';
            font-size: 14px;
            line-height: 24px;
            color: var(--color-grey2);

            @media (--viewport-ms-min) {
                padding-right: 50px;
            }

        }

        .access-select__chosen-option_hidden.valid+.access-select__chosen-option {
            color: var(--color-text);
        }

        &-icon {
            position: absolute;
            top: 50%;
            right: 13px;
            transform: translate(0, -50%);
            transition: all 0.1s;

            .icon {
                color: var(--color-grey2);
            }
        }

        &.list-is-open {
            .access-select__chosen {
                &-option {
                    border-color: var(--color-secondary);
                }

                &-icon {
                    transform: translate(0, -50%) rotate(-180deg);
                }
            }

            &+.access-select__list.overflow {
                border-top: solid 1px var(--color-secondary);
                margin-top: -1px;
            }
        }

        &.active {
            .access-select {
                &__chosen {
                    &-label {
                        top: 13px;
                        transform: none;
                        color: var(--color-accent-dark);
                    }
                }
            }
        }
    }

    &__list {
        position: absolute;
        z-index: 9999;
        right: 0;
        left: 0;
        overflow: hidden;
        height: 0;
        background-color: var(--color-primary);

        .access-select {
            &__option {
                border-color: var(--color-secondary);
            }
        }

        &.overflow {
            min-width: min-content;

            li {
                white-space: nowrap;
            }
        }
    }

    &__item {
        position: relative;

        &:last-child {
            border-bottom: 1px solid var(--color-secondary);
        }

        &.disabled {
            .access-select__option {
                color: var(--color-text-link-tertiary-disabled);
                cursor: unset;
            }
            .access-select__input:hover+.access-select__label {
                text-decoration: none;
            }
        }
    }

    &__input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;

        &:hover,
        &:focus {
            +.access-select__label {
                text-decoration: underline;
            }
        }

        &.checked {
            +.access-select__label {
                color: var(--color-accent);
            }
        }
    }

    &__label {
        transition: color 0.3s;
    }

    &.disabled {
        .access-select__chosen-option {
            background-color: var(--color-grey-light);
            border-color: var(--color-quinary);
        }
    }

    input.input-validation-error+.access-select__chosen-option {
        border-color: var(--color-danger);
    }

    &.disabled {
        .access-select__list {
            display: none;
        }

        .list-is-open {
            .access-select__chosen {

                &-icon {
                    transform: translate(0, -50%) rotate(0deg);
                }
            }
        }
    }
}
  • URL: /components/raw/access-select/access-select.css
  • Filesystem Path: src/02-molecules/access-select/access-select.css
  • Size: 4.6 KB

No notes defined.