| @@ -31,9 +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 | +} | |
| 35 | 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 | + | |
| 36 | 55 | /* Vipps Checkout Widgets */ |
| 37 | 56 | .vipps_checkout_widget_wrapper { |
| 38 | 57 | width: 100%; |
| 39 | 58 | display:flex; |
| @@ -170,25 +189,8 @@ | ||
| 170 | 189 | h2.confirmVippsExpressCheckoutHeader { |
| 171 | 190 | margin-top: 0; |
| 172 | 191 | } |
| 173 | 192 | |
| 174 | - | |
| 175 | -a.button.vipps-express-checkout img { | |
| 176 | - max-width: 100%; | |
| 177 | - width: 13.5rem; | |
| 178 | - max-height: 100%; | |
| 179 | - filter: drop-shadow( 0px 1px 2px #d7d7d7); | |
| 180 | -} | |
| 181 | -a.button.vipps-express-checkout.short img { | |
| 182 | - width:initial; | |
| 183 | -} | |
| 184 | -a.button.vipps-express-checkout:hover img { | |
| 185 | - opacity: 0.9; | |
| 186 | -} | |
| 187 | -a.button.vipps-express-checkout.disabled img { | |
| 188 | - opacity: 0.7; | |
| 189 | -} | |
| 190 | - | |
| 191 | 193 | li.wc_payment_method.payment_method_vipps img { |
| 192 | 194 | max-width: 145px; |
| 193 | 195 | } |
| 194 | 196 | |
| @@ -211,34 +213,8 @@ | ||
| 211 | 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 { |
| 212 | 214 | opacity: 0.9; |
| 213 | 215 | } |
| 214 | 216 | |
| 215 | -ul.products li.product a.button.vipps-buy-now img { | |
| 216 | - margin:0px; | |
| 217 | - display:inline; | |
| 218 | -} | |
| 219 | - | |
| 220 | -a.button.vipps-express-checkout { | |
| 221 | - background-color: #fff; | |
| 222 | - color: transparent; | |
| 223 | - vertical-align: bottom; | |
| 224 | - padding: 0; | |
| 225 | - margin-left:.5em; | |
| 226 | -} | |
| 227 | -a.button.vipps-express-checkout:active, a.button.vipps-buy-now:active { | |
| 228 | - border: 0; | |
| 229 | -} | |
| 230 | -a.button.vipps-express-checkout:hover, a.button.vipps-buy-now:hover { | |
| 231 | - border: 0; | |
| 232 | -} | |
| 233 | - | |
| 234 | -/* New-style button for Vipps and Mobile Pay is 100% svg */ | |
| 235 | -a.single-product.button.vipps-buy-now { | |
| 236 | - padding-left:0; | |
| 237 | - padding-right:0; | |
| 238 | - padding-bottom:0; | |
| 239 | -} | |
| 240 | - | |
| 241 | 217 | body .widget_shopping_cart a.button.vipps-express-checkout, body .widget_shopping_cart a.button.vipps-express-checkout:hover { |
| 242 | 218 | color:transparent; |
| 243 | 219 | border:0; |
| 244 | 220 | background-color: transparent; |
| @@ -319,8 +295,19 @@ | ||
| 319 | 295 | height: 2ex; |
| 320 | 296 | display:inline; |
| 321 | 297 | } |
| 322 | 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 | + | |
| 323 | 310 | .vippsorange { |
| 324 | 311 | background-color: #fe5b24; |
| 325 | 312 | } |
| 326 | 313 | .vippsorange-light { |
| @@ -341,22 +328,20 @@ | ||
| 341 | 328 | |
| 342 | 329 | /* New express section for woo legacy (shortcode) checkout. LP 2026-03-23 */ |
| 343 | 330 | .legacy-checkout.vipps-express-checkout { |
| 344 | 331 | max-width: 20rem; |
| 345 | - position: relative; | |
| 332 | + box-sizing: border-box; | |
| 346 | 333 | border: 1px solid lightgrey; |
| 347 | 334 | border-radius: 4px; |
| 348 | - padding: 1.4rem 1.8rem 1rem; | |
| 335 | + min-inline-size: 0; | |
| 336 | + padding: 1.1rem 1.7rem; | |
| 349 | 337 | margin: 1rem auto; |
| 350 | 338 | text-align: center; |
| 351 | 339 | } |
| 352 | 340 | .legacy-checkout.vipps-express-checkout .express-header { |
| 353 | - position: absolute; | |
| 354 | - top: 0; | |
| 355 | - left: 50%; | |
| 356 | - transform: translate(-50%, -50%); | |
| 341 | + display: table; | |
| 342 | + margin: 0 auto; | |
| 357 | 343 | padding: 0 0.75rem; |
| 358 | - background: #fff; | |
| 359 | 344 | line-height: 1; |
| 360 | 345 | font-size: var(--wp--preset--font-size--small); |
| 361 | 346 | } |
| 362 | 347 | |
