UHasselt Component Library

App Absences Card: Ongoing 

<div class="mol-absences-card ongoing">
    <div class="wrapper">
        <div class="column">
            <div class="time-block">
                <span class="date">
                    12/04/2021
                </span>
                <span>
                    t/m
                </span>
                <span class="date">
                    12/04/2021
                </span>
            </div>
        </div>
        <div class="column">
            <div class="info-total">
                <div>
                    Gevraagde examens
                </div>
                <div class="amount">
                    2
                </div>
            </div>
            <div class="info-total">
                <div>
                    Gevraagde inhaalexamens
                </div>
                <div class="amount">
                    2
                </div>
            </div>
            <div class="info-total">
                <div class='mol-tag tag-accept'>
                    <span class="atm-icon fas fa-dot-circle   " aria-hidden="true"></span>
                    <span>Goedgekeurd</span>
                </div>
                <div class="amount text-green">
                    1
                </div>
            </div>
            <div class="info-total">
                <div class='mol-tag tag-reject'>
                    <span class="atm-icon fas fa-dot-circle   " aria-hidden="true"></span>
                    <span>Afgekeurd</span>
                </div>
                <div class="amount text-red">
                    1
                </div>
            </div>
            <div class="info-total">
                <div class='mol-tag tag-applied'>
                    <span class="atm-icon fas fa-dot-circle   " aria-hidden="true"></span>
                    <span>Aangevraagd</span>
                </div>
                <div class="amount text-black-500">
                    1
                </div>
            </div>
        </div>
        <div class="column">
            <div class="info-total">
                <div>
                    Afwezig onderwijsactiviteiten
                </div>
                <div class="amount">
                    1
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="atm-button button-red ">
        <span>
            <span class="text">
                Bekijk lopende afwezigheid
            </span>
        </span>
    </a>

</div>
 
<div class="mol-absences-card {{modifier}}">
    <div class="wrapper">
        <div class="column">
            <div class="time-block">
                <span class="date">
                    {{date}}
                </span>
                <span>
                    t/m
                </span>
                <span class="date">
                    {{date}}
                </span>
            </div>
        </div>
        <div class="column">
            <div class="info-total">
                <div>
                    Gevraagde examens
                </div>
                <div class="amount">
                    2
                </div>
            </div>
            <div class="info-total">
                <div>
                    Gevraagde inhaalexamens
                </div>
                <div class="amount">
                    2
                </div>
            </div>
            <div class="info-total">
                {{render '@app-tag--tag-accept'}}
                <div class="amount text-green">
                    1
                </div>
            </div>
            <div class="info-total">
                {{render '@app-tag--tag-reject'}}
                <div class="amount text-red">
                    1
                </div>
            </div>
            <div class="info-total">
                {{render '@app-tag--tag-applied'}}
                <div class="amount text-black-500">
                    1
                </div>
            </div>
        </div>
        <div class="column">
            <div class="info-total">
                <div>
                    Afwezig onderwijsactiviteiten
                </div>
                <div class="amount">
                    1
                </div>
            </div>
        </div>
    </div>
    {{render '@app-button' button merge=true}}
</div>
 
{
  "date": "12/04/2021",
  "modifier": "ongoing",
  "button": {
    "text": "Bekijk lopende afwezigheid",
    "iconBefore": false
  }
}
  • Content: 
    .mol-absences-card {
    @apply p-8 border border-solid border-gray;

    &.ongoing {
        @apply bg-white shadow-xl;
    }

    &.previous {
        @apply bg-gray-500;
    }

    .wrapper {
        @apply flex flex-col lg:flex-row gap-8 lg:gap-12 mb-6;

        .column {
            @apply flex-1;

            .time-block {
                @apply flex flex-row gap-8;

                .date {
                    @apply font-semibold;
                }
            }

            .info-total {
                @apply flex flex-row gap-8 mb-2 justify-between;
            }
        }
    }
}
  • URL: /components/raw/app-absences-card/app-absences-card.css
  • Filesystem Path: src\components\08-app-molecules\app-absences-card\app-absences-card.css
  • Size: 629 Bytes

No notes defined.