jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add button wrapper for back button.

Browse source
This commit is contained in:
bmauger 2021-12-13 09:07:55 -05:00
parent e4b67979e1
commit e5ff6206c4
1 changed files with 47 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/ux-components/button-back/button-back.vue
View file

@ -1,8 +1,10 @@
<template> <template>
<div class="button-back"> <button class="back-button-wrapper d-flex p-0">
<div class="arrow-left"></div> <div class="button-back">
<div class="box"></div> <div class="arrow-left"></div>
</div> <div class="box"></div>
</div>
</button>
</template> </template>
<script> <script>
@ -12,47 +14,51 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.button-back { .back-button-wrapper {
display: inline-flex; border: none;
position: relative; background: transparent;
height: 18px; .button-back {
width: 23px; display: inline-flex;
overflow: hidden; position: relative;
.arrow-left {
position: absolute;
width: 18px;
height: 18px; height: 18px;
left: 4px; width: 23px;
background-color: $gray-550; overflow: hidden;
transform: rotate(45deg); .arrow-left {
border-radius: 4px;
}
.box {
content: "";
position: absolute;
background: $gray-550;
height: 100%;
width: 11px;
display: flex;
justify-content: center;
align-items: center;
left: 12px;
border-radius: 5px;
&:before, &:after {
position: absolute; position: absolute;
left: 1px; width: 18px;
top: 3px; height: 18px;
content: " "; left: 4px;
height: 12px; background-color: $gray-550;
width: 2px;
background-color: $white;
border-radius: 2px;
}
&:before {
transform: rotate(45deg); transform: rotate(45deg);
border-radius: 4px;
} }
&:after { .box {
transform: rotate(-45deg); content: "";
position: absolute;
background: $gray-550;
height: 100%;
width: 11px;
display: flex;
justify-content: center;
align-items: center;
left: 12px;
border-radius: 5px;
&:before, &:after {
position: absolute;
left: 1px;
top: 3px;
content: " ";
height: 12px;
width: 2px;
background-color: $white;
border-radius: 2px;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
} }
} }
} }