UHasselt Component Library

App Footer Edit 

<section class='org-footer-edit'>
    <div class='uhasselt-container'>
        <div> <a href="#" class="atm-button button-red ">
                <span>
                    <span class="text">
                        Afwezigheid opslaan
                    </span>
                </span>
            </a>
        </div>
        <div> <a href="#" class="atm-button button-white ">
                <span>
                    <span class="text">
                        Annuleren
                    </span>
                </span>
            </a>
        </div>
        <div class='button-remove'> <a href="#" class="atm-button button-white ">
                <span>
                    <span class="atm-icon fal fa-trash-alt   " aria-hidden="true"></span>
                    <span class="text">
                        Melding afwezigheid volledig verwijderen
                    </span>
                </span>
            </a>
        </div>
    </div>
</section>
 
<section class='org-footer-edit'>
    <div class='uhasselt-container'>
        <div>{{render '@app-button' button-first merge=true}}</div>
        <div>{{render '@app-button--white' button-second merge=true}}</div>
        <div class='button-remove'>{{render
                '@app-button--white'
                button-remove
                merge=true
            }}</div>
    </div>
</section>
 
{
  "button-first": {
    "text": "Afwezigheid opslaan",
    "iconBefore": false
  },
  "button-second": {
    "text": "Annuleren",
    "iconBefore": false
  },
  "button-remove": {
    "text": "Melding afwezigheid volledig verwijderen",
    "iconBefore": {
      "style": "fal",
      "icon": "fa-trash-alt"
    }
  }
}
  • Content: 
    section.org-footer-edit {
    @apply bg-white shadow-2xl w-full pt-7 pb-5;
    @apply fixed bottom-0 left-0 z-10;

    .uhasselt-container {
        @apply flex flex-row gap-4 md:gap-6;
        @apply py-0;
    }

    .button-remove {
        @apply ml-auto;

        .atm-button .text {
            @apply hidden lg:inline-block;
        }
    }
}
  • URL: /components/raw/app-footer-edit/app-footer-edit.css
  • Filesystem Path: src\components\09-app-organisms\app-footer-edit\app-footer-edit.css
  • Size: 366 Bytes

No notes defined.