diff --git a/assets/components/networks/network.vue b/assets/components/networks/network.vue index db0496c1..09c943dd 100644 --- a/assets/components/networks/network.vue +++ b/assets/components/networks/network.vue @@ -56,6 +56,12 @@
+ + + + + +
@@ -189,23 +207,60 @@ export default { } } +.expand { + display: flex; + justify-content: center; + align-items: center; + padding: .5rem 0 0 0; + font-weight: bold; + font-size: .9rem; + cursor: pointer; + + .icon { + margin: 0 .5rem; + } +} + +.expand-sites { + color: $shadow; + display: none; + + .icon { + fill: $shadow; + } + + &:hover { + color: $shadow-strong; + + .icon { + fill: $shadow-strong; + } + } +} + +.collapse-sites { + background: $profile; + color: $highlight; + + .icon { + fill: $highlight; + } + + &:hover { + color: $text-contrast; + + .icon { + fill: $text-contrast; + } + } +} + .sites.compact { display: none; background: $profile; grid-row: 1; } -.expand { - display: none; - color: $text-contrast; - background: $profile; - padding: .5rem; - text-align: center; - cursor: pointer; - font-size: .9rem; - font-weight: bold; -} - @media(max-width: $breakpoint3) { .header, .header.hideable { @@ -220,8 +275,8 @@ export default { } } - .expand { - display: block; + .expand-sites { + display: flex; } .network { diff --git a/assets/components/sites/sites.vue b/assets/components/sites/sites.vue index 6d335090..5d60ff6d 100644 --- a/assets/components/sites/sites.vue +++ b/assets/components/sites/sites.vue @@ -1,19 +1,6 @@