pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web_editor: make compact design for 'o_switch'

Browse Source 
- Cleaner design
- Reduce element size
- Use LESS variables to simplify maintenance.
- Switch from ‘em’ to ‘ex’ measure units.
- Remove :hover state (not useful).
This commit is contained in:
stefanorigano
2017-07-10 13:37:40 +02:00
committed by qsm-odoo
parent d2251dcb0e
commit cae48bd872
1 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/less/web_editor.ui.components.less
+26 -19
View File
@@ -1,49 +1,56 @@
// INPUTS
@o-switch-size: 2ex;
@o-switch-inactive-color: @gray-lighter;
.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;
background-color: @o-switch-inactive-color;
box-shadow: inset 0 0 0px 1px darken(@o-switch-inactive-color,10%);
border-radius: 100rem;
height: @o-switch-size;
width: @o-switch-size * 1.8;
margin-right: 0.5em;
display: inline-block;
.transition(all 0.3s @o-we-md-ease);
&:after {
content: "";
background: #fafafa;
background: @o-we-color-paper;
display: block;
width: 1.5em;
height: 1.5em;
border-radius: 100em;
margin-top: -0.3em;
margin-left: -0.1em;
width: @o-switch-size - 0.2;
height: @o-switch-size - 0.2;
margin-top: 0.1ex;
margin-left: 0.3ex;
border-radius: 100rem;
.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);
box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
}
}
&:checked + span {
background-color: rgb(142, 224, 212);
background-color: transparentize(@odoo-brand-optional, 0.5);
box-shadow: none;
.o-linear-gradient(0deg, @o-we-color-success, darken(@o-we-color-success, 10%));
&:after {
background-color: @odoo-brand-optional;
margin-left: 1.1em;
margin-left: (@o-switch-size*1.8 - @o-switch-size) + 0.1;
}
}
}
&:hover > input + span:after {
background-color: mix(@odoo-brand-optional, #fafafa);
}
}
.dropdown-menu label .o_switch {
margin: 0;
padding: 2px 0;
}
.text-input-group {
position: relative;
margin-bottom: 45px;