fix(cleanup): Cleanup styles in dependency tree components

nestdotland · Oct 11, 2020 · 9965ec2 · 9965ec2
1 parent 53d57a6
commit 9965ec2
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 128 deletions.
diff --git a/src/components/tree/NodeTree.vue b/src/components/tree/NodeTree.vue
@@ -52,3 +52,109 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="sass">
+li
+  list-style: none
+  padding-top: .5em
+  padding-left: 1.5em
+  position: relative
+
+  &::before
+    position: absolute
+    top: 0
+    left: 0
+    display: block
+    float: left
+    content: ''
+    width: 1em
+    height: 1.5em
+    margin: auto
+    border-left: 2px solid #ccc
+    border-bottom: 2px solid #ccc
+
+  &::after
+    position: absolute
+    top: 0
+    left: 0
+    display: block
+    float: left
+    content: ''
+    width: 1em
+    height: 100%
+    border-left: 2px solid #ccc
+
+  &:last-child:after
+    display: none
+
+  &.node-tree
+    &::before
+      border-image: linear-gradient(to right, #ccc, #22c1c3)
+      border-image-slice: 1
+
+    .label-tree
+      cursor: pointer
+
+    ul
+      visibility: hidden
+      opacity: 0
+      max-height: 0
+      transition: all 0.5s
+
+    input
+      &:checked
+        & ~ ul
+          visibility: visible
+          opacity: 1
+          max-height: 100%
+
+  &.leaf-tree
+    &::before
+      border-image: linear-gradient(to right, #ccc, #fdbb2d)
+      border-image-slice: 1
+
+    .label-tree
+      cursor: default
+
+  span
+    &.status-tree
+      display: block
+      font-size: 0.7em
+
+    &.status
+      display: block
+      font-size: 0.9em
+      font-weight: bold
+      color: #c00
+
+      &::before
+        color: initial
+        opacity: 0.3
+        content: 'Status: '
+
+    &.registry-label-tree
+      font-weight: bold
+      opacity: 0.7
+
+      &.nestland
+        opacity: 1
+        background: -webkit-linear-gradient(45deg, #22c1c3, #fdbb2d)
+        background-clip: text
+        -webkit-background-clip: text
+        -webkit-text-fill-color: transparent
+
+    &.name-label-tree
+      font-weight: bold
+
+    &.owner-label-tree
+
+    &.version-label-tree
+      font-style: italic
+
+    &.relativePath-label-tree
+      font-style: italic
+      opacity: 0.5
+
+  input[type=checkbox]
+    display: none
+</style>
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
@@ -27,111 +27,10 @@ export default {
 };
 </script>
 
-<style lang="sass">
+<style scoped lang="sass">
 .tree
   width: 100%
 
-  li
-    list-style: none
-    padding-top: .5em
-    padding-left: 1.5em
-    position: relative
-
-    &::before
-      position: absolute
-      top: 0
-      left: 0
-      display: block
-      float: left
-      content: ''
-      width: 1em
-      height: 1.5em
-      margin: auto
-      border-left: 2px solid #ccc
-      border-bottom: 2px solid #ccc
-
-    &::after
-      position: absolute
-      top: 0
-      left: 0
-      display: block
-      float: left
-      content: ''
-      width: 1em
-      height: 100%
-      border-left: 2px solid #ccc
-
-    &:last-child:after
-      display: none
-
-    &.node-tree
-      &::before
-        border-image: linear-gradient(to right, #ccc, #22c1c3)
-        border-image-slice: 1
-
-      .label-tree
-        cursor: pointer
-
-      ul
-        visibility: hidden
-        opacity: 0
-        max-height: 0
-        transition: all 0.5s
-
-      input
-        &:checked
-          & ~ ul
-            visibility: visible
-            opacity: 1
-            max-height: 100%
-
-    &.leaf-tree
-      &::before
-        border-image: linear-gradient(to right, #ccc, #fdbb2d)
-        border-image-slice: 1
-
-      .label-tree
-        cursor: default
-
-    span
-      &.status-tree
-        display: block
-        font-size: 0.7em
-
-      &.status
-        display: block
-        font-size: 0.9em
-        font-weight: bold
-        color: #c00
-
-        &::before
-          color: initial
-          opacity: 0.3
-          content: 'Status: '
-
-      &.registry-label-tree
-        font-weight: bold
-        opacity: 0.7
-
-        &.nestland
-          opacity: 1
-          background: -webkit-linear-gradient(45deg, #22c1c3, #fdbb2d)
-          background-clip: text
-          -webkit-background-clip: text
-          -webkit-text-fill-color: transparent
-
-      &.name-label-tree
-        font-weight: bold
-
-      &.owner-label-tree
-
-      &.version-label-tree
-        font-style: italic
-
-      &.relativePath-label-tree
-        font-style: italic
-        opacity: 0.5
-
   input[type=checkbox]
     display: none
 </style>
diff --git a/src/components/tree/UrlRegistry.vue b/src/components/tree/UrlRegistry.vue
@@ -1,18 +1,18 @@
 <template>
-  <span>
-    <span v-if="!raw && supportedRegistry">
+  <div class="url-registry">
+    <div v-if="!raw && supportedRegistry">
       <span :class="[registry.replace('.', ''), 'registry-label-url']">
         {{ registry }}
       </span>
       <span class="name-label-url"> {{ name }} </span>
       <span class="owner-label-url"> {{ owner }} </span>
       <span class="version-label-url"> {{ version }} </span>
       <span class="relativePath-label-url"> {{ relativePath }} </span>
-    </span>
-    <span v-else>
+    </div>
+    <div v-else>
       {{ url }}
-    </span>
-  </span>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -51,29 +51,33 @@ export default {
 };
 </script>
 
-<style lang="sass">
-span
-  &.registry-label-url
-    font-weight: bold
-    opacity: 0.7
+<style scoped lang="sass">
+.url-registry
+  display: inline-block
+  width: 100%
 
-    &.nestland
-      opacity: 1
-      background: -webkit-linear-gradient(45deg, #22c1c3, #fdbb2d)
-      background-clip: text
-      -webkit-background-clip: text
-      -webkit-text-fill-color: transparent
+  span
+    &.registry-label-url
+      font-weight: bold
+      opacity: 0.7
 
-  &.name-label-url
-    font-weight: bold
+      &.nestland
+        opacity: 1
+        background: -webkit-linear-gradient(45deg, #22c1c3, #fdbb2d)
+        background-clip: text
+        -webkit-background-clip: text
+        -webkit-text-fill-color: transparent
 
-  &.owner-label-url
-    font-weight: bold
+    &.name-label-url
+      font-weight: bold
 
-  &.version-label-url
-    font-style: italic
+    &.owner-label-url
+      font-weight: bold
 
-  &.relativePath-label-url
-    font-style: italic
-    opacity: 0.5
+    &.version-label-url
+      font-style: italic
+
+    &.relativePath-label-url
+      font-style: italic
+      opacity: 0.5
 </style>