hello, ready to push. Card buttons need the functions attached.
This commit is contained in:
b-leech
2022-10-10 19:46:31 +02:00
parent 5ea194cd96
commit ab2ed94bf6
3 changed files with 779 additions and 730 deletions

View File

@@ -564,6 +564,8 @@ a:hover {
padding: 0 0 0 12px;
position: relative;
width: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) {
@@ -709,8 +711,10 @@ a:hover {
height: 0%;
background-color: rgb(6, 6, 46);
color: var(--main-grey);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.test-cards-display {
@@ -744,6 +748,7 @@ a:hover {
-moz-perspective: 600px;
perspective: 600px;
background: rgb(6, 6, 46);
margin: 1rem auto;
}
.card__part {
@@ -981,7 +986,7 @@ a:hover {
}
.form-group {
width: 250px;
width: 9rem;
/* Full-width */
height: 35px;
/* Specified height */
@@ -1023,18 +1028,6 @@ a:hover {
/* Radio button in payment method header */
}
.checkout .col {
background: var(--bg-color) !important;
}
.panel-footer {
margin-left: 40px;
}
.panel-body {
background: white;
}
.adyen-checkout__payment-method__name {
font-weight: var(--text-bold) !important;
font-style: var(--text-italic) !important;
@@ -1126,7 +1119,7 @@ a:hover {
.form-control-file,
.form-control-range {
width: 50%;
/* width: 50%; */
}
/*
:not(pre)>code[class*=language-], pre[class*=language-] {
@@ -1155,3 +1148,39 @@ pre {
.key {
color: #a5afbd;
}
.form-control-range::before {
background-color: red;
color: red;
background: red;
}
.panel-collapse .collapse .show {
width: 5000px !important;
}
.copyBtnsStyle {
font-family: var(--main-font);
background: var(--main-text);
border-radius: 10px;
color: var(--main-grey);
font-size: 0.9rem;
padding: 0;
}
.copyText {
margin: auto;
}
@media (max-width: 1500px) {
/* screen width (or the .grid) needs to be at least 500px wide, in order to display the .sidebar, because min-width of 200px is exactly 40% of 500px, so display it when 500px and more, but hide it when less */
.config-UI {
display: none;
}
.dropIn-UI {
width: 100%;
display: flex;
margin: 0%;
padding: 0;
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -144,7 +144,7 @@
</div>
<!-- Panel footer start -->
<div class="panel-footer">
<!-- <div id="card" class="card">
<div id="card" class="card p-0 text-center">
<div class="card__front card__part">
<img
class="card__front-square card__square"
@@ -178,37 +178,28 @@
/>
</div>
</div>
</div> -->
</div>
<!-- Under card footer -->
<div class="container">
<div class="row">
<div class="col">
<!-- load card -->
</div>
</div>
<div class="row">
<!-- copy pan -->
<div class="col"></div>
<p
type="button"
id="btn"
class="btn"
toggle="tooltip"
data-clipboard-action="copy"
data-placement="top"
data-clipboard-target="p#cardNumber"
onclick="resetCard()"
title="Copy to clipboard"
<div>
<div class="row m-0">
<div
class="col copyBtnsStyle panCopy mr-1"
onclick="copyToClipboard"
>
copy
</p>
<!-- copy expiry -->
<div class="col">
<p>two</p>
<p class="copyText">
PAN <i class="bi bi-clipboard"></i>
</p>
</div>
<!-- copy cvc -->
<div class="col">
<p>three</p>
<div class="col copyBtnsStyle expiryCopy ml-1 mr-1">
<p class="copyText">
EXPIRY <i class="bi bi-clipboard"></i>
</p>
</div>
<div class="col copyBtnsStyle cvcCopy ml-1">
<p class="copyText">
CVC <i class="bi bi-clipboard"></i>
</p>
</div>
</div>
</div>
@@ -565,7 +556,7 @@
<div class="col flex-fill section-title">
<p class="mb-1 titleFonts">Fonts</p>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6">
<p class="textFonts">
@@ -650,7 +641,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -674,7 +665,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -713,7 +704,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -732,7 +723,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -752,7 +743,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -781,7 +772,7 @@
<div class="col flex-fill section-title">
<p class="mb-1 titleFonts">Colour & Style</p>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6">
<p class="textFonts">
@@ -806,7 +797,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -827,7 +818,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -848,7 +839,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -865,7 +856,7 @@
/>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -889,7 +880,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -913,7 +904,7 @@
</div>
</div>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -943,7 +934,7 @@
<div class="col flex-fill section-title">
<p class="mb-1 titleFonts">Dimensions</p>
</div>
<div class="row container mb-2">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6">
<p class="textFonts">
@@ -970,7 +961,7 @@
</div>
</div>
</div>
<div class="row container">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->
@@ -992,7 +983,7 @@
</div>
</div>
</div>
<div class="row container">
<div class="row container mb-2 p-0">
<!-- text -->
<div class="col-6"></div>
<!-- title -->