diff client/src/components/Sidebar.vue @ 1449:bb47531bdd22

sass to scss
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 03 Dec 2018 10:19:59 +0100
parents f4b3fb43b311
children 33dda08d67be
line wrap: on
line diff
--- a/client/src/components/Sidebar.vue	Mon Dec 03 09:28:28 2018 +0100
+++ b/client/src/components/Sidebar.vue	Mon Dec 03 10:19:59 2018 +0100
@@ -136,49 +136,64 @@
 };
 </script>
 
-<style lang="sass" scoped>
-.menubutton
-  height: $icon-height
-  width: $icon-width
-  top: 0
-  left: 0
-  color: #666
+<style lang="scss" scoped>
+.menubutton {
+  height: 2rem;
+  width: 2rem;
+  top: 0;
+  left: 0;
+  color: #666;
+}
+
+.menu a {
+  display: block;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  color: #333;
+  text-decoration: none;
+}
+
+.menu a svg path {
+  fill: #666;
+}
+
+.menu a:hover {
+  background-color: #f8f8f8;
+}
+
+.menu a.router-link-exact-active {
+  background-color: #17a2b8;
+  color: #fff;
+}
 
-.menu
-  a
-    display: block
-    text-align: left
-    padding: 0.5rem 1rem
-    color: #333
-    text-decoration: none
-    svg path
-      fill: #666
-    &:hover
-      background-color: #f8f8f8
-    &.router-link-exact-active
-      background-color: $color-info
-      color: #fff
-      svg path
-        fill: #fff
-    &.secondary
-      &.active
-        background: lighten($color-info, 55)
-        color: darken($color-info, 15)
-        svg path
-          fill: darken($color-info, 15)
+.menu a.router-link-exact-active svg path {
+  fill: #fff;
+}
+
+.menu a.secondary.active {
+  background: #ebfafd;
+  color: #0f6674;
+}
+
+.menu a.secondary.active svg path {
+  fill: #0f6674;
+}
 
-.sidebar
-  background-color: #ffffff
-  padding-top: $large-offset
-  opacity: $slight-transparent
-  transition: $transition-fast
-  overflow: hidden
+.sidebar {
+  background-color: #ffffff;
+  padding-top: $large-offset;
+  opacity: $slight-transparent;
+  transition: $transition-fast;
+  overflow: hidden;
+}
 
-.sidebarcollapsed
-  max-height: $icon-height
-  max-width: $icon-width
+.sidebarcollapsed {
+  max-height: $icon-height;
+  max-width: $icon-width;
+}
 
-.sidebarextended
-  max-height: 35rem
-  max-width: $sidebar-width
+.sidebarextended {
+  max-height: 35rem;
+  max-width: $sidebar-width;
+}
 </style>