summaryrefslogtreecommitdiff
path: root/addons/web_editor/static/src/less
diff options
context:
space:
mode:
Diffstat (limited to 'addons/web_editor/static/src/less')
-rw-r--r--addons/web_editor/static/src/less/web_editor.common.less104
-rw-r--r--addons/web_editor/static/src/less/web_editor.ui.less219
2 files changed, 120 insertions, 203 deletions
diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less
index cfa9f683198..99f6a474397 100644
--- a/addons/web_editor/static/src/less/web_editor.common.less
+++ b/addons/web_editor/static/src/less/web_editor.common.less
@@ -158,57 +158,75 @@ ul.oe_menu_editor {
}
}
-// Generate all margins for all sizes
-.o-margins-all(@factor: 1) {
- // Unfortunately, the margins sizes are not
- // mathematically related by a single function
- .o-margins(128, @factor);
- .o-margins(96, @factor);
- .o-margins(92, @factor);
- .o-margins(64, @factor);
- .o-margins(48, @factor);
- .o-margins(32, @factor);
- .o-margins(24, @factor);
- .o-margins(16, @factor);
- .o-margins(8, @factor);
- .o-margins(4, @factor);
- .o-margins(0, @factor);
+// Generate all spacings for all sizes
+.o-spacing-all(@factor: 1) {
+ // Generate vertical margin/padding classes used by the editor
+ .o-generate-spacings(256/8);
+ .o-generate-spacings(@n, @i: 0) when (@i =< @n) {
+ .o-vspacing(@i * 8);
+ .o-generate-spacings(@n, @i + 1);
+ }
+ .o-vspacing(4, @factor);
+
+ // 92px vertical margin is kept for compatibility
+ .o-vmargins(92, @factor);
+
+ // Some horizontal margin classes defined for convenience
+ // (and compatibility)
+ .o-hmargins(0, @factor);
+ .o-hmargins(4, @factor);
+ .o-hmargins(8, @factor);
+ .o-hmargins(16, @factor);
+ .o-hmargins(32, @factor);
+ .o-hmargins(64, @factor);
}
-// Generate all margins for one size, scalled by a
-// given factor (0 <= factor <= 1)
-.o-margins(@name, @factor: 1) {
- .o-margins-define(@name, @factor * @name);
+// Generate all spacings for one size, scalled by a given factor
+// (0 <= factor <= 1)
+.o-vspacing(@name, @factor: 1) {
+ .o-vmargins(@name, @factor);
+ .o-vpaddings(@name, @factor);
+}
+.o-vmargins(@name, @factor: 1) {
+ .o-vmargins-define(@name, @factor * @name);
+}
+.o-vpaddings(@name, @factor: 1) {
+ .o-vpaddings-define(@name, @factor * @name);
+}
+.o-hspacing(@name, @factor: 1) {
+ .o-hmargins(@name, @factor);
+ .o-hpaddings(@name, @factor);
+}
+.o-hmargins(@name, @factor: 1) {
+ .o-hmargins-define(@name, @factor * @name);
+}
+.o-hpaddings(@name, @factor: 1) {
+ .o-hpaddings-define(@name, @factor * @name);
}
-// Generate all margins for one size, given
-// the name of the margin and intended size
-.o-margins-define(@name, @size: @name) {
- .mt@{name} {margin-top: ~"@{size}px"!important;}
- .mb@{name} {margin-bottom: ~"@{size}px"!important;}
- .ml@{name} {margin-left: ~"@{size}px"!important;}
- .mr@{name} {margin-right: ~"@{size}px"!important;}
+// Generate all spacings for one size, given the name of the spacing and
+// intended size
+.o-vmargins-define(@name, @size: @name) {
+ .mt@{name} { margin-top: unit(@size, px)!important; }
+ .mb@{name} { margin-bottom: unit(@size, px)!important; }
+}
+.o-vpaddings-define(@name, @size: @name) {
+ .pt@{name} { padding-top: unit(@size, px)!important; }
+ .pb@{name} { padding-bottom: unit(@size, px)!important; }
+}
+.o-hmargins-define(@name, @size: @name) {
+ .ml@{name} { margin-left: unit(@size, px)!important; }
+ .mr@{name} { margin-right: unit(@size, px)!important; }
+}
+.o-hpaddings-define(@name, @size: @name) {
+ .pl@{name} { padding-left: unit(@size, px)!important; }
+ .pr@{name} { padding-right: unit(@size, px)!important; }
}
// Generate all margins
-.o-margins-all();
-
-// Possibility to change the margins ratio for small screen sizes, e.g.:
-// @media (max-width: 768px) {
-// .o-margins-all(0.75);
-// }
-// Possibility to only redefine single margins for small screen sizes, e.g.:
-// @media (max-width: 768px) {
-// .o-margins(64, 0.50);
-// .o-margins(48, 0.50);
-// }
-// Possibility to directly redefine the size of single margins instead of refering to a factor for small screen sizes, e.g.:
-// @media (max-width: 768px) {
-// .o-margins-define(128, 48);
-// .o-margins-define(96, 48);
-// .o-margins-define(64, 48);
-// }
+.o-spacing-all();
+// Underline
a.o_underline {
text-decoration: underline;
&:hover {
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index 1d59c4e2033..e7ba19f332d 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -539,62 +539,43 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
}
// HANDLES
- > .oe_handles {
+ > .o_handles {
@o-handles-offset-to-hide: 10000px;
@o-handless-accent-color: #00e2ff;
.o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0);
- &:hover > .oe_handle {
+ &:hover > .o_handle {
background-color: fade(@o-handless-accent-color, 5%);
}
- > .oe_handle {
+ > .o_handle {
@o-handle-btn-size: 18px;
- opacity: 0.5;
- .o-transition(opacity, 400ms);
- border: 0 solid @o-handless-accent-color;
-
- // MARGINS PREVIEW
- &.n, &.s, &.w {
- position: relative;
- .o-transition(background, 0.3s);
- &.oe_handle_change, &.oe_handle_active, &:hover {
- background-color: fade(@o-handless-accent-color, 20%);
+ position: relative;
+ border: 0 solid @o-handless-accent-color;
+ .o-transition(background, 300ms);
+
+ &:hover, &.o_active {
+ background-color: fade(@o-handless-accent-color, 20%);
+
+ &:before {
+ content: '';
+ .o-position-absolute(0, @left:50%);
+ width: 1px;
+ height: 100%;
+ margin-left: -1px;
+ background-color: fade(@o-handless-accent-color, 50%);
}
- &.o_handle_edited {
- opacity: 0.9;
-
- &:after {
- color: white;
- border-color: darken(@o-handless-accent-color, 10%);
- background-color: darken(@o-handless-accent-color, 20%);
- }
+ &.w:before {
+ .o-position-absolute(50%, @left: 0);
+ width: 100%;
+ height: 1px;
}
- &.oe_handle_change, &:hover {
- opacity: 1;
-
- &:before {
- .o-position-absolute(0, @left:50%);
- width: 1px;
- height: 100%;
- margin-left: -1px;
- background-color: fade(@o-handless-accent-color, 50%);
- content:'';
- }
-
- &.w:before {
- .o-position-absolute(50%,@left: 0);
- width: 100%;
- height: 1px;
- }
-
- &:after {
- border-color: darken(@o-handless-accent-color, 10%);
- background-color: darken(@o-handless-accent-color, 20%);
- }
+ &:after {
+ border-color: darken(@o-handless-accent-color, 10%);
+ background-color: darken(@o-handless-accent-color, 20%);
}
}
@@ -602,17 +583,13 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
display: block;
width: @o-handle-btn-size;
height: @o-handle-btn-size;
- border: solid 1px rgba(0, 0, 0, 0.2);
+ border: solid 1px darken(@o-handless-accent-color, 10%);
line-height: @o-handle-btn-size - 2;
font-size: 14px;
font-family: FontAwesome;
- background-color: @o-we-color-light;
- color: @o-we-color-text-light;
- }
- &:hover {
- opacity: 0.9;
+ background-color: darken(@o-handless-accent-color, 20%);
+ color: white;
}
-
&.w:after, &.e:after {
content: "\f07e";
}
@@ -620,107 +597,72 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
content: "\f07d";
}
+ &.o_handle_start {
+ &.w:after, &.e:after {
+ content: '\f061';
+ }
+ &.n:after, &.s:after {
+ content: '\f063';
+ }
+ }
+ &.o_handle_end {
+ &.w:after, &.e:after {
+ content: '\f060';
+ }
+ &.n:after, &.s:after {
+ content: '\f062';
+ }
+ }
+
&.w {
+ .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0);
+ width: @odoo-handle-edge-size;
border-width: @odoo-handle-border-width;
border-right-width: 0;
cursor: e-resize;
- width: @odoo-handle-edge-size;
- .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0);
&:after {
- .o-position-absolute(@top: 50%, @left: 50%);
+ .o-position-absolute(@top: 50%, @left: 40%);
margin-top: -@o-handle-btn-size/2;
}
- &.oe_handle_centered:after {
- margin-left: -@o-handle-btn-size/2;
- }
}
&.e {
+ .o-position-absolute(@o-handles-offset-to-hide, 0, -@o-handles-offset-to-hide, auto);
+ width: @odoo-handle-edge-size;
border-right-width: @odoo-handle-border-width;
cursor: w-resize;
- width: @odoo-handle-edge-size;
- .o-position-absolute(@o-handles-offset-to-hide, 0, -@o-handles-offset-to-hide, auto);
&:after {
- .o-position-absolute(@top: 50%, @right: -@odoo-handle-border-width);
+ .o-position-absolute(@top: 50%, @right: 40%);
margin-top: -@o-handle-btn-size/2;
}
}
&.n {
- border-top-width: @odoo-handle-border-width;
.o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0);
+ border-top-width: @odoo-handle-border-width;
+ cursor: ns-resize;
&:after {
- .o-position-absolute(@left: 50%, @top: 50%);
+ .o-position-absolute(@left: 50%, @top: 40%);
margin-left: -@o-handle-btn-size/2;
}
}
&.s {
- border-bottom-width: @odoo-handle-border-width;
.o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0);
+ border-bottom-width: @odoo-handle-border-width;
+ cursor: ns-resize;
&:after {
- .o-position-absolute(@left: 50%, @bottom: 50%);
+ .o-position-absolute(@left: 50%, @bottom: 40%);
margin-left: -@o-handle-btn-size/2;
}
}
- &.n, &.s {
- cursor: ns-resize;
-
- &.oe_handle_centered:after {
- .o-position-absolute(@left: 50%, @top: 50%);
- margin-top: -@o-handle-btn-size/2;
- }
- }
-
- // SIZE HANDLERS
- &.size {
- @o-handle-size-height: 15px;
-
- height: 0;
- background: transparent;
- .o-position-absolute(@bottom: -@o-handles-offset-to-hide + @o-handle-size-height, @left: 50%);
- width: 250px;
- margin-left: -125px;
-
- > .oe_handle_button {
- position: relative;
- display: block;
- width: 100px;
- height: @o-handle-size-height;
- padding-top: 2px;
- font-weight: 600;
- font-size: 9px;
- text-transform: uppercase;
- background-color: @o-we-color-light;
- color: @o-we-color-text-light;
- &:hover {
- background-color: @o-we-color-dark;
- color: white;
- }
- &.auto_size {
- cursor: pointer;
- float: left;
- }
- &.size {
- cursor: row-resize;
- float: right;
- }
- &.active:before {
- content: "\f00c";
- font-family: "FontAwesome";
- color: @odoo-brand-optional;
- .o-position-absolute(@top: 0, @left: 3px);
- font-size: 11px;
- }
- }
- }
&.readonly {
- cursor: auto !important;
+ cursor: auto!important;
- &:after, &.size {
- display: none !important;
+ &:after {
+ display: none!important;
}
&:hover {
opacity: 0.5;
@@ -728,38 +670,6 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
}
}
}
-
- // HANDLERS ICONS
- &.block-w-left .w:after {
- content: "" !important;
- }
- &.block-w-right .w:after {
- content: "" !important;
- }
- &.block-w-left.block-w-right .w:after {
- display: none !important;
- }
- &.block-e-left .e:after {
- content: "" !important;
- }
- &.block-e-right .e:after {
- content: "" !important;
- }
- &.block-e-left.block-e-right .e:after {
- display: none !important;
- }
- &.block-s-bottom .s, &.block-n-top .n {
- cursor: n-resize!important;
- &:after {
- content: "\f062" !important;
- }
- }
- &.block-s-top .s, &.block-n-bottom .n {
- cursor: s-resize!important;
- &:after {
- content: "\f063" !important;
- }
- }
}
}
@@ -779,17 +689,6 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
cursor: move !important;
}
-.block-s-top .s,
-.block-s-bottom .s,
-.block-n-top .n,
-.block-n-bottom .n,
-.block-w-left .w,
-.block-e-right .e {
- &:before {
- font-size: 10px;
- }
-}
-
// NOTE EDITOR
.note-popover .popover {
height: @odoo-navbar-height;
generated by cgit v1.2.3 (git 2.25.1) at 2026-10-24 03:58:16 +0000