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

Re-push button updates.

Browse source
This commit is contained in:
Bryan 2021-10-20 12:17:23 -04:00
parent c4aec69678
commit 8faf7c1b2c
3 changed files with 67 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/Funnel1.vue
View file

@ -1,54 +1,63 @@
<template> <template>
<router-view></router-view> <div class="container-fluid">
<div class="container-fluid">
<div class="row"> <div class="row">
<div class="col my-3 d-flex justify-content-center"> <div class="col my-3 d-flex justify-content-center">
<vehicleImage /> <vehicleImage/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p> <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
<p class="text-center fs-6 fw-bold">What year is your vehichle?</p> <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<buttonFunnel /> <buttonFunnel/>
<confetti /> <confetti/>
</div> </div>
</div> </div>
<div class="row mt-5"> <div class="row mt-5">
<imageButton btnText="windshield-damage.svg" altText="Windshield" damageTitle="Windshield" ariaLabel="Windshield" /> <imageButton
<imageButton btnText="side-window-damage.svg" altText="Side Window" damageTitle="Side door" ariaLabel="Side door" /> btnText="windshield-damage.svg"
<imageButton btnText="back-glass-damage.svg" altText="Back Glass" damageTitle="Back glass" ariaLabel="Back glass" /> altText="Windshield"
damageTitle="Windshield"
ariaLabel="Windshield"
/>
<imageButton
btnText="side-window-damage.svg"
altText="Side Window"
damageTitle="Side door"
ariaLabel="Side door"
/>
<imageButton
btnText="back-glass-damage.svg"
altText="Back Glass"
damageTitle="Back glass"
ariaLabel="Back glass"
/>
</div> </div>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3 d-flex align-items-center">
<buttonPrimary <buttonPrimary
btnText="Primary" buttonText="Primary"
buttonType="btn-primary"
/> />
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3 d-flex align-items-center">
<buttonPrimaryFocus <buttonPrimary
btnText="Primary Focus" buttonText="Primary Focus"
buttonType="btn-primary-focus"
/> />
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3 d-flex align-items-center">
<buttonPrimary class="button-loader" <buttonPrimary
btnText="w/Loader" buttonText="Disabled"
btnClass="test" buttonType="disabled"
/>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<buttonDisabled
btnText="Disabled"
/> />
</div> </div>
</div> </div>
@ -61,8 +70,6 @@
import imageButton from './components/imageButton'; import imageButton from './components/imageButton';
import confetti from './components/confetti'; import confetti from './components/confetti';
import buttonPrimary from './components/buttons/buttonPrimary'; import buttonPrimary from './components/buttons/buttonPrimary';
import buttonPrimaryFocus from './components/buttons/buttonPrimaryFocus';
import buttonDisabled from './components/buttons/buttonDisabled';
export default { export default {
@ -72,9 +79,7 @@
vehicleImage, vehicleImage,
imageButton, imageButton,
confetti, confetti,
buttonPrimary, buttonPrimary
buttonPrimaryFocus,
buttonDisabled
} }
} }
</script> </script>

10
src/assets/scss/components/_buttons.scss
View file

@ -30,11 +30,11 @@
} }
} }
} }
&:disabled { }
background: $gray-100; &.disabled {
background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%); background: $gray-100;
color: $gray-400; background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
} color: $gray-400;
} }
&.btn-primary-focus { &.btn-primary-focus {
position: relative;//Required for :after pseduo to position correctly position: relative;//Required for :after pseduo to position correctly

24
src/components/buttons/buttonPrimary.vue
View file

@ -1,10 +1,30 @@
<template> <template>
<button type="button" class="btn btn-primary d-flex align-items-center">{{btnText}}</button> <button
type="button"
class="btn d-flex align-items-center"
v-on:click="showLoader()"
v-bind:class="[(this.isLoading ? 'button-loader' : 'not-loading'),this.buttonType]"
>
{{ this.buttonText }}
</button>
</template> </template>
<script> <script>
export default { export default {
name: 'buttonPrimary', name: 'buttonPrimary',
props: ['btnText'] props: {
buttonText: String,
buttonType: String
},
data(){
return {
isLoading: false
}
},
methods: {
showLoader(){
this.isLoading = true;
}
}
} }
</script> </script>