[REF] website,web_editor: complete restyling

1 files changed, 276 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/less/web_editor.components.less b/addons/web_editor/static/src/less/web_editor.components.less
new file mode 100644
index 00000000000..d24df7ac99f
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.components.less
@@ -0,0 +1,276 @@
+#web_editor-top-actions  {
+  a {
+    .transition(all 0.3s);
+    color: darken(@we_color-primary, 10%);
+    &:hover, &:active {
+      text-decoration: none;
+      color: darken(@we_color-primary, 20%);
+    }
+  }
+  // BUTTONS
+  // ====================
+  .btn {
+    font-size: 12px;
+    color: #999999;
+    font-weight: bold;
+    text-decoration: none;
+    .transition(all 0.3s);
+    &:hover, &:focus {
+      color: white;
+      text-decoration: none;
+    }
+    &.accent {
+      .button-variant(white, @we_color-accent, @we_color-accent)
+    }
+    &.compl {
+      .button-variant(white, @we_color-primary, @we_color-primary)
+    }
+    &.full {
+      margin-top: 0;
+      margin-bottom: 0;
+      border-radius: 0;
+      .box-shadow(none);
+    }
+    &.btn-primary {
+      .button-variant(white, @we_color-accent, @we_color-accent);
+      text-transform: uppercase;
+    }
+    &.btn-danger {
+      .button-variant(white, @we_color-danger, @we_color-danger);
+      text-transform: uppercase;
+    }
+    &.btn-success {
+      .button-variant(white, @we_color-success, @we_color-success);
+      text-transform: uppercase;
+    }
+  }
+  .dropdown-toggle {
+    color: @we_dropdown-toggle-color;
+    height: @we_editor-bar-height - @we_editor-dropdown-border-height;
+    line-height: @we_editor-bar-height - @we_editor-dropdown-border-height;
+    border-top: @we_editor-dropdown-border-height solid transparent;
+    text-shadow:0 1px 0 @we_dropdown-toggle-shadow-color;
+  }
+  .dropdown-menu {
+    margin: 0;
+    overflow: hidden;
+    border-radius: 0;
+    border: none;
+    background-color: @we_dropdown-menu-color;
+    .box-shadow(@we_box-shadow);
+    li {
+      a {
+        color: @we_dropdown-toggle-color;
+      }
+      &:hover {
+        a {
+          color: @we_dropdown--open-toggle-color;
+          background: transparent;
+        }
+      }
+    }
+    li.divider {
+      margin: 3px 20px;
+      background-color: @we_color-inactive;
+    }
+  }
+  .open {
+    > .dropdown-toggle {
+      background-color: @we_dropdown--open-toggle-bg-color;
+      color:  @we_dropdown--open-toggle-color;
+      border-top: @we_editor-dropdown-border-height solid white;
+      text-shadow:0 1px 0 @we_dropdown--open-toggle-shadow-color;
+    }
+  }
+  .dropdown-menu {
+    position: absolute;
+    left: auto;
+    right: 0;
+  }
+
+  // ICONS
+  // ======================
+  .material-icons {
+    font-size: 1em;
+    .translateY(2px);
+    margin-right: 5px;
+  }
+
+  // POPOVERS
+  // ======================
+  .popover {
+    border-radius: 3px;
+    .popover-title{
+      color: @we_color-text-dark
+    }
+  }
+
+  // INPUTS
+  // ======================
+  .form-control {
+    font-weight: bold;
+    color: @we_color-text-dark;
+  }
+  .input-group-addon{
+    color: @we_color-text-dark;
+    font-weight: bold;
+  }
+}
+
+// INPUTS
+// ==================
+.switch {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 0.5em;
+  padding: 0;
+  height: 1.5em;
+  cursor: pointer;
+  .translateY(0.2em);
+  .switch_track {
+    background: #bababa;
+    border-radius: 0.4em;
+    height: 1em;
+    width: 2.5em;
+    display: inline-block;
+    .transition(all 0.3s @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 @we_md-ease);
+      .box-shadow(@we_box-shadow);
+    }
+  }
+  .switch_input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+  }
+  &.checked {
+    .switch_track {
+      background-color: rgb(142, 224, 212);
+      background-color: transparentize(@we_color-accent, 0.5);
+      &:after {
+        background-color: @we_color-accent;
+        margin-left: 1.1em;
+      }
+    }
+  }
+  &:hover {
+    .switch_track {
+      &:after {
+        background-color: mix(@we_color-accent, #fafafa);
+      }
+    }
+  }
+}
+
+
+
+// TEXT INPUT
+// ==========================
+
+// <div class="text-input-group">
+//   <input type="text" required="true"/>
+//   <span class="highlight"></span>
+//   <span class="bar"></span>
+//   <label>Name</label>
+// </div>
+
+.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;
+    position:absolute;
+    pointer-events:none;
+    left:5px;
+    top:10px;
+    .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;
+    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 {
+    position:absolute;
+    height:60%;
+    width:100px;
+    top:25%;
+    left:0;
+    pointer-events:none;
+    opacity:0.5;
+  }
+
+  /* active state */
+  input:focus ~ .highlight {
+    .animation(inputHighlighter 0.3s ease);
+  }
+
+}
+
+
+// DRAG&DROP ANIMATIONS
+// ==========================
+
+.oe_snippet_body {
+  .opacity(0);
+  .animation(fadeInDownSmall 1s forwards);
+}