src/sass/_glossary.scss
// scss-lint:disable QualifyingElement
// scss-lint:disable ImportantRule
.tm-glossary {
$foreground-color: $color-white;
$padding: 3rem;
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto';
}
h3 {
font-size: 2.75rem;
font-weight: normal;
margin-bottom: 0;
margin-top: .5em;
}
h3,
a {
color: $foreground-color;
}
.usa-grid-full > h4 {
border-bottom: 1px solid $color-white;
margin-top: 1em;
padding-bottom: 5px;
}
fieldset {
color: $foreground-color;
padding: 0 $padding;
}
.glossary {
background: $primary-blue-darker;
border-left: 1px solid $tm-navy-dark;
bottom: 0;
overflow-y: scroll;
position: fixed;
right: 0;
top: 0;
transition: right .2s;
width: 30rem;
z-index: $glossary-z;
.glossary-hidden {
display: none !important;
}
}
.glossary-content-container {
position: relative;
}
.glossary-hidden {
right: -30rem;
}
ul {
padding: 0;
}
li {
list-style-type: none;
}
button {
appearance: none;
padding: .75rem .5rem .75rem 0;
text-align: left;
}
.glossary-padding {
padding: $padding;
}
.glossary-top,
.glossary-fieldset,
.glossary-export {
background-color: $primary-blue-darkest;
}
.glossary-export {
color: $primary-alt-lightest;
font-size: .8em;
padding: $padding / 2 $padding;
svg {
margin-right: .5em;
}
}
.glossary-content {
background-color: $primary-blue-darker;
padding: 1rem $padding;
}
.glossary-search-sub {
font-size: .85em;
font-style: italic;
margin-top: .25em;
}
.glossary-close {
background-color: transparent;
border: 0;
color: $foreground-color;
position: absolute;
right: 0;
top: 0;
z-index: $glossary-close-z;
}
.read-more-link {
margin-top: .2em;
}
.usa-accordion {
color: $foreground-color;
li {
background-color: transparent;
}
.usa-accordion-button {
background-color: transparent;
background-size: 11px;
border: 0;
color: $foreground-color;
}
.accordion-item-title {
font-weight: normal;
padding-right: 25%;
}
.usa-accordion-content {
background-color: transparent;
font-size: .8em;
padding: 1rem 1rem 1rem 0;
}
}
}