|
|
@@ -0,0 +1,67 @@
|
|
|
+<!--
|
|
|
+Bouton de connexion à HelloAsso
|
|
|
+
|
|
|
+@see https://dev.helloasso.com/docs/le-bouton-se-connecter-avec-helloasso
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <button class="HaAuthorizeButton">
|
|
|
+ <v-img
|
|
|
+ src="https://api.helloasso.com/v5/img/logo-ha.svg"
|
|
|
+ alt=""
|
|
|
+ class="HaAuthorizeButtonLogo"
|
|
|
+ />
|
|
|
+
|
|
|
+ <span class="HaAuthorizeButtonTitle">
|
|
|
+ {{ $t('connect_to_helloasso') }}
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.HaAuthorizeButton {
|
|
|
+ align-items: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -ms-flex-pack: center;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border: 0.0625rem solid #4B3FCF;
|
|
|
+ border-radius: 0.125rem;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.HaAuthorizeButton:disabled {
|
|
|
+ background-color: #4B3FCF;
|
|
|
+ border-color: transparent;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
+.HaAuthorizeButton:not(:disabled):focus {
|
|
|
+ box-shadow: 0 0 0 0.25rem rgba(73, 211, 138, 0.25);
|
|
|
+ -webkit-box-shadow: 0 0 0 0.25rem rgba(73, 211, 138, 0.25);
|
|
|
+}
|
|
|
+.HaAuthorizeButtonLogo {
|
|
|
+ padding: 0 0.8rem;
|
|
|
+ width: 60px;
|
|
|
+}
|
|
|
+.HaAuthorizeButtonTitle {
|
|
|
+ background-color: #4B3FCF;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 1rem;
|
|
|
+ font-weight: 700;
|
|
|
+ padding: 0.78125rem 1.5rem;
|
|
|
+}
|
|
|
+.HaAuthorizeButton:disabled .HaAuthorizeButtonTitle {
|
|
|
+ background-color: #4B3FCF;
|
|
|
+ color: #9A9DA8;
|
|
|
+}
|
|
|
+.HaAuthorizeButton:not(:disabled):hover .HaAuthorizeButtonTitle,
|
|
|
+.HaAuthorizeButton:not(:disabled):focus .HaAuthorizeButtonTitle {
|
|
|
+ background-color: #4B3FCF;
|
|
|
+}
|
|
|
+</style>
|