src/applications/gi/sass/partials/_gi-profile-page.scss
.gi-app .profile-page {
h3 {
margin-top: 0;
}
.info-flag {
color: var(--vads-color-base-darker);
background-color: var(--vads-color-base-lighter);
font-size: 0.9em;
display: inline-block;
padding: 0.1em 0.5em;
margin-right: 0.5em;
margin-top: 0.5em;
}
.profile-accordion-list {
margin-top: 1em;
list-style-type: none;
padding-left: 0;
}
.accordion-button-text {
font-size: 1.35em;
}
.getting-started-with-benefits {
margin-top: -0.1em;
padding-top: 0.5em;
margin-left: 0.5em;
}
.getting-started-with-benefits-li {
list-style: disc;
margin-left: 0.5em;
}
.link-header {
h3,
h4,
h5 {
display: inline-block;
padding: 0;
}
h4 {
margin-top: 0.5em;
}
}
.additional-resources-preferred-provider {
position: relative;
top: 2em;
}
@include media-maxwidth($medium-screen - 1) {
.ratings-heading {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
}
.star-heading{
position: relative;
top: 35px;
pointer-events: none;
left: 190px;
@include media-maxwidth($medium-screen){
top: 60px;
left: 20px;
}
}
.ratings-star-block{
max-width: 5rem;
min-width: 5rem;
}
.main-rating{
margin-left: 0% !important;
padding-left: 0% !important;
}
@include media-maxwidth($medium-screen - 1) {
.about-ratings {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
}
.category-rating {
.rating {
@include media-maxwidth($medium-screen - 1) {
max-width: none;
}
}
.category-main {
padding-left: 10px;
padding-right: 10px;
}
.bar-outer {
width: 120px !important;
position: relative;
top: 5px;
border-radius: 10px;
}
.bar {
height: 16px !important;
border-radius: 10px;
}
button {
background-size: 12px;
background-color: transparent;
padding-left: 0;
padding-right: 0;
background-position: right 0.625rem center;
width: 100%;
@include media-maxwidth($medium-screen - 1) {
background-position: right 0.625rem center;
}
}
}
.additional-resources {
@include media-maxwidth($medium-screen - 1) {
display: none;
}
}
@media (max-width: $medium-screen -1) {
.additional-resources-profile {
padding-top: 2em;
}
}
@media (max-width: 640px) {
.additional-resources-responsive {
margin-top: 2em;
}
.vettec-logo-profile {
height: 60px;
width: 126px;
}
.additional-resources-vettec {
margin-top: 1em;
}
.vettec-logo-additional-resources {
display: none;
}
.logo-container {
display: none;
}
.additional-resources-preferred-provider {
margin-bottom: 23em;
}
}
@media (min-width: 641px) {
.additional-resources-vettec {
margin-top: -14em;
}
.vettec-logo-profile {
display: none;
}
.vettec-logo-additional-resources {
height: 85px;
width: 179px;
}
.additional-resources-preferred-provider {
top: 2.5em;
padding-bottom: 9.5em;
}
}
@media (min-width: 920px) {
.logo-container {
width: 180px;
margin-bottom: 2em;
margin-left: 4em;
}
}
@media (max-width: 919px) {
.logo-container {
width: 180px;
margin-bottom: 3em;
padding-right: 10px;
text-align: right;
}
}
@media screen and (max-width: $small-screen) {
.usa-alert {
padding-right: 2rem;
}
}
button.usa-accordion-button {
text-align: left;
}
button.usa-accordion-button-ratings {
text-align: left;
margin-bottom: 1px;
margin-top: 1px;
}
.category-ratings-accordion-headings {
margin-bottom: 9px;
padding-top: 1.25rem;
padding-left: 0.625rem;
padding-right: 0.625rem;
@include media-maxwidth($medium-screen - 1) {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
}
button.usa-accordion-button-ratings:hover {
background-color: var(--vads-color-base-lightest);
}
.calculate-your-benefits {
div.eligibility-details h2 {
display: none;
}
button {
margin: 0.75em 0 0 0;
padding: 0.625rem 1.25rem;
}
.calculator-result {
h5 {
padding: 0;
}
}
li.section-item button.usa-accordion-button {
padding-right: 2.5rem;
}
.calculate-button:disabled {
color: var(--vads-color-white);
background-color: var(--vads-color-base-lighter);
}
}
.your-estimated-benefits {
background: var(--vads-color-base-lightest);
padding: 0.9375rem 0.9375rem 0 0.9375rem;
overflow-wrap: break-word;
hr {
border-bottom: none;
border-top: 1px solid var(--vads-color-primary-darker);
}
.eyb-value-header {
margin-top: 22.5px;
margin-bottom: 7.5px;
}
ul {
list-style-type: none;
padding-left: 0;
margin-top: 0;
li {
p {
margin: 0;
}
}
}
}
.program-name {
font-style: italic;
}
.total-paid-to-you {
.calculator-result {
margin-top: 1rem;
}
}
.eyb-h4 {
font-family: "Bitter", "Georgia", "Cambria", "Times New Roman", "Times",
serif;
font-size: 1.0625rem;
font-weight: 700;
}
.per-term-section {
& + .per-term-section {
margin-top: 0.9375rem;
}
}
.tuition-section,
.housing-section {
.calculator-result {
margin-top: 0.3125rem;
}
}
.outcomes .graph-component {
margin: 1em auto;
clear: both;
}
.graph-key {
margin-top: 0.625rem;
@include media-maxwidth($medium-screen) {
width: 200%;
}
}
.cautionary-information {
.table {
td,
th {
padding: 20px;
}
table {
margin: 1em 0;
}
th:first-child {
width: 60%;
}
}
.complaints-by-type {
th:first-child span {
font-weight: normal;
}
}
.list {
h4 {
padding: 0.5em 0 !important;
}
.number {
text-align: right;
}
margin-bottom: 1em;
}
@media screen and (min-width: $medium-screen) {
.list {
display: none;
}
}
@include media-maxwidth($small-screen) {
.table {
display: none;
}
}
}
.estimated-benefit-values {
white-space: nowrap;
}
.contact-heading {
vertical-align: top;
}
.sco-contact-info {
word-wrap: break-word;
}
.additional-information {
.institution-summary {
margin-bottom: 1.25rem;
}
}
.vet-tec-application-process {
ol {
padding-inline-start: 0;
}
}
.school-locations {
padding-bottom: 0.625rem;
table {
table-layout: fixed;
width: 100%;
border: hidden;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
thead {
th {
border: hidden;
background: none;
white-space: nowrap;
padding-bottom: 0.5em;
padding-top: 0;
clear: both;
font-weight: 700;
font-family: Bitter, Georgia, Cambria, Times New Roman, Times, serif;
line-height: 1.5;
margin-bottom: 0.5em;
margin-top: 1.5em;
}
}
td {
border: hidden;
font-size: 0.9em;
padding-top: 0;
padding-bottom: 0;
vertical-align: top;
}
td::first-letter {
text-transform: capitalize;
}
.school-name-cell {
border: hidden;
font-size: 0.9em;
padding-top: 0;
padding-bottom: 0;
vertical-align: top;
::first-letter {
text-transform: capitalize;
}
.school-name {
margin-bottom: 0;
margin-top: 0;
font-weight: bold;
@include media-maxwidth($small-screen) {
margin-bottom: 0.8em;
margin-top: 0.8em;
}
}
}
.extension-row {
padding-left: 16px;
.extension-cell-label {
padding-left: 0.5em;
@include media-maxwidth($small-screen) {
margin-bottom: 0.8em;
margin-top: 0.8em;
}
}
}
.responsive-table-row-separator {
display: none;
}
.extension-row {
padding-left: 16px;
.extension-cell-label {
padding-left: 0.5em;
}
}
.estimated-housing-cell {
.estimated-housing-cell-title {
display: none;
}
}
@media screen and (max-width: $medium-screen) {
font-size: 1em;
td {
font-size: 1em;
}
.responsive-table-row-separator {
display: block;
margin: 0.7em 1em 0.5em;
}
.location-cell,
.estimated-housing-cell {
margin-left: -1px;
display: flex;
}
.location-cell dfn,
.estimated-housing-cell dfn {
padding-right: 0.2em;
white-space: nowrap;
}
.zipcode-margin {
@include media-maxwidth($small-screen) {
margin-left: 4.8em;
}
}
.extension-row {
.location-cell,
.school-name-cell,
.estimated-housing-cell {
padding-left: 1.3em;
}
.extension-cell-label {
padding-left: 0;
}
.location-cell,
.estimated-housing-cell {
margin-left: -2px;
}
}
.estimated-housing-cell {
.estimated-housing-cell-title {
display: inline;
}
}
}
}
@include media-maxwidth($medium-screen - 1) {
.locations-table {
display: none;
}
}
.sco-list {
list-style: none;
}
.estimated-benefits-header:focus {
outline: 0;
outline-color: transparent;
outline-style: none;
}
.checked-program {
max-width: fit-content;
}
.eyb-button {
&.usa-accordion-button[aria-expanded="false"] {
background-image: url("/img/arrow-up.png");
background-image: url("/img/arrow-up.svg");
}
&.usa-accordion-button[aria-expanded="true"] {
background-image: url("/img/arrow-down.png");
background-image: url("/img/arrow-down.svg");
}
}
$shadow: rgba(0, 0, 0, 0.15);
.eyb-sheet {
background-color: var(--vads-color-base-lightest);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 401;
overflow: hidden;
box-shadow: -1px -1px 16px 0 $shadow;
max-height: 0%;
// OUT
transition: max-height 1.5s ease-in-out;
-webkit-transition-delay: 0s;
transition-delay: 0s;
&.open {
max-height: 100%;
transition: max-height 1.5s ease-in-out;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
transition: none;
&.open {
transition: none;
}
}
}
.overlay {
display: flex;
flex-direction: column;
}
.estimate-your-benefits-form {
max-width: 400px;
ul {
list-style-type: none !important;
}
label,
span {
margin-top: 1.5em;
}
button.calculate-button {
background-image: none;
background-color: var(--vads-color-primary);
border-radius: $button-border-radius;
color: var(--vads-color-white);
width: auto;
text-align: inherit;
@include media-maxwidth($small-screen) {
text-align: center;
width: 100%;
}
}
.gi-checkbox-label {
margin-top: 1em;
}
}
.primary-sco-list {
padding-left: 0;
}
.secondary-sco-list {
padding-left: 0;
}
.eyb-skip-link {
&:not(:focus) {
position: absolute;
opacity: 0;
pointer-events: none;
}
&:focus {
top: auto;
line-height: 50px;
margin-bottom: 1em;
position: relative;
}
}
.profile-section {
border: 3px solid var(--vads-color-base-lightest);
margin-bottom: 50px;
h2 {
margin: 0px;
padding-top: 12px;
padding-left: 20px;
padding-bottom: 18px;
border-bottom: 3px solid var(--vads-color-base-lightest);
}
.section-body {
padding: 20px;
}
.subsection {
border-bottom: 1px solid var(--vads-color-black);
width: 100%;
font-family: "Bitter", "Georgia", "Cambria", "Times New Roman", "Times",
serif;
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
margin-top: 10px;
}
@include media-maxwidth($small-screen) {
border: none;
}
}
.jump-link {
display: block;
va-icon {
vertical-align: middle;
}
span {
display: inline-block;
padding-left: 10px;
}
}
}
.arrow-down-link {
text-decoration: none;
}
.arrow-down-link:hover, .arrow-down-link:visited{
color: rgb(0, 94, 162);
}
.profile-card {
border-radius: 10px;
}
.veteran-programs-and-support {
.historical-information.list {
margin-bottom: 1.25rem;
@media screen and (min-width: $medium-screen) {
display: none;
}
}
@include media-maxwidth($medium-screen) {
.historical-information.table {
display: none;
}
}
.veteran-programs {
va-icon {
vertical-align: bottom;
}
}
}
.institution-profile {
@include media-maxwidth($small-screen) {
padding-left: 10px;
padding-right: 10px;
}
}
.filter-before-res-link{
display: inline-block;
text-decoration: underline;
}
.iconToggle{
display: inline-block;
margin-right: 15px;
}
.v3-checkbox-vads-l-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
min-width: 100%;
}