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 00000000..03ac8316
Binary files /dev/null and b/public/icons/select-disabled.png differ
diff --git a/public/icons/select-error.png b/public/icons/select-error.png
new file mode 100644
index 00000000..9e971ee9
Binary files /dev/null and b/public/icons/select-error.png differ
diff --git a/public/icons/select-success.png b/public/icons/select-success.png
new file mode 100644
index 00000000..bdeb92f5
Binary files /dev/null and b/public/icons/select-success.png differ
diff --git a/public/icons/select.png b/public/icons/select.png
new file mode 100644
index 00000000..0845f753
Binary files /dev/null and b/public/icons/select.png differ
diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss
index b238bada..f32912e8 100644
--- a/public/scss/hop-styling.scss
+++ b/public/scss/hop-styling.scss
@@ -7,18 +7,20 @@ body {
font-family: Urbanist, Roboto, Arial, sans-serif;
font-weight: 400;
letter-spacing: .03em;
- color: #000;
+ color: #4d4e53;
margin: 0;
background-color: white;
- padding: 8px;
+ margin-bottom: 1rem;
+ font-size: 1rem;
.validation-info {
- display: none;
+ color: #db0020
}
.italicSmall {
- font-style: normal;
- font-size: 14px;
+ font-weight: normal;
+ font-style: italic;
+ font-size: 12px;
}
span {
@@ -28,79 +30,76 @@ body {
a {
color: #0070D1;
text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ color: #167cac;
+ }
}
.form-group {
- display: flex;
- flex-direction: column;
+ display: block;
+ position: relative;
}
.headerlinecontainer {
+ color: #000;
.headerline1 {
- font-size: 20px;
- line-height: 32px;
- font-weight: 400;
- margin: 24px 0;
- text-align: center;
+ margin-bottom: .75rem;
+ margin-top: 0rem;
+ font-weight: 600;
+ font-size: 1.25rem;
+ line-height: 1.375rem;
+ }
+ .headerline5v2 {
+ display: block;
+ padding: .75rem 0;
+ color: #db0020;
+ font-style: italic;
+ font-size: 12px;
}
}
input,
select {
- margin-top: 4px;
- }
-
- input,
- 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%;
&:focus,
&:focus-visible {
- box-shadow: 0 0 0 2.5px #1574a1;
- border: 1px solid transparent;
+ border: solid 2.5px #0070d1;
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: 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;
}
+ h3 {
+ font-size: 1rem;
+ font-weight: 600;
+ margin-top: 1.375rem;
+ margin-bottom: .6875rem;
+ color: #000;
+ }
+
.creditCardSpecific {
div {
- padding: 8px 0;
- .headerlinecontainer {
- display: none;
- }
label {
font-weight: 500;
}
@@ -133,63 +132,57 @@ body {
span {
display: none;
}
- &:after {
- content: " (optional)";
- font-weight: 300;
- font-style: normal;
- font-size: 15px;
- }
}
.buttonContainer {
- height: 48px;
- button {
- position: relative;
- background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
+
+ #sghopcancelbutton {
+ float: left;
+ }
+
+ #sghopsubmitbutton {
+ float: right;
+ }
+
+ #sghopsubmitbutton.creditCardSpecific {
+ float: right;
+
+ @media(max-width: 500px) {
+ float: left;
+ width: 100%;
+ }
+ }
+
+ #selectPaymentTypeButton {
+ float: right;
+
+ @media(max-width: 500px) {
+ float: left;
+ width: 100%;
+ }
+ }
+ .btn-success {
+ width: 99%;
+ height: 45px;
border: none;
- border-radius: 8px;
- color: #fff;
- justify-content: center;
- font-weight: 500;
+ border-radius: 22.5px;
font-size: 16px;
- font-family: inherit;
- letter-spacing: inherit;
- height: 48px;
- @media (hover: hover) {
- background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
- cursor: pointer;
+ line-height: 0.94;
+ font-weight: 600;
+ color: #ffffff;
+ background-color: #0c7e47;
+ border-color: #0a673a;
+ font-family: Urbanist;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #084f2d;
}
- &:focus {
- box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
- }
- &:focus, // Mouse, touch, stylus focus
- &:focus-visible {
- // Keyboard focus for accessibility
+ &:focus,
+ &:active {
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;
+ background-color: #0c7e47;
+ box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px #0c7e47;
}
}
}
@@ -198,21 +191,11 @@ body {
.has-error {
input,
select {
- border: 1px solid #d4281c;
- &:focus {
- box-shadow: 0 0 0 2.5px #fcbfbb;
- }
- &:hover {
- border: 1px solid #d4281c;
- box-shadow: 0 0 0 4px #fcbfbb;
- }
+ border-color: #db0020;
}
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;
}
small {
@@ -234,7 +217,11 @@ body {
.list-group {
&.radio {
.list-group-item {
- border-radius: 10px;
+ border-radius: 5px;
+
+ &.active {
+ box-shadow: 0 0 0 5px #b9d7e6;
+ }
label {
padding: 12px 20px;
@@ -246,8 +233,7 @@ body {
#applepay-and-paypal-container {
display: inline-flex;
- width: 100%;
-
+ width: 80%;
justify-content: space-between;
#paypalParentDiv {
@@ -256,49 +242,38 @@ body {
.form-group {
margin: 0;
- width: 100%;
+ width: 48%;
.list-group {
&.paymentSelection {
+ .list-group-item {
+ border-radius: 35px;
- #applepayParentLink {
-
- margin: 0;
- padding: 10px 0;
- background-color: #000000;
-
- label {
- padding: 0;
-
- apple-pay-button {
- vertical-align: middle;
- }
- }
-
- &.list-group-item {
+ &#applepayParentLink {
+ margin: 0;
+ border: none;
box-shadow: none;
- border-radius: 10px;
- border: 1px solid #8E9292;
- }
- &:host {
- --apple-pay-button-width: auto;
+ label {
+ padding: 0;
+
+ apple-pay-button {
+ width: 100%;
+ vertical-align: middle;
+ --apple-pay-button-height: 47px;
+ --apple-pay-button-border-radius: 35px;
+ --apple-pay-button-padding: 2px 0;
+ }
+ }
}
}
}
#paypalParentLink {
margin: 0;
- padding: 2px 0;
#paypalImage {
- max-width: 50%;
- }
-
- &.list-group-item {
- box-shadow: none;
- border-radius: 10px;
- border: 1px solid #8E9292;
+ max-width: 90px;
}
}
}
@@ -324,7 +299,7 @@ body {
#paypalParentLink {
#paypalImage {
- max-width: 25%;
+ max-width: 5.3125rem;
}
}
}
@@ -334,14 +309,19 @@ body {
#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;
+
+ &.control-label {
+ justify-content: start;
+ }
span {
&.paymentOptionText {
@@ -367,14 +347,28 @@ body {
}
#creditCardParentDiv {
+ #creditCardParentLink {
+ margin-bottom: 0;
+
+ @media (max-width: 33.9em) {
+ min-height: 3.5rem;
+ }
+
+ label {
+ display: flex;
+ .paymentOptionText {
+ text-align: left;
+ }
+ }
+ }
&.active {
- margin-bottom: 32px;
+ padding-bottom: 10px;
border: 1px solid #0070D1;
- border-radius: 10px;
+ border-radius: 5px;
> .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 @@
-