fix #40: use scoped CSS

src/App.vue

@@ -228,7 +228,7 @@ export default {
 }
 
 </script>
-<style>
+<style scoped>
 
 #main-attendees {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -270,14 +270,6 @@ export default {
     background-color: #f8bbd0;
 }
 
-.vdp-datepicker__calendar > header > span {
-    background-color: #f8bbd0;
-}
-
-.vdp-datepicker__calendar > header > span:hover {
-    background-color: #f06292 !important;
-}
-
 #day-notes {
     color: rgba(0, 0, 0, 0.54);
 }
@@ -286,5 +278,15 @@ export default {
     vertical-align: text-top;
 }
 
+</style>
+<style>
+
+.vdp-datepicker__calendar > header > span {
+    background-color: #f8bbd0;
+}
+
+.vdp-datepicker__calendar > header > span:hover {
+    background-color: #f06292 !important;
+}
 
 </style>

src/Attendee.vue

@@ -115,21 +115,12 @@ export default {
 };
 
 </script>
-<style>
-
-.md-list-item .md-list-item-holder>.md-icon:first-child {
-    margin-right: 16px;
-}
+<style scoped>
 
 .attendee-list-item {
     min-width: 250px;
 }
 
-.attendee-list-item .md-list-item-container {
-    padding-left: 0px;
-    padding-right: 0px;
-}
-
 .attendee-notes {
     font-style: italic !important;
 }
@@ -165,3 +156,15 @@ export default {
 }
 
 </style>
+<style>
+
+.md-list-item .md-list-item-holder>.md-icon:first-child {
+    margin-right: 16px;
+}
+
+.attendee-list-item .md-list-item-container {
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+</style>

src/GlobalSettings.vue

@@ -106,7 +106,7 @@ export default {
 }
 
 </script>
-<style>
+<style scoped>
 
 #settings {
     padding: 10px;

src/Group.vue

@@ -273,7 +273,7 @@ export default {
 };
 
 </script>
-<style>
+<style scoped>
 
 .group-layout {
     padding: 10px;
@@ -281,8 +281,8 @@ export default {
 
 .new-group-header {
     background-color: lightsteelblue;
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
+    padding-top: 0px;
+    padding-bottom: 0px;
 }
 
 .group-title {
@@ -345,19 +345,23 @@ export default {
 }
 
 .group-card {
-    padding-right: 8px !important;
+    padding-right: 8px;
 }
 
 .new-group-label {
-    left: 30px !important;
+    left: 30px;
 }
 
 .group-add-name {
     margin-left: 0px !important;
 }
 
+</style>
+<style>
+
 .attendee-add .md-list-item-container {
-    padding-left: 0px;
+    padding-left: 0px !important;
+    margin-left: 0px;
     max-width: 300px;
 }
 

src/IbtDialog.vue

@@ -19,5 +19,5 @@ export default {
 }
 
 </script>
-<style>
+<style scoped>
 </style>

src/IbtFooter.vue

@@ -8,8 +8,7 @@
 export default {}
 
 </script>
-
-<style>
+<style scoped>
 
 #footer {
     text-align: center;
@@ -24,8 +23,16 @@ export default {}
     background-color: #b3e5fc;
 }
 
-#footer a {
-    color: white;
+#footer, #footer a {
+    color: rgba(0, 0, 0, .40);
+}
+
+#footer:hover, #footer:hover a {
+    color: rgba(0, 0, 0, .87);
+}
+
+#footer:hover a {
+    text-decoration: underline;
 }
 
 </style>

src/IbtSnackbar.vue

@@ -20,7 +20,7 @@ export default {
 }
 
 </script>
-<style>
+<style scoped>
 
 .snackbar-close {
     font-weight: bold;

src/Toolbar.vue

@@ -193,7 +193,7 @@ export default {
 }
 
 </script>
-<style>
+<style scoped>
 
 #toolbar-title {
     flex: 1;
@@ -235,7 +235,7 @@ export default {
 #logged-in-icon {
     margin-right: 0px;
     padding-right: 0px;
-    color: #f6f72f !important;
+    color: #f6f72f;
 }
 
 #logged-in {

src/User.vue

@@ -86,7 +86,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 
 #user {
     padding: 10px;

src/Users.vue

@@ -95,12 +95,15 @@ export default {
 }
 
 </script>
-<style>
+<style scoped>
 
 #users {
     padding: 10px;
 }
 
+</style>
+<style>
+
 .center-content > .md-table-head-container {
     text-align: center;
 }