create secondary-small button component

This commit is contained in:
Constantin Wildförster 2022-11-16 12:29:40 +01:00
parent 8ce6c30fde
commit 1063773ddf
No known key found for this signature in database
GPG key ID: 5DDDBFF28CC85AFB
2 changed files with 19 additions and 9 deletions

View file

@ -0,0 +1,10 @@
<#macro kw component="button" rest...>
<${component}
class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900"
<#list rest as attrName, attrValue>
${attrName}="${attrValue}"
</#list>
>
<#nested>
</${component}>
</#macro>

View file

@ -1,6 +1,7 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<#import "components/button/primary.ftl" as buttonPrimary> <#import "components/button/primary.ftl" as buttonPrimary>
<#import "components/button/secondary.ftl" as buttonSecondary> <#import "components/button/secondary.ftl" as buttonSecondary>
<#import "components/button/secondary-small.ftl" as buttonSecondarySmall>
<#import "components/checkbox/primary.ftl" as checkboxPrimary> <#import "components/checkbox/primary.ftl" as checkboxPrimary>
<@layout.registrationLayout; section> <@layout.registrationLayout; section>
@ -23,15 +24,14 @@
<!-- actions --> <!-- actions -->
<div class="flex items-stretch space-x-4 mb-4"> <div class="flex items-stretch space-x-4 mb-4">
<button id="printRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900"> <@buttonSecondarySmall.kw type="button" id="printRecoveryCodes">
${kcSanitize(msg("recovery-codes-print"))} ${kcSanitize(msg("recovery-codes-print"))}
</button> <@buttonSecondarySmall.kw type="button" id="downloadRecoveryCodes">
<button id="downloadRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
${kcSanitize(msg("recovery-codes-download"))} ${kcSanitize(msg("recovery-codes-download"))}
</button> </@buttonSecondarySmall.kw>
<button id="copyRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900"> <@buttonSecondarySmall.kw type="button" id="copyRecoveryCodes">
${kcSanitize(msg("recovery-codes-copy"))} ${kcSanitize(msg("recovery-codes-copy"))}
</button> </@buttonSecondarySmall.kw>
</div> </div>
<form action="${url.loginAction}" class="m-0 space-y-4m" method="post"> <form action="${url.loginAction}" class="m-0 space-y-4m" method="post">