@aplus-frontend/ui 0.0.1-beta.33 → 0.0.1-beta.35

package/lib/src/theme/antd-global-overwrite/admin/form.css

@@ -17,6 +17,9 @@
 .ant-form .ant-form-item-control .ant-radio-wrapper .ant-radio.ant-radio-checked .ant-radio-inner::after {
   background-color: #34b77c;
 }
+.ant-form .ant-form-item-control .ant-select.ant-select-open .ant-select-selection-item {
+  color: #bfbfbf;
+}
 .ant-input::-moz-placeholder {
   color: #bfbfbf;
 }
@@ -38,20 +41,25 @@
 .ant-input-number .ant-input-number-input-wrap > input::placeholder {
   color: #bfbfbf;
 }
+input.ant-input[disabled] {
+  color: #666666;
+}
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] {
   padding: 16px;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.ant-btn-primary {
   order: 1;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.ant-btn-default {
   order: 2;
+  margin-right: 0;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.ant-btn-link {
   order: 3;
+  margin-left: 0.5rem;
 }

package/lib/src/theme/antd-global-overwrite/admin/index.css

@@ -1,24 +1,50 @@
 .ant-alert {
+  align-items: flex-start;
   width: 100%;
-  margin: 0 0 4px;
-  padding: 9px 12px;
+  padding: 6px 12px;
   border-radius: 4px;
 }
+.ant-alert .ant-alert-icon {
+  font-size: 16px;
+  transform: translateY(1px);
+  margin-inline-end: 8px;
+}
 .ant-alert .ant-alert-message {
-  color: #182948;
-  font-weight: bold;
+  color: #333333;
+  font-weight: normal !important;
   font-size: 12px;
-  line-height: 12px;
+  line-height: 18px;
 }
 .ant-alert .ant-alert-message .href {
-  color: #0070ff;
+  color: #1890ff;
   cursor: pointer;
 }
 .ant-alert .ant-alert-description {
+  color: #333333;
   font-weight: normal;
   font-size: 12px;
   line-height: 18px;
 }
+.ant-alert-with-description .ant-alert-message {
+  margin-bottom: 4px;
+  font-weight: bold !important;
+}
+.ant-alert-warning {
+  background: rgba(250, 173, 20, 0.1);
+  border: 1px solid rgba(250, 173, 20, 0.4);
+}
+.ant-alert-info {
+  background: rgba(24, 144, 255, 0.1);
+  border: 1px solid rgba(24, 144, 255, 0.4);
+}
+.ant-alert-success {
+  background: rgba(52, 183, 124, 0.1);
+  border: 1px solid rgba(52, 183, 124, 0.4);
+}
+.ant-alert-error {
+  background: rgba(255, 77, 79, 0.1);
+  border: 1px solid rgba(255, 77, 79, 0.4);
+}
 .ant-btn {
   min-width: 88px;
   box-shadow: none;
@@ -76,6 +102,9 @@
 .ant-form .ant-form-item-control .ant-radio-wrapper .ant-radio.ant-radio-checked .ant-radio-inner::after {
   background-color: #34b77c;
 }
+.ant-form .ant-form-item-control .ant-select.ant-select-open .ant-select-selection-item {
+  color: #bfbfbf;
+}
 .ant-input::-moz-placeholder {
   color: #bfbfbf;
 }
@@ -97,22 +126,27 @@
 .ant-input-number .ant-input-number-input-wrap > input::placeholder {
   color: #bfbfbf;
 }
+input.ant-input[disabled] {
+  color: #666666;
+}
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] {
   padding: 16px;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.ant-btn-primary {
   order: 1;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.ant-btn-default {
   order: 2;
+  margin-right: 0;
 }
 div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.ant-btn-link {
   order: 3;
+  margin-left: 0.5rem;
 }
 .ant-message .ant-message-notice-content {
   padding: 10px 16px;
@@ -204,7 +238,7 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   min-width: 88px;
 }
 .ant-modal-root .ant-modal-confirm .ant-modal-body {
-  padding: 28px 32px !important;
+  padding: 32px 32px 28px !important;
 }
 .ant-modal-root .ant-modal-confirm .ant-modal-body .ant-modal-confirm-body > .anticon {
   margin-inline-end: 16px;
@@ -325,7 +359,7 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
 .ant-steps .ant-steps-item-icon {
   width: 28px;
   height: 28px;
-  margin-top: 4px;
+  margin-top: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -410,7 +444,7 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
 .ant-steps.ant-steps-vertical .ant-steps-item-icon {
   width: 28px;
   height: 28px;
-  margin-top: 4px;
+  margin-top: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -473,6 +507,10 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
 .ant-table-wrapper .ant-table-footer td {
   padding: 12px 8px;
 }
+[class$='-basic-table'] {
+  max-width: 100%;
+  height: 100%;
+}
 [class$='-basic-table-form-container'] {
   padding: 16px;
 }
@@ -492,3 +530,6 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
 [class$='-basic-table--inset'] .ant-table-wrapper {
   padding: 0;
 }
+[class$='-basic-table-row__striped'] td {
+  background-color: #fafafa;
+}

package/lib/src/theme/antd-global-overwrite/admin/modal.css

@@ -71,7 +71,7 @@
   min-width: 88px;
 }
 .ant-modal-root .ant-modal-confirm .ant-modal-body {
-  padding: 28px 32px !important;
+  padding: 32px 32px 28px !important;
 }
 .ant-modal-root .ant-modal-confirm .ant-modal-body .ant-modal-confirm-body > .anticon {
   margin-inline-end: 16px;

package/lib/src/theme/antd-global-overwrite/admin/steps.css

@@ -7,7 +7,7 @@
 .ant-steps .ant-steps-item-icon {
   width: 28px;
   height: 28px;
-  margin-top: 4px;
+  margin-top: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -92,7 +92,7 @@
 .ant-steps.ant-steps-vertical .ant-steps-item-icon {
   width: 28px;
   height: 28px;
-  margin-top: 4px;
+  margin-top: 3px;
   display: flex;
   justify-content: center;
   align-items: center;

package/lib/src/theme/antd-global-overwrite/admin/table.css

@@ -52,6 +52,10 @@
 .ant-table-wrapper .ant-table-footer td {
   padding: 12px 8px;
 }
+[class$='-basic-table'] {
+  max-width: 100%;
+  height: 100%;
+}
 [class$='-basic-table-form-container'] {
   padding: 16px;
 }
@@ -71,3 +75,6 @@
 [class$='-basic-table--inset'] .ant-table-wrapper {
   padding: 0;
 }
+[class$='-basic-table-row__striped'] td {
+  background-color: #fafafa;
+}

package/lib/src/theme/antd-global-overwrite/aplus/alert.css

@@ -1,25 +1,47 @@
 .ant-alert {
+  align-items: flex-start;
   width: 100%;
-  height: 32px;
-  margin: 0 0 4px;
-  padding: 7px 12px;
-  line-height: 32px;
+  padding: 6px 12px;
   border-radius: 4px;
 }
 .ant-alert .ant-alert-icon {
-  font-size: 14px;
+  font-size: 16px;
+  transform: translateY(1px);
+  margin-inline-end: 8px;
 }
 .ant-alert .ant-alert-message {
   color: #182948;
+  font-weight: normal !important;
   font-size: 12px;
-  line-height: 12px;
+  line-height: 18px;
 }
 .ant-alert .ant-alert-message .href {
   color: #0070ff;
   cursor: pointer;
 }
 .ant-alert .ant-alert-description {
+  color: #182948;
   font-weight: normal;
   font-size: 12px;
   line-height: 18px;
 }
+.ant-alert-with-description .ant-alert-message {
+  margin-bottom: 4px;
+  font-weight: bold !important;
+}
+.ant-alert-warning {
+  background: rgba(255, 169, 64, 0.1);
+  border: 1px solid rgba(255, 169, 64, 0.4);
+}
+.ant-alert-info {
+  background: rgba(0, 112, 255, 0.1);
+  border: 1px solid rgba(0, 112, 255, 0.4);
+}
+.ant-alert-success {
+  background: rgba(46, 209, 163, 0.1);
+  border: 1px solid rgba(46, 209, 163, 0.4);
+}
+.ant-alert-error {
+  background: rgba(255, 77, 79, 0.1);
+  border: 1px solid rgba(255, 77, 79, 0.4);
+}

package/lib/src/theme/antd-global-overwrite/aplus/form.css

@@ -17,6 +17,10 @@
 .ant-form .ant-form-item-control .ant-radio-wrapper .ant-radio.ant-radio-checked .ant-radio-inner::after {
   background-color: #0070ff;
 }
+.ant-form .ant-form-item-control .ant-select.ant-select-disabled .ant-select-selector {
+  color: #526a90;
+  background-color: #f2f6f9;
+}
 .ant-input::-moz-placeholder {
   color: #abb7cc;
 }
@@ -38,20 +42,49 @@
 .ant-input-number .ant-input-number-input-wrap > input::placeholder {
   color: #abb7cc;
 }
-div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.custom-form-action-container .ant-form-item-control-input-content {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+input.ant-input[disabled] {
+  color: #526a90;
 }
-div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.custom-form-action-container .ant-form-item-control-input-content button.ant-btn-primary {
-  order: 1;
-  margin-right: 0.5rem;
+span.ant-input-affix-wrapper-disabled {
+  background-color: #f2f6f9;
 }
-div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.custom-form-action-container .ant-form-item-control-input-content button.ant-btn-default {
-  order: 2;
-  margin-right: 0.5rem;
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item {
+  margin-bottom: 16px;
+  /** 适配Aplus UI */
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation {
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #dee4ed;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-label {
+  padding-left: 12px;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-label label {
+  height: 30px;
+  color: #182948;
 }
-div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.custom-form-action-container .ant-form-item-control-input-content button.ant-btn-link {
-  order: 3;
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input {
+  min-height: 30px;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-select-selector,
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-input-affix-wrapper,
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-input-number,
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-picker {
+  height: 30px;
+  border: none;
+  border-color: #dee4ed;
+  box-shadow: none;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-input-number,
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-picker {
+  width: 100%;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.submit {
   margin-right: 0.5rem;
 }
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.reset {
+  margin-right: 0;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.collapse {
+  margin-left: 0.5rem;
+}

package/lib/src/theme/antd-global-overwrite/aplus/index.css

@@ -1,28 +1,50 @@
 .ant-alert {
+  align-items: flex-start;
   width: 100%;
-  height: 32px;
-  margin: 0 0 4px;
-  padding: 7px 12px;
-  line-height: 32px;
+  padding: 6px 12px;
   border-radius: 4px;
 }
 .ant-alert .ant-alert-icon {
-  font-size: 14px;
+  font-size: 16px;
+  transform: translateY(1px);
+  margin-inline-end: 8px;
 }
 .ant-alert .ant-alert-message {
   color: #182948;
+  font-weight: normal !important;
   font-size: 12px;
-  line-height: 12px;
+  line-height: 18px;
 }
 .ant-alert .ant-alert-message .href {
   color: #0070ff;
   cursor: pointer;
 }
 .ant-alert .ant-alert-description {
+  color: #182948;
   font-weight: normal;
   font-size: 12px;
   line-height: 18px;
 }
+.ant-alert-with-description .ant-alert-message {
+  margin-bottom: 4px;
+  font-weight: bold !important;
+}
+.ant-alert-warning {
+  background: rgba(255, 169, 64, 0.1);
+  border: 1px solid rgba(255, 169, 64, 0.4);
+}
+.ant-alert-info {
+  background: rgba(0, 112, 255, 0.1);
+  border: 1px solid rgba(0, 112, 255, 0.4);
+}
+.ant-alert-success {
+  background: rgba(46, 209, 163, 0.1);
+  border: 1px solid rgba(46, 209, 163, 0.4);
+}
+.ant-alert-error {
+  background: rgba(255, 77, 79, 0.1);
+  border: 1px solid rgba(255, 77, 79, 0.4);
+}
 .ant-btn {
   min-width: 88px;
   box-shadow: none;
@@ -80,6 +102,10 @@
 .ant-form .ant-form-item-control .ant-radio-wrapper .ant-radio.ant-radio-checked .ant-radio-inner::after {
   background-color: #0070ff;
 }
+.ant-form .ant-form-item-control .ant-select.ant-select-disabled .ant-select-selector {
+  color: #526a90;
+  background-color: #f2f6f9;
+}
 .ant-input::-moz-placeholder {
   color: #abb7cc;
 }
@@ -101,23 +127,52 @@
 .ant-input-number .ant-input-number-input-wrap > input::placeholder {
   color: #abb7cc;
 }
-div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.custom-form-action-container .ant-form-item-control-input-content {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+input.ant-input[disabled] {
+  color: #526a90;
 }
-div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.custom-form-action-container .ant-form-item-control-input-content button.ant-btn-primary {
-  order: 1;
-  margin-right: 0.5rem;
+span.ant-input-affix-wrapper-disabled {
+  background-color: #f2f6f9;
 }
-div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.custom-form-action-container .ant-form-item-control-input-content button.ant-btn-default {
-  order: 2;
-  margin-right: 0.5rem;
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item {
+  margin-bottom: 16px;
+  /** 适配Aplus UI */
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation {
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #dee4ed;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-label {
+  padding-left: 12px;
 }
-div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.custom-form-action-container .ant-form-item-control-input-content button.ant-btn-link {
-  order: 3;
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-label label {
+  height: 30px;
+  color: #182948;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input {
+  min-height: 30px;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-select-selector,
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-input-affix-wrapper,
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-input-number,
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-picker {
+  height: 30px;
+  border: none;
+  border-color: #dee4ed;
+  box-shadow: none;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-input-number,
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] .ant-form-item.aplus-ui-adaptation .ant-form-item-control-input .ant-picker {
+  width: 100%;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.submit {
   margin-right: 0.5rem;
 }
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.reset {
+  margin-right: 0;
+}
+div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] div.ant-col[tableaction] .ant-form-item-control-input-content button.collapse {
+  margin-left: 0.5rem;
+}
 .ant-message .ant-message-notice-content {
   padding: 10px 16px;
   /* 文字颜色/一级-333333 */
@@ -202,7 +257,7 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   min-width: 88px;
 }
 .ant-modal-root .ant-modal-confirm .ant-modal-body {
-  padding: 28px 32px !important;
+  padding: 32px 32px 28px !important;
 }
 .ant-modal-root .ant-modal-confirm .ant-modal-body .ant-modal-confirm-body > .anticon {
   margin-inline-end: 16px;
@@ -336,7 +391,7 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
 .ant-steps .ant-steps-item-icon {
   width: 28px;
   height: 28px;
-  margin-top: 4px;
+  margin-top: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -424,7 +479,7 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   justify-content: center;
   width: 28px;
   height: 28px;
-  margin-top: 4px;
+  margin-top: 3px;
 }
 .ant-steps.ant-steps-vertical.ant-steps-small .ant-steps-item .ant-steps-item-tail {
   inset-inline-start: 13px;
@@ -474,6 +529,7 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   font-style: normal;
   text-align: left;
   text-transform: none;
+  transition: unset;
 }
 .ant-table-wrapper .ant-table.ant-table-middle .ant-table-container .ant-table-thead tr > th {
   padding: 12px 16px;
@@ -499,3 +555,10 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   padding: 10.5px 16px;
   line-height: 18px;
 }
+[class$='-basic-table'] {
+  max-width: 100%;
+  height: 100%;
+}
+[class$='-basic-table-row__striped'] td {
+  background-color: #f6f9fa;
+}

package/lib/src/theme/antd-global-overwrite/aplus/modal.css

@@ -65,7 +65,7 @@
   min-width: 88px;
 }
 .ant-modal-root .ant-modal-confirm .ant-modal-body {
-  padding: 28px 32px !important;
+  padding: 32px 32px 28px !important;
 }
 .ant-modal-root .ant-modal-confirm .ant-modal-body .ant-modal-confirm-body > .anticon {
   margin-inline-end: 16px;

package/lib/src/theme/antd-global-overwrite/aplus/steps.css

@@ -7,7 +7,7 @@
 .ant-steps .ant-steps-item-icon {
   width: 28px;
   height: 28px;
-  margin-top: 4px;
+  margin-top: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -95,7 +95,7 @@
   justify-content: center;
   width: 28px;
   height: 28px;
-  margin-top: 4px;
+  margin-top: 3px;
 }
 .ant-steps.ant-steps-vertical.ant-steps-small .ant-steps-item .ant-steps-item-tail {
   inset-inline-start: 13px;

package/lib/src/theme/antd-global-overwrite/aplus/table.css

@@ -42,6 +42,7 @@
   font-style: normal;
   text-align: left;
   text-transform: none;
+  transition: unset;
 }
 .ant-table-wrapper .ant-table.ant-table-middle .ant-table-container .ant-table-thead tr > th {
   padding: 12px 16px;
@@ -67,3 +68,10 @@
   padding: 10.5px 16px;
   line-height: 18px;
 }
+[class$='-basic-table'] {
+  max-width: 100%;
+  height: 100%;
+}
+[class$='-basic-table-row__striped'] td {
+  background-color: #f6f9fa;
+}

package/lib/src/theme/ap-table/ap-table.css

@@ -0,0 +1,14 @@
+.aplus-ap-table-wrapper {
+  padding: 16px;
+  background-color: #fff;
+}
+.aplus-ap-table__search-wrapper {
+  padding: 16px;
+  padding-bottom: 0;
+  background-color: #fff;
+  margin-bottom: 16px;
+}
+.aplus-ap-table__form-wrapper {
+  padding: 16px;
+  background-color: #fff;
+}