UHasselt Component Library

App Add Course Unit 

<!-- Add Course -->
<div class="add-course-unit ">
    <span>
        Opleidingsonderdeel toevoegen
    </span>
    <select class="form-select " name="select" id="select">
        <option value="0">Biologie (2456)</option>
        <option value="1" selected>Fysica (1850)</option>
        <option value="2">Mathemetical Biologie and Epidimiology DL (8752)</option>
    </select>
    <a href="#" class="atm-link " aria-label="" title="Opleidingsonderdeel toevoegen">

        <span class="text">Opleidingsonderdeel toevoegen</span>
        <span class="atm-icon far fa-plus-circle   " aria-hidden="true"></span>

    </a>

</div>


<!-- Add Work -->
<div class="add-course-unit white">
    <span>
        Werkvorm toevoegen
    </span>
    <select class="form-select " name="select" id="select">
        <option value="0">Biologie (2456)</option>
        <option value="1" selected>Fysica (1850)</option>
        <option value="2">Mathemetical Biologie and Epidimiology DL (8752)</option>
    </select>
    <a href="#" class="atm-link " aria-label="" title="Werkvorm toevoegen">

        <span class="text">Werkvorm toevoegen</span>
        <span class="atm-icon far fa-plus-circle   " aria-hidden="true"></span>

    </a>

</div>


<div class="add-course-unit {{modifier}}">
    <span>
        {{text}}
    </span>
    {{render '@app-select'}}
    {{render '@app-link--icon-after' add-course-link merge=true}}
</div>
 
/* Add Course */
{
  "text": "Opleidingsonderdeel toevoegen",
  "add-course-link": {
    "title": "Opleidingsonderdeel toevoegen",
    "text": "Opleidingsonderdeel toevoegen",
    "iconAfter": {
      "icon": "fa-plus-circle",
      "style": "far"
    }
  }
}


/* Add Work */
{
  "text": "Werkvorm toevoegen",
  "add-course-link": {
    "title": "Werkvorm toevoegen",
    "text": "Werkvorm toevoegen",
    "iconAfter": {
      "icon": "fa-plus-circle",
      "style": "far"
    }
  },
  "modifier": "white"
}
  • Content: 
    .add-course-unit {
    @apply p-8 bg-white md:bg-gray-300 border border-gray-900 border-t-gray-100;
    @apply flex flex-col lg:items-center lg:flex-row gap-4 lg:gap-8;

    &.white {
        @apply bg-white;
    }
    .atm-link {
        @apply text-green;

        .text {
            @apply underline;
        }
    }
}
  • URL: /components/raw/app-add-course-unit/app-add-course-unit.css
  • Filesystem Path: src\components\08-app-molecules\app-add-course-unit\app-add-course-unit.css
  • Size: 338 Bytes

No notes defined.