1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<!--
- @copyright 2020 Christoph Wurst <christoph@winzerhof-wurst.at>
-
- @author 2020 Christoph Wurst <christoph@winzerhof-wurst.at>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div class="submit-wrapper" @click="$emit('click')">
<input type="submit"
class="submit-wrapper__input primary"
title=""
:value="!loading ? value : valueLoading">
<div v-if="loading" class="submit-wrapper__icon icon-loading-small-dark" />
<ArrowRight v-else class="submit-wrapper__icon" />
</div>
</template>
<script>
import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
export default {
name: 'LoginButton',
components: {
ArrowRight,
},
props: {
value: {
type: String,
default: t('core', 'Log in'),
},
valueLoading: {
type: String,
default: t('core', 'Logging in …'),
},
loading: {
type: Boolean,
required: true,
},
invertedColors: {
type: Boolean,
default: false,
},
},
}
</script>
<style scoped lang="scss">
.submit-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 5px;
position: relative;
margin: 0 auto;
&__input {
width: 260px;
height: 50px;
}
&__icon {
display: flex;
position: absolute;
right: 24px;
transition: right 100ms ease-in-out;
/* The submit icon is positioned on the submit button.
From the user point of view the icon is part of the
button, so the clicks on the icon have to be
applied to the button instead. */
pointer-events: none;
}
&__input:hover + &__icon:not(.icon-loading-small-dark),
&__input:focus + &__icon:not(.icon-loading-small-dark),
&__input:active + &__icon:not(.icon-loading-small-dark) {
right: 20px;
}
}
</style>
|
