| @@ -31,8 +31,28 @@ | ||
| 31 | 31 | vipps-mobilepay-badge { |
| 32 | 32 | width: 90vw; |
| 33 | 33 | } |
| 34 | 34 | |
| 35 | +/* Avoid having the new web component button get outlined IOK 2026-08-07 */ | |
| 36 | +vipps-mobilepay-button:focus, | |
| 37 | +vipps-mobilepay-button:focus-visible { | |
| 38 | + outline: none; | |
| 39 | +} | |
| 40 | + | |
| 41 | +/* Make the express button in checkout match other buttons; aiming for 48px IOK 2026-09-24 | |
| 42 | +* (https://developer.woocommerce.com/docs/features/payments/ux-guidelines/payment-button-size/?utm_source=chatgpt.com#layout-and-spacing) */ | |
| 43 | +.wc-block-components-express-payment--checkout #express-payment-method-vippsexpress div.vipps-express-container { | |
| 44 | + scale: calc(48 / 44); | |
| 45 | + transform-origin: top left; | |
| 46 | + width: calc(100%*44/48); | |
| 47 | +} | |
| 48 | +/* And in the cart. */ | |
| 49 | +.wc-block-components-express-payment--cart #express-payment-method-vippsexpress div.vipps-express-container { | |
| 50 | + scale: calc(48 / 44); | |
| 51 | + transform-origin: top left; | |
| 52 | + width: calc(100%*44/48); | |
| 53 | +} | |
| 54 | + | |
| 35 | 55 | /* Vipps Checkout Widgets */ |
| 36 | 56 | .vipps_checkout_widget_wrapper { |
| 37 | 57 | width: 100%; |
| 38 | 58 | display:flex; |
| @@ -169,27 +189,19 @@ | ||
| 169 | 189 | h2.confirmVippsExpressCheckoutHeader { |
| 170 | 190 | margin-top: 0; |
| 171 | 191 | } |
| 172 | 192 | |
| 173 | - | |
| 174 | -a.button.vipps-express-checkout img { | |
| 175 | - max-width: 100%; | |
| 176 | - width: 13.5rem; | |
| 177 | - max-height: 100%; | |
| 178 | - filter: drop-shadow( 0px 1px 2px #d7d7d7); | |
| 193 | +li.wc_payment_method.payment_method_vipps img { | |
| 194 | + max-width: 145px; | |
| 179 | 195 | } |
| 180 | -a.button.vipps-express-checkout.short img { | |
| 181 | - width:initial; | |
| 182 | -} | |
| 183 | -a.button.vipps-express-checkout:hover img { | |
| 184 | - opacity: 0.9; | |
| 185 | -} | |
| 186 | -a.button.vipps-express-checkout.disabled img { | |
| 187 | - opacity: 0.7; | |
| 188 | -} | |
| 189 | 196 | |
| 190 | -li.wc_payment_method.payment_method_vipps img { | |
| 191 | - max-width: 145px; | |
| 197 | +.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_vipps img { | |
| 198 | + margin-top:.5rem; | |
| 199 | + float: right; | |
| 200 | +} | |
| 201 | +.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.payment_method_vipps_card img { | |
| 202 | + height: 3.5rem; | |
| 203 | + float:right; | |
| 192 | 204 | } |
| 193 | 205 | |
| 194 | 206 | a.button.vipps-buy-now:focus { |
| 195 | 207 | outline: none; |
| @@ -201,34 +213,8 @@ | ||
| 201 | 213 | .wc-block-grid__products .wc-block-grid__product .wp-block-button__link.vipps-buy-now:hover, .woocommerce ul.products li.product .button.vipps-buy-now:hover, a.button.vipps-buy-now:hover { |
| 202 | 214 | opacity: 0.9; |
| 203 | 215 | } |
| 204 | 216 | |
| 205 | -ul.products li.product a.button.vipps-buy-now img { | |
| 206 | - margin:0px; | |
| 207 | - display:inline; | |
| 208 | -} | |
| 209 | - | |
| 210 | -a.button.vipps-express-checkout { | |
| 211 | - background-color: #fff; | |
| 212 | - color: transparent; | |
| 213 | - vertical-align: bottom; | |
| 214 | - padding: 0; | |
| 215 | - margin-left:.5em; | |
| 216 | -} | |
| 217 | -a.button.vipps-express-checkout:active, a.button.vipps-buy-now:active { | |
| 218 | - border: 0; | |
| 219 | -} | |
| 220 | -a.button.vipps-express-checkout:hover, a.button.vipps-buy-now:hover { | |
| 221 | - border: 0; | |
| 222 | -} | |
| 223 | - | |
| 224 | -/* New-style button for Vipps and Mobile Pay is 100% svg */ | |
| 225 | -a.single-product.button.vipps-buy-now { | |
| 226 | - padding-left:0; | |
| 227 | - padding-right:0; | |
| 228 | - padding-bottom:0; | |
| 229 | -} | |
| 230 | - | |
| 231 | 217 | body .widget_shopping_cart a.button.vipps-express-checkout, body .widget_shopping_cart a.button.vipps-express-checkout:hover { |
| 232 | 218 | color:transparent; |
| 233 | 219 | border:0; |
| 234 | 220 | background-color: transparent; |
| @@ -309,8 +295,19 @@ | ||
| 309 | 295 | height: 2ex; |
| 310 | 296 | display:inline; |
| 311 | 297 | } |
| 312 | 298 | |
| 299 | +.vipps-buy-now { | |
| 300 | + padding-left: 0; | |
| 301 | + padding-right: 0; | |
| 302 | +} | |
| 303 | +.vipps_buy_now_wrapper.noloop { | |
| 304 | + margin-top: .5rem; | |
| 305 | +} | |
| 306 | +.wp-block-woo-vipps-buy-now-cart.wc-block-button-vipps { | |
| 307 | + margin-bottom: .5rem; | |
| 308 | +} | |
| 309 | + | |
| 313 | 310 | .vippsorange { |
| 314 | 311 | background-color: #fe5b24; |
| 315 | 312 | } |
| 316 | 313 | .vippsorange-light { |
| @@ -331,22 +328,20 @@ | ||
| 331 | 328 | |
| 332 | 329 | /* New express section for woo legacy (shortcode) checkout. LP 2026-03-23 */ |
| 333 | 330 | .legacy-checkout.vipps-express-checkout { |
| 334 | 331 | max-width: 20rem; |
| 335 | - position: relative; | |
| 332 | + box-sizing: border-box; | |
| 336 | 333 | border: 1px solid lightgrey; |
| 337 | 334 | border-radius: 4px; |
| 338 | - padding: 1.4rem 1.8rem 1rem; | |
| 335 | + min-inline-size: 0; | |
| 336 | + padding: 1.1rem 1.7rem; | |
| 339 | 337 | margin: 1rem auto; |
| 340 | 338 | text-align: center; |
| 341 | 339 | } |
| 342 | 340 | .legacy-checkout.vipps-express-checkout .express-header { |
| 343 | - position: absolute; | |
| 344 | - top: 0; | |
| 345 | - left: 50%; | |
| 346 | - transform: translate(-50%, -50%); | |
| 341 | + display: table; | |
| 342 | + margin: 0 auto; | |
| 347 | 343 | padding: 0 0.75rem; |
| 348 | - background: #fff; | |
| 349 | 344 | line-height: 1; |
| 350 | 345 | font-size: var(--wp--preset--font-size--small); |
| 351 | 346 | } |
| 352 | 347 | |
