UCI
<ul class="document-upload-list">
    <li class="document-upload-list__item">
        <div class="card card__document upload">
            <div class="card__heading">
                <h3 class="title-m">DNI</h3>
                <span class="state earring caption-label">pendiente</span>
            </div>
            <div class="card__content">
                <p class="bodycopy-s">Aún no se ha subido ningún documento</p>
            </div>
            <div class="card__btn">
                <form action="/upload" class="" id="" name="" novalidate>
                    <div class="button-upload">
                        <input type="file" name="files" class="button-upload__input-file" data-multiple-caption="{count} files selected" multiple />
                        <button id="" class="btn 
                        
                        
                        
                        
                        
                        btn_file
                        btn_secondary
                        
                        btn_secondary
                        
                        
                        
                    " type="file">
                            Añadir
                            <svg class="icon icon-plus      icon-after accent-dark">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
                            </svg>

                        </button>
                    </div>
                </form>

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

                        </button>
                    </div>
                    <div class="dropdown-menu__overlay "></div>
                    <div class="dropdown-menu " 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>
                        <nav class="dropdown-menu__list">
                        </nav>

                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="document-upload-list__item">
        <div class="card card__document upload">
            <div class="card__heading">
                <h3 class="title-m">DNI</h3>
                <span class="state earring caption-label">pendiente</span>
            </div>
            <div class="card__content">
                <p class="bodycopy-s">Aún no se ha subido ningún documento</p>
            </div>
            <div class="card__btn">
                <form action="/upload" class="" id="" name="" novalidate>
                    <div class="button-upload">
                        <input type="file" name="files" class="button-upload__input-file" data-multiple-caption="{count} files selected" multiple />
                        <button id="" class="btn 
                        
                        
                        
                        
                        
                        btn_file
                        btn_secondary
                        
                        btn_secondary
                        
                        
                        
                    " type="file">
                            Añadir
                            <svg class="icon icon-plus      icon-after accent-dark">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
                            </svg>

                        </button>
                    </div>
                </form>

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

                        </button>
                    </div>
                    <div class="dropdown-menu__overlay "></div>
                    <div class="dropdown-menu " 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>
                        <nav class="dropdown-menu__list">
                        </nav>

                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="document-upload-list__item">
        <div class="card card__document upload">
            <div class="card__heading">
                <h3 class="title-m">DNI</h3>
                <span class="state earring caption-label">pendiente</span>
            </div>
            <div class="card__content">
                <p class="bodycopy-s">Aún no se ha subido ningún documento</p>
            </div>
            <div class="card__btn">
                <form action="/upload" class="" id="" name="" novalidate>
                    <div class="button-upload">
                        <input type="file" name="files" class="button-upload__input-file" data-multiple-caption="{count} files selected" multiple />
                        <button id="" class="btn 
                        
                        
                        
                        
                        
                        btn_file
                        btn_secondary
                        
                        btn_secondary
                        
                        
                        
                    " type="file">
                            Añadir
                            <svg class="icon icon-plus      icon-after accent-dark">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
                            </svg>

                        </button>
                    </div>
                </form>

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

                        </button>
                    </div>
                    <div class="dropdown-menu__overlay "></div>
                    <div class="dropdown-menu " 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>
                        <nav class="dropdown-menu__list">
                        </nav>

                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="document-upload-list__item">
        <div class="card card__document upload">
            <div class="card__heading">
                <h3 class="title-m">DNI</h3>
                <span class="state earring caption-label">pendiente</span>
            </div>
            <div class="card__content">
                <p class="bodycopy-s">Aún no se ha subido ningún documento</p>
            </div>
            <div class="card__btn">
                <form action="/upload" class="" id="" name="" novalidate>
                    <div class="button-upload">
                        <input type="file" name="files" class="button-upload__input-file" data-multiple-caption="{count} files selected" multiple />
                        <button id="" class="btn 
                        
                        
                        
                        
                        
                        btn_file
                        btn_secondary
                        
                        btn_secondary
                        
                        
                        
                    " type="file">
                            Añadir
                            <svg class="icon icon-plus      icon-after accent-dark">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
                            </svg>

                        </button>
                    </div>
                </form>

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

                        </button>
                    </div>
                    <div class="dropdown-menu__overlay "></div>
                    <div class="dropdown-menu " 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>
                        <nav class="dropdown-menu__list">
                        </nav>

                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>
<ul class="document-upload-list">
    {{#each itemUpload}}
    <li class="document-upload-list__item">
        {{render '@card--document-upload-earring'}}
    </li>
    {{/each}}
</ul>
{
  "itemUpload": [
    {
      "text": "DNI"
    },
    {
      "text": "Nómina 1"
    },
    {
      "text": "Nómina 2"
    },
    {
      "text": "Nómina 3"
    }
  ]
}
  • Content:
    .document-upload-list {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
        flex-wrap: wrap;
        margin-top: 16px;
        @media (--viewport-ms-max) {
            flex-direction: row;
            gap:30px;
        }
        @media (--viewport-xs-max) {
            gap:24px;
        }
        &__item {
            display: flex;
            flex-flow: nowrap;
            justify-content: space-between;
            position:relative;
            line-height:50px;
            @media (--viewport-ms-max) {
                width: calc(50% - 15px);
            }
            @media (--viewport-xs-max) {
                width: 100%;
            }
        }
    }
  • URL: /components/raw/document-upload-list/document-upload-list.css
  • Filesystem Path: src/06-adhoc/tramitacion/document-upload-list/document-upload-list.css
  • Size: 596 Bytes

No notes defined.