sass/components/_glossary.scss
// scss-lint:disable ImportantRule
.glossary {
bottom: 0;
box-sizing: border-box;
overflow-y: auto;
position: fixed;
right: 0;
top: 0;
transition: right .2s;
width: 20rem;
&[aria-hidden=true] {
right: -20rem;
}
[aria-hidden=true] {
display: none !important;
}
}
.glossary__content {
ul {
padding: 0;
}
li {
border-bottom: 1px solid $white;
border-top: 1px solid $white;
list-style-type: none;
margin-bottom: -1px;
}
button {
appearance: none;
background-color: transparent;
background-image: url('/img/chevron-right-white.svg');
background-position: center right .5rem;
background-repeat: no-repeat;
background-size: 1rem 1rem;
border: 0;
color: $white;
padding: 1rem 2rem 1rem 0;
position: relative;
text-align: left;
width: 100%;
&[aria-expanded=true] {
background-image: url('/img/chevron-down-white.svg');
font-weight: $bold-font-weight;
}
}
.glossary__definition {
margin-bottom: $space-2;
margin-top: $space-tiny;
}
a {
color: $white;
text-decoration: underline;
}
}
.glossary-icon::after {
background-image: url('/img/glossary.svg');
background-position: 50% 50%;
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 10px;
padding-left: .5rem;
width: 10px;
}