Merge pull request #93 from Safelite/brm-css-back-button-component

Add back button component.

src/layouts/component-test/component-test.vue

@@ -35,7 +35,10 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary buttonText="Primary" loaderColor="white" sizeInRem="1" />
+        <buttonPrimary
+        buttonText="Primary"
+        loaderColor="white"
+        sizeInRem="1" />
       </div>
     </div>
     <div class="row">
@@ -47,6 +50,11 @@
         />
       </div>
     </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonBack/>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
@@ -429,6 +437,7 @@
 <script>
 import buttonPrimary from "@/ux-components/button-primary/button-primary";
 import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
+import buttonBack from "@/ux-components/button-back/button-back";
 import radioCard from "@/ux-components/radio-card/radio-card";
 import listButton from "@/ux-components/list-button/list-button";
 import radio from "@/ux-components/radio/radio";
@@ -441,6 +450,7 @@ export default {
   components: {
     buttonPrimary,
     buttonSecondary,
+    buttonBack,
     radioCard,
     listButton,
     radio,

src/styles/ux-variables.scss

@@ -131,6 +131,7 @@ $h5-font-size:                $font-size-base * 1.25;
 $h6-font-size:                $font-size-base * .875;
 
 //Border Radius
+// Helper classes are rounded, rounded-1, rounded-2, rounded-3
 $border-radius:               .25rem;
 $border-radius-sm:            .2rem;
 $border-radius-lg:            .5rem;//Used for buttons. Can be used for other things, of course.

src/ux-components/button-back/button-back.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/ux-components/button-back/button-back.vue

@@ -0,0 +1,65 @@
+<template>
+  <button class="back-button-wrapper d-flex p-0">
+    <div class="button-back">
+      <div class="arrow-left"></div>
+      <div class="box"></div>
+    </div>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "buttonBack"
+};
+</script>
+
+<style lang="scss">
+.back-button-wrapper {
+  border: none;
+  background: transparent;
+  .button-back {
+    display: inline-flex;
+    position: relative;
+    height: 18px;
+    width: 23px;
+    overflow: hidden;
+    .arrow-left {
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      left: 4px;
+      background-color: $gray-550;
+      transform: rotate(45deg);
+      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;
+        left: 1px;
+        top: 3px;
+        content: " ";
+        height: 12px;
+        width: 2px;
+        background-color: $white;
+        border-radius: 2px;
+      }
+      &:before {
+        transform: rotate(45deg);
+      }
+      &:after {
+        transform: rotate(-45deg);
+      }
+    }
+  }
+}
+</style>