diff options
| -rw-r--r-- | resources/assets/stylesheets/scss/navigation.scss | 25 |
1 files changed, 16 insertions, 9 deletions
diff --git a/resources/assets/stylesheets/scss/navigation.scss b/resources/assets/stylesheets/scss/navigation.scss index d876a22..1346fd6 100644 --- a/resources/assets/stylesheets/scss/navigation.scss +++ b/resources/assets/stylesheets/scss/navigation.scss @@ -122,7 +122,7 @@ body:not(.fixed) #navigation-level-1-items { } // Rotate icon - > label img { + > label svg { transition: transform var(--transition-duration); transform: rotate(90deg); } @@ -132,14 +132,18 @@ body:not(.fixed) #navigation-level-1-items { transition: opacity var(--transition-duration); } + &::after { + + } + // Display menu on activation &:hover label, input[type="checkbox"]:checked { ~ ul { display: block; } - img, - ~ label img { + svg, + ~ label svg { transform: rotate(180deg); } > a[data-badge]::before { @@ -156,11 +160,11 @@ body:not(.fixed) #navigation-level-1-items { z-index: 10; list-style: none; - margin: 5px 0 0; + margin-top: 1px; padding: 4px 4px; - background-color: var(--dark-gray-color-5); - border: 1px solid var(--dark-gray-color-40); + background-color: var(--color--main-navigation-background); + border: 1px solid var(--color--main-navigation-border); border-top: 0; min-width: 150px; @@ -182,9 +186,9 @@ body:not(.fixed) #navigation-level-1-items { left: 21px; } } - img { - flex: 1 0 20px; - @include square(20px); + img, + svg { + flex: 1 0 auto; margin: 0 0.25em; } @@ -197,6 +201,9 @@ body:not(.fixed) #navigation-level-1-items { br { display: none; } + &:hover::after { + height: 2px; + } } } } |