71 lines
2.5 KiB
Vue
71 lines
2.5 KiB
Vue
<template>
|
|
<button @click="handleClick" class="back-button-wrapper" :aria-label="backButtonAccessibleText">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="34px" height="30px" viewBox="-2.2 -6 30 30">
|
|
<g id="Layer_3">
|
|
<path
|
|
class="outer"
|
|
fill="#FFFFFF"
|
|
d="M19.934-1.434h-8.486c-1.683,0-2.999,0.528-4.021,1.614L1.685,6.146C0.78,7.079,0.338,8.027,0.338,9.041
|
|
c0,1.028,0.444,1.979,1.359,2.908l5.753,5.938c1.054,1.093,2.403,1.647,4.007,1.647l8.475,0.01c2.861,0,4.568-1.692,4.568-4.528
|
|
V3.094C24.5,0.259,22.793-1.434,19.934-1.434L19.934-1.434z" />
|
|
</g>
|
|
<g id="Layer_2">
|
|
<path
|
|
class="inner"
|
|
fill="#727676"
|
|
d="M19.934,17.989c2.041,0,3.066-1.006,3.066-3.028V3.039c0-2.022-1.025-3.028-3.066-3.028h-8.486
|
|
c-1.143,0-2.129,0.292-2.929,1.143L2.766,7.13C2.131,7.784,1.838,8.37,1.838,8.985c0,0.605,0.283,1.201,0.928,1.855l5.762,5.947
|
|
c0.811,0.84,1.787,1.191,2.93,1.191L19.934,17.989z M10.773,13.253c-0.439,0-0.801-0.371-0.801-0.82
|
|
c0-0.215,0.078-0.42,0.235-0.566l2.861-2.861l-2.861-2.862c-0.156-0.156-0.234-0.352-0.234-0.566c0-0.458,0.362-0.801,0.801-0.801
|
|
c0.224,0,0.41,0.069,0.556,0.225l2.881,2.872l2.891-2.881c0.166-0.166,0.353-0.234,0.566-0.234c0.439,0,0.801,0.352,0.801,0.801
|
|
c0,0.225-0.078,0.4-0.234,0.576l-2.871,2.871l2.861,2.852c0.146,0.156,0.234,0.352,0.234,0.576c0,0.449-0.361,0.82-0.811,0.82
|
|
c-0.225,0-0.43-0.098-0.586-0.244l-2.852-2.871l-2.852,2.871C11.203,13.165,10.999,13.253,10.773,13.253z" />
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "buttonBack",
|
|
props: {
|
|
backButtonAccessibleText: {
|
|
type: String,
|
|
required: true,
|
|
default: "",
|
|
},
|
|
},
|
|
methods: {
|
|
handleClick() {
|
|
this.$emit("click-event");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.back-button-wrapper {
|
|
padding: 0;
|
|
position: relative;
|
|
top: -1px;
|
|
margin-left: 2px;
|
|
border: none;
|
|
background: none;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
|
|
svg .outer {
|
|
fill: $white;
|
|
stroke-width: 2.5px;
|
|
stroke: $blue;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
transform: translate(-2.7px, -1.8px) scale(1.2);
|
|
}
|
|
}
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
}
|
|
</style>
|