[IMP] web: backport of utils.less file

Add mixins for transition, animation and text-overflow.
This commit is contained in:
qsm-odoo
2015-08-26 16:41:56 +02:00
parent 40efdccc3d
commit 6d439ec6df
+33 -2
View File
@@ -137,7 +137,6 @@
li {
position: relative;
> a {
padding: 3px 25px;
color: @odoo-main-text-color;
&:hover {
color: darken(@odoo-main-text-color, 10%);
@@ -177,6 +176,26 @@
transform-origin: @x @y @z;
}
// ------------------------------------------------------------------
// Animation
// ------------------------------------------------------------------
.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
-webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
}
// ------------------------------------------------------------------
// Transition
// ------------------------------------------------------------------
.o-transition(@property: all, @duration: 0s, @timing-function: easy, @transition-delay: 0s) {
-webkit-transition: @property @duration @timing-function @transition-delay;
-moz-transition: @property @duration @timing-function @transition-delay;
-o-transition: @property @duration @timing-function @transition-delay;
transition: @property @duration @timing-function @transition-delay;
}
// ------------------------------------------------------------------
// Position absolute
// ------------------------------------------------------------------
@@ -186,4 +205,16 @@
left: @left;
bottom: @bottom;
right: @right;
}
}
// ------------------------------------------------------------------
// Text overflow
// ------------------------------------------------------------------
.o-text-overflow(@display: inline-block) {
display: @display;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top; // To update display context changed by overflow:hidden
}