From f49ea6673d1ea9b17d5e802aff7c50add537ab1f Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Wed, 25 Feb 2026 09:34:49 -0500 Subject: [PATCH] INSR-7760: Mostly updates for HOP styling --- public/css/hop-styling.css | 320 ++++++++++---------- public/icons/select-disabled.png | Bin 0 -> 1326 bytes public/icons/select-error.png | Bin 0 -> 1413 bytes public/icons/select-success.png | Bin 0 -> 1393 bytes public/icons/select.png | Bin 0 -> 1392 bytes public/scss/hop-styling.scss | 343 ++++++++++++---------- src/layouts/payment-page/payment-page.vue | 105 ++++--- 7 files changed, 424 insertions(+), 344 deletions(-) create mode 100644 public/icons/select-disabled.png create mode 100644 public/icons/select-error.png create mode 100644 public/icons/select-success.png create mode 100644 public/icons/select.png diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index 6b99fe79..46607424 100644 --- a/public/css/hop-styling.css +++ b/public/css/hop-styling.css @@ -7,17 +7,19 @@ body { font-family: Urbanist, Roboto, Arial, sans-serif; font-weight: 400; letter-spacing: 0.03em; - color: #000; + color: #4d4e53; margin: 0; background-color: white; - padding: 8px; + margin-bottom: 1rem; + font-size: 1rem; } body .validation-info { - display: none; + color: #db0020; } body .italicSmall { - font-style: normal; - font-size: 14px; + font-weight: normal; + font-style: italic; + font-size: 12px; } body span { line-height: 24px; @@ -26,74 +28,67 @@ body a { color: #0070D1; text-decoration: none; } +body a:hover { + text-decoration: underline; + color: #167cac; +} body .form-group { - display: flex; - flex-direction: column; + display: block; + position: relative; +} +body .headerlinecontainer { + color: #000; } body .headerlinecontainer .headerline1 { - font-size: 20px; - line-height: 32px; - font-weight: 400; - margin: 24px 0; - text-align: center; -} -body input, -body select { - margin-top: 4px; + margin-bottom: 0.75rem; + margin-top: 0rem; + font-weight: 600; + font-size: 1.25rem; + line-height: 1.375rem; +} +body .headerlinecontainer .headerline5v2 { + display: block; + padding: 0.75rem 0; + color: #db0020; + font-style: italic; + font-size: 12px; } body input, body select { + height: 2.8125rem; + border: solid 1px #b3b4b5; border-radius: 4px; - border: 1px solid #8E9292; - padding: 16px; - font-size: 16px; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); + color: #525656; font-family: inherit; - letter-spacing: inherit; - color: #000; - background-color: #fff; + font-weight: normal; + font-style: normal; + font-stretch: normal; + font-size: 16px; + line-height: 1.56; + padding: 10px; + width: 100%; } body input:focus, body input:focus-visible, body select:focus, body select:focus-visible { - box-shadow: 0 0 0 2.5px #1574a1; - border: 1px solid transparent; + border: solid 2.5px #0070d1; outline: none; } -body input:disabled, body input.disabled, -body select:disabled, -body select.disabled { - background-color: #f5f5f5; - filter: grayscale(100%); -} -body input:disabled:hover, body input.disabled:hover, -body select:disabled:hover, -body select.disabled:hover { - box-shadow: 0 0 0 4px transparent; - border: 1px solid #8e9292; -} -body input:hover, -body select:hover { - border: 1px solid #8e9292; - box-shadow: 0 0 0 4px #9fcee6; -} body select { border-radius: 4px; - 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; + background: url(/icons/select.png) no-repeat 98% #ffffff; + background-size: 10px 17px; appearance: none; font-size: 16px; color: #000; } -body .creditCardSpecific div { - padding: 8px 0; -} -body .creditCardSpecific div .headerlinecontainer { - display: none; +body h3 { + font-size: 1rem; + font-weight: 600; + margin-top: 1.375rem; + margin-bottom: 0.6875rem; + color: #000; } body .creditCardSpecific div label { font-weight: 500; @@ -124,82 +119,59 @@ body #cardExpirationContainer { body .optional-label span { display: none; } -body .optional-label:after { - content: " (optional)"; - font-weight: 300; - font-style: normal; - font-size: 15px; +body .buttonContainer #sghopcancelbutton { + float: left; } -body .buttonContainer { - height: 48px; +body .buttonContainer #sghopsubmitbutton { + float: right; } -body .buttonContainer 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; - font-family: inherit; - letter-spacing: inherit; - height: 48px; +body .buttonContainer #sghopsubmitbutton.creditCardSpecific { + float: right; } -@media (hover: hover) { - body .buttonContainer button { - background: linear-gradient(270deg, #1574a1 0%, #003d58 100%); - cursor: pointer; +@media (max-width: 500px) { + body .buttonContainer #sghopsubmitbutton.creditCardSpecific { + float: left; + width: 100%; } } -body .buttonContainer button:focus { - box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c; +body .buttonContainer #selectPaymentTypeButton { + float: right; } -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%); +@media (max-width: 500px) { + body .buttonContainer #selectPaymentTypeButton { + float: left; + width: 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; +body .buttonContainer .btn-success { + width: 99%; + height: 45px; border: none; - border-radius: 8px; + border-radius: 22.5px; + font-size: 16px; + line-height: 0.94; + font-weight: 600; + color: #ffffff; + background-color: #0c7e47; + border-color: #0a673a; + font-family: Urbanist; 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 .btn-success:hover { + background-color: #084f2d; } -body .buttonContainer button.delay { - transition: background 0s 0s ease-in-out; +body .buttonContainer .btn-success:focus, body .buttonContainer .btn-success:active { + outline: none; + background-color: #0c7e47; + box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px #0c7e47; } body .has-error input, body .has-error select { - border: 1px solid #d4281c; -} -body .has-error input:focus, -body .has-error select:focus { - box-shadow: 0 0 0 2.5px #fcbfbb; -} -body .has-error input:hover, -body .has-error select:hover { - border: 1px solid #d4281c; - box-shadow: 0 0 0 4px #fcbfbb; + border-color: #db0020; } 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; + background: url(/icons/select-error.png) no-repeat 98% #ffffff; + background-size: 10px 17px; appearance: none; } body .has-error small { @@ -212,14 +184,17 @@ body .cc-error-container #alert-message { } #fmg-checkout-shared .form-group .list-group.radio .list-group-item { - border-radius: 10px; + border-radius: 5px; +} +#fmg-checkout-shared .form-group .list-group.radio .list-group-item.active { + box-shadow: 0 0 0 5px #b9d7e6; } #fmg-checkout-shared .form-group .list-group.radio .list-group-item label { padding: 12px 20px; } #fmg-checkout-shared #applepay-and-paypal-container { display: inline-flex; - width: 100%; + width: 80%; justify-content: space-between; } #fmg-checkout-shared #applepay-and-paypal-container #paypalParentDiv { @@ -227,38 +202,31 @@ body .cc-error-container #alert-message { } #fmg-checkout-shared #applepay-and-paypal-container .form-group { margin: 0; - width: 100%; + width: 48%; } -#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink { +#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection .list-group-item { + border-radius: 35px; +} +#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection .list-group-item#applepayParentLink { margin: 0; - padding: 10px 0; - background-color: #000000; + border: none; + box-shadow: none; } -#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label { +#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection .list-group-item#applepayParentLink label { padding: 0; } -#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label apple-pay-button { +#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection .list-group-item#applepayParentLink label apple-pay-button { + width: 100%; vertical-align: middle; -} -#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink.list-group-item { - box-shadow: none; - border-radius: 10px; - border: 1px solid #8E9292; -} -#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink:host { - --apple-pay-button-width: auto; + --apple-pay-button-height: 47px; + --apple-pay-button-border-radius: 35px; + --apple-pay-button-padding: 2px 0; } #fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink { margin: 0; - padding: 2px 0; } #fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink #paypalImage { - max-width: 50%; -} -#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink.list-group-item { - box-shadow: none; - border-radius: 10px; - border: 1px solid #8E9292; + max-width: 90px; } #fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group { width: 100%; @@ -273,15 +241,19 @@ body .cc-error-container #alert-message { width: 100%; } #fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group .list-group #paypalParentLink #paypalImage { - max-width: 25%; + max-width: 5.3125rem; } #fmg-checkout-shared #other-payments-container label { - display: inline-flex; + display: block; text-align: left; align-items: flex-start; justify-content: space-between; font-size: 16px; - font-weight: 500; + font-weight: 600; + line-height: 1.56; +} +#fmg-checkout-shared #other-payments-container label.control-label { + justify-content: start; } #fmg-checkout-shared #other-payments-container label span.paymentOptionText { margin: auto 0; @@ -294,35 +266,56 @@ body .cc-error-container #alert-message { #fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:last-of-type { width: 0; } +#fmg-checkout-shared #other-payments-container #creditCardParentDiv #creditCardParentLink { + margin-bottom: 0; +} +@media (max-width: 33.9em) { + #fmg-checkout-shared #other-payments-container #creditCardParentDiv #creditCardParentLink { + min-height: 3.5rem; + } +} +#fmg-checkout-shared #other-payments-container #creditCardParentDiv #creditCardParentLink label { + display: flex; +} +#fmg-checkout-shared #other-payments-container #creditCardParentDiv #creditCardParentLink label .paymentOptionText { + text-align: left; +} #fmg-checkout-shared #other-payments-container #creditCardParentDiv.active { - margin-bottom: 32px; + padding-bottom: 10px; border: 1px solid #0070D1; - border-radius: 10px; + border-radius: 5px; } #fmg-checkout-shared #other-payments-container #creditCardParentDiv.active > .paymentSelection #creditCardParentLink { - border-width: 0 0 2px 0; + min-height: unset; border-bottom-color: #0070D1; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } #fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages { + display: flex; + flex-direction: row; width: 50%; - text-align: right; + justify-content: flex-end; } -#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img { - width: 20%; +#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages img { + max-width: fit-content; + width: 25%; +} +#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages img:not(:last-of-type) { + margin-right: 1%; } #fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific { - padding: 0 16px; + padding: 0 2%; } #fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific > .form-group { width: 100%; + margin-bottom: 0.5rem; } #fmg-checkout-shared #other-payments-container .italicSmall { margin-top: 10px; } #fmg-checkout-shared #other-payments-container .disclaimerContainerv2 { - margin-bottom: 32px; + margin: 1rem 0; } @media only screen and (max-device-width: 767px) { #fmg-checkout-shared #applepay-and-paypal-container { @@ -332,3 +325,36 @@ body .cc-error-container #alert-message { width: 100%; } } + +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: Glyphicons Halflings; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; +} + +.form-control-feedback { + position: absolute; + top: 0; + right: 0; + z-index: 2; + display: block; + width: 38px; + height: 38px; + line-height: 38px; + text-align: center; + pointer-events: none; + top: 27px; +} + +.glyphicon-remove:before { + content: "\e014"; +} + +.glyphicon-ok:before { + content: "\e013"; +} diff --git a/public/icons/select-disabled.png b/public/icons/select-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..03ac8316652b7385bfb886649bae252967a8243b GIT binary patch literal 1326 zcmV+}1=0G6P)Px(=t)FDR9Fe^SX+o3MHH>uJ+qscl?W=q2NFRD`XTufjS^XPcV}jM!JvtLD)9k< zpkKc5S46**KtMDof*`0wn4Z_J>*6blfBGW|ei$Kw7(roYoSo?@&*`yuYpT0)dni>8k3kt}0QNP^yi_5jD`Sg`ti-xlk^j9XE}P8{qrRc_o97wAMMsib!8+ z=RVIX)yBy+mTSdvq>mgc zEVY_RcyV#@+FrlkR7zi&nh8E~$W7;Lc(xQ?T3Wh%t=DgAt@dw(C0pc>%a~-w2D<4O zV@xLlty)U!yEa0GmMD3dmR9;1+lMFaQ&-d+#=INz{R^bF7*DMO(RY(X9g%nD=gZIW zM?01rH_BM%i21e>uGQ7We(gF{z#=hS;uGQd8lSCV>`*EsRxC27J z+dkG;R#vWBZFjyz_a3nQqMS!PuYAVDM_P=BX#t|In*`br{S_0$T$(63^pQg@>t}s=lP=di{X!%}?(-D=s*YoDi5f5AJ z`%5<~396{uqFv6zSw)#JaoPDX5A5&z(TO|3(K1mlX?-o1~qv zr;5eL*2P0DXtLnZce8v^wtExQpw@Qt?8fi*z-|xh_Q3zK2mXt>TEexK1ZVN3*vBsj zza(6;?&JVq1)5uJx8J~W_hEhsMY~6^$L(VUqV`dU4iIQQ!oQs=>!M7E22v9%5V_G5 zpm?=bi>(?=&Nw!6g)KFLsEHMb`ozG7rdH4Te*I(&9}@_3AeS9RO-C0dxf(ccJFyFV zwN`5$v+=BT#xh3&|2#Fr1^sYc-TMMh_Z1d#O_W>0`NoQcZ(7AU$+T7hH*ymu5o_%~ zl+NGjc{AUKYhD^kyWC=QOkx;_gBI=%EIhRuauE~8jmtr;-*a> zIe3DvHgVd_$=oJBB1{Ljlh^^o_OuW`u)5l=;bdpZOhB6$edO3a=3-78j|r229l(p2 z#ZKE~>;P`X$<7Cyi6S3uV)R8=bY%|ait6SyQJ94JO64S`w+~G+ZFFU+-R_)0>x93d ztx7hJv0;vwV+e$=Q;JV*cItyemsc1!(E90Ee1=n>O@*0|tN-p=?{l>7mY6^iAoAUw ziTvT2nVCP6+!3~=Fo`^^TkG}Cp_}(dfk{`4>CY4S{Gr*|*$YX26H6Uqlf*=>|wp=79izwqV36oeZmw#{_<-u&TZWWx~DvulsPpxJaW(FP$W9~kNId^@bK${qS ksVWJMOk-@v?ZgTFKQebCaIJlJh5!Hn07*qoM6N<$f-y3L(*OVf literal 0 HcmV?d00001 diff --git a/public/icons/select-error.png b/public/icons/select-error.png new file mode 100644 index 0000000000000000000000000000000000000000..9e971ee9de78789dd8302b19418f8fbca8d7ba54 GIT binary patch literal 1413 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 .paymentSelection { #creditCardParentLink { - border-width: 0 0 2px 0; + min-height: unset; border-bottom-color: #0070D1; border-bottom-right-radius: 0; border-bottom-left-radius: 0; @@ -384,20 +378,28 @@ body { .paymentSelection { #creditCardImages { + display: flex; + flex-direction: row; width: 50%; - text-align: right; + justify-content: flex-end; - > img { - width: 20%; + img { + max-width: fit-content; + width: 25%; + + &:not(:last-of-type) { + margin-right: 1%; + } } } } .creditCardSpecific { - padding: 0 16px; + padding: 0 2%; > .form-group { width: 100%; + margin-bottom: .5rem; } } } @@ -407,7 +409,7 @@ body { } .disclaimerContainerv2 { - margin-bottom: 32px; + margin: 1rem 0; } } @@ -422,4 +424,35 @@ body { } } } +} + +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: Glyphicons Halflings; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; +} + +.form-control-feedback { + position: absolute; + top: 0; + right: 0; + z-index: 2; + display: block; + width: 38px; + height: 38px; + line-height: 38px; + text-align: center; + pointer-events: none; + top: 27px; +} +.glyphicon-remove:before { + content: "\e014"; +} +.glyphicon-ok:before { + content: "\e013"; } \ No newline at end of file diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue index 4b1140d5..3717a504 100644 --- a/src/layouts/payment-page/payment-page.vue +++ b/src/layouts/payment-page/payment-page.vue @@ -4,26 +4,25 @@
-
-
- - - -
+
+
+
+ +
- -
-
- -
+
+
+ +
- +
+
+ + :value="zipCode" /> { if (iframe.contentWindow) { - iframe.contentWindow.postMessage('hybrid', '*'); + if (supportsApplePay()) { + iframe.contentWindow.postMessage("hybrid-with-applepay", "*"); + } else { + iframe.contentWindow.postMessage('hybrid', '*'); + } if (this.isAfterPay) { iframe.contentWindow.postMessage('afterpay', '*'); @@ -783,12 +797,19 @@ export default { };