-
Notifications
You must be signed in to change notification settings - Fork 2.1k
/
error.vue
91 lines (89 loc) · 2.24 KB
/
error.vue
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
<template>
<div id="error">
<SfImage
class="image"
src="/error/error.svg"
alt="leaves"
/>
<SfHeading
:title="error.statusCode === 404 ? 'Page not found' : 'An error occured'"
:level="2"
:description="error.statusCode === 404 ? 'We are sorry that we can’t find the page, please go back or try again' : 'Please go back or try again'"
class="heading sf-heading--no-underline"
/>
<div class="actions">
<SfButton link="/" class="sf-button--full-width actions__button">
Return home
</SfButton>
<SfButton class="sf-button--full-width sf-button--text actions__button" @click="$router.go(-1)">
Back
</SfButton>
</div>
</div>
</template>
<script>
import { SfButton, SfImage, SfHeading } from '@storefront-ui/vue';
export default {
name: 'ErrorLayout',
props: ['error'],
components: { SfButton, SfImage, SfHeading }
};
</script>
<style lang="scss" scoped>
@import "~@storefront-ui/vue/styles";
#error {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 var(--spacer-sm);
margin: var(--spacer-xl) 0;
@include for-desktop {
max-width: 77.5rem;
}
}
.image {
--image-width: 14.375rem;
padding: var(--spacer-xl) 0;
@include for-desktop {
--image-width: 25.75rem;
}
}
.heading {
--heading-title-margin: 0 0 var(--spacer-sm);
--heading-title-color: var(--c-primary);
--heading-title-font-weight: var(--font-weight--semibold);
--heading-description-color: var(--c-text-muted);
--heading-description-font-size: var(--font-size--base);
--heading-description-margin: 0 var(--spacer-base);
--heading-description-font-family: var(--font-family--primary);
@include for-desktop {
--heading-description-margin: 0;
}
}
.actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
width: 100%;
margin: var(--spacer-xl) 0 0 0;
&__button {
--button-width: 100%;
&:first-child:hover {
color: var(--c-white);
}
&:last-child {
margin: var(--spacer-sm) 0;
}
}
@include for-desktop {
margin: var(--spacer-lg) 0 0 0;
&__button {
--button-width: 25rem;
}
}
}
</style>