Take a look at the code below:
<template>
<DxPopup
v-bind="$attrs"
v-on="$listeners"
:hide-on-outside-click="true"
:drag-enabled="true"
:wrapper-attr="popupAttributes"
position="center"
@hiding="onHiding"
>
<slot />
<slot name="footer">
<DxToolbarItem class="btn-default" widget="dxButton" toolbar="bottom" :options="okButtonOptions" />
<DxToolbarItem class="btn-default" widget="dxButton" toolbar="bottom" :options="closeButtonOptions" />
</slot>
</DxPopup>
</template>
<script>
import { DxPopup } from 'devextreme-vue/popup';
import { DxToolbarItem } from 'devextreme-vue/popup';
export default {
inheritAttrs: false,
components: {
DxPopup,
DxToolbarItem
},
data() {
return {
popupAttributes: {
id: 'popup-base',
},
<style lang="scss">
#popup-base .dx-popup-normal {
border-radius: 20px;
}
#popup-base .dx-texteditor-input {
color: #8ca8cc;
font-family: $primary-font-family;
font-size: 15px;
}
#popup-base .dx-popup-title {
border-bottom: 0px;
font-weight: bold;
font-size: $font-xl;
color: $accent-color;
}
#popup-base .dx-label {
color: $accent-color;
}
#popup-base .dx-button-content {
border: 1px solid $accent-color;
color: $accent-color;
}
</style>
Here's a preview of the modal dialog:
https://i.sstatic.net/lMTkc.png
Is there a way to only apply the #popup-base .dx-button-content rule to the two buttons at the bottom?