diff options
Diffstat (limited to 'addons/web_editor/static/src/css/editor.sass')
| -rw-r--r-- | addons/web_editor/static/src/css/editor.sass | 984 |
1 files changed, 984 insertions, 0 deletions
diff --git a/addons/web_editor/static/src/css/editor.sass b/addons/web_editor/static/src/css/editor.sass new file mode 100644 index 00000000000..da05b02145e --- /dev/null +++ b/addons/web_editor/static/src/css/editor.sass @@ -0,0 +1,984 @@ +@import "compass/css3" +@import "compass/css3/user-interface" +@import "compass/css3/transition" +@import "compass/support" + + +/* ---- EDITOR BAR ---- {{{ */ + +.note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog + * + box-sizing: border-box + a + text-decoration: none + ul, ol + margin-top: 0 + margin-bottom: 10px + + .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after + content: " " + display: table + clear: both + + .caret + display: inline-block + width: 0 + height: 0 + vertical-align: middle + border-top: 4px solid + border-right: 4px solid transparent + border-left: 4px solid transparent + + /* button */ + + .btn.dropdown-toggle + position: relative + float: left + .btn + display: inline-block + margin-bottom: 0 + font-weight: 400 + text-align: center + vertical-align: middle + cursor: pointer + background-image: none + border: 1px solid transparent + white-space: nowrap + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + border-radius: 4px + .caret + margin-left: 0 + &.disabled, &[disabled], &.disabled:hover, &[disabled]:active + cursor: not-allowed + pointer-events: none + opacity: .65 + filter: alpha(opacity=65) + -webkit-box-shadow: none + box-shadow: none + .btn-sm + padding: 5px 10px + font-size: 12px + line-height: 1.5 + border-radius: 3px + .btn-group + padding-top: 0 + margin-top: 0 + position: relative + display: inline-block + vertical-align: middle + > .btn + position: relative + float: left + &:first-child + margin-left: 0 + &:first-child:not(:last-child):not(.dropdown-toggle) + border-top-right-radius: 0 + border-bottom-right-radius: 0 + &:not(:first-child):not(:last-child):not(.dropdown-toggle) + border-radius: 0 + &:last-child:not(:first-child), >.dropdown-toggle:not(:first-child) + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &+.dropdown-toggle + padding-left: 8px + padding-right: 8px + &.active + color: #333 + background-color: #e6e6e6 + border-color: #adadad + .btn+.btn, .btn+.btn-group, +.btn, +.btn-group + margin-left: -1px + .btn-link + border-color: transparent + color: #428bca + &:hover, &:focus + color: #2a6496 + text-decoration: underline + background-color: transparent + + /* form */ + + .form-group + margin-bottom: 15px + .form-control + display: block + width: 100% + height: 34px + padding: 6px 12px + font-size: 14px + line-height: 1.42857143 + color: #555 + background-color: #fff + background-image: none + border: 1px solid #ccc + border-radius: 4px + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) + box-shadow: inset 0 1px 1px rgba(0,0,0,.075) + .form-horizontal .form-group + margin-left: -15px + margin-right: -15px + .form-group + margin-bottom: 15px + .form-control.select2-container + height: auto !important + padding: 0 + label + display: inline-block + max-width: 100% + margin-bottom: 5px + font-weight: 700 + + /* col */ + + .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-lg-12 + position: relative + min-height: 1px + padding-left: 15px + padding-right: 15px + width: 100% + + /* dropdown */ + + .dropdown + position: relative + .dropdown, .btn-group + > .btn + color: #333 + background-color: #fff + border-color: #ccc + text-decoration: none + > .btn-primary + color: #fff + background-color: #428bca + border-color: #357ebd + .dropdown-menu + position: absolute + top: 100% + left: 0 + z-index: 1000 + display: none + float: left + min-width: 160px + padding: 5px 0 + margin: 2px 0 0 + list-style: none + font-size: 14px + text-align: left + background-color: #fff + border: 1px solid #ccc + border: 1px solid rgba(0,0,0,.15) + border-radius: 4px + -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175) + box-shadow: 0 6px 12px rgba(0,0,0,.175) + background-clip: padding-box + > li > a + display: block !important + padding: 3px 20px + clear: both + font-weight: normal + color: #666 + white-space: nowrap + background: transparent + > li.active > a + color: #fff + text-decoration: none + background-color: #428bca + outline: 0 + .open > .dropdown-menu + display: block + + /* list-group */ + + .list-group + margin-bottom: 20px + padding-left: 0 + .list-group-item + position: relative + display: block + padding: 10px 15px + margin-bottom: -1px + background-color: #fff + border: 1px solid #ddd + .list-group-item:first-child + border-top-right-radius: 4px + border-top-left-radius: 4px + .list-group-item:last-child + margin-bottom: 0 + border-bottom-right-radius: 4px + border-bottom-left-radius: 4px + .list-group-item-heading + margin-top: 0 + margin-bottom: 5px + .list-group-item.active + z-index: 2 + color: #fff + background-color: #428bca + border-color: #428bca + + /* tab */ + + .tab-content > .tab-pane + display: none + .tab-content > .active + display: block + .nav + margin-bottom: 0 + padding-left: 0 + list-style: none + .nav > li + position: relative + display: block + .nav > li > a + position: relative + display: block + padding: 10px 15px + .nav-tabs + border-bottom: 1px solid #ddd + .nav-tabs > li + float: left + margin-bottom: -1px + .nav-tabs > li > a + margin-right: 2px + line-height: 1.42857143 + border: 1px solid transparent + border-radius: 4px 4px 0 0 + .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus + color: #8c8c8c + background-color: #fff + border: 1px solid #ddd + border-bottom-color: transparent + cursor: default + + /* pager */ + + .pager + padding-left: 0 + margin: 20px 0 + list-style: none + text-align: center + li + display: inline + li > a, li > span + display: inline-block + padding: 5px 14px + background-color: #fff + border: 1px solid #ddd + border-radius: 15px + .previous > a, .previous > span + float: left + .disabled > a, .disabled > a:hover, .disabled > a:focus, .disabled > span + color: #b3b3b3 + background-color: #fff + cursor: not-allowed + + /* add submenu css */ + + .dropdown-submenu + position: relative + z-index: 1000 + .dropdown-submenu + &>.dropdown-menu + top: 0 + left: 100% + margin-top: -6px + margin-left: -1px + -webkit-border-radius: 0 6px 6px 6px + -moz-border-radius: 0 6px 6px 6px + border-radius: 0 6px 6px 6px + &:hover + &>.dropdown-menu + display: block + &>a:after + border-left-color: #ffffff + &>a:after + display: block + content: " " + float: right + width: 0 + height: 0 + border-color: transparent + border-style: solid + border-width: 5px 0 5px 5px + border-left-color: #cccccc + margin-top: 5px + margin-right: -10px + &.pull-left + float: none + &>.dropdown-menu + left: -100% + margin-left: 10px + -webkit-border-radius: 6px 0 6px 6px + -moz-border-radius: 6px 0 6px 6px + border-radius: 6px 0 6px 6px + + /* global */ + + .hidden + display: none !important + .img-responsive + display: block + width: 100% \9 + max-width: 100% + height: auto + .well + min-height: 20px + padding: 19px + margin-bottom: 20px + background-color: #f5f5f5 + border: 1px solid #e3e3e3 + border-radius: 4px + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05) + box-shadow: inset 0 1px 1px rgba(0,0,0,.05) + .sr-only + position: absolute + width: 1px + height: 1px + margin: -1px + padding: 0 + overflow: hidden + clip: rect(0,0,0,0) + border: 0 + .text-center + text-align: center + .text-muted + color: #b3b3b3 + +.note-popover .btn + height: 30px +.note-popover, .o_css_editor + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif + font-size: 14px + line-height: 1.42857143 + color: #666 + button + margin: 0 + a + color: #428bca + &:hover, &:focus + color: #2a6496 + text-decoration: underline + + .popover + position: fixed !important + top: 1px !important + right: auto !important + left: 300px !important + margin-top: 0 !important + border: 0 + background: transparent + box-shadow: none + -webkit-box-shadow: none + z-index: 1040 + padding: 1px + text-align: left + white-space: normal + border-radius: 6px + max-width: none + .popover-content + padding: 0 + margin: 0 0 0 6px + .note-para .dropdown-menu + min-width: 148px !important + padding: 5px 0 5px 5px !important + .note-ul .dropdown-menu + min-width: 150px !important + padding: 5px 0 5px 5px !important + .note-li + margin-right: 5px + .colorpicker + margin: 0 + td > * + width: 20px + height: 20px + padding: 0 + margin: 0 + border: 1px solid #fff + .btn-group + margin: 0 5px 0 0 + > a + border-radius: 3px + background-color: #fff + border-color: #ccc + padding: 4px 10px + font-size: 14px + line-height: 1.5 + > span + display: inline-block + max-width: 200px + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + vertical-align: middle + border-radius: 3px + background-color: white + border-color: #cccccc + padding: 4px 10px + font-size: 14px + line-height: 1.5 + .arrow + display: none + +.note-popover, .o_css_editor, .web_editor-dialog .modal-footer + .btn-default + color: #333 + background-color: #fff + border-color: #ccc + .btn-primary + color: #fff + background-color: #428bca + border-color: #357ebd + +.web_editor-dialog, .note-image-dialog + color: #666 + display: none + overflow: hidden + position: fixed + top: 0 + right: 0 + bottom: 0 + left: 0 + z-index: 1050 + -webkit-overflow-scrolling: touch + outline: 0 + .btn + border-color: #ccc + .btn-link + border-color: transparent + .btn-primary + color: #fff + background-color: #428bca + border-color: #357ebd + .btn-danger + color: #fff + background-color: #d9534f + border-color: #d43f3a + .modal-header, .modal-footer + a + color: #428bca + &:hover, &:focus + color: #2a6496 + text-decoration: underline + .btn + border-color: #ccc + padding: 6px 12px + font-size: 14px + line-height: 1.42857143 + border-radius: 4px + .link-style + .dropdown > .btn + min-width: 160px + li + text-align: center + label + width: 100px + margin: 0 5px + input.link-style + display: none + .modal-title + margin: 0 + line-height: 1.42857143 + .modal-dialog + position: relative + width: auto + margin: 10px + .modal-content + position: relative + background-color: #fff + border: 1px solid #999 + border: 1px solid rgba(0,0,0,.2) + border-radius: 6px + -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5) + box-shadow: 0 3px 9px rgba(0,0,0,.5) + background-clip: padding-box + outline: 0 + .modal-header + padding: 15px + border-bottom: 1px solid #e5e5e5 + min-height: 16.43px + .close + margin-top: -2px + .modal-body + position: relative + padding: 15px + .modal-footer + text-align: left + padding: 15px + border-top: 1px solid #e5e5e5 + .close + float: right + font-size: 21px + font-weight: 700 + line-height: 1 + color: #000 + text-shadow: 0 1px 0 #fff + opacity: .2 + filter: alpha(opacity=20) + button.close + padding: 0 + cursor: pointer + background: 0 0 + border: 0 + -webkit-appearance: none + +.note-image-dialog .btn + height: 34px + font-size: 14px + +@media (min-width: 768px) + .web_editor-dialog, .note-image-dialog + .modal-dialog + width: 600px + margin: 30px auto + .modal-content + -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5) + box-shadow: 0 5px 15px rgba(0,0,0,.5) + .note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog + .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 + float: left + .col-sm-12 + width: 100% + .col-sm-11 + width: 91.66666667% + .col-sm-10 + width: 83.33333333% + .col-sm-9 + width: 75% + .col-sm-8 + width: 66.66666667% + .col-sm-7 + width: 58.33333333% + .col-sm-6 + width: 50% + .col-sm-5 + width: 41.66666667% + .col-sm-4 + width: 33.33333333% + .col-sm-3 + width: 25% + .col-sm-2 + width: 16.66666667% + .col-sm-1 + width: 8.33333333% + .form-horizontal .control-label + text-align: right + margin-bottom: 0 + padding-top: 7px + .form-inline .form-group + display: inline-block + margin-bottom: 0 + vertical-align: middle + +.modal-open + .web_editor-dialog, .note-image-dialog + overflow-x: hidden + overflow-y: auto +.editor_enable + .modal-backdrop + position: fixed + top: 0 + right: 0 + bottom: 0 + left: 0 + z-index: 1040 + background-color: #000 + .modal-backdrop.in + opacity: .5 + filter: alpha(opacity=50) + +$attachment-border-color: #848490 +.note-image-dialog + .select-media + width: 80% + + .existing-attachments .pager + margin: 0 + .existing-attachments + .pager .disabled + display: none + + .existing-attachment-cell + position: relative + .img + border: 1px solid $attachment-border-color + .existing-attachment-remove + position: absolute + top: 0 + left: 15px // padding-left on col-* + + cursor: pointer + background: white + padding: 2px + border: 1px solid $attachment-border-color + border-top: none + border-left: none + +border-bottom-right-radius(8px) + &.media_selected + > i, > img + border-width: 5px + border-color: rgb(0, 248, 248) + + .image-preview + margin-bottom: 0.5em + .font-icons-icons + font-size: 2em + max-height: 9em + overflow: auto + .font-icons-icon + display: inline-block + width: 2em + padding: 0.25em + text-align: center + cursor: pointer + .font-icons + position: relative + display: block + + &:before + +opacity(0.7) + position: absolute + top: 2px + left: 3px + font-size: 2em + #icon-search + padding-left: 2.5em + .font-icons-selected + background-color: #ddd + &.nosave + .wait + display: inline-block !important + visibility: visible !important + .modal-body + .filepicker, .image-preview + display: none + .wait + width: 100% + .modal-footer .save + display: none + .preview-container + text-align: center + line-height: 100px + height: 100px + > * + max-height: 100px + line-height: 100px + margin: 0 auto + display: inline-block + +/* }}} */ + +/* ---- Default values ---- {{{ */ + +.tooltip + position: absolute + z-index: 1070 + display: block + visibility: visible + font-size: 12px + line-height: 1.4 + opacity: 0 + filter: alpha(opacity=0) + &.in + opacity: .9 + filter: alpha(opacity=90) + &.bottom + margin-top: 3px + padding: 5px 0 + .tooltip-arrow + top: 0 + left: 50% + margin-left: -5px + border-width: 0 5px 5px + border-bottom-color: #000 +.tooltip-arrow + position: absolute + width: 0 + height: 0 + border-color: transparent + border-style: solid +.tooltip-inner + max-width: 200px + padding: 3px 8px + color: #fff + text-align: center + text-decoration: none + background-color: #000 + border-radius: 4px +.fade + opacity: 0 + -webkit-transition: opacity .15s linear + -o-transition: opacity .15s linear + transition: opacity .15s linear +.fade.in + opacity: 1 +.pull-right + float: right +.center-block + display: block + margin-left: auto + margin-right: auto +.pull-left + float: left +.img-responsive + display: block + width: 100% \9 + max-width: 100% + height: auto +.img-rounded + border-radius: 6px +.img-thumbnail + padding: 4px + line-height: 1.42857143 + background-color: #fff + border: 1px solid #ddd + border-radius: 4px + -webkit-transition: all .2s ease-in-out + -o-transition: all .2s ease-in-out + transition: all .2s ease-in-out + display: inline-block + width: 100% \9 + max-width: 100% + height: auto +.img-circle + border-radius: 50% +.img-responsive + text-align: center +img.shadow + -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2) + -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2) + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2) +.fa-1x + font-size: 1em +.fa-2x + font-size: 2em +.fa-3x + font-size: 3em +.fa-4x + font-size: 4em +.fa-5x + font-size: 5em +.fa-6x + font-size: 6em +.fa-7x + font-size: 7em +.fa-8x + font-size: 8em +.fa-9x + font-size: 9em +.fa-10x + font-size: 10em +.text-primary + color: #428bca +.text-success + color: #3c763d +.text-info + color: #31708f +.text-warning + color: #8a6d3b +.text-danger + color: #a94442 +.bg-primary + color: #fff + background-color: #428bca +.bg-success + background-color: #dff0d8 +.bg-info + background-color: #d9edf7 +.bg-warning + background-color: #fcf8e3 +.bg-danger + background-color: #f2dede +.hidden + display: none + +/* }}} */ + +/* ---- COLOR-PICKER ---- {{{ */ + +.colorpicker + margin: 0 auto + background: transparent + border: 0 + td + padding: 0 + background: transparent + > * + width: 16px + height: 16px + border-radius: 2px + margin: 3px + padding: 0 + border-width: 1px + display: block + .only-text + display: none + .automatic-color + background: #fff + border-left: 7px solid #f33 + border-top: 7px solid #0e0 + border-right: 8px solid #33f + border-bottom: 8px solid #fe0 + margin: 4px 3px 3px 3px + width: 0 + height: 0 + +/* }}} */ + +/* ---- TRANSLATIONS ---- {{{ */ + +o_translatable_translated + +.oe_translate_examples li + margin: 10px + padding: 4px +html[lang] > body.editor_enable + [data-oe-translation-state] + background: rgba(255, 255, 90, 0.5) !important + &:hover + background: inherit !important + cursor: text + [data-oe-translation-state="translated"] + background: rgba(120, 215, 110, 0.5) !important +html[data-translatable] .oe_field_translate + display: block +html[data-translatable] .oe_field_translate + display: none + +/* }}} */ + +/* ---- editable ---- {{{ */ + +.o_editable + &:not(:empty),&[data-oe-type] + &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover + /* to do change into primary color in less */ + -moz-box-shadow: #3071a9 0 0 5px 2px inset + -webkit-box-shadow: #3071a9 0 0 5px 2px inset + box-shadow: #3071a9 0 0 5px 2px inset + &:focus,&[data-oe-type] + min-height: 0.8em + min-width: 8px + &.o_is_inline_editable + display: inline-block + &:focus + outline: none !important + +/* Prevent the text contents of draggable elements from being selectable. */ +[draggable] + -moz-user-select: none + -khtml-user-select: none + -webkit-user-select: none + user-select: none + +// bootstrap makes .btn elements unselectable -> RTE double-click can't know +// about them either +.o_editable .btn, .btn.o_editable + -webkit-user-select: auto + -moz-user-select: auto + -ms-user-select: auto + user-select: auto + cursor: text !important +.o_editable .fa + cursor: pointer + +.img-responsive + text-align: center + +.css_editable_display + display: block !important + +.css_editable_hidden + display: none !important + +.editor_enable + [data-oe-readonly]:hover + cursor: default + .css_editable_mode_hidden + display: none + .css_non_editable_mode_hidden + display: block !important + .media_iframe_video .css_editable_mode_display + display: block !important + +.oe_empty[data-oe-placeholder]:empty + min-height: 220px !important + background-repeat: no-repeat + background-position: center + + &:not(.o_editable) + background-image: url('/web_editor/static/src/img/edit_here.png') !important + + &:after, &:before + opacity: 0.4 + overflow: hidden + z-index: -1 + min-height: 1em + + &:after + text-align: center + padding-top: 160px + display: block + content: " \00a0 " attr(data-oe-placeholder) + font-size: 24px + + &.o_no_placeholder_image + background-image: none + text-align: left + padding-top: 0 + + &[data-oe-type=html] + &:after + font-size: 16px +.editor_has_snippets .oe_empty[data-oe-placeholder]:empty + background-image: url('/web_editor/static/src/img/drag_here.png') !important + +#web_editor-top-edit + width: 100% + min-height: 34px + height: 34px + background-color: #222 + border-color: #080808 + border-width: 0 0 1px + position: fixed + border-radius: 0 + top: 0 + right: 0 + left: 0 + z-index: 1030 + -webkit-transform: translate3d(0,0,0) + transform: translate3d(0,0,0) + .btn-link + color: #b3b3b3 + > ul > li + margin: 0 + form + padding: 0 10px 0 15px + border-top: 1px solid transparent + border-bottom: 1px solid transparent + margin: 0 + button, a + padding: 4px 8px 4px 8px + margin-top: 2px + font-size: 13px + +#editable_area + margin-top: 34px + +/* }}} */ + + +/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- {{{ */ + +.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child + position: static + +.css_editable_display + display: none + +.oe_carlos_danger + outline: 1px solid red !important + background-color: #ffd9dd !important + +/* }}} */ |