diff options
Diffstat (limited to 'addons/web_tour/static/src/less/tip.less')
| -rw-r--r-- | addons/web_tour/static/src/less/tip.less | 262 |
1 files changed, 192 insertions, 70 deletions
diff --git a/addons/web_tour/static/src/less/tip.less b/addons/web_tour/static/src/less/tip.less index 51370965f55..238ec409b1e 100644 --- a/addons/web_tour/static/src/less/tip.less +++ b/addons/web_tour/static/src/less/tip.less @@ -1,92 +1,214 @@ -@o-tip-background-color: #875a7b; .o_tooltip { - .o_breathing { - position: absolute; - width: 30px; - height: 30px; - border-radius: 50%; - z-index: @zindex-modal+1; - background-color: @o-tip-background-color; - .animation-duration(0.5s); - .animation-timing-function(ease-in); - .animation-iteration-count(infinite); - .animation-direction(alternate); + @o-tip-background-color: lighten(@odoo-brand-primary, 5%); + @o-tip-size: 26px; + @o-tip-border-width: 2px; + + @o-tip-arrow-length: floor(@o-tip-size * 0.5); + @o-tip-arrow-width: floor(@o-tip-size * 0.8); + @o-tip-arrow-integration: floor(@o-tip-size * 0.1); + + @o-tip-duration-in: 300ms; + @o-tip-size-duration-in: floor(@o-tip-duration-in * 3 / 4); + @o-tip-size-delay-in: floor(@o-tip-duration-in / 4); + @o-tip-border-radius-duration-in: floor(@o-tip-duration-in / 2); + @o-tip-border-radius-delay-in: floor(@o-tip-duration-in * 0); + @o-tip-bg-color-duration-in: floor(@o-tip-duration-in * 1); + @o-tip-bg-color-delay-in: floor(@o-tip-duration-in * 0); + @o-tip-arrow-duration-in: floor(@o-tip-duration-in / 2); + @o-tip-arrow-delay-in: floor(@o-tip-duration-in * 0); + @o-tip-white-arrow-duration-in: floor(@o-tip-duration-in * 1); + @o-tip-white-arrow-delay-in: floor(@o-tip-duration-in * 0); + + @o-tip-duration-out: 200ms; + @o-tip-size-duration-out: floor(@o-tip-duration-out * 2 / 3); + @o-tip-size-delay-out: floor(@o-tip-duration-out * 0); + @o-tip-border-radius-duration-out: floor(@o-tip-duration-out * 2 / 3); + @o-tip-border-radius-delay-out: floor(@o-tip-duration-out / 3); + @o-tip-bg-color-duration-out: floor(@o-tip-duration-out * 1); + @o-tip-bg-color-delay-out: floor(@o-tip-duration-out * 0); + @o-tip-arrow-duration-out: floor(@o-tip-duration-out / 2); + @o-tip-arrow-delay-out: floor(@o-tip-duration-out / 2); + + box-sizing: content-box; + position: absolute; + width: @o-tip-size; + height: @o-tip-size; + border: @o-tip-border-width solid @odoo-brand-primary; + border-radius: 50%; + z-index: @zindex-modal+1; + background-color: @o-tip-background-color; + box-shadow: 0 0 2px 0 @odoo-brand-lightsecondary; + + transition: + width @o-tip-size-duration-out ease @o-tip-size-delay-out, + height @o-tip-size-duration-out ease @o-tip-size-delay-out, + margin @o-tip-size-duration-out ease @o-tip-size-delay-out, + border-radius @o-tip-border-radius-duration-out ease @o-tip-border-radius-delay-out, + background-color @o-tip-bg-color-duration-out ease @o-tip-bg-color-delay-out; + + &.o_animated { + .o-animation(move-bottom-top, 500ms, ease-in, 0ms, infinite, alternate); &.right, &.left { .animation-name(move-left-right); } - &.top, &.bottom { - .animation-name(move-bottom-top); - } + } - &::after { - content: ''; - width: 0; - height: 0; - } - &.right::after { - .o-position-absolute(@left: -4px, @top: 5px); - border-right: 10px solid @o-tip-background-color; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; + &::before { + content: ""; + border: 0 solid rgba(0, 0, 0, 0); + transition: all @o-tip-arrow-duration-out ease @o-tip-arrow-delay-out; + } + &.right::before { + .o-position-absolute(@left: -@o-tip-arrow-length+@o-tip-arrow-integration, @top: (@o-tip-size - @o-tip-arrow-width) / 2); + border-width: @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2 0; + border-right-color: @o-tip-background-color; + } + &.top::before { + .o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2); + border-width: @o-tip-arrow-length @o-tip-arrow-width/2 0 @o-tip-arrow-width/2; + border-top-color: @o-tip-background-color; + } + &.left::before { + .o-position-absolute(@right: -@o-tip-arrow-length+@o-tip-arrow-integration, @top: (@o-tip-size - @o-tip-arrow-width) / 2); + border-width: @o-tip-arrow-width/2 0 @o-tip-arrow-width/2 @o-tip-arrow-length; + border-left-color: @o-tip-background-color; + } + &.bottom::before { + .o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2); + border-width: 0 @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2; + border-bottom-color: @o-tip-background-color; + } + + &::after { + @square-size: @o-tip-size*sqrt(2)/2; + @square-pos: (@o-tip-size - @square-size)/2; + .o-position-absolute(@square-pos, @square-pos, @square-pos, @square-pos); + content: "?"; + line-height: @square-size; + text-align: center; + font-size: @square-size; + font-weight: 800; + border-color: @o-tip-background-color; + color: @odoo-brand-lightsecondary; + transition: margin @o-tip-size-duration-out ease @o-tip-size-delay-out; + } + + > .o_tooltip_overlay { + display: none; + .o-position-absolute(0, 0, 0, 0); + margin: -@o-tip-border-width; + z-index: -1; + } + > .o_tooltip_content { + padding: 8px 15px; + visibility: hidden; + transition: visibility 0s ease 0s; + color: black; + + .o_skip_tour { + display: inline-block; + margin-top: 4px; + cursor: pointer; + color: gray; + &:hover { + color: darken(gray, 20%); + } } - &.top::after { - .o-position-absolute(@bottom: -4px, @left: 5px); - border-top: 10px solid @o-tip-background-color; - border-left: 10px solid transparent; - border-right: 10px solid transparent; + > p:last-child { + margin-bottom: 0; } - &.left::after { - .o-position-absolute(@right: -4px, @bottom: 5px); - border-left: 10px solid @o-tip-background-color; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; + } + + &.active { + border-radius: 0; + background-color: white; + + transition: + width @o-tip-size-duration-in ease @o-tip-size-delay-in, + height @o-tip-size-duration-in ease @o-tip-size-delay-in, + margin @o-tip-size-duration-in ease @o-tip-size-delay-in, + border-radius @o-tip-border-radius-duration-in ease @o-tip-border-radius-delay-in, + background-color @o-tip-bg-color-duration-in ease @o-tip-bg-color-delay-in; + + &::before { + transition: all @o-tip-arrow-duration-in ease @o-tip-arrow-delay-in; } - &.bottom::after { - .o-position-absolute(@top: -4px, @right: 5px); - border-bottom: 10px solid @o-tip-background-color; - border-right: 10px solid transparent; - border-left: 10px solid transparent; + &::after { + content: ""; + border: 0 solid rgba(0, 0, 0, 0); } - &::before { - .o-position-absolute(@top: 10px, @left: 10px); - content: '?'; - width: 10px; - height: 10px; - font-size: 18px; - font-weight: 800; - line-height: 0.6; - color: lightgray; - border-radius: 50%; + > .o_tooltip_overlay { + display: block; + } + > .o_tooltip_content { + visibility: visible; + transition: visibility 0s ease @o-tip-duration-in; } - } - .popover { - border: 2px solid @odoo-brand-primary; - &.right > .arrow { - border-right-color: @odoo-brand-primary; - left: -13px; + &.right { + &::before { + left: -@o-tip-arrow-length; + border-right-color: @odoo-brand-primary; + } &::after { - border-left-width: 2px; + .o-position-absolute(@left: -@o-tip-arrow-length+@o-tip-border-width*2, @top: (@o-tip-size - @o-tip-arrow-width) / 2); + border-width: @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2 0; + border-right-color: white; + transition: border-right-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in; } } - &.bottom > .arrow { - border-bottom-color: @odoo-brand-primary; - top: -13px; + &.top { + &::before { + bottom: -@o-tip-arrow-length; + border-top-color: @odoo-brand-primary; + } &::after { - border-top-width: 2px; + .o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2); + border-width: @o-tip-arrow-length @o-tip-arrow-width/2 0 @o-tip-arrow-width/2; + border-top-color: white; + transition: border-top-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in; } } - .popover-content { - color: black; - text-align: justify; - .o_skip_tour { - display: inline-block; - margin-top: 5px; - cursor: pointer; - color: gray; + &.left { + &::before { + right: -@o-tip-arrow-length; + border-left-color: @odoo-brand-primary; } - } + &::after { + .o-position-absolute(@right: -@o-tip-arrow-length+@o-tip-border-width*2, @top: (@o-tip-size - @o-tip-arrow-width) / 2); + border-width: @o-tip-arrow-width/2 0 @o-tip-arrow-width/2 @o-tip-arrow-length; + border-left-color: white; + transition: border-left-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in; + } + } + &.bottom { + &::before { + top: -@o-tip-arrow-length; + border-bottom-color: @odoo-brand-primary; + } + &::after { + .o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2); + border-width: 0 @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2; + border-bottom-color: white; + transition: border-bottom-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in; + } + } + } + + &.inverse { + &.left, &.right { + &::before, &.active::after { + top: auto; + bottom: (@o-tip-size - @o-tip-arrow-width) / 2; + } + } + &.top, &.bottom { + &::before, &.active::after { + left: auto; + right: (@o-tip-size - @o-tip-arrow-width) / 2; + } + } } } |