|
|
@@ -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>
|
axolotle