</ul>
</nav>
<div id="logo-eif">
- <div data-icon="logo-eif"></div>
+ <div data-icon="logo-EIF"></div>
<span>Powered by EIF</span>
</div>
</div>
header
+ $width: 150px
+ $bgcolor: $menu-background
+ $bghover: #292929
+
position: fixed
top: $space
left: $space
text-align: center
- width: 150px
+ width: $width
border-radius: 6px
height: calc(100% - 2 * $space)
background-color: $menu-background
#logo-client
padding: $space
+ #logo-eif
+ position: absolute
+ bottom: 0
+ left: 0
+ padding: 40px
+ color: #fff
+ font-size: 10px
+
+ span
+ display: block
+ margin-top: 9px
+
+
.compact
display: none
.large
display: block
- li
- height: 125px
- padding: $space
+ nav
+ position: absolute
+ top: 115px
- svg
- width: 40px
- height: auto
+ & > ul > li
+ position: relative
+ font-weight: bold
- span
- display: block
- text-transform: uppercase
- text-align: center
- margin: 5px auto
- word-spacing: 50px
-
- ul
- display: none
+ a
+ display: block
+ height: 125px
+ padding: $space
- &:hover
- background-color: #292929
+ svg
+ width: 40px
+ height: auto
- &.active
- background-color: #292929
+ span
+ display: block
+ text-transform: uppercase
+ text-align: center
+ margin: 5px auto
+ word-spacing: 50px
ul
- display: block
+ position: absolute
+ display: none
+ top: 20px
+ left: $width
+ width: 180px
+ text-align: left
+ text-transform: uppercase
+ font-size: 14px
+ line-height: 1em
+
+ li
+ a
+ display: block
+ padding: 13px 16px
+ height: 40px
+ background-color: $bgcolor
+
+ &:hover
+ background-color: $bghover
+
+ &:hover
+ background-color: $bghover
+
+ &.active
+ background-color: $bghover
+
+ ul
+ display: block
a
color: #fff
.toggle-menu
+ $width: 20px
position: absolute
- right: -20px
- top: $space
- width: 20px
+ right: -$width
+ top: $width
+ width: $width
height: 50px
background-color: $button-color
border-radius: 0 4px 4px 0
.large
display: none
- #logo-client
+ #logo-client, #logo-eif
padding: $space
- li
- padding: $space
- height: $width
+ nav > ul > li
+ > a
+ padding: $space
+ height: $width
- a span
- display: none
+ span
+ display: none
+
+ ul
+ left: $width
.toggle-menu
svg