react-smart-editor
Version:
React rich text editor with track changes functionality
2 lines • 4.45 kB
CSS
@font-face{font-display:block;font-family:react-smart-editor;font-style:normal;font-weight:400;src:url(fonts/react-smart-editor.eot?awmtp4);src:url(fonts/react-smart-editor.eot?awmtp4#iefix) format("embedded-opentype"),url(fonts/react-smart-editor.ttf?awmtp4) format("truetype"),url(fonts/react-smart-editor.woff?awmtp4) format("woff"),url(fonts/react-smart-editor.svg?awmtp4#react-smart-editor) format("svg")}[class*=" icon-"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:react-smart-editor;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-list-num:before{content:"\e900"}.icon-list:before{content:"\e901"}.icon-underline:before{content:"\e902"}.icon-italic:before{content:"\e903"}.icon-bold:before{content:"\e904"}.react-smart-editor{border:1px solid #ccc;box-sizing:border-box;height:100%;position:relative;&.input-view{min-height:0}ul{list-style-type:disc}ol,ul{padding-inline-start:1.5rem}ol{list-style-type:decimal}ul ul{list-style-type:circle}ol ol,ul ul{padding-inline-start:1rem}ol ol{list-style-type:lower-latin}ul ul ul{list-style-type:square}ol ol ol,ul ul ul{padding-inline-start:.5rem}ol ol ol{list-style-type:lower-roman}h1{font-size:2rem;font-weight:600;margin-bottom:1rem}h2{font-size:1.5rem;font-weight:500;margin-bottom:.5rem}h3{font-size:1.25rem;font-weight:400;margin-bottom:.25rem}h1,h2,h3{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;margin:0;padding:0}}.react-smart-editor-content{height:calc(100% - 43px);&.input-view{height:100%}}.formatting-toolbar-wrapper{background-color:#f1f1f1;position:sticky;z-index:1}.formatting-toolbar{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;gap:5px;padding:6px;position:relative;z-index:1}.toolbar-main-buttons{align-items:center;display:flex;gap:5px}.toolbar-expanded-buttons{align-items:center;border-top:1px solid #e0e0e0;display:none;gap:5px;padding-top:5px;width:100%}.toolbar-expanded-buttons.expanded{display:flex}.expand-button{align-items:center;background-color:#fff;border:1px solid #ccc;border-radius:3px;color:#000;cursor:pointer;display:flex;font-weight:700;height:30px;justify-content:center;margin:0;padding:0;transition:all .2s ease;width:30px}.expand-button:hover:not(:disabled){background-color:#e0e0e0}.expand-button.expanded i{transform:rotate(180deg)}.expand-button i{font-size:12px;transition:transform .2s ease}.icon-chevron-down:before{content:"▼"}.formatting-toolbar button{align-items:center;background-color:#fff;border:1px solid #ccc;border-radius:3px;color:#000;cursor:pointer;display:flex;font-weight:700;height:30px;justify-content:center;margin:0;padding:0;transition:all .2s ease;width:30px;&:disabled{cursor:not-allowed}}.formatting-toolbar select{border:1px solid #ccc;border-radius:3px;padding-block:0;&:disabled{cursor:not-allowed}}.formatting-toolbar button:hover:not(:disabled){background-color:#e0e0e0}.formatting-toolbar button.active{background-color:#e0e0e0;border-color:#999}.formatting-toolbar input[type=color]{border:1px solid #ccc;border-radius:3px;cursor:pointer;height:30px;padding:0;width:30px;&:disabled{cursor:not-allowed}}.formatting-toolbar input[type=color]::-webkit-color-swatch-wrapper{padding:0}.formatting-toolbar input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.change-actions-toolbar{display:flex;gap:4px;button{border:none;border-radius:4px;color:#000;cursor:pointer;font-size:16px;height:30px;padding:0;width:30px;&.approve{background-color:#7fc682}&.reject{background-color:#cc7a74}}}.change-tooltip{background:#fff;border:1px solid #ccc;border-radius:4px;border-bottom-left-radius:0;box-shadow:0 2px 4px rgba(0,0,0,.1);color:#000;min-width:200px;padding:10px;position:fixed;text-align:start;transform:translate(-50%,-100%);z-index:1000}.change-tooltip:after{background:linear-gradient(135deg,#fff 45%,#ccc 0,transparent 55%);border-left:1px solid #ccc;bottom:-10px;content:"";height:10px;left:-.9px;position:absolute;width:10px}.change-info p{margin:0}.change-info-user{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.change-info-action{font-size:12px}.change-actions{display:flex;gap:4px;button{border:none;border-radius:4px;color:#000;cursor:pointer;height:20px;padding:0;width:20px;&:first-child{background-color:#7fc682}&:last-child{background-color:#cc7a74}}}
/*# sourceMappingURL=index.esm.css.map */