UHasselt Component Library

App Akte Card: Empty Akte 

<div class='mol-akte-card '>
    <div class='item upload'>
        <div class='img'>
            <svg xmlns='http://www.w3.org/2000/svg' width='72' height='56' viewBox='0 0 72 56' fill='none'>
                <path d='M66 0H14C10.625 0 8 2.75 8 6V8H6C2.625 8 0 10.75 0 14V50C0 53.375 2.625 56 6 56H58C61.25 56 64 53.375 64 50V48H66C69.25 48 72 45.375 72 42V6C72 2.75 69.25 0 66 0ZM60 50C60 51.125 59 52 58 52H6C4.875 52 4 51.125 4 50V14C4 13 4.875 12 6 12H8V42C8 45.375 10.625 48 14 48H60V50ZM68 42C68 43.125 67 44 66 44H14C12.875 44 12 43.125 12 42V6C12 5 12.875 4 14 4H66C67 4 68 5 68 6V42ZM22 21C25.75 21 29 17.875 29 14C29 10.25 25.75 7 22 7C18.125 7 15 10.25 15 14C15 17.875 18.125 21 22 21ZM22 11C23.625 11 25 12.375 25 14C25 15.75 23.625 17 22 17C20.25 17 19 15.75 19 14C19 12.375 20.25 11 22 11ZM52 14C50.875 12.75 49 12.75 47.875 14L36 25.875L32 22C30.875 20.75 29 20.75 27.875 22L16.875 33C16.25 33.5 16 34.25 16 35V38.5C16 39.375 16.625 40 17.5 40H62.5C63.25 40 64 39.375 64 38.5V27C64 26.25 63.625 25.5 63 25L52 14ZM60 36H20V35.5L30 25.5L36 31.5L50 17.5L60 27.5V36Z' fill='black'></path>
            </svg>
            <form action=''>
                <input type='file' id='myfile' name='myfile' />
                <label for='myfile'>
                    Media toevoegen
                </label>
            </form>
        </div>
    </div>
</div>
 
<div class='mol-akte-card {{modifier}}'>
    {{#unless edit}}
        {{#each items}}
            <div class='item'>
                <div class='img'>
                    <svg
                        xmlns='http://www.w3.org/2000/svg'
                        width='72'
                        height='56'
                        viewBox='0 0 72 56'
                        fill='none'
                    >
                        <path
                            d='M66 0H14C10.625 0 8 2.75 8 6V8H6C2.625 8 0 10.75 0 14V50C0 53.375 2.625 56 6 56H58C61.25 56 64 53.375 64 50V48H66C69.25 48 72 45.375 72 42V6C72 2.75 69.25 0 66 0ZM60 50C60 51.125 59 52 58 52H6C4.875 52 4 51.125 4 50V14C4 13 4.875 12 6 12H8V42C8 45.375 10.625 48 14 48H60V50ZM68 42C68 43.125 67 44 66 44H14C12.875 44 12 43.125 12 42V6C12 5 12.875 4 14 4H66C67 4 68 5 68 6V42ZM22 21C25.75 21 29 17.875 29 14C29 10.25 25.75 7 22 7C18.125 7 15 10.25 15 14C15 17.875 18.125 21 22 21ZM22 11C23.625 11 25 12.375 25 14C25 15.75 23.625 17 22 17C20.25 17 19 15.75 19 14C19 12.375 20.25 11 22 11ZM52 14C50.875 12.75 49 12.75 47.875 14L36 25.875L32 22C30.875 20.75 29 20.75 27.875 22L16.875 33C16.25 33.5 16 34.25 16 35V38.5C16 39.375 16.625 40 17.5 40H62.5C63.25 40 64 39.375 64 38.5V27C64 26.25 63.625 25.5 63 25L52 14ZM60 36H20V35.5L30 25.5L36 31.5L50 17.5L60 27.5V36Z'
                            fill='black'
                        ></path>
                    </svg>
                </div>
            </div>
        {{/each}}
    {{/unless}}
    {{#if edit}}
        <div class='item upload'>
            <div class='img'>
                <svg
                    xmlns='http://www.w3.org/2000/svg'
                    width='72'
                    height='56'
                    viewBox='0 0 72 56'
                    fill='none'
                >
                    <path
                        d='M66 0H14C10.625 0 8 2.75 8 6V8H6C2.625 8 0 10.75 0 14V50C0 53.375 2.625 56 6 56H58C61.25 56 64 53.375 64 50V48H66C69.25 48 72 45.375 72 42V6C72 2.75 69.25 0 66 0ZM60 50C60 51.125 59 52 58 52H6C4.875 52 4 51.125 4 50V14C4 13 4.875 12 6 12H8V42C8 45.375 10.625 48 14 48H60V50ZM68 42C68 43.125 67 44 66 44H14C12.875 44 12 43.125 12 42V6C12 5 12.875 4 14 4H66C67 4 68 5 68 6V42ZM22 21C25.75 21 29 17.875 29 14C29 10.25 25.75 7 22 7C18.125 7 15 10.25 15 14C15 17.875 18.125 21 22 21ZM22 11C23.625 11 25 12.375 25 14C25 15.75 23.625 17 22 17C20.25 17 19 15.75 19 14C19 12.375 20.25 11 22 11ZM52 14C50.875 12.75 49 12.75 47.875 14L36 25.875L32 22C30.875 20.75 29 20.75 27.875 22L16.875 33C16.25 33.5 16 34.25 16 35V38.5C16 39.375 16.625 40 17.5 40H62.5C63.25 40 64 39.375 64 38.5V27C64 26.25 63.625 25.5 63 25L52 14ZM60 36H20V35.5L30 25.5L36 31.5L50 17.5L60 27.5V36Z'
                        fill='black'
                    ></path>
                </svg>
                <form action=''>
                    <input type='file' id='myfile' name='myfile' />
                    <label for='myfile'>
                        Media toevoegen
                    </label>
                </form>
            </div>
        </div>
        {{#each items}}
            <div class='item'>
                <div class='icon-delete'>
                    {{render '@app-link' ../icon-delete merge=true}}
                </div>
                <div class='img'>
                    <svg
                        xmlns='http://www.w3.org/2000/svg'
                        width='72'
                        height='56'
                        viewBox='0 0 72 56'
                        fill='none'
                    >
                        <path
                            d='M66 0H14C10.625 0 8 2.75 8 6V8H6C2.625 8 0 10.75 0 14V50C0 53.375 2.625 56 6 56H58C61.25 56 64 53.375 64 50V48H66C69.25 48 72 45.375 72 42V6C72 2.75 69.25 0 66 0ZM60 50C60 51.125 59 52 58 52H6C4.875 52 4 51.125 4 50V14C4 13 4.875 12 6 12H8V42C8 45.375 10.625 48 14 48H60V50ZM68 42C68 43.125 67 44 66 44H14C12.875 44 12 43.125 12 42V6C12 5 12.875 4 14 4H66C67 4 68 5 68 6V42ZM22 21C25.75 21 29 17.875 29 14C29 10.25 25.75 7 22 7C18.125 7 15 10.25 15 14C15 17.875 18.125 21 22 21ZM22 11C23.625 11 25 12.375 25 14C25 15.75 23.625 17 22 17C20.25 17 19 15.75 19 14C19 12.375 20.25 11 22 11ZM52 14C50.875 12.75 49 12.75 47.875 14L36 25.875L32 22C30.875 20.75 29 20.75 27.875 22L16.875 33C16.25 33.5 16 34.25 16 35V38.5C16 39.375 16.625 40 17.5 40H62.5C63.25 40 64 39.375 64 38.5V27C64 26.25 63.625 25.5 63 25L52 14ZM60 36H20V35.5L30 25.5L36 31.5L50 17.5L60 27.5V36Z'
                            fill='black'
                        ></path>
                    </svg>
                </div>
            </div>
        {{/each}}
    {{/if}}
</div>
 
{
  "items": [],
  "icon-delete": {
    "iconBefore": {
      "icon": "fa-times",
      "style": "far"
    }
  },
  "edit": true
}
  • Content: 
    .mol-akte-card {
    @apply flex flex-row space-x-4 md:p-8 md:border border-solid border-gray overflow-auto shadow-xl;
    .item {
        @apply relative min-w-[300px] h-[235px] bg-gray;

        &.upload {
            @apply bg-white border-2 border-dashed border-gray;
        }

        .img {
            @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
        }

        svg {
            @apply m-auto;
        }

        form {
            @apply mt-8;
        }

        .icon-delete {
            @apply absolute right-4 top-4 text-red;

            .text {
                @apply hidden;
            }
        }

        input {
            @apply hidden;
        }

        label {
            @apply underline cursor-pointer text-center;
        }
    }
}
  • URL: /components/raw/app-akte-card/app-akte-card.css
  • Filesystem Path: src\components\08-app-molecules\app-akte-card\app-akte-card.css
  • Size: 837 Bytes

No notes defined.