Mercurial > gemma
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>