summaryrefslogtreecommitdiff
path: root/addons/web_editor/static/src/less/web_editor.ui.components.less
diff options
context:
space:
mode:
Diffstat (limited to 'addons/web_editor/static/src/less/web_editor.ui.components.less')
-rw-r--r--addons/web_editor/static/src/less/web_editor.ui.components.less339
1 files changed, 339 insertions, 0 deletions
diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
new file mode 100644
index 00000000000..6cf994e2f03
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -0,0 +1,339 @@
+
+// INPUTS
+.o_switch {
+ .o-flex-display();
+ .o-align-items(center);
+ font-weight: normal;
+ height: 1.5em;
+ cursor: pointer;
+
+ > input {
+ display: none;
+
+ + span {
+ background: #bababa;
+ border-radius: 0.4em;
+ height: 1em;
+ width: 2.5em;
+ margin-right: 0.5em;
+ display: inline-block;
+ .transition(all 0.3s @o-we-md-ease);
+ &:after {
+ content: "";
+ background: #fafafa;
+ display: block;
+ width: 1.5em;
+ height: 1.5em;
+ border-radius: 100em;
+ margin-top: -0.3em;
+ margin-left: -0.1em;
+ .transition(all 0.3s @o-we-md-ease);
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ }
+ }
+
+ &:checked + span {
+ background-color: rgb(142, 224, 212);
+ background-color: transparentize(@odoo-brand-optional, 0.5);
+ &:after {
+ background-color: @odoo-brand-optional;
+ margin-left: 1.1em;
+ }
+ }
+ }
+ &:hover > input + span:after {
+ background-color: mix(@odoo-brand-optional, #fafafa);
+ }
+}
+.text-input-group {
+ position: relative;
+ margin-bottom: 45px;
+
+ input {
+ font-size: 18px;
+ padding: 10px 10px 10px 5px;
+ display: block;
+ width: 300px;
+ border: none;
+ border-bottom: 1px solid #757575;
+ }
+ input:focus { outline: none; }
+
+ /* LABEL ======================================= */
+ label {
+ color: #999;
+ font-size: 18px;
+ font-weight: normal;
+ .o-position-absolute(@top: 10px, @left: 5px);
+ pointer-events: none;
+ .transition(0.2s ease all)
+ }
+
+ /* active state */
+ input:focus ~ label, input:valid ~ label {
+ top: -20px;
+ font-size: 14px;
+ color: #5264AE;
+ }
+
+ /* BOTTOM BARS ================================= */
+ .bar { position: relative; display: block; width: 300px; }
+ .bar:before, .bar:after {
+ content: '';
+ height: 2px;
+ width: 0;
+ bottom: 1px;
+ .o-position-absolute();
+ background: #5264AE;
+ .transition(0.2s ease all);
+ }
+ .bar:before {
+ left: 50%;
+ }
+ .bar:after {
+ right: 50%;
+ }
+
+ /* active state */
+ input:focus ~ .bar:before, input:focus ~ .bar:after {
+ width: 50%;
+ }
+
+ /* HIGHLIGHTER ================================== */
+ .highlight {
+ .o-position-absolute(@top: 25%, @left: 0);
+ height: 60%;
+ width: 100px;
+ pointer-events: none;
+ opacity: 0.5;
+ }
+
+ /* active state */
+ input:focus ~ .highlight {
+ .animation(inputHighlighter 0.3s ease);
+ }
+}
+
+// DRAG&DROP ANIMATIONS
+.oe_snippet_body {
+ opacity: 0;
+ .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
+}
+
+// MODALS
+body .modal {
+ // SELECT MEDIA
+ .o_select_media_dialog {
+ width: 80%;
+
+ .modal-body {
+ li.search {
+ float: right;
+
+ ul.pager {
+ margin: 0;
+ > li > a {
+ border-radius: 3px;
+ margin-left: 2px;
+ padding: 6px 14px;
+ }
+ }
+ .form-group {
+ position: relative;
+ margin: 0 10px 0 0;
+ > input {
+ padding-right: 30px;
+ }
+ > span {
+ .o-position-absolute(7px, 7px);
+ font-size: 1.3em;
+ }
+ }
+ }
+ .dropdown-toggle {
+ line-height: 0;
+ height: 34px;
+ }
+ .o_existing_attachment_cell {
+ @odoo-border-image: 1px;
+ .o_existing_attachment_remove {
+ .o-position-absolute(@odoo-border-image, 15px + @odoo-border-image);
+ padding: 3px 3px 12px 12px;
+ background-color: white;
+ border-bottom: 1px solid black;
+ border-left: 1px solid black;
+ border-radius: 0 0 0 100%;
+ opacity: 0.8;
+ }
+ .o_image {
+ border: @odoo-border-image solid transparent;
+ cursor: pointer;
+
+ &.o_webimage {
+ width: 100%;
+ height: auto;
+ }
+ }
+ &.o_selected .o_image {
+ border-color: @odoo-brand-primary;
+ box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
+ }
+ }
+ .font-icons-icons > span {
+ font-size: 30px;
+ margin: 5px;
+ padding: 3px;
+ cursor: pointer;
+
+ &.o_selected {
+ box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
+ }
+ }
+ }
+ }
+
+ // BACKGROUND IMAGE OPTIONS
+ .o_bg_img_opt_modal .o_bg_img_opt {
+ margin: 15px 0;
+
+ .help-control {
+ .o-position-absolute(15px, 15px);
+ }
+ .help {
+ margin: 15px 0;
+
+ .simulator {
+ position: relative;
+ float: left;
+ margin-right: 15px;
+ width: 120px;
+ height: 100px;
+ .bg {
+ .o-position-absolute(0, 0, 0, 0);
+ border: 1px dotted #888787;
+ background-image: url(/web/image);
+ background-position: center center;
+ .o-background-size(cover);
+ }
+ .el {
+ .o-position-absolute(10px, 0, 10px, 0);
+ border: 1px solid #222;
+ }
+ &.contain_bg {
+ .bg {
+ .o-position-absolute(0, 12px, 20px, 12px);
+ }
+ .el {
+ .o-position-absolute(0, 0, 20px, 0);
+ }
+ }
+ }
+ + * {
+ clear: left;
+ }
+ }
+
+ .o_bg_img_opt_cover_edition {
+ border-top: 1px solid black;
+ border-bottom: 1px solid white;
+ padding: 0px 25px 25px 25px;
+ .o-linear-gradient(-150deg, lighten(#2c2c36, 5%), darken(#2c2c36, 10%));
+ h6 {
+ color: white;
+ font-weight: bold;
+ }
+ .o_bg_img_opt_object {
+ width: 100%;
+ background: white;
+ min-height: 10px;
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 0 10px #000;
+ > img {
+ cursor: crosshair;
+ border-top: 1px solid #5A5A5A;
+ border-bottom: 1px solid #111;
+ }
+ &:hover .o_focus_point:before {
+ opacity: 0.5;
+ }
+ }
+ .o_bg_img_opt_ui_info {
+ .animation(fadeInOut 2s ease forwards);
+ .o-position-absolute(@bottom: 1px, @right: 0);
+ display: block;
+ padding: 3px 13px;
+ background-color: rgba(255, 255, 255, 0.8);
+ color: #333;
+ text-align: center;
+ font-weight: bold;
+ pointer-events: none;
+ span {
+ font-weight: normal;
+ }
+ .o_x {
+ margin-right: 10px
+ }
+ }
+ .grid {
+ .o-position-absolute(@top: 33.33%, @left: 0);
+ display: block;
+ width: 100%;
+ height: 1px;
+ background: fadeOut(lighten(@odoo-brand-optional, 30%), 50%);
+ pointer-events: none;
+ &.grid-2 {
+ top: 66.66%
+ }
+ &.grid-3 {
+ top: 0;
+ left: 33.33%;
+ width: 1px;
+ height: 100%
+ }
+ &.grid-4 {
+ top: 0;
+ left: 66.66%;
+ width: 1px;
+ height: 100%
+ }
+ }
+ .o_focus_point {
+ .o-position-absolute(@top: 0, @left: 0);
+ width: 30px;
+ height: 30px;
+ border: 2px solid white;
+ border-radius: 100%;
+ margin-top: -15px;
+ margin-left: -15px;
+ box-shadow: 0 0 1px #333;
+ pointer-events: none;
+ &.o_with_transition {
+ .o-transition(all, 0.2s);
+ }
+ &:before {
+ pointer-events: none;
+ content: "";
+ display: block;
+ width: 100px;
+ height: 100px;
+ margin-top: -37px;
+ margin-left: -37px;
+ border: 1px solid #EAEAEA;
+ background: rgba(247, 76, 76, 0);
+ border-radius: 100em;
+ opacity: 1;
+ box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33);
+ .o-transition(opacity, 0.2s);
+ }
+ }
+ }
+ }
+
+ &.web_editor-dialog {
+ li > label {
+ width: 96%;
+ margin: 4px 2% 0;
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-10-23 21:54:29 +0000