font selector

- done
This commit is contained in:
Farah
2022-10-07 11:28:58 +01:00
parent 34832a6acb
commit f04ffab8d7
4 changed files with 28 additions and 6 deletions

View File

@@ -692,6 +692,7 @@ a:hover {
--button-edges: 10px;
--body-edges: 10px;
--border-off: 1px solid #e6e9eb;
--font-options: "Segoe UI", sans-serif, Helvetica, Arial;
}
@@ -714,6 +715,7 @@ a:hover {
.adyen-checkout__payment-method {
width: var(--dropin-width) !important;
font-size: var(--dropin-font) !important;
font-family: var(--font-options) !important;
}

View File

@@ -568,6 +568,21 @@ function copyToClipboard(e) {
cb.writeText(e.target.innerText)
}
// document.getElementById('showPayMethod').parentNode.addEventListener('click', function (event);
//drop down selector for the different font styles
//document.getElementById("font_select").parentNode.addEventListener('change', function() {
function changeFont(font) {
r.style.setProperty('--font-options', null);
let fontValue = document.getElementById("font_select").value
r.style.setProperty('--font-options', fontValue);
console.log(fontValue)
}
initCheckout();

View File

@@ -11,9 +11,9 @@
<style>
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Engagement&family=Lato:ital@1&family=Roboto+Condensed:wght@300&display=swap');
</style>
<title>Checkout Create</title>
</head>
<body>
@@ -64,11 +64,16 @@
</div>
</div>
<br>
<h2 id="letstest">this thing</h2>
<div class="font-selector">
<select onchange="changeSelect(this)" id="font_select" class="font-selector__select" aria-label="font" autocomplete="off">
<option value="Roboto_Condensed">Roboto Condensed</option>
<option value="Gemunu_Libre">Gemunu Libre</option>
<option value="Lato">Lato</option>
<select onchange="changeFont(this)" id="font_select" class="font-selector__select" aria-label="font" autocomplete="off">
<option value="Segoe UI, sans-serif, Helvetica, Arial" style="font-family:'Segoe UI', sans-serif, Helvetica, Arial">Segoe UI</option>
<option value="Roboto Condensed, sans-serif" style="font-family:'Roboto Condensed', sans-serif">Roboto Condensed</option>
<option value="Engagement, cursive" style="font-family:'Engagement', cursive">Engagement</option>
<option value="Lato, sans-serif" style="font-family:'Lato', sans-serif">Lato</option>
<option value="Times New Roman, Times, serif" style="font-family:'Times New Roman', Times, serif">Times New Roman</option>
<option value="Arial, Helvetica, sans-serif" style="font-family:'Arial', Helvetica, sans-serif">Arial</option>
<option value="Lucida Console, 'Courier New', monospace" style="font-family:'Lucida Console', 'Courier New', monospace">Lucida</option>
</select>
<div class="dropdown-icon" aria-hidden="true">
<img src="{{ url_for('static', filename='img/dropdown.svg') }}" alt="Dropdown caret">