jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1465 from Safelite/CSR-1390-payment-modal-styling

Browse source 
CSR-1390 style PayPal modal.
This commit is contained in:
bmauger 2023-10-27 16:10:00 -04:00 committed by GitHub
commit ddd641e96e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 190 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/css/README.md
View file

@ -3,11 +3,11 @@
This public/css folder uses a standalone .scss > .css setup.
## Usage
From a Terminal window, run the Sass Watch command on this folder only:
From a Terminal window, run the Sass Watch command from the public folder only:
```bash
sass --no-source-map --watch public/css/hop-styling.scss:public/css/hop-styling.css
sass --no-source-map --watch scss:css
```
This will output a CSS file that can be consumed by the Payment page.
This will compile and output .css files (into the public/css folder) 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.
# Do not use the .css files on their own. You must use the .scss files and have Sass compile them to .css files.

87
public/css/site-2020Styling.css Normal file
View file

@ -0,0 +1,87 @@
/* 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! */
/* Style the modal when PayPal button is selected */
#pageLoadingModal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35);
display: flex;
}
#pageLoadingModal .modal-content {
margin: auto auto;
}
#pageLoadingModal p {
margin: 0;
text-transform: uppercase;
font-size: 14px;
}
#pageLoadingModal .modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
-webkit-overflow-scrolling: touch;
outline: 0;
}
#pageLoadingModal .modal-content {
position: relative;
background-color: #fff;
border-radius: 8px;
background-clip: padding-box;
outline: 0;
width: 168px;
height: 168px;
display: flex;
justify-content: center;
align-items: center;
}
#pageLoadingModal .modal-content:before, #pageLoadingModal .modal-content:after {
content: "";
border-radius: 50%;
position: absolute;
inset: 0;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25) inset;
top: 24px;
bottom: 24px;
right: 24px;
left: 24px;
}
#pageLoadingModal .modal-content:after {
box-shadow: 0 3px 0 #da291c inset;
animation: rotate 1s linear infinite;
}
#pageLoadingModal .modal-backdrop {
position: absolute;
top: 0;
right: 0;
left: 0;
background-color: #000000;
}
#pageLoadingModal .modal-backdrop.fade {
opacity: 0;
filter: alpha(opacity=0);
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.creditCardSpecific {
display: none;
}

0
public/css/hop-styling.scss → public/scss/hop-styling.scss
View file

91
public/scss/site-2020Styling.scss Normal file
View file

@ -0,0 +1,91 @@
/* 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! */
/* Style the modal when PayPal button is selected */
#pageLoadingModal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.35);
display: flex;
.modal-content {
margin: auto auto;
}
p {
margin: 0;
text-transform: uppercase;
font-size: 14px;
}
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal-content {
position: relative;
background-color: #fff;
border-radius: 8px;
background-clip: padding-box;
outline: 0;
width: 168px;
height: 168px;
display: flex;
justify-content: center;
align-items: center;
&:before,
&:after {
content: '';
border-radius: 50%;
position: absolute;
inset: 0;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25) inset;
top: 24px;
bottom: 24px;
right: 24px;
left: 24px;
}
&:after {
box-shadow: 0 3px 0 #da291c inset;
animation: rotate 1s linear infinite;
}
}
.modal-backdrop {
position: absolute;
top: 0;
right: 0;
left: 0;
background-color: #000000;
&.fade {
opacity: 0;
filter: alpha(opacity=0);
}
}
}
@keyframes rotate {
0% { transform: rotate(0)}
100% { transform: rotate(360deg)}
}
.creditCardSpecific {
display: none;
}

8
src/layouts/payment/payment.vue
View file

@ -85,6 +85,7 @@
<input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
<input type="hidden" name="maskCharacter" value="*" />
<input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
<input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
<input type="hidden" name="sgReceiptResponseURL" :value="piaResponseUrl" />
@ -266,6 +267,10 @@ export default {
});
},
computed: {
dynamicCSSUrl() {
const { protocol, hostname, port } = window.location;
return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`;
},
dynamicHopCSSUrl() {
const { protocol, hostname, port } = window.location;
return `${protocol}//${hostname}:${port}/fmg/css/hop-styling.css`;
@ -488,4 +493,7 @@ export default {
width: 100%;
border: 0 none;
}
#pageLoadingModal {
background-color: red;
}
</style>