lesson 108: switch to scoped styles

2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue

@@ -12,7 +12,15 @@
     </section>
 </template>
 
-<style>
+<style scoped>
+section {
+    margin: 2rem auto;
+    max-width: 30rem;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+    padding: 1rem;
+}
+
 section h2 {
     margin: 0.5rem 0;
     color: #3a3a3a;

2021-02-06 cmp-adv-01-starting-setup/src/components/BaseBadge.vue

@@ -16,7 +16,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .badge {
     display: inline-block;
     padding: 0.5rem 1rem;

2021-02-06 cmp-adv-01-starting-setup/src/components/TheHeader.vue

@@ -4,7 +4,7 @@
     </header>
 </template>
 
-<style>
+<style scoped>
 header {
     width: 100%;
     height: 5rem;

2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue

@@ -8,7 +8,7 @@
     </section>
 </template>
 
-<script>
+<script scoped>
 export default {
     props: ["fullName", "infoText", "role"],
 };
@@ -23,7 +23,7 @@ section {
     padding: 1rem;
 }
 
-section div {
+section header {
     display: flex;
     justify-content: space-between;
     align-items: center;