Skip to content

Commit 48a177c

Browse files
srcdevsrcdev
committed
i18n updates
1 parent 5e6d144 commit 48a177c

34 files changed

+2254
-26
lines changed

‎src/assets/styles/imports.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
@import "@/assets/styles/mixins/_fonts";
44
@import "@/assets/styles/mixins/_logos";
55
@import "@/assets/styles/variables/_colours";
6+
@import "@/assets/styles/variables/_forms";
67

78
// @import "variables/_spacing";

‎src/assets/styles/partials/_theme_colours.scss

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ body {
1010
h1, h2, h3, h4, h5, h6,
1111
p, a, li, input, select, textarea,
1212
dl,
13-
table,
14-
.form_label,
15-
.form-input_text {
13+
table {
1614
color: $base-font-light;
1715
}
1816

@@ -23,9 +21,7 @@ table,
2321
h1, h2, h3, h4, h5, h6,
2422
p, a, li, input, select, textarea,
2523
dl,
26-
table,
27-
.form_label,
28-
.form-input_text {
24+
table {
2925
color: $base-font-dark;
3026
}
3127
}

‎src/assets/styles/variables/_colours.scss

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
$white: #fff;
44
$black: #000;
55
$darkGrey: #555;
6-
$greyGreyText: #313131;
6+
$darkGreyText: #313131;
77

88
/*
99
* Main colour scheme
@@ -57,28 +57,30 @@ $page-bg-dark: #2e2f30;
5757
$page-bg-light-rgba: rgba(255, 255, 255, 1);
5858
$page-bg-dark-rgba: rgba(46, 47, 48, 1);
5959

60-
$base-font-light: $greyGreyText;
60+
$base-font-light: $darkGreyText;
6161
$base-font-dark: #f9f7f7;
62-
$border-light: $greyGreyText;
62+
$input-border-light: $darkGreyText;
6363
$border-dark: #f9f7f7;
64+
$icon-default: $color-grey-4;
6465

6566
/*
6667
* Form colours
6768
**/
6869

6970
$btn-bg-error-dark: #271f1f;
7071

71-
$input-text-light: $greyGreyText;
72-
$input-label-light: $greyGreyText;
72+
$input-text-light: $darkGreyText;
73+
$input-label-light: $darkGreyText;
7374
$form-text-error-light: $color-red-5;
7475
$input-label-error-light: $color-red-2;
7576
$input-placeholder-light: #a2a2a2;
7677
$input-placeholder-error-light: $black;
7778
$input-bg-light: $white;
79+
$input-bg-active-light: $color-grey-5;
7880
$input-radio-light: #a2a2a2;
7981
$input-radio-bg-light: $color-green-2;
8082
$input-bg-error-light: $color-red-4;
81-
$input-border-light: $greyGreyText;
83+
$input-border-light: $darkGreyText;
8284
$input-border-error-light: $color-red-6;
8385
$input-border-valid-light: $color-green-1;
8486

@@ -102,7 +104,7 @@ $input-bg-disabled-dark: $color-grey-1;
102104
$input-border-disabled-dark: $color-grey-2;
103105

104106
$input-border-error-dark: $color-red-6;
105-
$input-border-valid-dark: $color-green-7;
107+
$input-border-valid-dark: $color-green-2;
106108

107109
/*
108110
* Deck colours

‎src/assets/styles/variables/_forms.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
$inputBorderWidth: 1px;
2+
$inputBorderRadius: 7px;
3+
$inputBorderColour: $input-border-light;
4+
$inputBorderColourError: $input-border-error-dark;
5+
$inputBorderColourValid: $input-border-valid-dark;
6+
$inputFillColour: $input-border-light;
7+
$inputFillColourDisabled: $input-border-light;
8+
9+
$checkboxRadioBorderColour: $input-border-valid-dark;
10+
$checkboxRadioCheckedColour: $input-border-valid-dark;
11+
12+
$button-loading-radius: 14px;

‎src/components/base/forms/FormInputButton.vue

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
<template>
2+
<div class="control control-button" :class="[{ 'icon-only': isIconOnly }, { 'has-icons-left': hasIconsLeft }, { 'has-icons-right': hasIconsRight }, { 'field-addon-right': isFieldAddOnRight }]">
3+
<button :type="buttonType" class="is-rounded" :class="[inputClasses, { 'has-icons-left': hasIconsLeft }, { 'has-icons-right': hasIconsRight }]" :disabled="submitDisabled" :aria-disabled="submitDisabled" :data-testid="`${dataTestid}-${inputTestid}`">
4+
<Loading v-if="displayLoader" :loading-type="loadingType" :no-opacity="true" />
5+
<span :class="[{ 'access-hidden': isIconOnly }]">{{ submitText }}</span>
6+
<slot name="iconOnly"></slot>
7+
</button>
8+
<slot name="iconsLeft"></slot>
9+
<slot name="iconsRight"></slot>
10+
</div>
11+
</template>
12+
13+
<script type="ts">
14+
15+
import { defineComponent } from "vue";
16+
import Loading from "@/components/base/loading/Loading.vue";
17+
18+
export default defineComponent({
19+
name: 'FormInputSubmit',
20+
components: {
21+
Loading
22+
},
23+
props: {
24+
dataTestid: {
25+
type: String,
26+
default: ''
27+
},
28+
inputClasses: {
29+
type: [Array, String],
30+
default: ''
31+
},
32+
displayLoader: {
33+
type: Boolean,
34+
default: false
35+
},
36+
inputTestid: {
37+
type: String,
38+
default: ''
39+
},
40+
submitDisabled: {
41+
type: Boolean,
42+
default: false
43+
},
44+
submitText: {
45+
type: [Number, String],
46+
default: null
47+
},
48+
loadingType: {
49+
type: String,
50+
default: "asyncLoad",
51+
},
52+
buttonType: {
53+
type: String,
54+
default: "button",
55+
},
56+
isFieldAddOnRight: {
57+
type: Boolean,
58+
default: false
59+
},
60+
},
61+
computed: {
62+
isIconOnly() {
63+
return this.$slots.iconOnly && this.$slots.iconOnly().findIndex(o => o.type !== Comment) !== -1;
64+
},
65+
hasIconsLeft() {
66+
return this.$slots.iconsLeft && this.$slots.iconsLeft().findIndex(o => o.type !== Comment) !== -1;
67+
},
68+
hasIconsRight() {
69+
return this.$slots.iconsRight && this.$slots.iconsRight().findIndex(o => o.type !== Comment) !== -1;
70+
},
71+
},});
72+
</script>
73+
<style lang="scss">
74+
@import "@/assets/styles/imports.scss";
75+
76+
.control {
77+
// &.actions {
78+
// top: 0;
79+
// margin-top: 20px;
80+
// }
81+
82+
&.icon-only {
83+
position: relative;
84+
.icon {
85+
position: absolute;
86+
left: 0;
87+
margin: 0 !important;
88+
text-align: center;
89+
top: 8px;
90+
width: 100%;
91+
92+
.fa,
93+
.fas {
94+
font-size: 18px;
95+
}
96+
}
97+
}
98+
&.field-addon-right {
99+
margin-top: -5px;
100+
101+
> .icon {
102+
width: 60px;
103+
height: 38px;
104+
position: relative;
105+
top: initial;
106+
left: initial;
107+
border: 1px solid $inputBorderColour;
108+
background-color: $page-bg-light;
109+
border-radius: 0 $inputBorderRadius $inputBorderRadius 0;
110+
}
111+
}
112+
113+
/*
114+
* Button icon colours
115+
*/
116+
&.has-icons-left,
117+
&.has-icons-right {
118+
.button {
119+
& ~ .icon {
120+
color: $input-border-light;
121+
}
122+
123+
&.is-link ~ .icon {
124+
color: $page-bg-light;
125+
}
126+
127+
&.as-link ~ .icon {
128+
color: $input-border-light;
129+
}
130+
&.fundraising,
131+
&.donations,
132+
&.volunteering {
133+
& ~ .icon {
134+
color: $page-bg-light;
135+
}
136+
}
137+
}
138+
.icon {
139+
color: $icon-default;
140+
&.password-toggle {
141+
color: $input-border-light;
142+
}
143+
}
144+
}
145+
&.icon-only .icon {
146+
color: $input-border-light;
147+
}
148+
149+
.button {
150+
// border-radius: $button-border-radius;
151+
font-size: 14px;
152+
line-height: 1.3333%;
153+
height: 40px;
154+
155+
&:hover:not([disabled]) {
156+
background-color: $input-bg-active-light;
157+
}
158+
159+
&.is-link {
160+
background-color: $input-border-light;
161+
&:hover:not([disabled]) {
162+
background-color: $input-bg-active-light;
163+
}
164+
}
165+
166+
&.as-link {
167+
background-color: $page-bg-light;
168+
border-color: transparent;
169+
padding-left: 0;
170+
padding-right: 0;
171+
172+
&:hover:not([disabled]),
173+
&:focus:not([disabled]) {
174+
background-color: transparent;
175+
text-decoration: underline;
176+
box-shadow: none;
177+
}
178+
179+
&.has-icons {
180+
&-left {
181+
padding-left: 40px;
182+
}
183+
&-right {
184+
padding-right: 35px;
185+
}
186+
}
187+
188+
& ~ .is-left {
189+
left: 0 !important;
190+
}
191+
192+
& ~ .is-right {
193+
right: 0 !important;
194+
}
195+
}
196+
197+
&-nav-arrow {
198+
background-color: transparent;
199+
border: none;
200+
width: auto;
201+
height: auto;
202+
padding: 8px 0;
203+
204+
&:hover:not([disabled]),
205+
&:focus:not([disabled]) {
206+
background-color: transparent;
207+
text-decoration: underline;
208+
box-shadow: none;
209+
}
210+
211+
.icon {
212+
position: relative;
213+
}
214+
215+
&_light {
216+
.icon {
217+
color: $page-bg-light;
218+
.fa {
219+
font-size: 14px;
220+
}
221+
}
222+
}
223+
}
224+
225+
& ~ .loader-wrapper {
226+
border-radius: $button-loading-radius;
227+
}
228+
229+
&.has-icons {
230+
&-left {
231+
padding-left: 45px;
232+
}
233+
&-right {
234+
padding-right: 45px;
235+
}
236+
}
237+
238+
&.icon-only {
239+
padding: 0 50px;
240+
}
241+
242+
&.has-icons-left,
243+
&.has-icons-right {
244+
& ~ .icon {
245+
opacity: 1 !important;
246+
top: 1px;
247+
248+
display: flex;
249+
align-content: center;
250+
align-items: center;
251+
252+
&.is-left {
253+
left: 12px;
254+
}
255+
256+
&.is-right {
257+
right: 5px;
258+
}
259+
260+
.fa,
261+
.fas {
262+
width: 100%;
263+
text-align: center;
264+
}
265+
}
266+
}
267+
268+
&.flat {
269+
border-color: transparent;
270+
}
271+
272+
&:disabled {
273+
&.has-icons-left,
274+
&.has-icons-right {
275+
& ~ .icon {
276+
opacity: 0.4 !important;
277+
}
278+
}
279+
}
280+
281+
&.dialog-close-btn {
282+
display: flex;
283+
height: auto;
284+
width: auto;
285+
padding: 0;
286+
287+
.icon {
288+
height: 18px;
289+
width: 18px;
290+
position: relative;
291+
left: auto;
292+
top: auto;
293+
margin: 4px !important;
294+
}
295+
}
296+
}
297+
}
298+
</style>

0 commit comments

Comments
 (0)