[IMP] website: add close icon mixin

1 files changed, 36 insertions, 0 deletions

diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
index f7c1dbdfe94..4d2fab0d217 100644
--- a/addons/website/static/src/less/website.ui.components.less
+++ b/addons/website/static/src/less/website.ui.components.less
@@ -2,6 +2,37 @@
 /// This file regroups the style of website UI components (edition modals, forms, ...).
 ///
 
+.o-w-close-icon(@size:12px, @color:#000, @color-hover:#000, @thickness: 1px, @opacity: 0.7, @opacity-hover: 1) {
+    color: transparent;
+    position: relative;
+    display: inline-block;
+    opacity: @opacity;
+    .square(@size);
+
+    &:hover, &:focus {
+        outline: none;
+        opacity: @opacity-hover;
+
+        &::after, &::before {
+            background: @color-hover;
+        }
+    }
+
+    &:after, &:before {
+        content: '';
+        margin-top: -1px;
+        background: @color;
+        .size(100%, @thickness);
+        .o-position-absolute(50%, @left:0);
+        .o-transform(rotate(45deg));
+    }
+
+    &:after {
+        .o-transform(rotate(-45deg));
+    }
+}
+
+
 // MODALS
 body .modal {
     &.o_website_modal {
@@ -13,6 +44,11 @@ body .modal {
         .o-w-preserve-wells();
         .o-w-preserve-modals();
 
+        button.close {
+            .o-w-close-icon(12px);
+            margin-right: -2px;
+        }
+
         .modal-content {
             .modal-header .o_subtitle {
                 margin-left: 10px;