diff options
Diffstat (limited to 'addons/web_editor/static/src/less/web_editor.components.less')
| -rw-r--r-- | addons/web_editor/static/src/less/web_editor.components.less | 276 |
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); +} |