chore: Move CSS to main file

two-inc · Oct 15, 2024 · 1a7fd60 · 1a7fd60
1 parent 28979fd
commit 1a7fd60
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 114 deletions.
diff --git a/view/frontend/web/css/style.css b/view/frontend/web/css/style.css
@@ -17,13 +17,126 @@
     transform: translateY(-50%);
     width: 32px;
     height: 32px;
-    background-image: url('../images/logo.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     display: inline-block;
 }
 
+.two-payment-option-logo {
+    background-image: url('../images/logo.svg');
+}
+.payment-option-title-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    /* gap: 8px; */
+    width: 100%;
+    min-height: max-content;
+}
+
+.payment-option-title-container span {
+    color: inherit;
+}
+
+.tooltip-svg {
+    cursor: pointer;
+    width: 20px;
+    height: auto;
+    margin-left: 5px;
+    align-self: center;
+    /* Center the SVG vertically with the text */
+}
+
+.title-with-tooltip {
+    display: inline-flex;
+    align-items: center;
+    /* Keeps the text and the tooltip icon inline */
+    gap: 5px;
+    font-weight: 600;
+    /* Optional: space between the title text and the icon */
+}
+
+.tooltip-container {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    /* Indicate the icon is interactive */
+}
+
+.tooltip-container svg {
+    margin-left: 5px;
+    /* Space between the title and the icon */
+    vertical-align: middle;
+    /* Ensures alignment with text */
+}
+
+.two-tooltip-text {
+    visibility: hidden;
+    width: 276px;
+    height: auto;
+    background-color: rgb(34, 34, 34);
+    color: #fff !important;
+    text-align: left;
+    padding: 10px;
+    border-radius: 5px;
+    /* Position the tooltip text */
+    position: absolute;
+    z-index: 1;
+    bottom: 120%;
+    /* Adjust this to move the tooltip above the question mark */
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 12px;
+    white-space: normal;
+    line-height: 1.5;
+}
+
+.tooltip-container:hover .two-tooltip-text {
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 1s;
+}
+
+.payment-terms-and-conditions-container {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    background-color: rgb(245, 245, 245);
+    font-size: 12px !important;
+    border-radius: 0.5rem;
+}
+
+.payment-method-content.payment-terms-and-conditions-container {
+    padding: 1rem !important;
+}
+
+.terms-text {
+    cursor: pointer;
+    color: rgba(0, 76, 76, 1);
+    font-weight: 500;
+}
+
+.terms-text a {
+    text-decoration: none;
+    /* Style the anchor tags inside .terms-text */
+}
+
+.terms-container {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    background-color: rgb(245, 245, 245);
+    font-size: 12px !important;
+    border-radius: 0.5rem;
+}
+
+.payment-method-content.terms-container {
+    padding: 1rem !important;
+}
+
 .enter_details_manually {
     cursor: pointer;
     color: var(--color-blue2);

diff --git a/view/frontend/web/template/payment/two_payment.html b/view/frontend/web/template/payment/two_payment.html
@@ -267,116 +267,3 @@
         </div>
     </div>
 </div>
-
-<style>
-    .payment-option-title-container {
-        position: relative;
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: flex-start;
-        /* gap: 8px; */
-        width: 100%;
-        min-height: max-content;
-    }
-
-    .payment-option-title-container span {
-        color: inherit;
-    }
-
-    .tooltip-svg {
-        cursor: pointer;
-        width: 20px;
-        height: auto;
-        margin-left: 5px;
-        align-self: center;
-        /* Center the SVG vertically with the text */
-    }
-
-    .title-with-tooltip {
-        display: inline-flex;
-        align-items: center;
-        /* Keeps the text and the tooltip icon inline */
-        gap: 5px;
-        font-weight: 600;
-        /* Optional: space between the title text and the icon */
-    }
-
-    .tooltip-container {
-        position: relative;
-        display: inline-block;
-        cursor: pointer;
-        /* Indicate the icon is interactive */
-    }
-
-    .tooltip-container svg {
-        margin-left: 5px;
-        /* Space between the title and the icon */
-        vertical-align: middle;
-        /* Ensures alignment with text */
-    }
-
-    .two-tooltip-text {
-        visibility: hidden;
-        width: 276px;
-        height: auto;
-        background-color: rgb(34, 34, 34);
-        color: #fff !important;
-        text-align: left;
-        padding: 10px;
-        border-radius: 5px;
-        /* Position the tooltip text */
-        position: absolute;
-        z-index: 1;
-        bottom: 120%;
-        /* Adjust this to move the tooltip above the question mark */
-        left: 50%;
-        transform: translateX(-50%);
-        opacity: 0;
-        transition: opacity 0.3s;
-        font-size: 12px;
-        white-space: normal;
-        line-height: 1.5;
-    }
-
-    .tooltip-container:hover .two-tooltip-text {
-        visibility: visible;
-        opacity: 1;
-        transition-delay: 1s;
-    }
-
-    .payment-terms-and-conditions-container {
-        margin-top: 1.5rem;
-        padding: 1rem;
-        background-color: rgb(245, 245, 245);
-        font-size: 12px !important;
-        border-radius: 0.5rem;
-    }
-
-    .payment-method-content.payment-terms-and-conditions-container {
-        padding: 1rem !important;
-    }
-
-    .terms-text {
-        cursor: pointer;
-        color: rgba(0, 76, 76, 1);
-        font-weight: 500;
-    }
-
-    .terms-text a {
-        text-decoration: none;
-        /* Style the anchor tags inside .terms-text */
-    }
-
-    .terms-container {
-        margin-top: 1.5rem;
-        padding: 1rem;
-        background-color: rgb(245, 245, 245);
-        font-size: 12px !important;
-        border-radius: 0.5rem;
-    }
-
-    .payment-method-content.terms-container {
-        padding: 1rem !important;
-    }
-</style>