From 773b92896c1aab9d4811cccb1a8245621dae9be7 Mon Sep 17 00:00:00 2001
From: Davide Alberani <da@erlug.linux.it>
Date: Sat, 21 Oct 2017 10:27:17 +0200
Subject: [PATCH] fix #40: use scoped CSS

---
 src/App.vue            | 20 +++++++++++---------
 src/Attendee.vue       | 23 +++++++++++++----------
 src/GlobalSettings.vue |  2 +-
 src/Group.vue          | 16 ++++++++++------
 src/IbtDialog.vue      |  2 +-
 src/IbtFooter.vue      | 15 +++++++++++----
 src/IbtSnackbar.vue    |  2 +-
 src/Toolbar.vue        |  4 ++--
 src/User.vue           |  2 +-
 src/Users.vue          |  5 ++++-
 10 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cb40adc..560738d 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/Attendee.vue b/src/Attendee.vue
index f7d4717..43e9bab 100644
--- a/src/Attendee.vue
+++ b/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>
diff --git a/src/GlobalSettings.vue b/src/GlobalSettings.vue
index 694b13e..1ebb199 100644
--- a/src/GlobalSettings.vue
+++ b/src/GlobalSettings.vue
@@ -106,7 +106,7 @@ export default {
 }
 
 </script>
-<style>
+<style scoped>
 
 #settings {
     padding: 10px;
diff --git a/src/Group.vue b/src/Group.vue
index 13cf630..ffdb107 100644
--- a/src/Group.vue
+++ b/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;
 }
 
diff --git a/src/IbtDialog.vue b/src/IbtDialog.vue
index b811f87..9f0768f 100644
--- a/src/IbtDialog.vue
+++ b/src/IbtDialog.vue
@@ -19,5 +19,5 @@ export default {
 }
 
 </script>
-<style>
+<style scoped>
 </style>
diff --git a/src/IbtFooter.vue b/src/IbtFooter.vue
index 178fcfc..108a684 100644
--- a/src/IbtFooter.vue
+++ b/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>
diff --git a/src/IbtSnackbar.vue b/src/IbtSnackbar.vue
index 93644b9..4fa661e 100644
--- a/src/IbtSnackbar.vue
+++ b/src/IbtSnackbar.vue
@@ -20,7 +20,7 @@ export default {
 }
 
 </script>
-<style>
+<style scoped>
 
 .snackbar-close {
     font-weight: bold;
diff --git a/src/Toolbar.vue b/src/Toolbar.vue
index 04211d1..4bf29b7 100644
--- a/src/Toolbar.vue
+++ b/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 {
diff --git a/src/User.vue b/src/User.vue
index 976fa29..f8650f8 100644
--- a/src/User.vue
+++ b/src/User.vue
@@ -86,7 +86,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 
 #user {
     padding: 10px;
diff --git a/src/Users.vue b/src/Users.vue
index 57c51d2..bfc0937 100644
--- a/src/Users.vue
+++ b/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;
 }