adding latest

firebase.md

@@ -660,11 +660,7 @@ You would refer to this form with `this.$refs.form`.
         "
       >
         <v-icon color="white">
-          {{
-            field.showIconData
-              ? field.appendIconShow
-              : field.appendIconHide
-          }}
+          {{ field.showIconData ? field.appendIconShow : field.appendIconHide }}
         </v-icon>
       </v-btn>
     </div>
@@ -746,3 +742,15 @@ async submit() {
 ```
 
 Here we are checking the validity of the form, and enabling/disabling the loading prop based on whether or not the form is correct.
+
+### Hints
+
+The following is a codepen showing how you can dynamically populate a hint to show if the form is submitted with empty values. This can be useful if don't want to show an error message, but you still want the form to provide feedback on what to fill in.
+
+<https://codepen.io/anon/pen/GeVQLG>
+
+## Triangle backgrounds
+
+### Designs
+
+Dual image: <https://codepen.io/eddyerburgh/pen/EPYVVX>

src/components/Appbar.vue

@@ -1,20 +1,5 @@
 <template>
   <div>
-    <!-- <v-app-bar flat color="indigo" app class="hidden-md-and-up">
-      <v-row>
-        <v-col cols="8" class="d-flex justify-start">
-          <v-toolbar-title>
-            Savvy Firebase
-          </v-toolbar-title>
-        </v-col>
-        <v-col cols="4" class="d-flex justify-end">
-          <v-btn color="white">
-            Sign In
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-app-bar> -->
-    <!-- <v-app-bar flat app class="hidden-sm-and-down" color="#EEEEEE"> -->
     <v-app-bar
       flat
       app

src/router/index.js

@@ -30,6 +30,12 @@ const routes = [
     name: "Hello",
     component: () =>
       import(/* webpackChunkName: "hello" */ "../components/HelloWorld.vue")
+  },
+  {
+    path: "/triangle",
+    name: "Triangle",
+    component: () =>
+      import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue")
   }
 ];
 

src/scss/variables.scss

@@ -130,6 +130,8 @@ $Gilroy-BoldItalic: "Gilroy-BoldItalic", sans-serif !default;
   }
 }
 
+$body-font-family: $Gilroy-Regular !important;
+
 // Change default font colour
 
 $mainColor: #323947;
@@ -139,4 +141,3 @@ $mainColor: #323947;
 .theme--light.v-sheet {
   color: $mainColor !important;
 }
-

src/views/Triangle.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-container fluid class="pa-0">
+    <v-row class="d-flex newtriangle" style="position: absolute;">
+      <v-col class="d-flex align-center pt-0" style="position: relative;">
+        <h1 class="display" style="position: relative;">Outside In</h1>
+      </v-col>
+    </v-row>
+    <v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
+    <v-row class="d-flex" style="position: relative;">
+      <v-col class="d-flex">
+        <h1 class="display">OutsideOutsides</h1>
+      </v-col>
+    </v-row>
+    <v-row cols="12" class="d-flex">
+      <v-col class="d-flex">
+        <h1 class="display">OutsideOutside</h1>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.newtriangle {
+  width: 100vw;
+  height: 50vh;
+  background-image: radial-gradient(
+    circle farthest-corner at 7.5% 54.1%,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(39, 0, 89, 1) 74.9%
+  );
+  -webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+}
+
+h1 {
+  color: white;
+}
+</style>

src/views/forms/LoginForm.vue

@@ -70,7 +70,6 @@
                 <div class="innerIcon">
                   <v-btn
                     v-if="field.appendIconShow"
-                    flat
                     icon
                     text
                     x-small
@@ -166,7 +165,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../scss/_variables.scss";
+// @import "../../scss/_variables.scss";
 
 .whiteText {
   color: white;