UCI

Dropdown menu 

<div class="dropdown-menu__wrap">
    <div class="dropdown-menu__btn " id="">
        <button id="" class="btn 
                    btn_bottomless
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                " type="">
            <svg class="icon icon-16_menu-olives     ">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_menu-olives"></use>
            </svg>

        </button>
    </div>
    <div class="dropdown-menu__overlay dropdown-menu--open"></div>
    <div class="dropdown-menu dropdown-menu--open" tabindex="-1">
        <div class="dropdown-menu__close">
            <button class="dropdown-menu__close--btn" type="button" title="Close" id="closeDropdownMenu">
                <svg class="icon icon-close     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
                </svg>

            </button>
        </div>
        <h3 class="dropdown-menu__heading title-m">DNI</h3>
        <nav class="dropdown-menu__list">
            <a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">
                <span class="caption-label">21 may, a las 14:30</span>

                <span class="dropdown-menu__list-item__ripple"></span>
                <!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
                <span class="dropdown-menu__list-item__text bodycopys-m">Ver documento</span>
            </a>
            <a class="dropdown-menu__list-item dropdown-menu__list-item--active" data-idficha="0" href="" aria-current="page" tabindex="-1">

                <span class="dropdown-menu__list-item__ripple"></span>
                <!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
                <span class="dropdown-menu__list-item__text bodycopys-m">Descargar documento</span>
            </a>
            <a class="dropdown-menu__list-item dropdown-menu__list-item--disabled" data-idficha="0" href="" aria-current="page" tabindex="-1">

                <span class="dropdown-menu__list-item__ripple"></span>
                <!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
                <span class="dropdown-menu__list-item__text bodycopys-m">Eliminar documento</span>
            </a>
        </nav>
        <div class="dropdown-menu__footer">
            <a class="link
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        " href="#">
                <span>Ver todas</span>
            </a>

        </div>
    </div>
</div>
 
<div class="dropdown-menu__wrap">
    {{#if iconBtn}}
    <div class="dropdown-menu__btn {{customClass}}" id="{{ id }}">
        {{> '@btn' iconBtn}}
    </div>
    {{/if}}
    <div class="dropdown-menu__overlay {{isOpen}}"></div>
    <div class="dropdown-menu {{isOpen}}" tabindex="-1">
        <div class="dropdown-menu__close">
            <button class="dropdown-menu__close--btn" type="button" title="Close" id="closeDropdownMenu">
                {{ render '@icon--close' }}
            </button>
        </div>
        {{#if heading}}
        <h3 class="dropdown-menu__heading title-m">{{heading}}</h3>
        {{/if}}
        <nav class="dropdown-menu__list">
            {{#each menuList}}
            <a class="dropdown-menu__list-item{{#if state}} dropdown-menu__list-item--{{this.state}}{{/if}}"
                data-idficha="0" href="{{this.href}}" aria-current="page" tabindex="-1">
                {{#if date}}{{> @caption labelDate}}{{/if}}
                <span class="dropdown-menu__list-item__ripple"></span>
                <!-- No sé para que está este span vacío, no tiene estilos asociados ni contenido (CA.R.) -->
                <span class="dropdown-menu__list-item__text bodycopys-m">{{{this.text}}}</span>
            </a>
            {{/each}}
        </nav>
        {{#if more}}<div class="dropdown-menu__footer">
            {{> @link more}}
        </div>{{/if}}
    </div>
</div>
 
{
  "isOpen": "dropdown-menu--open",
  "iconBtn": {
    "text": "",
    "icon-before": {
      "name": "16_menu-olives",
      "iconButton": true
    },
    "bottomless": true
  },
  "heading": "DNI",
  "more": {
    "href": "#",
    "text": "Ver todas",
    "isInLine": true
  },
  "menuList": [
    {
      "date": true,
      "state": "active",
      "labelDate": {
        "type": "-label",
        "text": "21 may, a las 14:30"
      },
      "text": "Ver documento"
    },
    {
      "date": false,
      "state": "active",
      "text": "Descargar documento"
    },
    {
      "date": false,
      "state": "disabled",
      "text": "Eliminar documento"
    }
  ]
}
  • Content: 
    .dropdown-menu {
    display: none;
    position: absolute;
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    margin: 0;
    padding: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    opacity: 0;
    overflow: auto;
    will-change: transform, opacity;
    z-index: 8;
    transition: opacity 0.03s linear, height 250ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.03s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1), height 250ms cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 0.03s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1), height 250ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.12s cubic-bezier(0, 0, 0.2, 1);
    background-color: #fff;
    color: #000;
    box-shadow: 0px 20px 20px 0px #1919190D;

    @media (--viewport-xs-max) {
        position: fixed;
    }

    &:focus {
        outline: none;
    }

    &__wrap{
        position: relative;
    }

    &__overlay {
        display: none;

        &.dropdown-menu--open {
            @media (--viewport-xs-max) {
                display: flex;
                position: fixed;
                width: 100%;
                height: 100vh;
                background-color: var(--color-black-90);
                z-index: 1;
                opacity: .8;
                top: 0;
                left: 0;
            }
        }
    }

    &--open {
        display: inline-block;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        z-index: 3;
        right: 0;
        width: 250px;
        z-index: 10;
        top: 35px;

        @media (--viewport-xs-max) {
            width: 100%;
            max-width: 100%;
            bottom: 0;
            left: 0;
            top: auto;
            right: auto;
        }
    }

    &__overlay.dropdown-menu--open {
        width: auto;
    }

    [dir=rtl] &,
    &[dir=rtl] {
        /* @noflip */
        transform-origin-left: bottom right;
        /* @noflip */
        transform-origin-right: bottom left;
    }

    &--anchor {
        position: relative;
        overflow: visible;
    }

    &--fixed {
        position: fixed;
    }

    &--fullwidth {
        width: 100%;
    }

    &__close {
        display: none;

        @media (--viewport-xs-max) {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            padding: 15px 30px;
        }
    }

    &__btn {
        overflow: visible;
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;

        .btn {
            /* Bodycopys/Bodycopy M */
            font-family: var(--font-family-sans-low);
            letter-spacing: var(--font-letter-spacing-wide);
            font-size: var(--font-size-5);
            line-height: var(--font-line-height-3);
            color: var(--color-text-cta-primary);

            .icon {
                fill: var(--color-icon-cta-primary);
                /*width: 20px;
                height: 20px; Lo quito porque no es un tamaño especificado en los tokens de icons (CA.R.)*/
                margin-right: 5px;

            }

            &:hover,
            &:focus {
                color: var(--color-text-link-secondary);
            }

            &:hover .icon,
            &:focus .icon {
                fill: var(--color-icon-link-tertiary);
            }

        }

    }

    &__heading {
        display: none;

        @media (--viewport-xs-max) {
            display: flex;
            padding: 15px 30px;
            border-bottom: 1px solid var(--color-gray-40);
        }
    }

    &__footer {
        padding: 15px 30px;
    }

    &__list {
        padding: 0;
        display: flex;
        justify-content: space-between;
        flex-flow: column;
        margin: 0;
        max-width: 100%;
        width: 100%;
        gap: 5px;
        padding-top: 15px;
        padding-bottom: 15px;

        &-item {
            max-width: 100%;
            width: 100%;
            min-height: 50px;
            padding: 15px 20px 15px 20px;
            color: var(--color-secondary);
            display: flex;
            flex-flow: column;

            @media (--viewport-xs-max) {
                padding: 15px 30px;
            }

            &--active {
                color: var(--color-secondary);

                .bodycopy-m {
                    color: var(--color-secondary)
                }

                span.bodycopy-m {
                    &:hover,
                    &:focus {
                        color: var(--color-text-link-secondary);
                    }
                }
            }

            &--disabled {
                color: var(--color-disabled);

                .bodycopy-m {
                    color: var(--color-disabled);
                }
            }
        }
    }
}
  • URL: /components/raw/dropdown-menu/dropdown-menu.css
  • Filesystem Path: src/02-molecules/dropdown-menu/dropdown-menu.css
  • Size: 5.2 KB

No notes defined.