Initial styling for payment page.
This commit is contained in:
Bryan Mauger
parent
959292b23d
commit
ded7ea101c
5 changed files with 416 additions and 8095 deletions
13
public/css/README.md
Normal file
13
public/css/README.md
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
# Using Sass in this folder
|
||||||
|
|
||||||
|
This public/css folder uses a standalone .scss > .css setup.
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
From a Terminal window, run the Sass Watch command on this folder only:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sass --no-source-map --watch public/css/hop-styling.scss:public/css/hop-styling.css
|
||||||
|
```
|
||||||
|
This will output a CSS file that can be consumed by the Payment page.
|
||||||
|
|
||||||
|
# Do not use the .css file on its own. You must use the .scss file and have Sass compile it to the .css file.
|
||||||
|
|
@ -1,336 +1,194 @@
|
||||||
.btn-group-lg > .btn {
|
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
|
||||||
padding: 10px 20px;
|
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
|
||||||
font-size: 20px;
|
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
|
||||||
line-height: 1.3;
|
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.btn-group-sm > .btn {
|
|
||||||
padding: 3px 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.5;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.btn-group-xs > .btn {
|
|
||||||
padding: 1px 5px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.5;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.dl-horizontal dd:before,
|
|
||||||
.dl-horizontal dd:after,
|
|
||||||
.container:before,
|
|
||||||
.container:after,
|
|
||||||
.container-fluid:before,
|
|
||||||
.container-fluid:after,
|
|
||||||
.row:before,
|
|
||||||
.row:after,
|
|
||||||
.form-horizontal .form-group:before,
|
|
||||||
.form-horizontal .form-group:after,
|
|
||||||
.btn-toolbar:before,
|
|
||||||
.btn-toolbar:after,
|
|
||||||
.btn-group-vertical > .btn-group:before,
|
|
||||||
.btn-group-vertical > .btn-group:after,
|
|
||||||
.panel-body:before,
|
|
||||||
.panel-body:after,
|
|
||||||
.modal-footer:before,
|
|
||||||
.modal-footer:after {
|
|
||||||
content: " ";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
.dl-horizontal dd:after,
|
|
||||||
.container:after,
|
|
||||||
.container-fluid:after,
|
|
||||||
.row:after,
|
|
||||||
.form-horizontal .form-group:after,
|
|
||||||
.btn-toolbar:after,
|
|
||||||
.btn-group-vertical > .btn-group:after,
|
|
||||||
.panel-body:after,
|
|
||||||
.modal-footer:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
[data-icon]:before,
|
|
||||||
[data-icon-after]:after,
|
|
||||||
.ico:before {
|
|
||||||
speak: none;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-transform: none !important;
|
|
||||||
font-weight: normal !important;
|
|
||||||
font-style: normal !important;
|
|
||||||
font-variant: normal !important;
|
|
||||||
font-size: 20px !important;
|
|
||||||
font-family: "safelite-ico" !important;
|
|
||||||
line-height: 20px !important;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
position: static !important;
|
|
||||||
height: auto !important;
|
|
||||||
}
|
|
||||||
html,
|
|
||||||
body {
|
body {
|
||||||
background-color: #ffffff !important;
|
font-family: Roboto;
|
||||||
}
|
font-weight: 400;
|
||||||
body {
|
color: #4D5151;
|
||||||
margin-bottom: 16px !important;
|
margin: 0;
|
||||||
}
|
background-color: white;
|
||||||
.headerlinecontainer {
|
|
||||||
color: #000000;
|
|
||||||
font-family: Roboto, Arial, "Helvetica Neue", Helvetica, Tahoma, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
.headerline1 {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 11.5px;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
.headerline2,
|
|
||||||
.headerline3,
|
|
||||||
.headerline4,
|
|
||||||
.headerline5 {
|
|
||||||
margin-bottom: 11.5px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.headerline3 {
|
|
||||||
color: #0c7e47;
|
|
||||||
}
|
|
||||||
.headerline5 {
|
|
||||||
display: block;
|
|
||||||
padding: 11.5px 0;
|
|
||||||
color: #167cac;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
.headerline5v2 {
|
|
||||||
display: block;
|
|
||||||
padding: 11.5px 0;
|
|
||||||
color: #da291c;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.form-group .control-label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
.form-group .form-control {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
@media (min-width: 500px) {
|
|
||||||
.form-group {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 800px) {
|
|
||||||
.form-group {
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 576px) {
|
|
||||||
#cardExpirationContainer .card_expirationMonth,
|
|
||||||
#cardExpirationContainer .card_expirationYear {
|
|
||||||
position: relative;
|
|
||||||
width: 49%;
|
|
||||||
}
|
|
||||||
#cardExpirationContainer .card_expirationMonth {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#cardExpirationContainer .card_expirationYear {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.totalContainer {
|
|
||||||
margin: 16px 0;
|
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #0c7e47;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
}
|
||||||
.totalContainer em {
|
body .validation-info {
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.totalContainer .strikeThrough {
|
|
||||||
padding-left: 8px;
|
|
||||||
text-decoration: line-through;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.callerDisplayTextContainer {
|
|
||||||
margin: 16px 0;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
.disclaimerContainer {
|
|
||||||
margin: 16px 0;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #f0f1f2;
|
|
||||||
}
|
|
||||||
.disclaimerContainerv2 {
|
|
||||||
margin: 16px 0;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.buttonContainer #sghopcancelbutton {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.buttonContainer #sghopsubmitbutton {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.buttonContainer #sghopsubmitbutton.creditCardSpecific {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.buttonContainer #sghopsubmitbutton.creditCardSpecific {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.buttonContainer #selectPaymentTypeButton {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.buttonContainer #selectPaymentTypeButton {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.globalMessage .message {
|
|
||||||
padding-left: 0;
|
|
||||||
line-height: 1.25;
|
|
||||||
}
|
|
||||||
.globalMessage .message strong {
|
|
||||||
color: #da291c;
|
|
||||||
}
|
|
||||||
.italicSmall {
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
#pageLoadingModal {
|
|
||||||
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
|
|
||||||
}
|
|
||||||
#pageLoadingModal .modal-content {
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
#paypalParentDiv {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
#creditCardParentDiv {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.radio .list-group.paymentSelection,
|
|
||||||
.radio.list-group.paymentSelection {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
@media (max-width: 33.9em) {
|
|
||||||
.radio .list-group.paymentSelection label,
|
|
||||||
.radio.list-group.paymentSelection label,
|
|
||||||
.radio .list-group.paymentSelection a,
|
|
||||||
.radio.list-group.paymentSelection a {
|
|
||||||
max-height: 52px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#creditCardParentLink {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
@media (max-width: 33.9em) {
|
|
||||||
#creditCardParentLink {
|
|
||||||
min-height: 57px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#creditCardImages,
|
|
||||||
#paypalImageSpan {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
@media (max-width: 33.9em) {
|
|
||||||
.paymentOptionText {
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.extraPaddingTop {
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
.extraPaddingBottom {
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
@media (min-width: 33.9em) {
|
|
||||||
#paypalImage {
|
|
||||||
max-width: 22%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 33.9em) {
|
|
||||||
#paypalImage {
|
|
||||||
max-width: 55px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
label.centerme {
|
|
||||||
position: inherit;
|
|
||||||
display: table-cell;
|
|
||||||
width: 9999px !important;
|
|
||||||
/*This is kind of a hack*/
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
input[name="rdioCreditCard"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
@media (min-width: 33.9em) {
|
|
||||||
input[name="rdioCreditCard"] {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 33.9em) {
|
|
||||||
span.paymentOptionText {
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.headerline1.safelitehop {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
@media (max-width: 499px) {
|
|
||||||
#buttonContainer {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.has-success .control-label {
|
|
||||||
color: #4d4e53;
|
|
||||||
}
|
|
||||||
#thm_fp {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#paypalParentLink label,
|
|
||||||
#creditCardParentLink label {
|
|
||||||
padding-top: 9px;
|
|
||||||
padding-bottom: 9px;
|
|
||||||
}
|
|
||||||
#paypalParentLink label .paymentOptionText,
|
|
||||||
#creditCardParentLink label .paymentOptionText {
|
|
||||||
padding-left: 20px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
#paypalParentLink {
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
html #creditCardParentLink.list-group-item {
|
|
||||||
border-radius: 48px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.optional-label span {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.optional-label::after {
|
body .italicSmall {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
body span {
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
body a {
|
||||||
|
color: #1574A1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
body .form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
body h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 32px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
body input,
|
||||||
|
body select {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
body input {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #8E9292;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
body input:focus, body input:focus-visible {
|
||||||
|
box-shadow: 0 0 0 2.5px #1574a1;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
body input:disabled, body input.disabled {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
body input:disabled:hover, body input.disabled:hover {
|
||||||
|
box-shadow: 0 0 0 4px transparent;
|
||||||
|
border: 1px solid #8e9292;
|
||||||
|
}
|
||||||
|
body input:hover {
|
||||||
|
border: 1px solid #8e9292;
|
||||||
|
box-shadow: 0 0 0 4px #9fcee6;
|
||||||
|
}
|
||||||
|
body select {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #8E9292;
|
||||||
|
padding: 16px;
|
||||||
|
width: 100%;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 95% 50%;
|
||||||
|
background-size: 15px 9px;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
body .creditCardSpecific div {
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
body .creditCardSpecific div .headerlinecontainer {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body .creditCardSpecific div .headerlinecontainer .headerline5v2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body .creditCardSpecific div label {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
body .creditCardSpecific #infoRow2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
body #cardExpirationContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
@media (min-width: 368px) {
|
||||||
|
body #cardExpirationContainer {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
body #cardExpirationContainer .card_expirationYear,
|
||||||
|
body #cardExpirationContainer .card_expirationMonth {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
body #cardExpirationContainer .card_expirationYear {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body .optional-label span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body .optional-label:after {
|
||||||
content: " (optional)";
|
content: " (optional)";
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
.creditCardSpecific {
|
body .buttonContainer {
|
||||||
display: none;
|
height: 48px;
|
||||||
|
margin-top: 36px;
|
||||||
}
|
}
|
||||||
@media (max-width: 500px) {
|
body .buttonContainer button {
|
||||||
.buy-backdrop.afterpay-checkout-wrapper {
|
position: relative;
|
||||||
-webkit-box-align: start;
|
background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
|
||||||
-ms-flex-align: start;
|
border: none;
|
||||||
align-items: flex-start;
|
border-radius: 8px;
|
||||||
|
color: #fff;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
@media (hover: hover) {
|
||||||
|
body .buttonContainer button {
|
||||||
|
background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
body .buttonContainer button:focus {
|
||||||
|
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
|
||||||
|
}
|
||||||
|
body .buttonContainer button:focus, body .buttonContainer button:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(270deg, rgb(6, 87, 124) 0%, rgb(6, 87, 124) 100%);
|
||||||
|
}
|
||||||
|
body .buttonContainer button:disabled {
|
||||||
|
background: #e3e4e4 !important;
|
||||||
|
background: linear-gradient(270deg, #e3e4e4 0%, #e3e4e4 100%) !important;
|
||||||
|
color: #4d5151 !important;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 48px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
body .buttonContainer button.has-loader {
|
||||||
|
color: #fff;
|
||||||
|
background: #06577c;
|
||||||
|
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
body .buttonContainer button.delay {
|
||||||
|
transition: background 0s 0s ease-in-out;
|
||||||
|
}
|
||||||
|
body .has-error input,
|
||||||
|
body .has-error select {
|
||||||
|
border: 1px solid #d4281c;
|
||||||
|
}
|
||||||
|
body .has-error input:focus,
|
||||||
|
body .has-error select:focus {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
body .has-error input:hover,
|
||||||
|
body .has-error select:hover {
|
||||||
|
border: 1px solid #d4281c;
|
||||||
|
box-shadow: 0 0 0 4px #fcbfbb;
|
||||||
|
}
|
||||||
|
body .has-error select {
|
||||||
|
border: 1px solid #d4281c;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 95% 50%;
|
||||||
|
background-size: 15px 9px;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
body .has-error small {
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #d4281c;
|
||||||
|
}
|
||||||
|
body .cc-error-container #alert-message {
|
||||||
|
background-color: #fcbfbb;
|
||||||
|
border: 1px solid #d4281c;
|
||||||
|
}
|
||||||
|
|
|
||||||
218
public/css/hop-styling.scss
Normal file
218
public/css/hop-styling.scss
Normal file
|
|
@ -0,0 +1,218 @@
|
||||||
|
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
|
||||||
|
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
|
||||||
|
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
|
||||||
|
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
|
||||||
|
body {
|
||||||
|
font-family: Roboto;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #4D5151;
|
||||||
|
margin: 0;
|
||||||
|
background-color: white;
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.validation-info {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.italicSmall {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #1574A1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 32px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #8E9292;
|
||||||
|
padding: 16px;
|
||||||
|
&:focus,
|
||||||
|
&:focus-visible {
|
||||||
|
box-shadow: 0 0 0 2.5px #1574a1;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
filter: grayscale(100%);
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 0 4px transparent;
|
||||||
|
border: 1px solid #8e9292;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid #8e9292;
|
||||||
|
box-shadow: 0 0 0 4px #9fcee6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #8E9292;
|
||||||
|
padding: 16px;
|
||||||
|
width: 100%;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 95% 50%;
|
||||||
|
background-size: 15px 9px;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.creditCardSpecific {
|
||||||
|
div {
|
||||||
|
padding: 8px 0;
|
||||||
|
.headerlinecontainer {
|
||||||
|
padding: 0;
|
||||||
|
.headerline5v2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#infoRow2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#cardExpirationContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
@media (min-width: 368px) {
|
||||||
|
flex-direction: row;
|
||||||
|
.card_expirationYear,
|
||||||
|
.card_expirationMonth {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.card_expirationYear {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.optional-label {
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
content: " (optional)";
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonContainer {
|
||||||
|
height: 48px;
|
||||||
|
margin-top: 36px;
|
||||||
|
button {
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #fff;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 48px;
|
||||||
|
@media (hover: hover) {
|
||||||
|
background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
|
||||||
|
}
|
||||||
|
&:focus, // Mouse, touch, stylus focus
|
||||||
|
&:focus-visible {
|
||||||
|
// Keyboard focus for accessibility
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
|
||||||
|
}
|
||||||
|
&:disabled {
|
||||||
|
background: #e3e4e4 !important;
|
||||||
|
background: linear-gradient(270deg, #e3e4e4 0%, #e3e4e4 100%) !important;
|
||||||
|
color: #4d5151 !important;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 48px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
&.has-loader {
|
||||||
|
color: #fff;
|
||||||
|
background: #06577c;
|
||||||
|
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
&.delay {
|
||||||
|
// fixes flicker while transitioning between states
|
||||||
|
transition: background 0s 0s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Error Styling
|
||||||
|
.has-error {
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
border: 1px solid #d4281c;
|
||||||
|
&:focus {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid #d4281c;
|
||||||
|
box-shadow: 0 0 0 4px #fcbfbb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
border: 1px solid #d4281c;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 95% 50%;
|
||||||
|
background-size: 15px 9px;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #d4281c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cc-error-container {
|
||||||
|
#alert-message {
|
||||||
|
background-color: #fcbfbb;
|
||||||
|
border: 1px solid #d4281c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||||
<loadingModal notFullScreen ref="loadingModal" />
|
<loadingModal notFullScreen ref="loadingModal" />
|
||||||
<div class="container-fluid page-container-grouped-styles">
|
<div class="container-fluid">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-6 col-xl-4">
|
<div class="col-md-6 col-xl-4 p-0">
|
||||||
<div id="card-container">
|
<div id="card-container">
|
||||||
<iframe
|
<iframe
|
||||||
ref="paymentFrame"
|
ref="paymentFrame"
|
||||||
|
|
@ -55,7 +55,6 @@
|
||||||
<input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
|
<input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
|
||||||
|
|
||||||
<input type="hidden" name="maskCharacter" value="*" />
|
<input type="hidden" name="maskCharacter" value="*" />
|
||||||
<input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
|
|
||||||
<input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
|
<input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
|
||||||
|
|
||||||
<input type="hidden" name="sgReceiptResponseURL" :value="piaResponseUrl" />
|
<input type="hidden" name="sgReceiptResponseURL" :value="piaResponseUrl" />
|
||||||
|
|
@ -228,10 +227,6 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
dynamicCSSUrl() {
|
|
||||||
const { protocol, hostname, port } = window.location;
|
|
||||||
return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`;
|
|
||||||
},
|
|
||||||
dynamicHopCSSUrl() {
|
dynamicHopCSSUrl() {
|
||||||
const { protocol, hostname, port } = window.location;
|
const { protocol, hostname, port } = window.location;
|
||||||
return `${protocol}//${hostname}:${port}/fmg/css/hop-styling.css`;
|
return `${protocol}//${hostname}:${port}/fmg/css/hop-styling.css`;
|
||||||
|
|
@ -380,7 +375,7 @@ export default {
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.hop-iframe {
|
.hop-iframe {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 1350px;
|
min-height: 1600px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue