diff options
| author | qsm-odoo <qsm@odoo.com> | 2016-06-07 17:03:42 +0200 |
|---|---|---|
| committer | Aaron Bohy <aab@odoo.com> | 2016-06-16 14:59:40 +0200 |
| commit | d0993c19adc421dc3dd4edd0dacda045e07d5cbb (patch) | |
| tree | 1aa7bffd3a4e3fc77c8e3c80439eb4138b8e064d /addons/web_tour/static/src/less/keyframes.less | |
| parent | 38bb6a7f8135a676046bd810cd6c26d2198302c0 (diff) | |
[IMP] web_tour: tip animation
* Improve the JS/LESS so that its content makes the tip grow
with a bubble effect (instead of using a popover).
* Avoid flickering when the mouse leave/enter the tip or move
between the tip and its anchor element.
* Use text-align:left instead of justify
* Set the content width in JS (to a larger width) to be customizable
* Round LESS variable to avoid values like 266.6666666666
* Set opening direction according to viewport:
- Top and bottom tips open towards the right except if they overflow
the window on this right
- Left and right tips open towards the bottom except if they overflow
the window on this bottom
* Improve the 'Skip these steps' mechanism (which is easier as we don't
use bootstrap's popover anymore)
Diffstat (limited to 'addons/web_tour/static/src/less/keyframes.less')
| -rw-r--r-- | addons/web_tour/static/src/less/keyframes.less | 32 |
1 files changed, 24 insertions, 8 deletions
diff --git a/addons/web_tour/static/src/less/keyframes.less b/addons/web_tour/static/src/less/keyframes.less index 3f053ebd82e..08402f4b2ea 100644 --- a/addons/web_tour/static/src/less/keyframes.less +++ b/addons/web_tour/static/src/less/keyframes.less @@ -1,33 +1,49 @@ @-webkit-keyframes move-left-right { 0% { - .translate(0, 0); + .translate(-3px, 0); } 100% { - .translate(5px, 0); + .translate(3px, 0); } } @-moz-keyframes move-left-right { 0% { - .translate(0px, 0px); + .translate(-3px, 0); } 100% { - .translate(5px, 0px); + .translate(3px, 0); + } +} +@keyframes move-left-right { + 0% { + .translate(-3px, 0); + } + 100% { + .translate(3px, 0); } } @-webkit-keyframes move-bottom-top { 0% { - .translate(0, 0); + .translate(0, -3px); } 100% { - .translate(0, 5px); + .translate(0, 3px); } } @-moz-keyframes move-bottom-top { 0% { - .translate(0px, 0px); + .translate(0px, -3px); + } + 100% { + .translate(0, 3px); + } +} +@keyframes move-bottom-top { + 0% { + .translate(0px, -3px); } 100% { - .translate(0, 5px); + .translate(0, 3px); } } |