diff --git a/app/views/shared/settings/_form.html.haml b/app/views/shared/settings/_form.html.haml
index a4c4b1e..837a1f2 100644
--- a/app/views/shared/settings/_form.html.haml
+++ b/app/views/shared/settings/_form.html.haml
@@ -43,12 +43,14 @@
"v-bind:plugin-label" => "'Format'"}
- if setting.advanced_options.present?
- .card.card-body.bg-light
- %h4{"v-b-toggle" => "'advanced-setting'"}
- = icon('fa-caret-down')
- = t('terms.advanced_setting')
+ %b-card(no-body){"bg-variant" => "light"}
+ %template{"slot" => "header"}
+ %h4{"v-b-toggle" => "'advanced-setting'"}
+ = icon('fa-caret-down')
+ = t('terms.advanced_setting')
%b-collapse{"id" => "advanced-setting"}
- - setting.advanced_options.each do |key|
- = form.field(key)
+ %b-card-body
+ - setting.advanced_options.each do |key|
+ = form.field(key)
= form.submit t('fluentd.common.finish'), class: "btn btn-lg btn-primary float-right mt-3"
diff --git a/app/views/shared/vue/_owned_plugin_form.html.haml b/app/views/shared/vue/_owned_plugin_form.html.haml
index 0a818d0..bd3d80f 100644
--- a/app/views/shared/vue/_owned_plugin_form.html.haml
+++ b/app/views/shared/vue/_owned_plugin_form.html.haml
@@ -2,7 +2,7 @@
%script{type: "text/x-template", id: "vue-owned-plugin-form"}
.form-group.card.bg-light.mb-3{"v-bind:id" => "id"}
- .card-body
+ %b-card{"bg-variant" => "light"}
%label{"v-bind:for" => "selectId(pluginType)"}
{{ pluginLabel }}
%select{"v-bind:id" => "selectId(pluginType)",
@@ -20,12 +20,14 @@
"v-bind:plugin-type" => "pluginType",
"v-bind:option" => "option"}
%template{"v-if" => '!_.isEmpty(advancedOptions)'}
- .card.card-body.bg-light
- %h4{"v-b-toggle" => "`${id}-advanced-setting`"}
- = icon('fa-caret-down')
- = t('terms.advanced_setting')
+ %b-card(no-body){"bg-variant" => "light"}
+ %template{"slot" => "header"}
+ %h4{"v-b-toggle" => "`${id}-advanced-setting`"}
+ = icon('fa-caret-down')
+ = t('terms.advanced_setting')
%b-collapse{"v-bind:id" => "`${id}-advanced-setting`"}
- %config-field{"v-for" => "option in advancedOptions",
- "v-bind:key" => "option.name",
- "v-bind:plugin-type" => "pluginType",
- "v-bind:option" => "option"}
+ %b-card-body
+ %config-field{"v-for" => "option in advancedOptions",
+ "v-bind:key" => "option.name",
+ "v-bind:plugin-type" => "pluginType",
+ "v-bind:option" => "option"}
diff --git a/app/views/shared/vue/_parser_plugin_form.html.haml b/app/views/shared/vue/_parser_plugin_form.html.haml
index 73289c6..7153429 100644
--- a/app/views/shared/vue/_parser_plugin_form.html.haml
+++ b/app/views/shared/vue/_parser_plugin_form.html.haml
@@ -3,7 +3,7 @@
%script{type: "text/x-template", id: "vue-parser-plugin-form"}
.form-group.card.bg-light.mb-3{"v-bind:id" => "id"}
- .card-body
+ %b-card{"bg-variant" => "light"}
%label{"v-bind:for" => "selectId(pluginType)"}
{{ pluginLabel }}
%select{"v-bind:id" => "selectId(pluginType)",
@@ -27,12 +27,14 @@
"v-bind:initial-text-value" => "initialParams[option.name]",
"v-on:change-parse-config" => "onChangeParseConfig"}
%template{"v-if" => '!_.isEmpty(advancedOptions)'}
- .card.card-body.bg-light
- %h4{"v-b-toggle" => '"parser-section-advanced-setting"'}
- = icon('fa-caret-down')
- = t('terms.advanced_setting')
+ %b-card(no-body){"bg-variant" => "light"}
+ %template{"slot" => "header"}
+ %h4{"v-b-toggle" => '"parser-section-advanced-setting"'}
+ = icon('fa-caret-down')
+ = t('terms.advanced_setting')
%b-collapse{"id" => "parser-section-advanced-setting"}
- %config-field{"v-for" => "option in advancedOptions",
- "v-bind:key" => "option.name",
- "v-bind:plugin-type" => "pluginType",
- "v-bind:option" => "option"}
+ %b-card-body
+ %config-field{"v-for" => "option in advancedOptions",
+ "v-bind:key" => "option.name",
+ "v-bind:plugin-type" => "pluginType",
+ "v-bind:option" => "option"}