UNPKG

@syncfusion/ej2-inplace-editor

Version:

A package of Essential JS 2 Inplace editor components, which is used to edit and update the value dynamically in server.

657 lines (633 loc) 21.1 kB
/* stylelint-disable property-no-vendor-prefix */ @-webkit-keyframes e-input-ripple { 100% { opacity: 0; -webkit-transform: scale(4); transform: scale(4); } } @keyframes e-input-ripple { 100% { opacity: 0; -webkit-transform: scale(4); transform: scale(4); } } @-webkit-keyframes slideTopUp { from { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } to { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } } @keyframes slideTopUp { from { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } to { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } } /* stylelint-disable-line no-empty-source */ /*! calendar material theme variables */ .e-ddl.e-control-wrapper .e-ddl-icon::before { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; } .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; } .e-dropdownbase .e-list-item.e-active.e-hover { color: #e3165b; } .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active, .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover, .e-input-group:not(.e-disabled) .e-back-icon:active, .e-input-group:not(.e-disabled) .e-back-icon:hover, .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active, .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover { background: transparent; } .e-input-group .e-ddl-icon:not(:active)::after { -webkit-animation: none; animation: none; } .e-ddl.e-popup { border: 0; -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); margin-top: 2px; } .e-popup.e-ddl .e-dropdownbase { min-height: 26px; } .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon { margin: 6px 6px 5px; min-height: 12px; min-width: 12px; padding: 6px; } .e-input-group.e-ddl, .e-input-group.e-ddl .e-input, .e-input-group.e-ddl .e-ddl-icon { background: transparent; } .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left), .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) { border-bottom-width: 0; } .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon, .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon, .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon { margin: 0; } .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter, .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter, .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter, .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter, .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter { padding: 5px 5px 5px 12px; } .e-ddl.e-popup.e-outline .e-filter-parent { padding: 4px 8px; } .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] { padding: 1px 0; } .e-small .e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text], .e-small.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] { padding: 0; } .e-multiselect.e-input-group .e-multi-select-wrapper .e-multiselect-box input[type=text], .e-multiselect.e-input-group.e-input-focus .e-multi-select-wrapper .e-searcher:not(.e-zero-size) input[type=text] { padding: 0; } .e-outline.e-multiselect.e-input-group.e-checkbox .e-multi-select-wrapper input[type=text] { padding: 0 8px 0 9px; } .e-outline.e-multiselect.e-input-group .e-multi-select-wrapper .e-multiselect-box input[type=text], .e-outline.e-multiselect.e-input-group.e-input-focus .e-multi-select-wrapper .e-searcher:not(.e-zero-size) input[type=text] { padding: 0 8px 0 9px; } /* stylelint-disable property-no-vendor-prefix */ @-webkit-keyframes material-spinner-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes material-spinner-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes fabric-spinner-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fabric-spinner-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*! Material theme definitions and variables */ /*! Value element styles */ /*! Tooltip styles */ /*! Tip Content styles */ /*! Title styles */ /*! Wrapper styles */ /*! Component group styles */ /*! Button styles */ /*! inplaceeditor icons */ .e-inplaceeditor .e-save-icon::before, .e-inplaceeditor-tip .e-save-icon::before { content: "\e614"; } .e-inplaceeditor .e-cancel-icon::before, .e-inplaceeditor-tip .e-cancel-icon::before { content: "\eb36"; } .e-inplaceeditor .e-editable-overlay-icon::before, .e-inplaceeditor-tip .e-editable-overlay-icon::before { content: "\e891"; } .e-inplaceeditor { display: inline-block; position: relative; width: auto; } .e-inplaceeditor .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide { display: block; visibility: hidden; } .e-inplaceeditor .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide { display: block; visibility: hidden; } .e-inplaceeditor .e-editable-value-wrapper { display: inline-block; padding: 6px 8px; position: relative; width: auto; word-break: break-word; } .e-inplaceeditor .e-editable-value-wrapper .e-editable-value { display: inline-block; font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont"; font-size: 13px; margin: 0 28px 0 0; } .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon { bottom: 0; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: inherit; position: absolute; right: 8px; top: 0; visibility: hidden; width: 18px; } .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon::before { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; } .e-inplaceeditor .e-editable-value-wrapper.e-hide { display: none; } .e-inplaceeditor .e-editable-value-wrapper.e-editable-open { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .e-inplaceeditor .e-editable-value-wrapper.e-loading { pointer-events: none; } .e-inplaceeditor .e-editable-value-wrapper .e-spinner-pane .e-spinner-inner { left: unset; right: 8px; } .e-inplaceeditor .e-editable-value-wrapper:hover .e-editable-overlay-icon { visibility: visible; } .e-inplaceeditor .e-editable-value-wrapper:hover.e-editable-open .e-editable-overlay-icon { visibility: hidden; } .e-inplaceeditor .e-editable-value-container { display: inline-block; padding: 6px 8px; position: relative; width: auto; word-break: break-word; } .e-inplaceeditor .e-editable-value-container .e-editable-value { display: inline-block; font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont"; font-size: 13px; margin: 0 28px 0 0; } .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon { bottom: 0; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: inherit; position: absolute; right: 8px; top: 0; visibility: hidden; width: 18px; } .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon::before { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; } .e-inplaceeditor .e-editable-value-container.e-hide { display: none; } .e-inplaceeditor .e-editable-value-container.e-editable-open { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .e-inplaceeditor .e-editable-value-container.e-loading { pointer-events: none; } .e-inplaceeditor .e-editable-value-container .e-spinner-pane .e-spinner-inner { left: unset; right: 8px; } .e-inplaceeditor .e-editable-value-container:hover .e-editable-overlay-icon { visibility: visible; } .e-inplaceeditor .e-editable-value-container:hover.e-editable-open .e-editable-overlay-icon { visibility: hidden; } .e-inplaceeditor .e-editable-action-buttons { margin-top: 4px; position: absolute; right: 0; z-index: 100; } .e-inplaceeditor.e-overlay { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .e-inplaceeditor.e-rtl .e-editable-value-wrapper .e-editable-value { margin: 0 0 0 28px; } .e-inplaceeditor.e-rtl .e-editable-value-wrapper .e-editable-overlay-icon { left: 8px; right: auto; } .e-inplaceeditor.e-rtl .e-editable-value-wrapper .e-spinner-pane { right: unset; } .e-inplaceeditor.e-rtl .e-editable-value-wrapper .e-spinner-pane, .e-inplaceeditor.e-rtl .e-editable-value-wrapper .e-spinner-pane .e-spinner-inner { left: 8px; } .e-inplaceeditor.e-rtl .e-editable-value-container .e-editable-value { margin: 0 0 0 28px; } .e-inplaceeditor.e-rtl .e-editable-value-container .e-editable-overlay-icon { left: 8px; right: auto; } .e-inplaceeditor.e-rtl .e-editable-value-container .e-spinner-pane { right: unset; } .e-inplaceeditor.e-rtl .e-editable-value-container .e-spinner-pane, .e-inplaceeditor.e-rtl .e-editable-value-container .e-spinner-pane .e-spinner-inner { left: 8px; } .e-inplaceeditor.e-rtl .e-editable-action-buttons { left: 0; right: auto; } .e-inplaceeditor .e-input-group + .e-editable-loading .e-spinner-inner, .e-inplaceeditor-tip .e-input-group + .e-editable-loading .e-spinner-inner { top: 35%; } .e-inplaceeditor .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle, .e-inplaceeditor-tip .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle { stroke-width: inherit; } .e-inplaceeditor .e-input-group + .e-editable-loading .e-spinner-inner, .e-inplaceeditor-tip .e-input-group + .e-editable-loading .e-spinner-inner { top: 35%; } .e-inplaceeditor .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle, .e-inplaceeditor-tip .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle { stroke-width: inherit; } .e-inplaceeditor .e-editable-loading, .e-inplaceeditor-tip .e-editable-loading { display: none; min-height: 100%; position: absolute; top: 0; } .e-inplaceeditor .e-editable-loading.e-show, .e-inplaceeditor-tip .e-editable-loading.e-show { display: block; } .e-inplaceeditor .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner, .e-inplaceeditor-tip .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner { left: auto; right: 5px; -webkit-transform: translateX(-30%) translateY(-50%); transform: translateX(-30%) translateY(-50%); } .e-inplaceeditor .e-editable-form, .e-inplaceeditor-tip .e-editable-form { width: 100%; } .e-inplaceeditor .e-editable-form.e-loading .e-input-group-icon, .e-inplaceeditor-tip .e-editable-form.e-loading .e-input-group-icon { visibility: hidden; } .e-inplaceeditor .e-component-group, .e-inplaceeditor-tip .e-component-group { margin-bottom: 4px; } .e-inplaceeditor .e-component-group .e-editable-component, .e-inplaceeditor-tip .e-component-group .e-editable-component { min-width: 150px; position: relative; } .e-inplaceeditor .e-control-overlay, .e-inplaceeditor-tip .e-control-overlay { visibility: hidden; } .e-inplaceeditor .e-control-overlay.e-richtexteditor, .e-inplaceeditor-tip .e-control-overlay.e-richtexteditor { opacity: 0.5; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; visibility: visible; } .e-inplaceeditor .e-editable-action-buttons .e-btn-save, .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save { margin: 0 4px 0 0; } .e-inplaceeditor .e-editable-action-buttons .e-btn-save .e-btn-icon.e-icons, .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save .e-btn-icon.e-icons { font-size: 16px; } .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel, .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel { margin: 0 0 0 4px; } .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel .e-btn-icon.e-icons, .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel .e-btn-icon.e-icons { font-size: 16px; } .e-inplaceeditor .e-editable-action-buttons.e-hide, .e-inplaceeditor-tip .e-editable-action-buttons.e-hide { visibility: hidden; } .e-inplaceeditor.e-rtl .e-editable-action-buttons .e-btn-save, .e-inplaceeditor-tip.e-rtl .e-editable-action-buttons .e-btn-save { margin: 0 0 0 4px; } .e-inplaceeditor.e-rtl .e-editable-action-buttons .e-btn-cancel, .e-inplaceeditor-tip.e-rtl .e-editable-action-buttons .e-btn-cancel { margin: 0 4px 0 0; } .e-inplaceeditor.e-rtl .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner, .e-inplaceeditor-tip.e-rtl .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner { left: 5px; right: auto; -webkit-transform: translateX(30%) translateY(-50%); transform: translateX(30%) translateY(-50%); } .e-inplaceeditor-tip { opacity: 1; width: auto; } .e-inplaceeditor-tip.e-tooltip-wrap { max-width: 100%; } .e-inplaceeditor-tip.e-tooltip-wrap .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide, .e-inplaceeditor-tip.e-tooltip-wrap .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide { display: block; visibility: hidden; } .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content { padding: 0; } .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title { -ms-flex-line-pack: center; align-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont"; font-size: 13px; font-weight: 500; height: 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 0 0 10px; } .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px; } .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper .e-editable-action-buttons { float: right; margin-top: 4px; position: relative; right: auto; top: auto; } .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px; } .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container .e-editable-action-buttons { float: right; margin-top: 4px; position: relative; right: auto; top: auto; } .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title + .e-editable-wrapper { padding: 10px 16px 16px 16px; } .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title + .e-editable-container { padding: 10px 16px 16px 16px; } .e-inplaceeditor-tip.e-hide { visibility: hidden; } .e-inplaceeditor-tip.e-rtl.e-tooltip-wrap .e-tip-content .e-editable-title { padding: 0 10px 0 0; } .e-inplaceeditor-tip.e-rtl.e-tooltip-wrap .e-tip-content .e-editable-wrapper .e-editable-action-buttons { float: left; } .e-inplaceeditor-tip.e-rtl.e-tooltip-wrap .e-tip-content .e-editable-container .e-editable-action-buttons { float: left; } .e-content-placeholder.e-inplaceeditor.e-placeholder-inplaceeditor { background-size: 150px 60px; min-height: 60px; } .e-inplaceeditor .e-editable-value-wrapper .e-editable-value { border-bottom: 1px dashed rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87); } .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon { color: rgba(0, 0, 0, 0.54); } .e-inplaceeditor .e-editable-value-wrapper.e-loading .e-editable-value { border-bottom: 0; } .e-inplaceeditor .e-editable-value-wrapper:hover { background: #f5f5f5; border-radius: 2px; } .e-inplaceeditor .e-editable-value-wrapper:hover .e-editable-value { border-bottom-color: transparent; } .e-inplaceeditor .e-editable-value-container .e-editable-value { border-bottom: 1px dashed rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87); } .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon { color: rgba(0, 0, 0, 0.54); } .e-inplaceeditor .e-editable-value-container.e-loading .e-editable-value { border-bottom: 0; } .e-inplaceeditor .e-editable-value-container:hover { background: #f5f5f5; border-radius: 2px; } .e-inplaceeditor .e-editable-value-container:hover .e-editable-value { border-bottom-color: transparent; } .e-inplaceeditor[data-underline=false] .e-editable-value-wrapper .e-editable-value { border-bottom: 0; } .e-inplaceeditor[data-underline=false] .e-editable-value-container .e-editable-value { border-bottom: 0; } .e-inplaceeditor.e-disable { pointer-events: none; -ms-touch-action: none; touch-action: none; } .e-inplaceeditor.e-disable .e-editable-value-wrapper .e-editable-value { border-bottom-color: transparent; } .e-inplaceeditor.e-disable .e-editable-value-container .e-editable-value { border-bottom-color: transparent; } .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn .e-btn-icon.e-icons, .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn .e-btn-icon.e-icons, .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn .e-btn-icon.e-icons { color: rgba(0, 0, 0, 0.54); } .e-inplaceeditor-tip.e-tooltip-wrap.e-popup { background: #fff; -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content { border-radius: 2px; color: rgba(0, 0, 0, 0.87); } .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-inner { color: #fff; } .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-top { border-bottom-color: #bdbdbd; } .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-bottom { border-top-color: #bdbdbd; } .e-inplaceeditor-tip.e-tooltip-wrap.e-popup.e-popup { border: 1px solid #bdbdbd; } .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title { background: #eee; border-bottom: 0; color: rgba(0, 0, 0, 0.87); } .e-inplaceeditor-tip.e-editable-tip-title.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top { border-bottom-color: #bdbdbd; } .e-inplaceeditor-tip.e-editable-tip-title.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top { color: #eee; }