[TASK] refactor code and add base css components

This commit is contained in:
Marie Birner
2023-04-07 09:44:08 +02:00
parent 0ee9967d3a
commit 1490b191af
14 changed files with 165 additions and 133 deletions

View File

@ -0,0 +1,4 @@
<svg width="16" height="16" fill="currentColor" class="inline-block mr-1 h-3 w-3" viewBox="0 0 16 16" style="margin-top: -0.2rem;">
<path
d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
</svg>

After

Width:  |  Height:  |  Size: 344 B

View File

@ -0,0 +1,6 @@
<svg width="16" height="16" fill="currentColor" class="inline h-4 w-4" viewBox="0 0 16 16">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
<path fill-rule="evenodd"
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
</svg>

After

Width:  |  Height:  |  Size: 551 B

View File

@ -0,0 +1,3 @@
<svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
</svg>

After

Width:  |  Height:  |  Size: 330 B

View File

@ -24,9 +24,9 @@
<div class="h-8"></div>
{% endmacro header %}
{% macro input(label, name, type, required=false) %}
{% macro input(label, name, type, required=false, class='rounded-md') %}
<label for="{{ name }}" class="sr-only">{{ label }}</label>
<input id="{{ name }}" name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} class="relative block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="{{ label }}">
<input id="{{ name }}" name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} class="input {{ class }}" placeholder="{{ label }}">
{% endmacro input %}
{% macro checkbox(label, name, id='', checked=false) %}