add ButtonExpand
This commit is contained in:
@@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<b-button
|
||||||
|
v-on="$listeners"
|
||||||
|
v-bind="$attrs"
|
||||||
|
variant="depart"
|
||||||
|
class="btn-expand"
|
||||||
|
:aria-label="expanded ? 'Réduire' : 'Agrandir'"
|
||||||
|
>
|
||||||
|
<svg aria-hidden="true" viewBox="0 0 75 70">
|
||||||
|
<path v-if="expanded" d="M20,30 h10 v-10 M45,20 v10 h10 M55,40 h-10 v10 M30,50 v-10 h-10" />
|
||||||
|
<path v-else d="M20,30 v-10 h10 M45,20 h10 v10 M55,40 v10 h-10 M30,50 h-10 v-10" />
|
||||||
|
</svg>
|
||||||
|
</b-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ButtonExpand',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
expanded: { type: Boolean, default: false }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.btn-expand {
|
||||||
|
padding: 0;
|
||||||
|
width: 75px;
|
||||||
|
height: 70px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
path {
|
||||||
|
stroke: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
path {
|
||||||
|
fill: none;
|
||||||
|
stroke: lighten($black, 20%);
|
||||||
|
stroke-width: 4px;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user