'Keep all style of page inside page block element

I have this code :

<div class="page-payment">
  <div class="payment-methods" v-if="!pending">
    <sepa-modal
      ref="sepaModal"
    />
  </div>
</div>

SepaModal.vue :

<b-modal
id="sepaModal"
centered
top
no-fade
size="md"
ref="modal"
hide-footer
@show="showPopup"
@hidden="closePopup"
>
  <template #modal-header-close>
    <icon width="20" height="20" class="d-none d-md-block" type="times"/>
    <icon width="10" height="18" class="d-md-none" type="arrow-left"/>
  </template>
  <template #modal-title>
  </template>
  <div>
    <div class="content-modal content-modal-sepa">
      <div class="modal-header"></div>
      ..........
    </div>
  </div>

The .css :

.page-payment {
   .payment-methods {
       .content-modal {
           padding: 20px !important
       }
   }
}

The style is not getting into account. But I want to keep all styles inside: .page-payment{}. How can I solve it?

javascriptcssvue.jssassvuejs2


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions