jlengrand/checkoutCreate
1
0
Fork 0
mirror of https://github.com/jlengrand/checkoutCreate.git synced 2026-03-10 08:11:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Function + fixes

Browse Source 
- Added text color functionality
- Fixed the brand images from being off centered
This commit is contained in:
Farah
2022-10-08 23:27:47 +01:00
parent fc303419a0
commit 4eda16f74d
3 changed files with 50 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/static/css/application.css
View File

@@ -472,7 +472,7 @@ a:hover {
outline:none;
padding:0 0 0 12px;
position:relative;
width:100%
width:100%;
}
@media (min-width:768px){
@@ -494,7 +494,7 @@ a:hover {
margin:0 -12px 0 -42px;
outline:none;
padding-left:42px;
width:180px
width:180px;
}
.text-alignment:focus{
@@ -994,15 +994,36 @@ a:hover {
.adyen-checkout__payment-method__name {
font-weight: var(--text-bold) !important;
font-style: var(--text-italic) !important;
color: var(--text-color) !important;
}
.adyen-checkout__label__text {
font-weight: var(--text-bold) !important;
font-style: var(--text-italic) !important;
color: var(--text-color) !important;
}
.adyen-checkout__checkbox__label {
font-weight: var(--text-bold) !important;
font-style: var(--text-italic) !important;
color: var(--text-color) !important;
}
.adyen-checkout__button__text {
font-weight: var(--text-bold) !important;
font-style: var(--text-italic) !important;
color: var(--text-color) !important;
}
.adyen-checkout__card__brands img {
border-radius: 3px;
height: 16px;
width: 24px;
left: 0;
position: absolute;
top: 0;
}
}

10
app/static/js/adyen-implementation.js
View File

@@ -545,6 +545,12 @@ function dropinTabColor() {
r.style.setProperty('--dropin-tab-color', dropinTabColor);
}
function textColor() {
let textColor = document.getElementById("textColorPick").value;
r.style.setProperty('--text-color', textColor);
}
function buttonEdges () {
let edgeValue = document.getElementById('buttonEdges').value
let pixelVal = edgeValue + 'px'
@@ -578,6 +584,10 @@ function resetDynamicCSS () {
r.style.setProperty('--dropin-color', null);
r.style.setProperty('--dropin-tab-color', null);
r.style.setProperty('--dropin-font', null)
r.style.setProperty('--text-color', null);
r.style.setProperty('--text-bold', null);
r.style.setProperty('--text-italic', null);
r.style.setProperty('--text-align', null);
}
function dropinWidth () {

18
app/templates/component.html
View File

@@ -365,7 +365,7 @@
<!-- toggle -->
<div class="col-2 text-right">
<div class="text-alignment">
<select onchange="positionText(this)" id="positionText" class="textalign-selector__select" autocomplete="off">
<select onchange="positionText(this)" id="positionText" class="textalign-selector__select" autocomplete="off">
<option selected value="left" style="text-align: left">Left</option>
<option value="center" style="text-align: center">Center</option>
<option value="right" style="text-align: right">Right</option>
@@ -376,6 +376,20 @@
</div>
</div>
</div>
<div class="row container">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
<div class="col-4">
<p class="textFonts text-left ml-3">Colour</p>
</div>
<!-- toggle -->
<div class="col-2 text-right">
<div>
<input type="color" name="" id="textColorPick" onchange="textColor()">
</div>
</div>
</div>
<div class="row container">
<!-- text -->
<div class="col-6"></div>
@@ -419,7 +433,7 @@
<!-- text -->
<div class="col-6">
<p class="textFonts">
Select the colour of your checkout
Select the colour & style of your checkout
</p>
</div>
<!-- title -->