src/platform/site-wide/sass/modules/_m-medallia.scss
@import "~@department-of-veterans-affairs/formation/sass/shared-variables";
@import "~@department-of-veterans-affairs/component-library/dist/main.css";
/************************************/
/* Beginning of Medallia 2.0 styles */
/************************************/
/* form styles */
// a11y fix to overwrite in-line style width to make content viewable beyond 300% zoom
#survey-wrapper[style] {
width: auto !important;
max-width: 448px !important;
overflow: auto !important;
}
.TKB4VqaXyyt6uMNVvoLdN main {
padding-left: 0px !important;
padding-right: 0px !important;
}
.TKB4VqaXyyt6uMNVvoLdN footer {
padding-right: 20px !important;
}
.TKB4VqaXyyt6uMNVvoLdN input:not([disabled]):focus, select:not([disabled]):focus, textarea:not([disabled]):focus, button:not([disabled]):focus, a:focus {
outline: 2px solid var(--vads-color-action-focus-on-light) !important;
outline-offset: 2px;
box-shadow: 0 0 0 0 !important;
}
/*** Crisis header ***/
#survey-wrapper > form > main > div._1BI5B2xY6xMD9hHPCMgWgM.omb_heading {
padding-bottom: 0 !important;
}
/* omb_intro */
._2x6S50Ozibu2fOMgF5qDzt > p > span {
line-height: 1.5;
font-weight: 400;
color: var(--vads-color-base-darker) !important;
box-sizing: inherit;
font-family: "Source Sans Pro", sans-serif !important;
font-size: 16px;
}
/* omb_crisis */
._1BI5B2xY6xMD9hHPCMgWgM > div > ul {
padding: 0 0 0 1.5em !important;
list-style: square !important
}
._1BI5B2xY6xMD9hHPCMgWgM > div > ul > li {
line-height: 1.5 !important;
margin-bottom: 0.5em !important
}
._2x6S50Ozibu2fOMgF5qDzt a {
color: --vads-color-link;
}
/*** form main body ***/
.Bd0kav7yJm1LMydxzQxl,
.kZ-XEf4gwEwGXI371wgSZ,
._1wOydBgObqX6N_H4ZxO4E5,
._3qavF1mE7wQGkoUgHE1D75,
._2x6S50Ozibu2fOMgF5qDzt,
._2x6S50Ozibu2fOMgF5qDzt > p,
.smallSurvey input {
font-family: "Source Sans Pro", sans-serif !important;
color: var(--vads-color-base-darker) !important;
line-height: 1.5;
font-size: 16px;
}
/* Specific Styles for question h2s*/
._3qavF1mE7wQGkoUgHE1D75 {
display: inline-block;
font-weight: bold !important;
margin-bottom: 5px;
text-align: left !important;
}
/* empty header & close button */
._1SPV2GZjz0ekDKiu5qBJ16 {
padding: 8px 0px !important;
display: flex;
justify-content: flex-end;
}
._1wOydBgObqX6N_H4ZxO4E5, ._1BI5B2xY6xMD9hHPCMgWgM {
padding-bottom: 0 !important;
}
/* div above each component*/
._1BI5B2xY6xMD9hHPCMgWgM {
margin-bottom: 25px !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
/* textbox, text area */
._3VgxUzppbTclqye69HSxig, ._3LJt9oCN0ZNp9W7qDxV4Pb {
border-radius: 0px !important;
}
/* muli options*/
._2BCbSBZTAy3NNEkchW4JAl {
border: none !important;
}
/* Base styles for interactive elements */
._2BCbSBZTAy3NNEkchW4JAl, .d2_RCwrIYw0j7I65dMyHx {
cursor: pointer !important;
position: relative;
}
/* Hover styles */
._2BCbSBZTAy3NNEkchW4JAl:hover, .d2_RCwrIYw0j7I65dMyHx:hover,
._2BCbSBZTAy3NNEkchW4JAl:focus, .d2_RCwrIYw0j7I65dMyHx {
z-index: 1;
box-shadow: 0 0 0 0 !important;
outline: 2px solid var(--vads-color-action-focus-on-light) !important;
outline-offset: 2px;
}
/* Enhanced focus styles for various form elements */
.smallSurvey input:not([disabled]):focus,
select:not([disabled]):focus,
textarea:not([disabled]):focus,
button:not([disabled]):focus {
outline: 2px solid var(--vads-color-action-focus-on-light) !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px var(--vads-color-white), 0 0 0 4px var(--vads-color-primary) !important;
}
/* coloring input checkboxes*/
._2BCbSBZTAy3NNEkchW4JAl input:checked + label ._3gm0DTvejOVCp2Ui6X30hr:before {
background-color: var(--vads-color-primary);
box-shadow: 0 0 0 2px var(--vads-color-white), 0 0 0 4px var(--vads-color-primary);
}
._2BCbSBZTAy3NNEkchW4JAl input:checked + label ._3vIIqCsHxivLQpx8AfcIkO:after {
background-color: var(--vads-color-primary) !important;
}
/* rating scale*/
._2tHW0cyET9DNu6CMvxGOlL {
font-family: "Source Sans Pro", sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
display: flex;
justify-content: space-between;
color: var(--vads-color-base-darker) !important;
}
._1_7PScJ_jiqe-TBSrlCh24 ._1YsDAuTgzg-TJThBFYa0LN:focus, ._1_7PScJ_jiqe-TBSrlCh24 ._1YsDAuTgzg-TJThBFYa0LN:hover {
outline: 2px solid var(--vads-color-action-focus-on-light) !important;
outline-offset: 2px;
box-shadow: 0 0 0 0 !important;
}
._1_7PScJ_jiqe-TBSrlCh24 ._3_foUkwcSeMY2vBraukrvR:hover{
outline: 2px solid var(--vads-color-action-focus-on-light) !important;
border-color: transparent;
}
._1_7PScJ_jiqe-TBSrlCh24 ._1YsDAuTgzg-TJThBFYa0LN {
background-color: var(--vads-color-primary);
}
/* Rating Label */
.ratingMinLabel, .ratingMaxLabel {
text-align: left;
width: 75px;
}
.ratingMaxLabel {
padding-left: 45px !important;
padding-right: 20px !important;
text-align: right !important;
width: 80px !important;
}
.ratingMinLabel {
padding-right: 25px;
}
/*** footer ***/
/*omb legal*/
#survey-wrapper > form > main > div._1BI5B2xY6xMD9hHPCMgWgM.pra_footer > div._2x6S50Ozibu2fOMgF5qDzt > p:nth-child(2) {
padding-top: 20px;
}
/* submit cancel btns div*/
._207sw0FPxzBQQBPqaDdUpd {
float: left !important;
margin-right: 10px;
}
/* swap button positioning */
._207sw0FPxzBQQBPqaDdUpd._1wsMeNP_TDIxNDJlja6xcv > div:nth-child(2) {
order: 1;
}
._207sw0FPxzBQQBPqaDdUpd._1wsMeNP_TDIxNDJlja6xcv > div:nth-child(1) {
order: 2;
}
._207sw0FPxzBQQBPqaDdUpd button {
appearance: none;
border: 0px;
border-radius: 5px;
color: var(--vads-color-white);
cursor: pointer;
display: inline-block;
font-family: "Source Sans Pro", sans-serif !important;
font-size: 16px;
font-weight: 700;
line-height: 48px;
padding: 6px 12px;
text-align: center;
text-decoration: none;
align-items: center;
background-color: var(--vads-color-primary);
border-radius: 5px;
color: var(--vads-color-white);
display: flex;
justify-content: center;
margin: 0.5em 0.5em 0.5em 0px;
line-height: 1.42857143;
padding: 6px 12px;
color: var(--vads-color-white);
}
._1De-hWu2XrYnO5hnFIWYwJ {
width: none;
}
._1De-hWu2XrYnO5hnFIWYwJ .surveyBtn .surveyBtn_submit {
appearance: none;
border: 0px;
border-radius: 5px;
color: var(--vads-color-white);
cursor: pointer;
display: inline-block;
font-family: "Source Sans Pro", sans-serif !important;
font-size: 16px;
font-weight: 700;
padding: 6px 12px;
text-align: center;
text-decoration: none;
align-items: center;
background-color: var(--vads-color-primary) !important;
border-radius: 5px;
color: var(--vads-color-white);
display: flex;
font-size: 14px;
justify-content: center;
margin: 0.5em 0.5em 0.5em 0px;
line-height: 1 !important;
padding: 6px 12px;
color: var(--vads-color-white);
width: 139px !important;
}
#survey-wrapper > form > footer > div._207sw0FPxzBQQBPqaDdUpd._1wsMeNP_TDIxNDJlja6xcv > div:nth-child(2) > button {
width: 150px !important;
height: 48px !important;
font-size: 16px
}
#survey-wrapper > form > footer > div._207sw0FPxzBQQBPqaDdUpd._1wsMeNP_TDIxNDJlja6xcv > div._1RyEnl1pfp8YClxLIzLFFu > button {
width: 70px !important;
height: 48px !important;
font-size: 16px
}
#survey-wrapper > form > main > fieldset._1BI5B2xY6xMD9hHPCMgWgM.pra_footer > div > p:nth-child(1) {
margin-bottom: 25px !important;
}
/* powered by div */
._10o3Ogtkx0b1R7N7tOe-dr {
padding-top: 80px !important
}