KevinMidboe/planetposen
1
0
Fork 0
mirror of https://github.com/KevinMidboe/planetposen.git synced 2025-10-29 17:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

ApplePay checkout button (only frontend).

Browse Source
This commit is contained in:
Kevin
2020-07-19 23:38:52 +02:00
parent 9898c163ee
commit 6f889cdfd4
2 changed files with 105 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/components/ui/applePay.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<div>
<div class="apple-pay-button-with-text apple-pay-button-white-with-text">
<span class="text">Buy with</span>
<span class="logo"></span>
</div>
</div>
</template>
<script>
</script>
<style lang="scss" scoped>
@supports (-webkit-appearance: -apple-pay-button) {
.apple-pay-button-with-text {
display: inline-block;
-webkit-appearance: -apple-pay-button;
-apple-pay-button-type: buy;
cursor: pointer;
}
.apple-pay-button-with-text > * {
display: none;
}
.apple-pay-button-black-with-text {
-apple-pay-button-style: black;
}
.apple-pay-button-white-with-text {
-apple-pay-button-style: white;
}
.apple-pay-button-white-with-line-with-text {
-apple-pay-button-style: white-outline;
}
}
@supports not (-webkit-appearance: -apple-pay-button) {
.apple-pay-button-with-text {
cursor: pointer;
--apple-pay-scale: 1; /* (height / 32) */
display: inline-flex;
justify-content: center;
font-size: 12px;
border-radius: 5px;
padding: 0px;
box-sizing: border-box;
min-width: 200px;
min-height: 32px;
max-height: 64px;
}
.apple-pay-button-black-with-text {
background-color: black;
color: white;
}
.apple-pay-button-white-with-text {
background-color: white;
color: black;
}
.apple-pay-button-white-with-line-with-text {
background-color: white;
color: black;
border: .5px solid black;
}
.apple-pay-button-with-text.apple-pay-button-black-with-text > .logo {
background-image: -webkit-named-image(apple-pay-logo-white);
background-color: black;
}
.apple-pay-button-with-text.apple-pay-button-white-with-text > .logo {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
}
.apple-pay-button-with-text.apple-pay-button-white-with-line-with-text > .logo {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
}
.apple-pay-button-with-text > .text {
font-family: -apple-system;
font-size: calc(1em * var(--apple-pay-scale));
font-weight: 300;
align-self: center;
margin-right: calc(2px * var(--apple-pay-scale));
}
.apple-pay-button-with-text > .logo {
width: calc(35px * var(--scale));
height: 100%;
background-size: 100% 60%;
background-repeat: no-repeat;
background-position: 0 50%;
margin-left: calc(2px * var(--apple-pay-scale));
border: none;
}
}
</style>