You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.6 KiB
122 lines
3.6 KiB
@layer components { |
|
/* ======================================= */ |
|
/* sidebar menu styles */ |
|
/* ======================================= */ |
|
|
|
/* sliding yellow links, no dropdowns */ |
|
.null.region-sidebar-second { |
|
.menu { |
|
margin: 0; |
|
} |
|
.menu a { |
|
text-decoration: none; |
|
display: block; |
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAARCAYAAADkIz3lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh5JREFUeNpi/PPnz//Xb98xMDMy7mFgYHBlgAImZiYGZMB0++59Bke/SIbKlm4XBkbGbUDMAMZogOnps+cv//3/y7Bq0zaGsoZ2z1+/fq4DYkyFP3/+MK0vyXkiLS7KsGL9Vob6zomBzMzMK4BybMgKmSMiIj+xs7JuNtbX8bl9/5Hg7oNHGd6+fa9jY26szMbKugvoiF8ghzAnpaQwsLKyvuPj5dmtpa7scvPWPRGQ4u8/f+o62FjIsbOz7wPa8JM5OjqG4f+/fyD8hpeba7++jqbdw8fPxDbv3sfw4eMnPUtTQ1mgwgPM0bFxyE55zcPNdVhJXsby0ZPnkrsPHmP4+vWbnrG+rjzDi+fPsOHSurae/yxiKv8ZBOX+r1y/+T8Lv6AgekgY3bn3MPHYmQsMf/78ZvB1d2bgZGWZy/Dp0ydkbHD2wuXbdj5h/xmEFf4Hxqb+37Zrz+xde/fzsfz+8wdmku7Dx083FtW2yB0+fprB3cGGISLAa/avnz8LfjEwfGOBRpbGo6fP9uRWNoidPHORwdfDmSEjIWIuEyNjNlDuNzRmfik8ePzsWHZZvdi5i1cZnG3MGWKDfBZ9/fQlBaYIBFjevv9wMbO0hu/ajdsMTjYWDPnpCauA4vEgyX///sJ9yPLp02e+p89eMFgY6zMkRwZv+vLpczhMkouHC66Q8efPn/9v3r7L8PPXr+1AvhdyOL199xbOBggwAPE+9T0FxGv+AAAAAElFTkSuQmCC); |
|
background-position: 96% 10px; |
|
background-repeat: no-repeat; |
|
padding: 6px 20px 6px 0; |
|
background-color: transparent; |
|
color: #192a36; |
|
/* display: inline-block; */ |
|
/* padding: 0 3px; */ |
|
margin-left: 0; |
|
margin-right: -3px; |
|
position: relative; |
|
text-decoration: none; |
|
transition: color ease 0.3s; |
|
z-index: 0; |
|
} |
|
li.menu-item { |
|
border-bottom: 2px solid var(--upei-orange); |
|
font-size: 16px; |
|
padding-top: 0; |
|
a:before { |
|
content: ""; |
|
position: absolute; |
|
z-index: -1; |
|
width: 0; |
|
height: 100%; |
|
left: 0; |
|
bottom: 0; |
|
background-color: var(--upei-orange); |
|
transition: all ease 0.3s; |
|
} |
|
a:hover:before { |
|
width: 100%; |
|
} |
|
} |
|
} |
|
/* sidebar block menu with dropdowns (may need to adjust .block-menu and/or regions) */ |
|
/* *see the associated behavior */ |
|
.region-sidebar-second { |
|
nav h2 { |
|
margin-bottom: 0; |
|
} |
|
nav ul.menu li a { |
|
text-decoration: none; |
|
padding: 7px 0 7px 10px; |
|
display: block; |
|
border-bottom: 2px solid #8c2004; |
|
color: #192a36; |
|
} |
|
.menu { |
|
margin: 0; |
|
/* margin-bottom: 1rem; */ |
|
} |
|
.menu-item { |
|
padding: 0; |
|
} |
|
.menu-item--expanded .menu a { |
|
margin-left: 1em; |
|
border: none; |
|
} |
|
/* Hide nested menus by default */ |
|
.block-menu .menu-item--expanded > ul { |
|
display: none; |
|
} |
|
|
|
/* Show when open */ |
|
.block-menu .menu-item--expanded.open > ul { |
|
display: block; |
|
} |
|
|
|
/* Position container */ |
|
.block-menu .menu-item--expanded { |
|
position: relative; |
|
list-style-type: none; |
|
list-style-image: none; |
|
} |
|
|
|
/* Caret button */ |
|
.block-menu .menu-caret { |
|
position: absolute; |
|
right: 0.5rem; |
|
top: 0.75rem; |
|
cursor: pointer; |
|
font-size: 0.8rem; |
|
user-select: none; |
|
} |
|
|
|
/* Optional caret icon (triangle) */ |
|
.block-menu .menu-caret::after { |
|
content: "▼"; |
|
} |
|
|
|
/* Rotate when open */ |
|
.block-menu .menu-item--expanded.open > .menu-caret::after { |
|
transform: rotate(180deg); |
|
display: inline-block; |
|
} |
|
|
|
.block-menu .menu-item--expanded > ul { |
|
display: block; |
|
max-height: 0; |
|
overflow: hidden; |
|
transition: max-height 0.5s ease; |
|
} |
|
|
|
.block-menu .menu-item--expanded.open > ul { |
|
max-height: 500px; |
|
} |
|
} |
|
}
|
|
|