Merge pull request #20 from drewngyen/master

changed component list styling and added more funs style classes

Author: drewngyen

src/components/CreateComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home-sidebar">
+  <div class="home-sidebar drawer-menu">
     <!-- <p class="panel-heading">Create a component</p> -->
     <br />
     <form v-on:submit.prevent="handleClick">

src/components/Footer.vue

@@ -82,7 +82,8 @@ i {
   // height: 35vh;
   transition-timing-function: ease-in;
   transition: 0.2s;
-  background: #313131;
+  // background: #313131;
+  background: black;
 }
 // changes the footer toolbar height
 .q-toolbar {

src/components/HomeSideDropDown.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="q-pa-md" style="max-width: 350px">
-    <q-list padding bordered class="rounded-borders">
+    <q-list padding bordered class="rounded-borders drawer-menu">
       <q-expansion-item dense dense-toggle expand-separator label="Components">
-        <q-card>
+        <q-card >
           <q-card-section>
             <div class="input-container">
               <ComponentList />
@@ -47,11 +47,16 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
 .input-add {
   margin: 0em 1em 0em 1em;
 }
 .input-container {
   margin-top: 1rem;
+  // background: $primary;
+}
+.red {
+  background: red;
 }
+
 </style>

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -10,11 +10,12 @@
           <q-item-section>
             <div class="component-container">
               <div class="component-info">
-                <q-item-label overline class="component">{{componentData.componentName}}</q-item-label>
-                <q-item-label>Child Components Here</q-item-label>
-                <!-- {{componentData.componentName}} -->
+                <!-- <q-item-label overline class="component">Parent</q-item-label> -->
+                <!-- <q-item-label>Child Components Here</q-item-label> -->
+                {{componentData.componentName}}
+                <!-- <br> -->
               </div>
-              <q-btn round flat icon="delete_forever" />
+              <q-btn round flat icon="highlight_off" />
             </div>
           </q-item-section>
         </q-item>
@@ -56,8 +57,8 @@ export default {
 <style>
 /* modifies entire container */
 .home-sidebar {
-  margin: 1rem;
-  padding-bottom: 1rem;
+  /* margin: 1rem; */
+  padding: 0.5rem;
   border-radius: 5px;
 }
 /* modifies top label */
@@ -69,6 +70,9 @@ export default {
   margin-bottom: 0.5rem;
   border-radius: 5px;
 }
+.component-info {
+  margin: auto 0;
+}
 /* modifies content in list element */
 .component-container {
   display: flex;

src/css/app.styl

@@ -3,6 +3,7 @@ main {
   background: #f2f6f5;
 }
 .gradient {
-  background: rgb(22,108,105);
-  background: linear-gradient(36deg, rgba(22,108,105,1) 0%, rgba(20,32,23,1) 100%);
+  background: black;
+  // background: rgb(22,108,105);
+  // background: linear-gradient(36deg, rgba(22,108,105,1) 0%, rgba(20,32,23,1) 100%);
 }

src/layouts/MyLayout.vue

@@ -49,5 +49,14 @@ export default {
 </script>
 
 <style lang="stylus">
-
+.drawer-menu {
+  background: white;
+}
+.q-list {
+  // background: gray;
+}
+.q-drawer {
+  background: white;
+  // background: #313131;
+}
 </style>