UNPKG

tesler-form-builder

Version:

Tesler form-builder based on formily (designable)

1,852 lines (1,838 loc) 801 kB
.ant-formily-array-base-remove, .ant-formily-array-base-copy { transition: all 0.25s ease-in-out; color: rgba(0, 0, 0, 0.85); font-size: 16px; } .ant-formily-array-base-remove:hover, .ant-formily-array-base-copy:hover { color: #40a9ff; } .ant-formily-array-base-remove-disabled, .ant-formily-array-base-copy-disabled { color: rgba(0, 0, 0, 0.25); cursor: not-allowed !important; } .ant-formily-array-base-remove-disabled:hover, .ant-formily-array-base-copy-disabled:hover { color: rgba(0, 0, 0, 0.25); } .ant-formily-array-base-sort-handle { cursor: move; color: #888 !important; } .ant-formily-array-base-addition { transition: all 0.25s ease-in-out; } .ant-formily-array-base-move-down { transition: all 0.25s ease-in-out; color: rgba(0, 0, 0, 0.85); font-size: 16px; margin-left: 6px; } .ant-formily-array-base-move-down:hover { color: #40a9ff; } .ant-formily-array-base-move-down-disabled { color: rgba(0, 0, 0, 0.25); cursor: not-allowed !important; } .ant-formily-array-base-move-down-disabled:hover { color: rgba(0, 0, 0, 0.25); } .ant-formily-array-base-move-up { transition: all 0.25s ease-in-out; color: rgba(0, 0, 0, 0.85); font-size: 16px; margin-left: 6px; } .ant-formily-array-base-move-up:hover { color: #40a9ff; } .ant-formily-array-base-move-up-disabled { color: rgba(0, 0, 0, 0.25); cursor: not-allowed !important; } .ant-formily-array-base-move-up-disabled:hover { color: rgba(0, 0, 0, 0.25); } .ant-formily-array-cards-item { margin-bottom: 10px !important; } .ant-card-extra .ant-formily-array-base-copy { margin-left: 6px; } .ant-formily-array-collapse-item { margin-bottom: 10px !important; } .ant-formily-array-items-item-inner { visibility: visible; } .ant-formily-array-items-item { z-index: 100000; } .ant-formily-array-items-card { display: flex; border: 1px solid #f0f0f0; margin-bottom: 10px; padding: 3px 6px; background: #fff; justify-content: space-between; color: rgba(0, 0, 0, 0.85); } .ant-formily-array-items-card .ant-formily-item:not(.ant-formily-item-feedback-layout-popover) { margin-bottom: 0 !important; } .ant-formily-array-items-card .ant-formily-item:not(.ant-formily-item-feedback-layout-popover) .ant-formily-item-help { position: absolute; font-size: 12px; top: 100%; background: #fff; width: 100%; margin-top: 3px; padding: 3px; z-index: 1; border-radius: 3px; box-shadow: 0 0 10px #f0f0f0; } .ant-formily-array-items-divide { display: flex; border-bottom: 1px solid #f0f0f0; padding: 10px 0; justify-content: space-between; } .ant-formily-array-items-divide .ant-formily-item:not(.ant-formily-item-feedback-layout-popover) { margin-bottom: 0 !important; } .ant-formily-array-items-divide .ant-formily-item:not(.ant-formily-item-feedback-layout-popover) .ant-formily-item-help { position: absolute; font-size: 12px; top: 100%; background: #fff; width: 100%; margin-top: 3px; padding: 3px; z-index: 1; border-radius: 3px; box-shadow: 0 0 10px #f0f0f0; } .ant-formily-array-table .ant-formily-array-table-pagination { display: flex; justify-content: center; } .ant-formily-array-table .ant-formily-array-table-pagination .ant-formily-array-table-status-select.has-error .ant-select-selector { border-color: #ff4d4f !important; } .ant-formily-array-table .ant-table td { visibility: visible; } .ant-formily-array-table .ant-table td .ant-formily-item:not(.ant-formily-item-feedback-layout-popover) { margin-bottom: 0 !important; } .ant-formily-array-table .ant-table td .ant-formily-item:not(.ant-formily-item-feedback-layout-popover) .ant-formily-item-help { position: absolute; font-size: 12px; top: 100%; background: #fff; width: 100%; margin-top: 3px; padding: 3px; z-index: 1; border-radius: 3px; box-shadow: 0 0 10px #eee; -webkit-animation: none; animation: none; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .ant-formily-array-table .ant-formily-array-table-sort-helper { background: #fff; border: 1px solid #eee; z-index: 10; } .ant-formily-editable { cursor: pointer; display: inline-block !important; } .ant-formily-editable .ant-form-text .ant-tag { transition: none !important; } .ant-formily-editable .ant-form-text .ant-tag:last-child { margin-right: 0 !important; } .ant-formily-editable-content { display: flex; align-items: center; } .ant-formily-editable-content > * { margin-right: 3px; } .ant-formily-editable-content > *:last-child { margin-right: 0; } .ant-formily-editable .ant-formily-editable-edit-btn, .ant-formily-editable .ant-formily-editable-close-btn { transition: all 0.25s ease-in-out; color: #aaa; font-size: 12px; } .ant-formily-editable .ant-formily-editable-edit-btn:hover, .ant-formily-editable .ant-formily-editable-close-btn:hover { color: #40a9ff; } .ant-formily-editable .ant-form-text { display: flex; align-items: center; } .ant-formily-editable .ant-formily-editable-preview { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; max-width: 100px; display: block; } .ant-formily-button-group-sticky { padding: 10px 0; border-top: 1px solid #f0f0f0; z-index: 999; } .ant-formily-button-group-sticky-inner { display: flex; } .ant-formily-button-group-sticky-inner .ant-formily-item { flex: 2 1; } .ant-formily-grid-layout { display: grid; } .ant-formily-item .ant-formily-item-item-col-24 { flex: 0 0 100%; max-width: 100%; } .ant-formily-item .ant-formily-item-item-col-23 { flex: 0 0 95.83333333%; max-width: 95.83333333%; } .ant-formily-item .ant-formily-item-item-col-22 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .ant-formily-item .ant-formily-item-item-col-21 { flex: 0 0 87.5%; max-width: 87.5%; } .ant-formily-item .ant-formily-item-item-col-20 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .ant-formily-item .ant-formily-item-item-col-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%; } .ant-formily-item .ant-formily-item-item-col-18 { flex: 0 0 75%; max-width: 75%; } .ant-formily-item .ant-formily-item-item-col-17 { flex: 0 0 70.83333333%; max-width: 70.83333333%; } .ant-formily-item .ant-formily-item-item-col-16 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .ant-formily-item .ant-formily-item-item-col-15 { flex: 0 0 62.5%; max-width: 62.5%; } .ant-formily-item .ant-formily-item-item-col-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .ant-formily-item .ant-formily-item-item-col-13 { flex: 0 0 54.16666667%; max-width: 54.16666667%; } .ant-formily-item .ant-formily-item-item-col-12 { flex: 0 0 50%; max-width: 50%; } .ant-formily-item .ant-formily-item-item-col-11 { flex: 0 0 45.83333333%; max-width: 45.83333333%; } .ant-formily-item .ant-formily-item-item-col-10 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .ant-formily-item .ant-formily-item-item-col-9 { flex: 0 0 37.5%; max-width: 37.5%; } .ant-formily-item .ant-formily-item-item-col-8 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .ant-formily-item .ant-formily-item-item-col-7 { flex: 0 0 29.16666667%; max-width: 29.16666667%; } .ant-formily-item .ant-formily-item-item-col-6 { flex: 0 0 25%; max-width: 25%; } .ant-formily-item .ant-formily-item-item-col-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; } .ant-formily-item .ant-formily-item-item-col-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .ant-formily-item .ant-formily-item-item-col-3 { flex: 0 0 12.5%; max-width: 12.5%; } .ant-formily-item .ant-formily-item-item-col-2 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .ant-formily-item .ant-formily-item-item-col-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; } .ant-formily-item .ant-formily-item-item-col-0 { display: none; } @-webkit-keyframes antShowHelpIn { 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .ant-formily-item-help-appear, .ant-formily-item-help-enter { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-formily-item-help-appear.ant-formily-item-help-appear-active, .ant-formily-item-help-enter.ant-formily-item-help-enter-active { -webkit-animation-name: antShowHelpIn; animation-name: antShowHelpIn; -webkit-animation-play-state: running; animation-play-state: running; } .ant-formily-item-help-appear, .ant-formily-item-help-enter { opacity: 0; } .ant-formily-item-help-appear, .ant-formily-item-help-enter { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } @keyframes antShowHelpIn { 0% { -webkit-transform: translateY(-5px); transform: translateY(-5px); opacity: 0; } to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes antShowHelpOut { to { -webkit-transform: translateY(-5px); transform: translateY(-5px); opacity: 0; } } @keyframes antShowHelpOut { to { -webkit-transform: translateY(-5px); transform: translateY(-5px); opacity: 0; } } .ant-formily-item { display: flex; margin-bottom: 22px; position: relative; font-size: 14px; } .ant-formily-item-label { line-height: 32px; min-height: 30px; } .ant-formily-item-label label { cursor: text; } .ant-formily-item textarea.ant-input { height: auto; } .ant-formily-item .ant-upload { background: transparent; } .ant-formily-item .ant-upload.ant-upload-drag { background: #fafafa; } .ant-formily-item input[type='radio'], .ant-formily-item input[type='checkbox'] { width: 14px; height: 14px; } .ant-formily-item .ant-radio-inline, .ant-formily-item .ant-checkbox-inline { display: inline-block; margin-left: 8px; font-weight: normal; vertical-align: middle; cursor: pointer; } .ant-formily-item .ant-radio-inline:first-child, .ant-formily-item .ant-checkbox-inline:first-child { margin-left: 0; } .ant-formily-item .ant-checkbox-vertical, .ant-formily-item .ant-radio-vertical { display: block; } .ant-formily-item .ant-checkbox-vertical + .ant-checkbox-vertical, .ant-formily-item .ant-radio-vertical + .ant-radio-vertical { margin-left: 0; } .ant-formily-item .ant-input-number { width: 100%; } .ant-formily-item .ant-input-number + .ant-form-text { margin-left: 8px; } .ant-formily-item .ant-input-number-handler-wrap { z-index: 2; } .ant-formily-item .ant-select, .ant-formily-item .ant-cascader-picker, .ant-formily-item .ant-picker { width: 100%; } .ant-formily-item .ant-input-group .ant-select, .ant-formily-item .ant-input-group .ant-cascader-picker { width: auto; } .ant-formily-item-label { position: relative; display: flex; } .ant-formily-item-label-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ant-formily-item-label-tooltip { cursor: help; } .ant-formily-item-label-tooltip * { cursor: help; } .ant-formily-item-label-tooltip label { border-bottom: 1px dashed currentColor; } .ant-formily-item-label { color: rgba(0, 0, 0, 0.85); } .ant-formily-item-label-align-left > .ant-formily-item-label { justify-content: flex-start; } .ant-formily-item-label-align-right > .ant-formily-item-label { justify-content: flex-end; } .ant-formily-item-label-wrap .ant-formily-item-label label { white-space: pre-line; word-break: break-all; } .ant-formily-item-feedback-layout-terse { margin-bottom: 8px; } .ant-formily-item-feedback-layout-terse.ant-formily-item-feedback-has-text:not(.ant-formily-item-inset) { margin-bottom: 0; } .ant-formily-item-feedback-layout-loose { margin-bottom: 22px; } .ant-formily-item-feedback-layout-loose.ant-formily-item-feedback-has-text:not(.ant-formily-item-inset) { margin-bottom: 0; } .ant-formily-item-feedback-layout-none { margin-bottom: 0px; } .ant-formily-item-feedback-layout-none.ant-formily-item-feedback-has-text:not(.ant-formily-item-inset) { margin-bottom: 0; } .ant-formily-item-control { flex: 1 1; max-width: 100%; } .ant-formily-item-control .ant-formily-item-control-content { display: flex; } .ant-formily-item-control .ant-formily-item-control-content .ant-formily-item-control-content-component { width: 100%; min-height: 30px; line-height: 34px; } .ant-formily-item-control .ant-formily-item-control-content .ant-formily-item-control-content-component-has-feedback-icon { flex: 1 1; position: relative; display: flex; align-items: center; } .ant-formily-item-control .ant-formily-item-control-content .ant-formily-item-addon-before { margin-right: 8px; display: inline-flex; align-items: center; min-height: 32px; flex-shrink: 0; } .ant-formily-item-control .ant-formily-item-control-content .ant-formily-item-addon-after { margin-left: 8px; display: inline-flex; align-items: center; min-height: 32px; flex-shrink: 0; } .ant-formily-item-control .ant-formily-item-help, .ant-formily-item-control .ant-formily-item-extra { min-height: 22px; line-height: 22px; color: rgba(0, 0, 0, 0.45); } .ant-formily-item-size-small { font-size: 12px; line-height: 24px; } .ant-formily-item-size-small .ant-formily-item-label { line-height: 24px; min-height: 22px; } .ant-formily-item-size-small .ant-formily-item-control-content .ant-formily-item-control-content-component { min-height: 22px; line-height: 26px; } .ant-formily-item-size-small .ant-formily-item-help, .ant-formily-item-size-small .ant-formily-item-extra { min-height: 20px; line-height: 20px; } .ant-formily-item-size-small .ant-formily-item-control-content { min-height: 22px; } .ant-formily-item-size-small .ant-formily-item-label > label { height: 22px; } .ant-formily-item-size-small .ant-input-affix-wrapper, .ant-formily-item-size-small .ant-input-number, .ant-formily-item-size-small .ant-picker { padding: 0px 11px; } .ant-formily-item-size-small .ant-input-affix-wrapper input, .ant-formily-item-size-small .ant-input-number input, .ant-formily-item-size-small .ant-picker input { height: 22px; font-size: 12px; } .ant-formily-item-size-small .ant-cascader-picker { height: 22px; } .ant-formily-item-size-small .ant-cascader-picker input { padding: 0 7px; height: 22px; font-size: 12px; } .ant-formily-item-size-small .ant-select-single:not(.ant-select-customize-input) .ant-select-selector { padding: 0px 11px; height: 22px; font-size: 12px; line-height: 24px; } .ant-formily-item-size-small .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search { height: 24px; line-height: 22px; } .ant-formily-item-size-small .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input { height: 24px; line-height: 22px; } .ant-formily-item-size-small .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder { line-height: 22px; height: 24px; } .ant-formily-item-size-small .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item { line-height: 22px; height: 24px; } .ant-formily-item-size-small .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector { padding: 0px 2px; height: 22px; font-size: 12px; line-height: 24px; } .ant-formily-item-size-small .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector::after { height: 16px; line-height: 16px; } .ant-formily-item-size-small .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search { height: 16px; line-height: 16px; -webkit-margin-start: 0; margin-inline-start: 0; } .ant-formily-item-size-small .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input { height: 12px; line-height: 12px; } .ant-formily-item-size-small .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder { line-height: 16px; height: 16px; left: 4px; } .ant-formily-item-size-small .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-overflow-item { align-self: flex-start; } .ant-formily-item-size-small .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item { line-height: 14px; height: 16px; } .ant-formily-item-size-small.ant-formily-item-feedback-layout-terse { margin-bottom: 8px; } .ant-formily-item-size-small.ant-formily-item-feedback-layout-terse.ant-formily-item-feedback-has-text:not(.ant-formily-item-inset) { margin-bottom: 0; } .ant-formily-item-size-small.ant-formily-item-feedback-layout-loose { margin-bottom: 20px; } .ant-formily-item-size-small.ant-formily-item-feedback-layout-loose.ant-formily-item-feedback-has-text:not(.ant-formily-item-inset) { margin-bottom: 0; } .ant-formily-item-size-large { font-size: 16px; line-height: 40px; } .ant-formily-item-size-large .ant-formily-item-label { line-height: 40px; min-height: 38px; } .ant-formily-item-size-large .ant-formily-item-control-content .ant-formily-item-control-content-component { min-height: 38px; line-height: 40px; } .ant-formily-item-size-large .ant-formily-item-help, .ant-formily-item-size-large .ant-formily-item-extra { min-height: 24px; line-height: 24px; } .ant-formily-item-size-large .ant-formily-item-control-content { min-height: 38px; } .ant-formily-item-size-large .ant-input { font-size: 16px; } .ant-formily-item-size-large .ant-input-number { font-size: 16px; } .ant-formily-item-size-large .ant-input-number input { height: 38px; } .ant-formily-item-size-large .ant-input-affix-wrapper, .ant-formily-item-size-large .ant-picker { padding: 0px 11px; line-height: 38px; } .ant-formily-item-size-large .ant-input-affix-wrapper input, .ant-formily-item-size-large .ant-picker input { height: 38px; font-size: 16px; } .ant-formily-item-size-large .ant-btn { height: 40px; padding: 0px 8px; } .ant-formily-item-size-large .ant-radio-button-wrapper { height: 40px; line-height: 40px; } .ant-formily-item-size-large .ant-cascader-picker { height: 38px; } .ant-formily-item-size-large .ant-cascader-picker input { padding: 0px 11px; height: 38px; font-size: 16px; } .ant-formily-item-size-large .ant-select-single:not(.ant-select-customize-input) .ant-select-selector { padding: 0px 11px; height: 40px; font-size: 16px; line-height: 40px; } .ant-formily-item-size-large .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search { height: 40px; line-height: 38px; } .ant-formily-item-size-large .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input { height: 40px; line-height: 38px; } .ant-formily-item-size-large .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder { line-height: 38px; height: 40px; } .ant-formily-item-size-large .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item { line-height: 38px; height: 40px; } .ant-formily-item-size-large .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector { padding: 0px 2px; height: 38px; font-size: 16px; line-height: 40px; } .ant-formily-item-size-large .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector::after { height: 32px; line-height: 32px; } .ant-formily-item-size-large .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search { height: 32px; line-height: 32px; } .ant-formily-item-size-large .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input { height: 28px; line-height: 28px; } .ant-formily-item-size-large .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder { line-height: 32px; height: 32px; } .ant-formily-item-size-large .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-overflow-item { align-self: flex-start; } .ant-formily-item-size-large .ant-select-multiple:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item { line-height: 30px; height: 32px; } .ant-formily-item-size-large.ant-formily-item-feedback-layout-terse { margin-bottom: 8px; } .ant-formily-item-size-large.ant-formily-item-feedback-layout-terse.ant-formily-item-feedback-has-text:not(.ant-formily-item-inset) { margin-bottom: 0; } .ant-formily-item-size-large.ant-formily-item-feedback-layout-loose { margin-bottom: 24px; } .ant-formily-item-size-large.ant-formily-item-feedback-layout-loose.ant-formily-item-feedback-has-text:not(.ant-formily-item-inset) { margin-bottom: 0; } .ant-formily-item-layout-vertical { display: block; } .ant-formily-item-layout-vertical .ant-formily-item-label { min-height: 22px; line-height: 1.5715; } .ant-formily-item-feedback-layout-popover { margin-bottom: 8px; } .ant-formily-item-label-tooltip-icon { margin-left: 4px; color: #00000073; display: flex; align-items: center; max-height: 32px; } .ant-formily-item-label-tooltip-icon span { display: inline-flex; } .ant-formily-item-control-align-left .ant-formily-item-control-content { justify-content: flex-start; } .ant-formily-item-control-align-right .ant-formily-item-control-content { justify-content: flex-end; } .ant-formily-item-control-wrap .ant-formily-item-control { white-space: pre-line; word-break: break-all; } .ant-formily-item-asterisk { color: #ff4d4f; margin-right: 4px; display: inline-block; font-family: SimSun, sans-serif; } .ant-formily-item-colon { margin-left: 2px; margin-right: 8px; } .ant-formily-item-help, .ant-formily-item-extra { clear: both; min-height: 22px; color: rgba(0, 0, 0, 0.45); transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); padding-top: 0px; } .ant-formily-item-fullness > .ant-formily-item-control > .ant-formily-item-control-content > .ant-formily-item-control-content-component > *:first-child { width: 100%; } .ant-formily-item-control-content-component-has-feedback-icon { border-radius: 2px; border: 1px solid #d9d9d9; padding-right: 8px; transition: all 0.3s; touch-action: manipulation; outline: none; } .ant-formily-item-control-content-component-has-feedback-icon .ant-input-number, .ant-formily-item-control-content-component-has-feedback-icon .ant-picker, .ant-formily-item-control-content-component-has-feedback-icon .ant-cascader-picker:focus .ant-cascader-input, .ant-formily-item-control-content-component-has-feedback-icon .ant-select:not(.ant-select-customize-input) .ant-select-selector, .ant-formily-item-control-content-component-has-feedback-icon .ant-input-affix-wrapper, .ant-formily-item-control-content-component-has-feedback-icon .ant-input { border: none !important; box-shadow: none !important; } .ant-formily-item-bordered-none .ant-input-number, .ant-formily-item-bordered-none .ant-input-affix-wrapper, .ant-formily-item-bordered-none .ant-picker, .ant-formily-item-bordered-none .ant-cascader-picker:focus .ant-cascader-input, .ant-formily-item-bordered-none .ant-select:not(.ant-select-customize-input) .ant-select-selector, .ant-formily-item-bordered-none .ant-input { border: none !important; box-shadow: none !important; } .ant-formily-item-bordered-none .ant-input-number-handler-wrap { border: none !important; } .ant-formily-item-bordered-none .ant-input-number-handler-wrap .ant-input-number-handler { border: none !important; } .ant-formily-item-inset { border-radius: 2px; border: 1px solid #d9d9d9; padding-left: 12px; transition: 0.3s all; } .ant-formily-item-inset .ant-input-number, .ant-formily-item-inset .ant-picker, .ant-formily-item-inset .ant-cascader-picker:focus .ant-cascader-input, .ant-formily-item-inset .ant-select:not(.ant-select-customize-input) .ant-select-selector, .ant-formily-item-inset .ant-input-affix-wrapper, .ant-formily-item-inset .ant-input { border: none !important; box-shadow: none !important; } .ant-formily-item-inset .ant-input-number-handler-wrap { border: none !important; } .ant-formily-item-inset .ant-input-number-handler-wrap .ant-input-number-handler { border: none !important; } .ant-formily-item-inset:hover { border-color: #40a9ff; border-right-width: 1px; } .ant-formily-item-inset-active { border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-active .ant-formily-item-control-content-component-has-feedback-icon { border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-active .ant-input-number, .ant-formily-item-active .ant-picker, .ant-formily-item-active .ant-cascader-picker:focus .ant-cascader-input, .ant-formily-item-active .ant-select:not(.ant-select-customize-input) .ant-select-selector, .ant-formily-item-active .ant-input { border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item:hover .ant-formily-item-control-content-component-has-feedback-icon { border-color: #40a9ff; border-right-width: 1px; } .ant-formily-item-error .ant-select-selector, .ant-formily-item-error .ant-cascader-picker, .ant-formily-item-error .ant-picker, .ant-formily-item-error .ant-input, .ant-formily-item-error .ant-input-number, .ant-formily-item-error .ant-input-affix-wrapper, .ant-formily-item-error .ant-input-affix-wrapper, .ant-formily-item-error .ant-input { border-color: #ff4d4f !important; } .ant-formily-item-error .ant-select-selector, .ant-formily-item-error .ant-cascader-picker, .ant-formily-item-error .ant-picker, .ant-formily-item-error .ant-input, .ant-formily-item-error .ant-input-number, .ant-formily-item-error .ant-input-affix-wrapper, .ant-formily-item-error .ant-input-affix-wrapper:hover, .ant-formily-item-error .ant-input:hover { border-color: #ff4d4f !important; } .ant-formily-item-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector { background-color: #fff; border-color: #ff4d4f !important; } .ant-formily-item-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-open .ant-select-selector, .ant-formily-item-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-focused .ant-select-selector { border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-error .ant-input-number, .ant-formily-item-error .ant-picker { background-color: #fff; border-color: #ff4d4f; } .ant-formily-item-error .ant-input-number-focused, .ant-formily-item-error .ant-picker-focused, .ant-formily-item-error .ant-input-number:focus, .ant-formily-item-error .ant-picker:focus { border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-error .ant-input-number:not([disabled]):hover, .ant-formily-item-error .ant-picker:not([disabled]):hover { background-color: #fff; border-color: #ff4d4f; } .ant-formily-item-error .ant-cascader-picker:focus .ant-cascader-input { background-color: #fff; border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-error .ant-input-affix-wrapper-focused, .ant-formily-item-error .ant-input-affix-wrapper:focus, .ant-formily-item-error .ant-input-focused, .ant-formily-item-error .ant-input:focus { border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-error-help { color: #ff4d4f !important; } .ant-formily-item-warning-help { color: #faad14 !important; } .ant-formily-item-success-help { color: #52c41a !important; } .ant-formily-item-warning .ant-select-selector, .ant-formily-item-warning .ant-cascader-picker, .ant-formily-item-warning .ant-picker, .ant-formily-item-warning .ant-input, .ant-formily-item-warning .ant-input-number, .ant-formily-item-warning .ant-input-affix-wrapper, .ant-formily-item-warning .ant-input-affix-wrapper, .ant-formily-item-warning .ant-input { border-color: #faad14 !important; } .ant-formily-item-warning .ant-select-selector, .ant-formily-item-warning .ant-cascader-picker, .ant-formily-item-warning .ant-picker, .ant-formily-item-warning .ant-input, .ant-formily-item-warning .ant-input-number, .ant-formily-item-warning .ant-input-affix-wrapper, .ant-formily-item-warning .ant-input-affix-wrapper:hover, .ant-formily-item-warning .ant-input:hover { border-color: #faad14 !important; } .ant-formily-item-warning .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector { background-color: #fff; border-color: #faad14 !important; } .ant-formily-item-warning .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-open .ant-select-selector, .ant-formily-item-warning .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input).ant-select-focused .ant-select-selector { border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-warning .ant-input-number, .ant-formily-item-warning .ant-picker { background-color: #fff; border-color: #faad14; } .ant-formily-item-warning .ant-input-number-focused, .ant-formily-item-warning .ant-picker-focused, .ant-formily-item-warning .ant-input-number:focus, .ant-formily-item-warning .ant-picker:focus { border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-warning .ant-input-number:not([disabled]):hover, .ant-formily-item-warning .ant-picker:not([disabled]):hover { background-color: #fff; border-color: #faad14; } .ant-formily-item-warning .ant-cascader-picker:focus .ant-cascader-input { background-color: #fff; border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-warning .ant-input-affix-wrapper-focused, .ant-formily-item-warning .ant-input-affix-wrapper:focus, .ant-formily-item-warning .ant-input-focused, .ant-formily-item-warning .ant-input:focus { border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); border-right-width: 1px; outline: 0; } .ant-formily-item-success .ant-select-selector, .ant-formily-item-success .ant-cascader-picker, .ant-formily-item-success .ant-picker, .ant-formily-item-success .ant-input, .ant-formily-item-success .ant-input-number, .ant-formily-item-success .ant-input-affix-wrapper, .ant-formily-item-success .ant-input-affix-wrapper, .ant-formily-item-success .ant-input { border-color: #52c41a !important; } .ant-formily-item-success .ant-select-selector, .ant-formily-item-success .ant-cascader-picker, .ant-formily-item-success .ant-picker, .ant-formily-item-success .ant-input, .ant-formily-item-success .ant-input-number, .ant-formily-item-success .ant-input-affix-wrapper, .ant-formily-item-success .ant-input-affix-wrapper:hover, .ant-formily-item-success .ant-input:hover { border-color: #52c41a !important; } .ant-formily-item-success .ant-input-affix-wrapper-focused, .ant-formily-item-success .ant-input-affix-wrapper:focus, .ant-formily-item-success .ant-input-focused, .ant-formily-item-success .ant-input:focus { border-color: #52c41a !important; border-right-width: 1px !important; outline: 0; } .ant-form-text { font-size: 14px; font-weight: 500; } .ant-form-text .ant-tag:last-child { margin-right: 0; } .ant-formily-select-table .ant-formily-select-table-search { margin-bottom: 8px; } [class^=ant-]::-ms-clear, [class*= ant-]::-ms-clear, [class^=ant-] input::-ms-clear, [class*= ant-] input::-ms-clear, [class^=ant-] input::-ms-reveal, [class*= ant-] input::-ms-reveal { display: none; } /* stylelint-disable property-no-vendor-prefix, at-rule-no-vendor-prefix */ html, body { width: 100%; height: 100%; } input::-ms-clear, input::-ms-reveal { display: none; } *, *::before, *::after { box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { margin: 0; color: rgba(0, 0, 0, 0.85); font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-variant: tabular-nums; line-height: 1.5715; background-color: #fff; -webkit-font-feature-settings: 'tnum', "tnum"; font-feature-settings: 'tnum', "tnum"; } [tabindex='-1']:focus { outline: none !important; } hr { box-sizing: content-box; height: 0; overflow: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5em; color: rgba(0, 0, 0, 0.85); font-weight: 500; } p { margin-top: 0; margin-bottom: 1em; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; border-bottom: 0; cursor: help; } address { margin-bottom: 1em; font-style: normal; line-height: inherit; } input[type='text'], input[type='password'], input[type='number'], textarea { -webkit-appearance: none; } ol, ul, dl { margin-top: 0; margin-bottom: 1em; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 500; } dd { margin-bottom: 0.5em; margin-left: 0; } blockquote { margin: 0 0 1em; } dfn { font-style: italic; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } a { color: #1890ff; text-decoration: none; background-color: transparent; outline: none; cursor: pointer; transition: color 0.3s; -webkit-text-decoration-skip: objects; } a:hover { color: #40a9ff; } a:active { color: #096dd9; } a:active, a:hover { text-decoration: none; outline: 0; } a:focus { text-decoration: none; outline: 0; } a[disabled] { color: rgba(0, 0, 0, 0.25); cursor: not-allowed; } pre, code, kbd, samp { font-size: 1em; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; } pre { margin-top: 0; margin-bottom: 1em; overflow: auto; } figure { margin: 0 0 1em; } img { vertical-align: middle; border-style: none; } a, area, button, [role='button'], input:not([type='range']), label, select, summary, textarea { touch-action: manipulation; } table { border-collapse: collapse; } caption { padding-top: 0.75em; padding-bottom: 0.3em; color: rgba(0, 0, 0, 0.45); text-align: left; caption-side: bottom; } input, button, select, optgroup, textarea { margin: 0; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { padding: 0; border-style: none; } input[type='radio'], input[type='checkbox'] { box-sizing: border-box; padding: 0; } input[type='date'], input[type='time'], input[type='datetime-local'], input[type='month'] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; margin-bottom: 0.5em; padding: 0; color: inherit; font-size: 1.5em; line-height: inherit; white-space: normal; } progress { vertical-align: baseline; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { outline-offset: -2px; -webkit-appearance: none; } [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; } template { display: none; } [hidden] { display: none !important; } mark { padding: 0.2em; background-color: #feffe6; } ::selection { color: #fff; background: #1890ff; } .clearfix::before { display: table; content: ''; } .clearfix::after { display: table; clear: both; content: ''; } .anticon { display: inline-block; color: inherit; font-style: normal; line-height: 0; text-align: center; text-transform: none; vertical-align: -0.125em; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .anticon > * { line-height: 1; } .anticon svg { display: inline-block; } .anticon::before { display: none; } .anticon .anticon-icon { display: block; } .anticon > .anticon { line-height: 0; vertical-align: 0; } .anticon[tabindex] { cursor: pointer; } .anticon-spin, .anticon-spin::before { display: inline-block; -webkit-animation: loadingCircle 1s infinite linear; animation: loadingCircle 1s infinite linear; } .ant-fade-enter, .ant-fade-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-fade-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-fade-enter.ant-fade-enter-active, .ant-fade-appear.ant-fade-appear-active { -webkit-animation-name: antFadeIn; animation-name: antFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .ant-fade-leave.ant-fade-leave-active { -webkit-animation-name: antFadeOut; animation-name: antFadeOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .ant-fade-enter, .ant-fade-appear { opacity: 0; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .ant-fade-leave { -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes antFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes antFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes antFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes antFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .ant-move-up-enter, .ant-move-up-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-move-up-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-move-up-enter.ant-move-up-enter-active, .ant-move-up-appear.ant-move-up-appear-active { -webkit-animation-name: antMoveUpIn; animation-name: antMoveUpIn; -webkit-animation-play-state: running; animation-play-state: running; } .ant-move-up-leave.ant-move-up-leave-active { -webkit-animation-name: antMoveUpOut; animation-name: antMoveUpOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .ant-move-up-enter, .ant-move-up-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); } .ant-move-up-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } .ant-move-down-enter, .ant-move-down-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-move-down-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-move-down-enter.ant-move-down-enter-active, .ant-move-down-appear.ant-move-down-appear-active { -webkit-animation-name: antMoveDownIn; animation-name: antMoveDownIn; -webkit-animation-play-state: running; animation-play-state: running; } .ant-move-down-leave.ant-move-down-leave-active { -webkit-animation-name: antMoveDownOut; animation-name: antMoveDownOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .ant-move-down-enter, .ant-move-down-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); } .ant-move-down-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } .ant-move-left-enter, .ant-move-left-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-move-left-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-move-left-enter.ant-move-left-enter-active, .ant-move-left-appear.ant-move-left-appear-active { -webkit-animation-name: antMoveLeftIn; animation-name: antMoveLeftIn; -webkit-animation-play-state: running; animation-play-state: running; } .ant-move-left-leave.ant-move-left-leave-active { -webkit-animation-name: antMoveLeftOut; animation-name: antMoveLeftOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .ant-move-left-enter, .ant-move-left-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); } .ant-move-left-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } .ant-move-right-enter, .ant-move-right-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-move-right-leave { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; } .ant-move-right-enter.ant-move-right-enter-active, .ant-move-right-appear.ant-move-right-appear-active { -webkit-animation-name: antMoveRightIn; animation-name: antMoveRightIn; -webkit-animation-play-state: running; animation-play-state: running; } .ant-move-right-leave.ant-move-right-leave-active { -webkit-animation-name: antMoveRightOut; animation-name: antMoveRightOut; -webkit-animation-play-state: running; animation-play-state: running; pointer-events: none; } .ant-move-right-enter, .ant-move-right-appear { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); } .ant-move-right-leave { -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); } @-webkit-keyframes antMoveDownIn { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } } @keyframes antMoveDownIn { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } } @-webkit-keyframes antMoveDownOut { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } } @keyframes antMoveDownOut { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } } @-webkit-keyframes antMoveLeftIn { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } } @keyframes antMoveLeftIn { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } } @-webkit-keyframes antMoveLeftOut { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } } @keyframes antMoveLeftOut { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } } @-webkit-keyframes antMoveRightIn { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } } @keyframes antMoveRightIn { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } } @-webkit-keyframes antMoveRightOut { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } } @keyframes antMoveRightOut { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 1; } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; opacity: 0; } } @-webkit-keyframes antMo