Merge pull request #11 from Safelite/brm-misc-components
Create image button, set base font size, set custom gutters.
This commit is contained in:
bmauger
GitHub
commit
0d3287c807
8 changed files with 91 additions and 12 deletions
|
|
@ -17,29 +17,40 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col">
|
||||
<buttonPrimary/>
|
||||
<buttonSecondary/>
|
||||
<textInput/>
|
||||
</div>
|
||||
<imageButton
|
||||
btnText="windshield-damage.svg"
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonPrimary from './components/buttons/buttonPrimary';
|
||||
import buttonSecondary from './components/buttons/buttonSecondary';
|
||||
import buttonFunnel from './components/buttons/buttonFunnel';
|
||||
import textInput from './components/forms/textInput';
|
||||
import vehicleImage from './components/vehicleImage';
|
||||
import imageButton from './components/imageButton';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
buttonPrimary,
|
||||
buttonSecondary,
|
||||
buttonFunnel,
|
||||
textInput,
|
||||
vehicleImage
|
||||
vehicleImage,
|
||||
imageButton
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
10
src/assets/img/icons/back-glass-damage.svg
Normal file
10
src/assets/img/icons/back-glass-damage.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg version="1.1" id="back-glass-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.8 33.1" xml:space="preserve">
|
||||
<style>
|
||||
.st0,.st2{fill:#fff;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st2{fill:none}
|
||||
</style>
|
||||
<path class="st0" d="M5.3.4h17.5l3.8 1.1h27.5L62.2.4c7.6 0 10.1 6.2 10.1 13.8v4.7c0 7.7-2.5 13.8-10.1 13.8l-8.1-1.1H26.6l-3.8 1.1H5.3c-.8 0-1.5-.2-2.1-.7-.6-.5-1.1-1.1-1.3-1.9C1.2 27.7.4 23.5.4 17.4s.8-12 1.5-14.5c.2-.7.7-1.4 1.3-1.9C3.7.6 4.5.4 5.3.4z"/>
|
||||
<path class="st0" d="m55.9 3.4-5.7 2.5c-.8.3-1.3 1.6-1.1 2.8.6 5.3.6 10.6 0 15.8-.1 1.2.4 2.4 1.1 2.8l5.7 2.5c1 .4 1.9-.1 2.3-1.3 2.2-7.2 2.2-16.7 0-23.8-.3-1.2-1.3-1.8-2.3-1.3z"/>
|
||||
<path d="m6.8 5.4 4.4 2c.2.1.3.2.4.3.1.2.1.3.1.5-.4 2.8-.6 5.6-.6 8.4 0 2.8.2 5.6.6 8.4 0 .2 0 .3-.1.5-.1.1-.2.3-.3.3l-4.4 2.3c-.1.1-.2.1-.3.1-.1 0-.2 0-.3-.1-.1 0-.2-.1-.3-.2-.1-.1-.1-.2-.2-.3-.5-1.3-1.3-4.5-1.3-11.1S5.3 7 5.8 5.8c0-.1.1-.2.2-.3 0-.1.1-.1.2-.2.1 0 .2-.1.3-.1.1.1.2.1.3.2z" fill="#d92d27" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="st0" d="M10.8 3.2h7.5c.1 0 .1.1.1.1v.2c0 .1 0 .1-.1.2l-1.4 2c-.1.1-.2.2-.3.2 0 .1-.1.1-.2.1h-1.3c-.4 0-.8-.1-1.1-.2l-3.5-2.4c0-.1.1-.1.1-.2h.2zM50 3.9c.1 0 .1-.1.1-.2v-.2c0-.1-.1-.1-.1-.2-.1 0-.1-.1-.2-.1H36c-.1 0-.2 0-.3.1-.1.1-.2.1-.3.2-.4.5-1.1 1.5-1.5 2.1v.2c0 .1.1.2.1.2h11.5c.2 0 .3 0 .4-.1l4.1-2zM31.7 6c.1 0 .2 0 .3-.1.1-.1.2-.1.3-.2.4-.5 1.1-1.5 1.5-2.1v-.2l-.1-.1h-13c-.1 0-.2 0-.3.1-.1.1-.2.1-.3.2-.3.4-1.1 1.5-1.5 2.1v.2l.1.1h13zM10.8 29.9H19.1c.1 0 .1-.1.1-.1v-.2c0-.1 0-.1-.1-.2l-1.4-2c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1h-2c-.4 0-.8.1-1.1.2l-3.5 2.4c0 .1.1.1.1.2h.2zM50 29.2c.1 0 .1.1.1.2v.2c0 .1-.1.1-.1.2-.1.1-.1.1-.2.1H36c-.1 0-.2 0-.3-.1-.1-.1-.2-.1-.3-.2-.4-.5-1.1-1.5-1.5-2.1v-.2l.1-.1h11.5c.2 0 .3 0 .4.1l4.1 1.9zM31.7 27.1c.1 0 .2 0 .3.1.1.1.2.1.3.2.4.5 1.1 1.5 1.5 2.1v.2l-.1.1H21.5c-.1 0-.2 0-.3-.1-.1-.1-.2-.1-.3-.2-.4-.5-1.1-1.5-1.5-2.1v-.2l.1-.1h12.2z"/>
|
||||
<path class="st2" d="M3.1 28.6h1c.1 0 .2.1.3.1.1.1.2.2.2.3l1.1 3.4M69.6 7.9c-1.9-1.1-3.5-2.7-4.6-4.7-.2-.4.6-2.2.6-2.2V.9M3.1 4.3h1c.1 0 .2-.1.3-.1.2-.2.3-.3.3-.4L5.8.4M69.6 25.1c-1.9 1.1-3.5 2.7-4.6 4.7-.2.4.6 2.2.6 2.2v.1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
10
src/assets/img/icons/side-window-damage.svg
Normal file
10
src/assets/img/icons/side-window-damage.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg version="1.1" id="side-window-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.8 24.8" xml:space="preserve">
|
||||
<style>
|
||||
.st1,.st2,.st3{fill:none;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st2,.st3{fill:#fff}.st3{fill:#d92d27}
|
||||
</style>
|
||||
<path d="m66.2 19.8 5.4-.7s-1-1.6.5-2.3c0 0 3.9-8.5-17.1-8.8C55 8 41.2.9 38.5.7c0 0-9.5-.9-18.5-.1-.4 0-.8.1-1.2.3-1 .5-3.3 1.6-5.1 2.7-3.1 2-6.7 3-10.3 3l-.1 1.2s-3 .3-2.9 7c0 .4.1.9.3 1.3.2.4.5.7.8 1 1.1.9 3.1 2 6.4 2.8" fill="#fff"/>
|
||||
<path class="st1" d="m66.2 19.8 5.4-.7s-1-1.6.5-2.3c0 0 3.9-8.5-17.1-8.8C55 8 41.2.9 38.5.7c0 0-9.5-.9-18.5-.1-.4 0-.8.1-1.2.3-1 .5-3.3 1.6-5.1 2.7-3.1 2-6.7 3-10.3 3l-.1 1.2s-3 .3-2.9 7c0 .4.1.9.3 1.3.2.4.5.7.8 1 1.1.9 3.1 2 6.4 2.8"/>
|
||||
<path class="st2" d="M13.7 24.5c3.2 0 5.8-2.6 5.8-5.8 0-3.2-2.6-5.8-5.8-5.8s-5.8 2.6-5.8 5.8c0 3.2 2.6 5.8 5.8 5.8zM54.7 18.6c0 1.2.3 2.3 1 3.2.6 1 1.5 1.7 2.6 2.1 1.1.4 2.2.6 3.4.3 1.1-.2 2.2-.8 3-1.6.8-.8 1.4-1.9 1.6-3 .2-1.1.1-2.3-.3-3.4s-1.2-2-2.1-2.6c-1-.6-2.1-1-3.2-1-.8 0-1.5.2-2.2.4-.7.3-1.3.7-1.9 1.3-.5.5-1 1.2-1.3 1.9-.5.9-.6 1.7-.6 2.4z"/>
|
||||
<path class="st1" d="M64.2 11.5s.3-.2 1.2-.3h.3c1.2.4 2.4 1 3.4 2-1.1-.1-2.2-.4-3.3-.8M31.7 10.3c-.4-.2-.4-.4-.4-.5 0-.5.6-.6 1.3-.6h.6c.4 0 .7.1 1.1.2.2 0 .7.2.7.6 0 .5-.6.5-1.3.5M18.1 9.2c-.6-.2-.5-.5-.5-.6 0-.5.6-.6 1.3-.6h.6c1.8.1 1.8.6 1.8.8 0 .5-.6.6-1.3.6M15.5 22c-.7.4-1.6.6-2.4.4-.8-.1-1.6-.5-2.2-1.1-.6-.6-1-1.4-1.1-2.2-.1-.8.1-1.7.5-2.4s1.1-1.3 1.9-1.6c.8-.3 1.7-.4 2.5-.1.8.2 1.5.7 2.1 1.4.5.7.8 1.5.8 2.3M58.6 15.2c.7-.4 1.6-.6 2.4-.4.8.1 1.6.5 2.2 1.1.6.6 1 1.4 1.1 2.2.1.8-.1 1.7-.5 2.4s-1.1 1.3-1.9 1.6c-.8.3-1.7.4-2.5.1-.8-.2-1.5-.7-2.1-1.4-.5-.7-.8-1.5-.8-2.3M54.7 19.8H19.5M3.3 7.8s11-.5 0 3.1"/>
|
||||
<path class="st3" d="m42.8 8-11.1-.7.1-5.2c4.3.1 8 1.2 10.9 2.3l.1 3.6zM50.6 8.4 44.3 8V5c2.2.9 3.9 1.6 5 2.3.5.5.9.9 1.3 1.1zM30.2 2.1l-.1 5.1-7.7-.4.1-4c2.6-.5 5.1-.7 7.7-.7zM16.6 6.5C17.3 5 19 3.9 21 3.3l-.1 3.5-4.3-.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
12
src/assets/img/icons/windshield-damage.svg
Normal file
12
src/assets/img/icons/windshield-damage.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg version="1.1" id="windshield-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.1 47.1" xml:space="preserve">
|
||||
<style>
|
||||
.st0{fill:#fff}.st1{fill:none;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}
|
||||
</style>
|
||||
<path class="st0" d="M5.9 41.3c0 1.4.6 2.8 1.6 3.7 1 1 2.4 1.5 3.8 1.5s2.8-.6 3.8-1.5c1-1 1.6-2.3 1.6-3.7"/>
|
||||
<path class="st1" d="M5.9 41.3c0 1.4.6 2.8 1.6 3.7 1 1 2.4 1.5 3.8 1.5s2.8-.6 3.8-1.5c1-1 1.6-2.3 1.6-3.7"/>
|
||||
<path class="st0" d="M55.1 41.3c0 1.4.6 2.8 1.6 3.8s2.4 1.6 3.8 1.6 2.8-.6 3.8-1.6 1.6-2.4 1.6-3.8"/>
|
||||
<path class="st1" d="M55.1 41.3c0 1.4.6 2.8 1.6 3.8s2.4 1.6 3.8 1.6 2.8-.6 3.8-1.6 1.6-2.4 1.6-3.8"/>
|
||||
<path d="M36.1.4c12.4 0 18.2 1.4 18.2 1.4 5.5.9 8.7 11.1 8.7 11.1h1.1c0-3.7 2-3.7 3.6-3.1 1.1.5 2.1 1.2 2.9 2.1 2 2.4.7 2.6.7 2.6h-7.8l5.9 4.6v18.5c0 3.7-3.1 3.6-3.1 3.6H5.8s-3.1.2-3.1-3.6V19.2l5.9-4.6H.8s-1.3-.2.7-2.6c.8-.9 1.7-1.6 2.9-2.1C5.9 9.3 8 9.2 8 13h1.1s3.2-10.2 8.7-11.1c0-.1 5.9-1.5 18.3-1.5z" fill="#fff" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M36.1 12.8c12.2 0 22.5.8 22.5.8 0-4-3.7-9.3-3.7-9.3S48.9 3 36.1 3 17.2 4.3 17.2 4.3s-3.7 5.3-3.7 9.3c0 0 10.4-.8 22.6-.8z" fill="#d92d27" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="st1" d="M25.7 24.6c6.8-.7 13.6-.7 20.4 0M51.1 24s3.7-3.5 13.2-3.5c0 0 1.8 4.1-3.9 5.2M20.6 24s-3.7-3.5-13.2-3.5c0 0-1.8 4 3.9 5.2M5.9 34.7s33 5.6 60 0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -92,3 +92,6 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberati
|
|||
// stylelint-enable value-keyword-case
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
$font-family-code: $font-family-monospace;
|
||||
|
||||
//Gutters
|
||||
$grid-gutter-width: .75rem;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
body {
|
||||
font-size: 16px;
|
||||
background-color: #fff;
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,3 +18,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// Non-Bootstrap button
|
||||
// Intended to be used without .btn class
|
||||
.btn-damage {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
border: 1px solid #b3b4b5;
|
||||
&:focus {
|
||||
background-color: #e7f1f6;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
&:focus-visible { // For keyboard/screenreader
|
||||
background-color: #e7f1f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
15
src/components/imageButton.vue
Normal file
15
src/components/imageButton.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class="col-4 mb-3">
|
||||
<button class="btn-damage d-flex flex-column align-items-center rounded-3 h-100" v-bind:aria-label="ariaLabel">
|
||||
<img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`@/assets/img/icons/${btnText}`)" v-bind:alt="altText"/>
|
||||
<p class="mt-auto">{{damageTitle}}</p>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'imageButton',
|
||||
props: ['btnText', 'altText', 'damageTitle', 'ariaLabel']
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue