@longhongguo/form-create-ant-design-vue 3.3.4 → 3.3.6

package/dist/form-create.css

@@ -26,6 +26,341 @@
   display: none !important;
 }
 
+/* 预览模式样式增强 */
+
+.form-create.is-preview .ant-form-item {
+  margin-bottom: 8px !important;
+}
+
+.form-create.is-preview .form-create .ant-form-item {
+  margin-bottom: 8px !important;
+}
+
+.form-create.is-preview .ant-form-item.ant-form-item-with-help {
+  margin-bottom: 4px !important;
+}
+
+.form-create.is-preview
+  .form-create
+  .ant-form-item
+  .ant-form-item.ant-form-item-with-help {
+  margin-bottom: -8px !important;
+}
+
+/* 移除组件边框 */
+.form-create.is-preview .ant-input,
+.form-create.is-preview .ant-input-number,
+.form-create.is-preview .ant-select-selector,
+.form-create.is-preview .ant-picker,
+.form-create.is-preview .ant-cascader-picker,
+.form-create.is-preview .ant-input-password,
+.form-create.is-preview .ant-textarea,
+.form-create.is-preview .ant-upload,
+.form-create.is-preview .ant-upload-list,
+.form-create.is-preview .ant-upload-list-item {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+.form-create.is-preview .ant-input:focus,
+.form-create.is-preview .ant-input-number:focus,
+.form-create.is-preview .ant-select-focused .ant-select-selector,
+.form-create.is-preview .ant-picker:focus,
+.form-create.is-preview .ant-cascader-picker:focus,
+.form-create.is-preview .ant-input-password:focus,
+.form-create.is-preview .ant-textarea:focus {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.form-create.is-preview .ant-input:hover,
+.form-create.is-preview .ant-input-number:hover,
+.form-create.is-preview .ant-select:hover .ant-select-selector,
+.form-create.is-preview .ant-picker:hover,
+.form-create.is-preview .ant-cascader-picker:hover,
+.form-create.is-preview .ant-input-password:hover,
+.form-create.is-preview .ant-textarea:hover {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* 隐藏字数限制等提示信息 */
+.form-create.is-preview .ant-input-character-count,
+.form-create.is-preview .ant-textarea-character-count,
+.form-create.is-preview .ant-form-item-explain,
+.form-create.is-preview .ant-form-item-extra,
+.form-create.is-preview .ant-form-item-feedback-icon,
+.form-create.is-preview
+  .ant-form-item-has-feedback
+  .ant-form-item-children-icon {
+  display: none !important;
+}
+
+/* 隐藏必填标记 */
+.form-create.is-preview
+  .ant-form-item-label
+  > label.ant-form-item-required::before,
+.form-create.is-preview label.ant-form-item-required::before {
+  display: none !important;
+}
+
+/* 隐藏帮助图标和提示 */
+.form-create.is-preview .ant-form-item-label .anticon,
+.form-create.is-preview .ant-form-item-label .fc-icon {
+  display: none !important;
+}
+
+/* 预览模式：禁用所有交互 */
+.form-create.is-preview * {
+  pointer-events: none !important;
+}
+
+/* 预览模式：允许富文本编辑器容器滚动 */
+.form-create.is-preview .w-e-text-container {
+  pointer-events: auto !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+}
+
+.form-create.is-preview .w-e-text {
+  pointer-events: auto !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  cursor: default !important;
+  /* 确保可以滚动 */
+  -webkit-overflow-scrolling: touch !important;
+}
+
+/* 预览模式：允许 upload 组件的预览功能（整个列表项可以点击预览） */
+.form-create.is-preview .ant-upload-list-item {
+  pointer-events: auto !important;
+}
+
+/* 预览模式：允许 upload 组件中的预览相关元素 */
+.form-create.is-preview .ant-upload-list-item-thumbnail,
+.form-create.is-preview .ant-upload-list-item-thumbnail *,
+.form-create.is-preview .ant-upload-list-item-name,
+.form-create.is-preview .ant-upload-list-item-preview,
+.form-create.is-preview .ant-upload-list-item-preview-icon,
+.form-create.is-preview .ant-upload-list-item-actions-preview,
+.form-create.is-preview .ant-upload-list-item-actions .anticon-eye,
+.form-create.is-preview .ant-upload-list-item-info,
+.form-create.is-preview .ant-upload-list-item-info > span,
+.form-create.is-preview
+  .ant-upload-picture-card
+  .ant-upload-list-item-thumbnail,
+.form-create.is-preview
+  .ant-upload-picture-card
+  .ant-upload-list-item-thumbnail
+  * {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+}
+
+/* 预览模式：允许 image 组件的预览功能 */
+.form-create.is-preview .ant-image,
+.form-create.is-preview .ant-image-img,
+.form-create.is-preview .ant-image-mask,
+.form-create.is-preview .ant-image-mask-info {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+}
+
+/* 预览模式：允许图片预览弹窗可以交互 */
+.form-create.is-preview .ant-modal,
+.form-create.is-preview .ant-modal-wrap,
+.form-create.is-preview .ant-modal-mask,
+.form-create.is-preview .ant-modal-content,
+.form-create.is-preview .ant-modal-close,
+.form-create.is-preview .ant-modal-header,
+.form-create.is-preview .ant-modal-body,
+.form-create.is-preview .ant-modal-footer {
+  pointer-events: auto !important;
+}
+
+/* 预览模式：隐藏 upload 组件的上传按钮 */
+.form-create.is-preview .ant-upload-select,
+.form-create.is-preview .ant-upload-select-picture-card {
+  display: none !important;
+}
+
+/* 预览模式：阻止 upload 组件中的删除和其他操作按钮（优先级更高） */
+.form-create.is-preview .ant-upload-list-item-actions-delete,
+.form-create.is-preview .ant-upload-list-item-actions-upload,
+.form-create.is-preview .ant-upload-list-item-actions-download,
+.form-create.is-preview .ant-upload-list-item-actions .anticon-delete,
+.form-create.is-preview .ant-upload-list-item-actions .anticon-close,
+.form-create.is-preview .ant-upload-list-item-actions-item .anticon-delete,
+.form-create.is-preview .ant-upload-list-item-actions-item-delete,
+.form-create.is-preview .ant-upload-list-item-actions-item-upload,
+.form-create.is-preview .ant-upload-list-item-remove {
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}
+
+/* 预览模式：防止组件显示为禁用状态（不置灰） */
+.form-create.is-preview .ant-input,
+.form-create.is-preview .ant-input-number,
+.form-create.is-preview .ant-select,
+.form-create.is-preview .ant-picker,
+.form-create.is-preview .ant-cascader,
+.form-create.is-preview .ant-input-password,
+.form-create.is-preview .ant-textarea,
+.form-create.is-preview .ant-radio,
+.form-create.is-preview .ant-checkbox,
+.form-create.is-preview .ant-switch,
+.form-create.is-preview .ant-slider,
+.form-create.is-preview .ant-rate,
+.form-create.is-preview .ant-upload,
+.form-create.is-preview .ant-btn {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+}
+
+/* 预览模式：CusSelect 组件保持正常外观，不置灰 */
+.form-create.is-preview .fc-cus-select,
+.form-create.is-preview .fc-cus-select-selector,
+.form-create.is-preview .fc-cus-select-selection-item,
+.form-create.is-preview .fc-cus-select-selection-placeholder {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+}
+
+/* 预览模式：移除 CusSelect 选择器的边框 */
+.form-create.is-preview .fc-cus-select-selector {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* 预览模式：隐藏 CusSelect 的箭头和清除按钮 */
+.form-create.is-preview .fc-cus-select-arrow,
+.form-create.is-preview .fc-cus-select-clear {
+  display: none !important;
+}
+
+/* 预览模式：隐藏选择器的下拉箭头 */
+.form-create.is-preview .ant-select-arrow,
+.form-create.is-preview .ant-select-suffix {
+  display: none !important;
+}
+
+/* 预览模式：隐藏日期选择器的图标 */
+.form-create.is-preview .ant-picker-suffix,
+.form-create.is-preview .ant-picker-suffix .anticon {
+  display: none !important;
+}
+
+/* 预览模式：隐藏其他输入框的清除按钮和图标 */
+.form-create.is-preview .ant-input-clear-icon,
+.form-create.is-preview .ant-input-number-handler,
+.form-create.is-preview .ant-input-number-handler-wrap {
+  display: none !important;
+}
+
+/* 预览模式：防止输入框显示为禁用状态的灰色 */
+.form-create.is-preview .ant-input[disabled],
+.form-create.is-preview .ant-input-number[disabled],
+.form-create.is-preview .ant-select-disabled,
+.form-create.is-preview .ant-picker-disabled,
+.form-create.is-preview .ant-textarea[disabled] {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+  cursor: default !important;
+}
+
+/* 预览模式：防止选择器显示为禁用状态 */
+.form-create.is-preview .ant-select-disabled .ant-select-selector {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+  cursor: default !important;
+}
+
+/* 预览模式：防止日期选择器显示为禁用状态 */
+.form-create.is-preview .ant-picker-disabled {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+  cursor: default !important;
+}
+
+/* 预览模式：富文本编辑器样式 */
+.form-create.is-preview .w-e-text-container {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  /* 移除高度限制，让内容自适应 */
+  height: auto !important;
+  min-height: auto !important;
+  max-height: none !important;
+}
+
+.form-create.is-preview .w-e-toolbar {
+  display: none !important;
+}
+
+.form-create.is-preview .w-e-text {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  /* 移除高度限制，让内容自适应 */
+  height: auto !important;
+  min-height: auto !important;
+  max-height: none !important;
+}
+
+/* 富文本内容不可编辑，但允许容器滚动 */
+.form-create.is-preview .w-e-text p,
+.form-create.is-preview .w-e-text div,
+.form-create.is-preview .w-e-text span,
+.form-create.is-preview .w-e-text li,
+.form-create.is-preview .w-e-text ul,
+.form-create.is-preview .w-e-text ol,
+.form-create.is-preview .w-e-text h1,
+.form-create.is-preview .w-e-text h2,
+.form-create.is-preview .w-e-text h3,
+.form-create.is-preview .w-e-text h4,
+.form-create.is-preview .w-e-text h5,
+.form-create.is-preview .w-e-text h6,
+.form-create.is-preview .w-e-text a,
+.form-create.is-preview .w-e-text img,
+.form-create.is-preview .w-e-text table,
+.form-create.is-preview .w-e-text tr,
+.form-create.is-preview .w-e-text td,
+.form-create.is-preview .w-e-text th {
+  pointer-events: none !important;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+}
+
+/* 预览模式：禁用按钮点击 */
+.form-create.is-preview .ant-btn {
+  pointer-events: none !important;
+  cursor: default !important;
+}
+
+/* 预览模式：禁用选择器下拉 */
+.form-create.is-preview .ant-select-dropdown {
+  display: none !important;
+}
+
+/* 预览模式：禁用日期选择器弹窗 */
+.form-create.is-preview .ant-picker-dropdown {
+  display: none !important;
+}
+
+/* 预览模式：禁用级联选择器下拉 */
+.form-create.is-preview .ant-cascader-dropdown {
+  display: none !important;
+}
+
 .fc-form-footer {
   margin-top: 12px;
 }

package/dist/form-create.esm.css

@@ -26,6 +26,341 @@
   display: none !important;
 }
 
+/* 预览模式样式增强 */
+
+.form-create.is-preview .ant-form-item {
+  margin-bottom: 8px !important;
+}
+
+.form-create.is-preview .form-create .ant-form-item {
+  margin-bottom: 8px !important;
+}
+
+.form-create.is-preview .ant-form-item.ant-form-item-with-help {
+  margin-bottom: 4px !important;
+}
+
+.form-create.is-preview
+  .form-create
+  .ant-form-item
+  .ant-form-item.ant-form-item-with-help {
+  margin-bottom: -8px !important;
+}
+
+/* 移除组件边框 */
+.form-create.is-preview .ant-input,
+.form-create.is-preview .ant-input-number,
+.form-create.is-preview .ant-select-selector,
+.form-create.is-preview .ant-picker,
+.form-create.is-preview .ant-cascader-picker,
+.form-create.is-preview .ant-input-password,
+.form-create.is-preview .ant-textarea,
+.form-create.is-preview .ant-upload,
+.form-create.is-preview .ant-upload-list,
+.form-create.is-preview .ant-upload-list-item {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+.form-create.is-preview .ant-input:focus,
+.form-create.is-preview .ant-input-number:focus,
+.form-create.is-preview .ant-select-focused .ant-select-selector,
+.form-create.is-preview .ant-picker:focus,
+.form-create.is-preview .ant-cascader-picker:focus,
+.form-create.is-preview .ant-input-password:focus,
+.form-create.is-preview .ant-textarea:focus {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.form-create.is-preview .ant-input:hover,
+.form-create.is-preview .ant-input-number:hover,
+.form-create.is-preview .ant-select:hover .ant-select-selector,
+.form-create.is-preview .ant-picker:hover,
+.form-create.is-preview .ant-cascader-picker:hover,
+.form-create.is-preview .ant-input-password:hover,
+.form-create.is-preview .ant-textarea:hover {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* 隐藏字数限制等提示信息 */
+.form-create.is-preview .ant-input-character-count,
+.form-create.is-preview .ant-textarea-character-count,
+.form-create.is-preview .ant-form-item-explain,
+.form-create.is-preview .ant-form-item-extra,
+.form-create.is-preview .ant-form-item-feedback-icon,
+.form-create.is-preview
+  .ant-form-item-has-feedback
+  .ant-form-item-children-icon {
+  display: none !important;
+}
+
+/* 隐藏必填标记 */
+.form-create.is-preview
+  .ant-form-item-label
+  > label.ant-form-item-required::before,
+.form-create.is-preview label.ant-form-item-required::before {
+  display: none !important;
+}
+
+/* 隐藏帮助图标和提示 */
+.form-create.is-preview .ant-form-item-label .anticon,
+.form-create.is-preview .ant-form-item-label .fc-icon {
+  display: none !important;
+}
+
+/* 预览模式：禁用所有交互 */
+.form-create.is-preview * {
+  pointer-events: none !important;
+}
+
+/* 预览模式：允许富文本编辑器容器滚动 */
+.form-create.is-preview .w-e-text-container {
+  pointer-events: auto !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+}
+
+.form-create.is-preview .w-e-text {
+  pointer-events: auto !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  cursor: default !important;
+  /* 确保可以滚动 */
+  -webkit-overflow-scrolling: touch !important;
+}
+
+/* 预览模式：允许 upload 组件的预览功能（整个列表项可以点击预览） */
+.form-create.is-preview .ant-upload-list-item {
+  pointer-events: auto !important;
+}
+
+/* 预览模式：允许 upload 组件中的预览相关元素 */
+.form-create.is-preview .ant-upload-list-item-thumbnail,
+.form-create.is-preview .ant-upload-list-item-thumbnail *,
+.form-create.is-preview .ant-upload-list-item-name,
+.form-create.is-preview .ant-upload-list-item-preview,
+.form-create.is-preview .ant-upload-list-item-preview-icon,
+.form-create.is-preview .ant-upload-list-item-actions-preview,
+.form-create.is-preview .ant-upload-list-item-actions .anticon-eye,
+.form-create.is-preview .ant-upload-list-item-info,
+.form-create.is-preview .ant-upload-list-item-info > span,
+.form-create.is-preview
+  .ant-upload-picture-card
+  .ant-upload-list-item-thumbnail,
+.form-create.is-preview
+  .ant-upload-picture-card
+  .ant-upload-list-item-thumbnail
+  * {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+}
+
+/* 预览模式：允许 image 组件的预览功能 */
+.form-create.is-preview .ant-image,
+.form-create.is-preview .ant-image-img,
+.form-create.is-preview .ant-image-mask,
+.form-create.is-preview .ant-image-mask-info {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+}
+
+/* 预览模式：允许图片预览弹窗可以交互 */
+.form-create.is-preview .ant-modal,
+.form-create.is-preview .ant-modal-wrap,
+.form-create.is-preview .ant-modal-mask,
+.form-create.is-preview .ant-modal-content,
+.form-create.is-preview .ant-modal-close,
+.form-create.is-preview .ant-modal-header,
+.form-create.is-preview .ant-modal-body,
+.form-create.is-preview .ant-modal-footer {
+  pointer-events: auto !important;
+}
+
+/* 预览模式：隐藏 upload 组件的上传按钮 */
+.form-create.is-preview .ant-upload-select,
+.form-create.is-preview .ant-upload-select-picture-card {
+  display: none !important;
+}
+
+/* 预览模式：阻止 upload 组件中的删除和其他操作按钮（优先级更高） */
+.form-create.is-preview .ant-upload-list-item-actions-delete,
+.form-create.is-preview .ant-upload-list-item-actions-upload,
+.form-create.is-preview .ant-upload-list-item-actions-download,
+.form-create.is-preview .ant-upload-list-item-actions .anticon-delete,
+.form-create.is-preview .ant-upload-list-item-actions .anticon-close,
+.form-create.is-preview .ant-upload-list-item-actions-item .anticon-delete,
+.form-create.is-preview .ant-upload-list-item-actions-item-delete,
+.form-create.is-preview .ant-upload-list-item-actions-item-upload,
+.form-create.is-preview .ant-upload-list-item-remove {
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}
+
+/* 预览模式：防止组件显示为禁用状态（不置灰） */
+.form-create.is-preview .ant-input,
+.form-create.is-preview .ant-input-number,
+.form-create.is-preview .ant-select,
+.form-create.is-preview .ant-picker,
+.form-create.is-preview .ant-cascader,
+.form-create.is-preview .ant-input-password,
+.form-create.is-preview .ant-textarea,
+.form-create.is-preview .ant-radio,
+.form-create.is-preview .ant-checkbox,
+.form-create.is-preview .ant-switch,
+.form-create.is-preview .ant-slider,
+.form-create.is-preview .ant-rate,
+.form-create.is-preview .ant-upload,
+.form-create.is-preview .ant-btn {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+}
+
+/* 预览模式：CusSelect 组件保持正常外观，不置灰 */
+.form-create.is-preview .fc-cus-select,
+.form-create.is-preview .fc-cus-select-selector,
+.form-create.is-preview .fc-cus-select-selection-item,
+.form-create.is-preview .fc-cus-select-selection-placeholder {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+}
+
+/* 预览模式：移除 CusSelect 选择器的边框 */
+.form-create.is-preview .fc-cus-select-selector {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* 预览模式：隐藏 CusSelect 的箭头和清除按钮 */
+.form-create.is-preview .fc-cus-select-arrow,
+.form-create.is-preview .fc-cus-select-clear {
+  display: none !important;
+}
+
+/* 预览模式：隐藏选择器的下拉箭头 */
+.form-create.is-preview .ant-select-arrow,
+.form-create.is-preview .ant-select-suffix {
+  display: none !important;
+}
+
+/* 预览模式：隐藏日期选择器的图标 */
+.form-create.is-preview .ant-picker-suffix,
+.form-create.is-preview .ant-picker-suffix .anticon {
+  display: none !important;
+}
+
+/* 预览模式：隐藏其他输入框的清除按钮和图标 */
+.form-create.is-preview .ant-input-clear-icon,
+.form-create.is-preview .ant-input-number-handler,
+.form-create.is-preview .ant-input-number-handler-wrap {
+  display: none !important;
+}
+
+/* 预览模式：防止输入框显示为禁用状态的灰色 */
+.form-create.is-preview .ant-input[disabled],
+.form-create.is-preview .ant-input-number[disabled],
+.form-create.is-preview .ant-select-disabled,
+.form-create.is-preview .ant-picker-disabled,
+.form-create.is-preview .ant-textarea[disabled] {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+  cursor: default !important;
+}
+
+/* 预览模式：防止选择器显示为禁用状态 */
+.form-create.is-preview .ant-select-disabled .ant-select-selector {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+  cursor: default !important;
+}
+
+/* 预览模式：防止日期选择器显示为禁用状态 */
+.form-create.is-preview .ant-picker-disabled {
+  opacity: 1 !important;
+  color: inherit !important;
+  background-color: transparent !important;
+  cursor: default !important;
+}
+
+/* 预览模式：富文本编辑器样式 */
+.form-create.is-preview .w-e-text-container {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  /* 移除高度限制，让内容自适应 */
+  height: auto !important;
+  min-height: auto !important;
+  max-height: none !important;
+}
+
+.form-create.is-preview .w-e-toolbar {
+  display: none !important;
+}
+
+.form-create.is-preview .w-e-text {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  /* 移除高度限制，让内容自适应 */
+  height: auto !important;
+  min-height: auto !important;
+  max-height: none !important;
+}
+
+/* 富文本内容不可编辑，但允许容器滚动 */
+.form-create.is-preview .w-e-text p,
+.form-create.is-preview .w-e-text div,
+.form-create.is-preview .w-e-text span,
+.form-create.is-preview .w-e-text li,
+.form-create.is-preview .w-e-text ul,
+.form-create.is-preview .w-e-text ol,
+.form-create.is-preview .w-e-text h1,
+.form-create.is-preview .w-e-text h2,
+.form-create.is-preview .w-e-text h3,
+.form-create.is-preview .w-e-text h4,
+.form-create.is-preview .w-e-text h5,
+.form-create.is-preview .w-e-text h6,
+.form-create.is-preview .w-e-text a,
+.form-create.is-preview .w-e-text img,
+.form-create.is-preview .w-e-text table,
+.form-create.is-preview .w-e-text tr,
+.form-create.is-preview .w-e-text td,
+.form-create.is-preview .w-e-text th {
+  pointer-events: none !important;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+}
+
+/* 预览模式：禁用按钮点击 */
+.form-create.is-preview .ant-btn {
+  pointer-events: none !important;
+  cursor: default !important;
+}
+
+/* 预览模式：禁用选择器下拉 */
+.form-create.is-preview .ant-select-dropdown {
+  display: none !important;
+}
+
+/* 预览模式：禁用日期选择器弹窗 */
+.form-create.is-preview .ant-picker-dropdown {
+  display: none !important;
+}
+
+/* 预览模式：禁用级联选择器下拉 */
+.form-create.is-preview .ant-cascader-dropdown {
+  display: none !important;
+}
+
 .fc-form-footer {
   margin-top: 12px;
 }