diff --git a/_pages/payment-accuracy/assets/css/main-page.scss b/_pages/payment-accuracy/assets/css/main-page.scss index d864a0fb1..f959bb168 100644 --- a/_pages/payment-accuracy/assets/css/main-page.scss +++ b/_pages/payment-accuracy/assets/css/main-page.scss @@ -681,4 +681,71 @@ abbr{ padding: 10px; } } +} + +@media screen and (min-width: 640px) { + .usa-banner__button[aria-expanded="true"]::after { + background-color: transparent !important; + background-image: url("../img/angle-arrow-up-primary.svg"), linear-gradient(transparent, transparent); + background-repeat: no-repeat; + background-position: center center; + background-size: 0.5rem; + content: ""; + display: inline-block; + width: 0.5rem; + margin-left: 4px; + transform: rotate(0deg) !important; + } + + .usa-banner__button[aria-expanded="true"]:hover::after { + background-image: url("../img/angle-arrow-up-primary-hover.svg"), linear-gradient(transparent, transparent); + background-color: transparent !important; + transform: rotate(0deg) !important; + } + + .usa-banner__button::after { + background-image: url("../img/angle-arrow-down-primary.svg"), linear-gradient(transparent, transparent); + background-repeat: no-repeat; + background-position: center center; + background-size: 0.5rem; + content: ''; + display: inline-block; + width: 0.5rem; + margin-left: 4px; + background-color: transparent !important; + } + + .usa-banner__button:hover::after { + background-image: url("../img/angle-arrow-down-primary-hover.svg"), linear-gradient(transparent, transparent); + background-color: transparent !important; + } +} + +@media screen and (max-width: 640px) { + .usa-banner__button[aria-expanded="true"]::after { + border: 0; + background-image: url("../img/close-blue-60v-alt.svg"), linear-gradient(transparent, transparent); + background-repeat: no-repeat; + background-position: center center; + background-size: 1rem; + content: ''; + display: inline-block; + height: 3rem; + width: 3rem; + margin-left: 0; + background-color: transparent !important; + } + + .usa-banner__header-action::after { + background-image: url("../img/angle-arrow-down-primary.svg"), linear-gradient(transparent, transparent); + background-repeat: no-repeat; + background-position: center center; + background-size: 0.5rem; + content: ''; + display: inline-block; + height: 0.5rem; + width: 0.5rem; + margin-left: 2px; + background-color: transparent !important; + } } \ No newline at end of file diff --git a/_pages/payment-accuracy/assets/images/FAVICON-CFO-1.svg b/_pages/payment-accuracy/assets/images/FAVICON-CFO-1.svg new file mode 100644 index 000000000..67f04028e --- /dev/null +++ b/_pages/payment-accuracy/assets/images/FAVICON-CFO-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_pages/payment-accuracy/assets/images/search.svg b/_pages/payment-accuracy/assets/images/search.svg new file mode 100644 index 000000000..a50fa62fd --- /dev/null +++ b/_pages/payment-accuracy/assets/images/search.svg @@ -0,0 +1 @@ + \ No newline at end of file