More specific CSS selector for .ticker class

nimiq · Mar 10, 2022 · 6d525b4 · 6d525b4
1 parent ab647b7
commit 6d525b4
Showing 1 changed file with 23 additions and 16 deletions.
diff --git a/src/components/swap/SwapModal.vue b/src/components/swap/SwapModal.vue
@@ -1380,7 +1380,7 @@ export default defineComponent({
 }
 
 .amount-input.has-value {
-    &.positive-value ::v-deep form{
+    &.positive-value ::v-deep form {
         .nq-input {
             color: var(--nimiq-green);
             --border-color: rgba(33,188,165,0.3); /* Based on Nimiq Green */
@@ -1435,26 +1435,33 @@ export default defineComponent({
     }
 }
 
-.amount-input,
-.new-balances .amount {
+.swap-modal {
     --size: var(--h2-size);
-    font-size: var(--size);
-    font-weight: bold;
-
-    ::v-deep .ticker {
-        // Sometimes this class gets lower priority than the ticker's native class, so we need to force these styles
-        font-size: inherit !important;
-        line-height: 1 !important;
-        margin-left: 0.5rem !important;
-    }
 
-    .nq-green & {
-        color: var(--nimiq-green);
+    & ::v-deep .amount-input {
+        font-size: var(--size);
+        font-weight: bold;
+
+        .ticker {
+            line-height: 1;
+            margin-left: 0.5rem;
+            font-size: var(--size);
+        }
     }
 
-    .nq-blue & {
-        color: var(--nimiq-blue);
+    .new-balances ::v-deep .amount {
+        font-size: var(--size);
+        font-weight: bold;
+
+        .nq-green & {
+            color: var(--nimiq-green);
+        }
+
+        .nq-blue & {
+            color: var(--nimiq-blue);
+        }
     }
+
 }
 
 .new-balances .fiat-amount {