Skip to content

Commit a98a9d6

Browse files
obulatobulat
committed
Update steps and Stepper styles
Signed-off-by: Olga Bulat <obulat@gmail.com>
1 parent 07c944e commit a98a9d6

File tree

5 files changed

+157
-180
lines changed

5 files changed

+157
-180
lines changed

‎src/components/AttributionDetails.vue‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
11
<template>
2-
<div class="card-content step-card-content" v-if="!(this.status==='inactive')">
3-
<div class="step-actions" v-if="this.status==='current'">
4-
<p class="attribution-details-instructions">{{$t('stepper.AD.instructions')}}</p>
5-
<form class="attribution-details-form">
6-
<b-field :label="this.$t('stepper.attribution-details.creator-name.label')">
7-
<b-input
8-
v-model="creatorName"
9-
:placeholder="this.$t('stepper.attribution-details.creator-name.placeholder')"
10-
/>
11-
</b-field>
12-
<b-field :label="this.$t('stepper.attribution-details.creator-profile.label')">
13-
<b-input
14-
v-model="creatorProfileUrl"
15-
:placeholder="this.$t('stepper.attribution-details.creator-profile.placeholder')"
16-
/>
17-
</b-field>
18-
<b-field :label="this.$t('stepper.attribution-details.work-title.label')">
19-
<b-input
20-
v-model="workTitle"
21-
:placeholder="this.$t('stepper.attribution-details.work-title.placeholder')"
22-
/>
23-
</b-field>
24-
<b-field :label="this.$t('stepper.attribution-details.work-url.label')">
25-
<b-input
26-
v-model="workUrl"
27-
:placeholder="this.$t('stepper.attribution-details.work-url.placeholder')"
28-
/>
29-
</b-field>
30-
</form>
2+
<div class="step-actions" v-if="this.status==='current'">
3+
<p class="attribution-details-instructions">{{$t('stepper.AD.instructions')}}</p>
4+
<form class="attribution-details-form">
5+
<b-field :label="this.$t('stepper.attribution-details.creator-name.label')">
6+
<b-input
7+
v-model="creatorName"
8+
:placeholder="this.$t('stepper.attribution-details.creator-name.placeholder')"
9+
/>
10+
</b-field>
11+
<b-field :label="this.$t('stepper.attribution-details.creator-profile.label')">
12+
<b-input
13+
v-model="creatorProfileUrl"
14+
:placeholder="this.$t('stepper.attribution-details.creator-profile.placeholder')"
15+
/>
16+
</b-field>
17+
<b-field :label="this.$t('stepper.attribution-details.work-title.label')">
18+
<b-input
19+
v-model="workTitle"
20+
:placeholder="this.$t('stepper.attribution-details.work-title.placeholder')"
21+
/>
22+
</b-field>
23+
<b-field :label="this.$t('stepper.attribution-details.work-url.label')">
24+
<b-input
25+
v-model="workUrl"
26+
:placeholder="this.$t('stepper.attribution-details.work-url.placeholder')"
27+
/>
28+
</b-field>
29+
</form>
3130
</div>
32-
</div>
3331
</template>
3432

3533
<script>
@@ -73,18 +71,18 @@ export default {
7371
</script>
7472

7573
<style>
76-
.attribution-details-form {
77-
margin-top: 1rem;
78-
}
74+
.attribution-details-form {
75+
margin-top: 1rem;
76+
}
7977
.attribution-details-form label {
8078
font-style: normal;
8179
font-weight: normal;
8280
font-size: 16px;
8381
line-height: 24px;
8482
color: #333333;
8583
}
86-
.field .control .input {
87-
font-weight: 500;
88-
font-size: 16px;
89-
}
84+
.field .control .input {
85+
font-weight: 500;
86+
font-size: 16px;
87+
}
9088
</style>

‎src/components/DropdownStep.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<template>
2-
<div class="card-content step-card-content">
2+
<div>
33
<div class="step-description" v-if="this.status==='previous'">
44
{{cardText}}
55
</div>
66
<div class="step-actions" v-else-if="this.status==='current'">
77
<SelectedLicenseDropdown />
88
</div>
99
</div>
10+
1011
</template>
1112

1213
<script>

‎src/components/FirstStep.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<template>
2-
<div class="card-content step-card-content">
3-
<div class="step-description" v-if="this.status==='previous'">
2+
<div>
3+
<p class="step-description vocab-body body-normal" v-if="this.status==='previous'">
44
{{$t(cardText)}}
5-
</div>
5+
</p>
66
<div class="step-actions" v-else-if="this.status==='current'">
77
<div class="field" :class="yesSelected">
88
<b-radio v-model="radio"
99
native-value="yes">
10-
<span v-html="$t(yesText)" />
10+
<span class="vocab-body body-normal" v-html="$t(yesText)" />
1111
</b-radio>
1212
</div>
1313
<div class="field" :class="noSelected">
1414
<b-radio v-model="radio"
1515
native-value="no">
16-
<span v-html="$t(noText)" />
16+
<span class="vocab-body body-normal" v-html="$t(noText)" />
1717
</b-radio>
1818
</div>
1919
</div>

‎src/components/Step.vue‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
<template>
2-
<transition name="slide" mode="out-in">
3-
<div class="card-content step-card-content" v-if="!(this.status==='inactive')">
4-
<div class="step-description" v-if="this.status==='previous'">
5-
<transition name="slide">
6-
<p>{{$t(cardText)}}</p>
7-
</transition>
8-
</div>
2+
<div>
3+
<div class="step-description vocab-body body-normal" v-if="this.status==='previous'">
4+
<p class="vocab-body body-normal">{{$t(cardText)}}</p>
5+
</div>
96
<div class="step-actions" v-else-if="this.status==='current'">
10-
<div>
11-
<div class="field" :class="yesSelected">
12-
<b-radio v-model="radio"
13-
native-value="yes">
14-
<span>{{$t('yes')}}{{$t(yesText)}}</span>
15-
</b-radio>
16-
</div>
17-
<div class="field" :class="noSelected">
18-
<b-radio v-model="radio"
19-
native-value="no">
20-
<span>{{$t('no')}}{{$t(noText)}}</span>
21-
</b-radio>
22-
</div>
23-
</div>
7+
<div class="field" :class="yesSelected">
8+
<b-radio v-model="radio"
9+
native-value="yes">
10+
<span class="vocab-body body-normal">{{$t('yes')}}{{$t(yesText)}}</span>
11+
</b-radio>
12+
</div>
13+
<div class="field" :class="noSelected">
14+
<b-radio v-model="radio"
15+
native-value="no">
16+
<span class="vocab-body body-normal">{{$t('no')}}{{$t(noText)}}</span>
17+
</b-radio>
18+
</div>
2419
</div>
2520
</div>
26-
</transition>
2721
</template>
2822

2923
<script>

0 commit comments

Comments
 (0)