[REF] base: onboarding-panel, review/simplify scss
Part of the overall v16 SCSS optimization/restyle (task-2704984). task-2753905 closes odoo/odoo#84058 Related: odoo/upgrade#3228 Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
stefanorigano (SRI)
@@ -0,0 +1 @@
|
||||
<svg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='42' y='-10' width='6' height='10'/><rect x='84' y='-10' width='6' height='10'/><rect x='126' y='-13' width='5' height='13'/><rect x='168' y='-13' width='5' height='13'/><rect x='210' y='-10' width='6' height='10'/><rect x='252' y='-13' width='5' height='13'/><rect x='294' y='-10' width='6' height='10'/><rect x='336' y='-13' width='5' height='13'/><rect x='378' y='-13' width='5' height='13'/><rect x='420' y='-10' width='6' height='10'/><rect x='462' y='-10' width='6' height='10'/><rect x='504' y='-13' width='5' height='13'/><rect x='546' y='-10' width='6' height='10'/><style type='text/css'> rect { opacity: 0; } rect:nth-child(1) { transform-origin: 45px 5px; transform: rotate(-145deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; } rect:nth-child(2) { transform-origin: 87px 5px; transform: rotate(164deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; } rect:nth-child(3) { transform-origin: 128px 6px; transform: rotate(4deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; } rect:nth-child(4) { transform-origin: 170px 6px; transform: rotate(-175deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; } rect:nth-child(5) { transform-origin: 213px 5px; transform: rotate(-97deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; } rect:nth-child(6) { transform-origin: 255px 6px; transform: rotate(57deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; } rect:nth-child(7) { transform-origin: 297px 5px; transform: rotate(-46deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; } rect:nth-child(8) { transform-origin: 338px 6px; transform: rotate(-65deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; } rect:nth-child(9) { transform-origin: 380px 6px; transform: rotate(13deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; } rect:nth-child(10) { transform-origin: 423px 5px; transform: rotate(176deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; } rect:nth-child(11) { transform-origin: 465px 5px; transform: rotate(108deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; } rect:nth-child(12) { transform-origin: 506px 6px; transform: rotate(62deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; } rect:nth-child(13) { transform-origin: 549px 5px; transform: rotate(16deg); animation: o_onb_anim 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; } rect:nth-child(odd) { fill: #65BB5C; } rect:nth-child(even) { z-index: 1; fill: #58cafe; } rect:nth-child(4n) { animation-duration: 1400ms; fill: #ff6e83; } rect:nth-child(3n) { animation-duration: 1750ms; animation-delay: 700ms; } rect:nth-child(4n-7) { fill: #bea4ff; } rect:nth-child(6n) { fill: #feb535; } @keyframes o_onb_anim { from { opacity: 0; } 20% { opacity: 1; } to { transform: translateY(90px); } } </style></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -1,409 +1,165 @@
|
||||
$o-onboarding-dot-size: 20px;
|
||||
$o-onboarding-dot-timing: 0.5s;
|
||||
// = Onboarding Panel
|
||||
// ============================================================================
|
||||
.o_onboarding_main {
|
||||
$o-onboarding-base-time: 0.5s;
|
||||
$o-onboarding-dot-size: 20px;
|
||||
$o-onboarding-progress-size: 2px;
|
||||
$o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4;
|
||||
|
||||
$o-onboarding-blue-bg-1: #60ABC3;
|
||||
$o-onboarding-blue-bg-2: #4187AE;
|
||||
$o-onboarding-blue-ui-1: #F39D9B;
|
||||
$o-onboarding-blue-ui-2: #FBEEC8;
|
||||
$o-onboarding-colors: (
|
||||
'blue': (
|
||||
'bg': (#60ABC3, #4187AE),
|
||||
'ui': (#fcb157, #FBEEC8),
|
||||
),
|
||||
'orange': (
|
||||
'bg': (#DA9D77, #B9684F),
|
||||
'ui': (#0774f4, #68B3C9),
|
||||
),
|
||||
'violet': (
|
||||
'bg': (#6070C3, #475DA4),
|
||||
'ui': (#F39D9B, #FBEEC8),
|
||||
),
|
||||
);
|
||||
|
||||
$o-onboarding-orange-bg-1: #DA9D77;
|
||||
$o-onboarding-orange-bg-2: #B9684F;
|
||||
$o-onboarding-orange-ui-1: #599FF1;
|
||||
$o-onboarding-orange-ui-2: #68B3C9;
|
||||
|
||||
$o-onboarding-violet-bg-1: #6070C3;
|
||||
$o-onboarding-violet-bg-2: #475DA4;
|
||||
$o-onboarding-violet-ui-1: #F39D9B;
|
||||
$o-onboarding-violet-ui-2: #FBEEC8;
|
||||
|
||||
@mixin o-onboarding-vertical-gradient($startColor: #555, $endColor: #333) {
|
||||
background-color: mix($startColor, $endColor);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
|
||||
background-image: -webkit-linear-gradient(top, $startColor, $endColor);
|
||||
background-image: -moz-linear-gradient(top, $startColor, $endColor);
|
||||
background-image: -ms-linear-gradient(top, $startColor, $endColor);
|
||||
background-image: -o-linear-gradient(top, $startColor, $endColor);
|
||||
background-image: linear-gradient(to bottom, $startColor, $endColor);
|
||||
}
|
||||
|
||||
.o_onboarding {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white center top;
|
||||
background-size: cover;
|
||||
border-bottom: 1px solid gray('300');
|
||||
|
||||
// = Color Variations
|
||||
// ------------------------------------------------------------------------
|
||||
@each $key, $values in $o-onboarding-colors {
|
||||
&.o_onboarding_#{$key} {
|
||||
$-bg: map-get($values, 'bg');
|
||||
$-ui: map-get($values, 'ui');
|
||||
|
||||
@include print-variable('o-onboarding-done-color', nth($-ui, 1));
|
||||
@include print-variable('o-onboarding-todo-color', nth($-ui, 2));
|
||||
@include print-variable('o-onboarding-bg_1-color', fade-out(nth($-bg, 1), 0.5));
|
||||
@include print-variable('o-onboarding-bg_2-color', nth($-bg, 2));
|
||||
}
|
||||
}
|
||||
|
||||
.o_onboarding_wrap {
|
||||
padding: $o-horizontal-padding*2 $o-horizontal-padding;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
.o_onboarding_step_title, a.o_onboarding_all_done {
|
||||
cursor: pointer;
|
||||
overflow-x: auto;
|
||||
background-color: var(--o-onboarding-bg_1-color);
|
||||
background-image: linear-gradient(to bottom, var(--o-onboarding-bg_1-color), var(--o-onboarding-bg_2-color));
|
||||
}
|
||||
|
||||
.o_onboarding_btn_close {
|
||||
@include o-position-absolute(auto, 0, 0);
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.o_onboarding_btn_close {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
.o_onboarding_completed_message {
|
||||
@include o-position-absolute(auto, 0,0,0);
|
||||
//transform: translateY(115%);
|
||||
//transition: transform $o-onboarding-dot-timing;
|
||||
box-shadow: 0 2px 10px gray(600);
|
||||
padding: $o-horizontal-padding;
|
||||
background-color: white;
|
||||
color: $o-main-text-color;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
&.o_onboarding_steps_just_done {
|
||||
animation: o_onb_fadeIn ($o-onboarding-dot-timing*3);
|
||||
}
|
||||
&.o_onboarding_steps_done {
|
||||
opacity: 1;
|
||||
z-index: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.o_onboarding_steps, .o_onboarding_step {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.o_onboarding_steps {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: initial;
|
||||
box-shadow: 0 -7px 20px -5px rgba(#000, 0.3);
|
||||
animation: o_onboarding_slideInUp $o-onboarding-base-time ease-out;
|
||||
}
|
||||
|
||||
// = Step Design
|
||||
// ------------------------------------------------------------------------
|
||||
.o_onboarding_step {
|
||||
flex-flow: column nowrap;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
opacity: 0.6;
|
||||
flex: 1 1 0;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
flex: 1 0 auto;
|
||||
margin-bottom: 16px;
|
||||
align-items: baseline;
|
||||
|
||||
.o_onboarding_step_content {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
.o_onboarding_progress {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.o_onboarding_dot {
|
||||
transition-delay: 0s;
|
||||
@for $i from 1 through 5 {
|
||||
&.o_onboarding_step__todo:nth-child(#{$i}) {
|
||||
@include print-variable('o-onboarding-animation-delay', $i * .15s);
|
||||
}
|
||||
}
|
||||
|
||||
.o_onboarding_step_content {
|
||||
@include media-breakpoint-up(lg) {
|
||||
min-width: 230px;
|
||||
}
|
||||
/* Progressbar should not break in mobile view */
|
||||
@include media-breakpoint-down(sm) {
|
||||
min-width: 230px;
|
||||
}
|
||||
max-width: 230px;
|
||||
padding: 0 10px;
|
||||
|
||||
.o_onboarding_step_action {
|
||||
border: 1px solid gray('200');
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.o_onboarding_progress {
|
||||
@include o-position-absolute($o-onboarding-dot-size*0.5 - 2px, calc(50% + 10px));
|
||||
width: calc(100% - 20px);
|
||||
height: 4px;
|
||||
background-color: gray('200');
|
||||
|
||||
.progress-bar {
|
||||
background-image: linear-gradient(90deg, $o-brand-primary, $o-brand-odoo);
|
||||
transition: opacity $o-onboarding-dot-timing;
|
||||
}
|
||||
}
|
||||
|
||||
.o_onboarding_dot {
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
width: $o-onboarding-dot-size;
|
||||
height: $o-onboarding-dot-size;
|
||||
color: transparent;
|
||||
padding-top: 5px;
|
||||
font-size: 11px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background-color: gray('200');
|
||||
position: relative;
|
||||
transition: background $o-onboarding-dot-timing ease $o-onboarding-dot-timing;
|
||||
}
|
||||
|
||||
.o_onboarding_all_done {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Steps' Status
|
||||
&.o_onboarding_current, &.o_onboarding_done {
|
||||
opacity: 1;
|
||||
|
||||
.o_onboarding_progress .progress-bar {
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
transition: width $o-onboarding-dot-timing;
|
||||
}
|
||||
}
|
||||
|
||||
&.o_onboarding_current {
|
||||
.o_onboarding_step_action, .o_onboarding_dot {
|
||||
animation: bounceIn ($o-onboarding-dot-timing*2);
|
||||
}
|
||||
|
||||
.o_onboarding_step_action {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.o_onboarding_dot {
|
||||
background: $o-brand-odoo;
|
||||
}
|
||||
}
|
||||
|
||||
&.o_onboarding_done {
|
||||
.o_onboarding_dot {
|
||||
background: $o-brand-primary;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.o_onboarding_all_done {
|
||||
display: block;
|
||||
}
|
||||
|
||||
+ .o_onboarding_done {
|
||||
.o_onboarding_dot {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.o_onboarding_progress {
|
||||
background: $o-brand-primary;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.o_onboarding_just_done {
|
||||
|
||||
.o_onboarding_all_done {
|
||||
animation: bounceIn ($o-onboarding-dot-timing*2);
|
||||
display: block;
|
||||
}
|
||||
.o_onboarding_step_content_info {
|
||||
animation: o_onb_fadeIn ($o-onboarding-dot-timing*3);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes o_onb_fadeIn {
|
||||
0% {opacity: 0}
|
||||
33% {opacity: 0}
|
||||
100% {opacity: 1}
|
||||
}
|
||||
|
||||
// ========= Color Variations =========
|
||||
// ======================================
|
||||
|
||||
// ========= Variation Mixin ==========
|
||||
@mixin o-onboarding-variation($bg1, $bg2, $ui1, $ui2) {
|
||||
&, .o_onboarding_step_title, .o_onboarding_step_action, a.o_onboarding_all_done, .o_onboarding_all_done > .fa, .o_onboarding_btn_close {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.o_onboarding_wrap {
|
||||
@include o-onboarding-vertical-gradient(fade-out($bg1, 0.5), $bg2);
|
||||
box-shadow: inset 0 -7px 20px -5px fade-out(black, 0.7);
|
||||
}
|
||||
|
||||
.o_onboarding_dot, .o_onboarding_progress {
|
||||
background-color: fade-out(white, 0.5);
|
||||
width: $o-onboarding-step-width;
|
||||
}
|
||||
|
||||
.o_onboarding_step_action {
|
||||
border-color: fade-out(white, 0.5);
|
||||
min-width: $o-onboarding-step-width * .5;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-image: linear-gradient(90deg, $ui1, $ui2);
|
||||
.o_onboarding_progress {
|
||||
height: $o-onboarding-progress-size;
|
||||
width: calc(100% - #{$o-onboarding-dot-size});
|
||||
background: var(--o-onboarding-todo-color, #{$o-brand-odoo});
|
||||
transform:
|
||||
translateX(-100%)
|
||||
translateY($o-onboarding-dot-size * .5 - $o-onboarding-progress-size * .5);
|
||||
}
|
||||
|
||||
.o_onboarding_step {
|
||||
&.o_onboarding_done, .o_onboarding_done + .o_onboarding_done {
|
||||
.o_onboarding_dot, .o_onboarding_progress {
|
||||
background: $ui1;
|
||||
}
|
||||
.o_onboarding_dot {
|
||||
width: $o-onboarding-dot-size;
|
||||
height: $o-onboarding-dot-size;
|
||||
padding-top: .5em;
|
||||
background-color: var(--o-onboarding-todo-color, $o-brand-odoo);
|
||||
color: transparent;
|
||||
transition: all $o-onboarding-base-time ease;
|
||||
transform: scale3d(.5, .5, .5);
|
||||
}
|
||||
|
||||
&:first-of-type .o_onboarding_progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// = "To do" Step Design
|
||||
// --------------------------------------------------------------------
|
||||
&[data-step-state="not_done"] {
|
||||
.o_onboarding_step_content_info {
|
||||
animation: o_onboarding_zoomIn ($o-onboarding-base-time * 1.5) both;
|
||||
animation-delay: var(--o-onboarding-animation-delay, 0);
|
||||
}
|
||||
|
||||
&.o_onboarding_current .o_onboarding_dot {
|
||||
background: $ui2;
|
||||
.o_onboarding_step_action {
|
||||
animation: o_onboarding_slideInUp ($o-onboarding-base-time * 2) both;
|
||||
animation-delay: var(--o-onboarding-animation-delay, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// = "Done" Step Design
|
||||
// --------------------------------------------------------------------
|
||||
&:not([data-step-state="not_done"]) {
|
||||
.o_onboarding_dot, + .o_onboarding_step:not([data-step-state="not_done"]) .o_onboarding_progress {
|
||||
background: var(--o-onboarding-done-color, #{$o-brand-primary});
|
||||
}
|
||||
|
||||
.o_onboarding_dot {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// = "Just Done" Step Design
|
||||
// --------------------------------------------------------------------
|
||||
&[data-step-state="just_done"] {
|
||||
.o_onboarding_step_content_info {
|
||||
animation: o_onboarding_fadeIn ($o-onboarding-base-time * 3);
|
||||
}
|
||||
|
||||
.o_onboarding_step_action__done {
|
||||
animation: bounceIn ($o-onboarding-base-time * 2);
|
||||
}
|
||||
|
||||
.o_onboarding_confetti {
|
||||
animation: o_onboarding_fadeInOut ($o-onboarding-base-time * 3) ease 0s 1 forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========= Variation Templates ==========
|
||||
&.o_onboarding_blue {
|
||||
@include o-onboarding-variation($o-onboarding-blue-bg-1, $o-onboarding-blue-bg-2, $o-onboarding-blue-ui-1, $o-onboarding-blue-ui-2);
|
||||
}
|
||||
|
||||
&.o_onboarding_orange {
|
||||
@include o-onboarding-variation($o-onboarding-orange-bg-1, $o-onboarding-orange-bg-2, $o-onboarding-orange-ui-1, $o-onboarding-orange-ui-2);
|
||||
}
|
||||
|
||||
&.o_onboarding_violet {
|
||||
@include o-onboarding-variation($o-onboarding-violet-bg-1, $o-onboarding-violet-bg-2, $o-onboarding-violet-ui-1, $o-onboarding-violet-ui-2);
|
||||
}
|
||||
|
||||
// ========= "Cannon Confetti" animation ==========
|
||||
.o_onboarding_confetti {
|
||||
animation: cannon-explosion ($o-onboarding-dot-timing*3) ease-out 0s 1 normal both;
|
||||
@include o-position-absolute(0, 50%, 30px);
|
||||
transform-origin: 50% 100%;
|
||||
display: none;
|
||||
width: 1px;
|
||||
|
||||
@keyframes cannon-explosion {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
@include o-position-absolute(auto, 0, 5px,0);
|
||||
transform-origin: 50% 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around;
|
||||
align-content: center;
|
||||
padding-bottom: 30%;
|
||||
|
||||
&:nth-child(1), &:nth-child(5) {
|
||||
height: 90%;
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
&:nth-child(2), &:nth-child(4) {
|
||||
height: 95%;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
height: 100%;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
&:nth-child(5) {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
> div {
|
||||
flex: 0 1 auto;
|
||||
animation: confetti-rotate-l ($o-onboarding-dot-timing*3) ease-out 0s 1 normal both;
|
||||
|
||||
&:nth-child(odd) {
|
||||
animation: confetti-rotate-r ($o-onboarding-dot-timing*3) ease-out 0s 1 normal both;
|
||||
}
|
||||
|
||||
@keyframes confetti-rotate-l {
|
||||
0% {
|
||||
transform: rotate(0) scaleY(1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(2turn) scaleY(1.5);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(2.05turn) scaleY(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes confetti-rotate-r {
|
||||
0% {
|
||||
transform: rotate(0) scaleY(1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-2turn) scaleY(1.5);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-2.05turn) scaleY(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon {
|
||||
width: .3em;
|
||||
height: .7em;
|
||||
border-radius: .1em;
|
||||
}
|
||||
|
||||
&.flake {
|
||||
width: .3em;
|
||||
height: .3em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Confetti Colors
|
||||
&.color-1 {
|
||||
background-color: #feb535;
|
||||
}
|
||||
|
||||
&.color-2 {
|
||||
background-color: #bea4ff;
|
||||
}
|
||||
|
||||
&.color-3 {
|
||||
background-color: #ff6e83;
|
||||
}
|
||||
|
||||
&.color-4 {
|
||||
background-color: #58cafe;
|
||||
}
|
||||
}
|
||||
// = Animations
|
||||
// ------------------------------------------------------------------------
|
||||
@keyframes o_onboarding_slideInUp {
|
||||
from {
|
||||
transform: translate3d(0, 20%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.o_onboarding_just_done {
|
||||
// Activate confetti cannon when step is done
|
||||
.o_onboarding_confetti {
|
||||
display: block;
|
||||
@keyframes o_onboarding_zoomIn {
|
||||
from {
|
||||
transform: scale3d(0.8, 0.8, 0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes o_onboarding_fadeIn {
|
||||
10%, 66% { opacity: 0; }
|
||||
0%, 100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes o_onboarding_fadeInOut {
|
||||
10%, 66% { opacity: 1; }
|
||||
0%, 100% { opacity: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,110 +24,66 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="o_onboarding_container collapse show">
|
||||
<div t-att-class="'o_onboarding ' + ('o_onboarding_completed ' if steps_completed else ' ') + classes"
|
||||
<div t-att-class="'o_onboarding_main position-relative overflow-hidden ' + classes"
|
||||
t-att-style="'background-image:url(' + bg_image + ')'">
|
||||
<div class="o_onboarding_wrap">
|
||||
<a href="#" data-toggle="modal" data-target=".o_onboarding_modal"
|
||||
class="float-right o_onboarding_btn_close">
|
||||
<i class="fa fa-times" title="Close the onboarding panel" />
|
||||
</a>
|
||||
<div class="o_onboarding_steps">
|
||||
<t t-out="0" />
|
||||
</div>
|
||||
<div t-att-class="'o_onboarding_completed_message text-center' + (' o_onboarding_steps_done' if state.get('onboarding_state') in ('done', 'just_done') else '') + (' o_onboarding_steps_just_done' if state.get('onboarding_state') == 'just_done' else '')">
|
||||
<i class="fa fa-check text-success mr8" />
|
||||
<span class="h3 mr16">
|
||||
<t t-if="text_completed" t-esc="text_completed" />
|
||||
|
||||
<div class="o_onboarding_wrap py-5">
|
||||
<a href="#" data-toggle="modal" data-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2 text-white" title="Close the onboarding panel"><i class="oi oi-close"/></a>
|
||||
|
||||
<div class="o_onboarding_steps d-flex" t-out="0"/>
|
||||
|
||||
<div t-if="state.get('onboarding_state') in ('done', 'just_done')"
|
||||
t-att-state="state.get('onboarding_state')"
|
||||
class="o_onboarding_completed_message position-absolute end-0 bottom-0 left-0 border-bottom py-4 bg-white d-flex align-items-center justify-content-center">
|
||||
<span class="h3 m-0">
|
||||
<i class="fa fa-check text-success me-3" />
|
||||
<t t-if="text_completed" t-out="text_completed" />
|
||||
<t t-else="">Nice work! Your configuration is done.</t>
|
||||
</span>
|
||||
<a type="action" class="btn btn-primary" data-toggle="collapse" href=".o_onboarding_container"
|
||||
t-att-data-model="close_model" t-att-data-method="close_method">
|
||||
Close
|
||||
</a>
|
||||
<a type="action" class="btn btn-primary ms-4" data-toggle="collapse" href=".o_onboarding_container" t-att-data-model="close_model" t-att-data-method="close_method">
|
||||
Close
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="onboarding_step">
|
||||
<div t-att-class="'o_onboarding_step ' + ('o_onboarding_done' if state in ('done', 'just_done') else 'o_onboarding_current') + (' o_onboarding_just_done' if state == 'just_done' else '')">
|
||||
<t t-call="base.onboarding_confetti" />
|
||||
<div class="o_onboarding_progress d-inline-block progress">
|
||||
<div class="progress-bar"></div>
|
||||
<div class="o_onboarding_step position-relative d-flex flex-column align-items-center justify-content-start text-center" t-att-data-step-state="state">
|
||||
<img t-if="state == 'just_done'" class="o_onboarding_confetti position-absolute w-100" src="/base/static/img/onboarding_confetti.svg" alt="o_onboarding_confetti"/>
|
||||
|
||||
<div class="o_onboarding_step_side d-flex pt-0 flex-grow-1">
|
||||
<div class="o_onboarding_progress position-absolute"/>
|
||||
<span t-attf-class="o_onboarding_dot fa fa-check d-inline-block rounded-circle small {{state != 'not_done' and 'text-white' or ''}}"/>
|
||||
</div>
|
||||
<span class="o_onboarding_dot d-inline-block fa fa-check" />
|
||||
<div class="o_onboarding_step_content">
|
||||
<div class="o_onboarding_step_content_info">
|
||||
<h4 class="o_onboarding_step_title mt16">
|
||||
<a type="action" data-reload-on-close="true" role="button"
|
||||
t-att-data-method="method" t-att-data-model="model">
|
||||
<t t-esc="title" />
|
||||
</a>
|
||||
</h4>
|
||||
<p class="mb16">
|
||||
<t t-esc="description" />
|
||||
</p>
|
||||
|
||||
<div class="o_onboarding_step_content py-3 flex-grow-1 d-flex flex-column align-items-center justify-content-around">
|
||||
<div class="o_onboarding_step_content_info mb-3">
|
||||
<a type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
|
||||
<h4 class="o_onboarding_step_title text-white" t-out="title"/>
|
||||
</a>
|
||||
<p class="text-white-75 m-0" t-out="description"/>
|
||||
</div>
|
||||
<a class="o_onboarding_step_action btn" type="action"
|
||||
data-reload-on-close="true" role="button" t-att-data-method="method"
|
||||
t-att-data-model="model">
|
||||
<t t-if="btn_text" t-esc="btn_text" />
|
||||
<t t-else="">Let's do it</t>
|
||||
<a t-if="state == 'not_done'" class="o_onboarding_step_action btn px-4 border border-white" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
|
||||
<span class="text-white">
|
||||
<t t-if="btn_text" t-out="btn_text" />
|
||||
<t t-else="">Let's do it</t>
|
||||
</span>
|
||||
</a>
|
||||
<a class="o_onboarding_all_done mt16" type="action"
|
||||
data-reload-on-close="true" role="button" t-att-data-method="method"
|
||||
t-att-data-model="model">
|
||||
<i t-attf-class="text-success mr6 fa #{done_icon if done_icon else 'fa-check'}" />
|
||||
<span>
|
||||
<t t-if="done_text" t-esc="done_text" />
|
||||
<a t-else="" class="o_onboarding_step_action__done btn text-white" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
|
||||
<span class="text-white">
|
||||
<i t-attf-class="me-2 fa #{done_icon if done_icon else 'fa-check'}" />
|
||||
<t t-if="done_text" t-out="done_text" />
|
||||
<t t-else="">All done!</t>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="onboarding_confetti">
|
||||
<div class="o_onboarding_confetti">
|
||||
<div>
|
||||
<div class="flake color-3" />
|
||||
<div class="ribbon color-1" />
|
||||
<div class="ribbon color-2" />
|
||||
<div class="flake color-1" />
|
||||
<div /> <!-- spacer -->
|
||||
</div>
|
||||
<div>
|
||||
<div class="ribbon color-2" />
|
||||
<div class="flake color-2" />
|
||||
<div class="flake color-3" />
|
||||
<div class="ribbon color-1" />
|
||||
<div class="flake color-4" />
|
||||
<div /> <!-- spacer -->
|
||||
</div>
|
||||
<div>
|
||||
<div class="ribbon color-1" />
|
||||
<div class="ribbon color-4" />
|
||||
<div class="ribbon color-2" />
|
||||
<div class="flake color-3" />
|
||||
<div /> <!-- spacer -->
|
||||
</div>
|
||||
<div>
|
||||
<div class="flake color-3" />
|
||||
<div class="ribbon color-1" />
|
||||
<div class="ribbon color-4" />
|
||||
<div class="flake color-3" />
|
||||
<div class="ribbon color-2" />
|
||||
<div /> <!-- spacer -->
|
||||
</div>
|
||||
<div>
|
||||
<div class="ribbon color-2" />
|
||||
<div class="flake color-3" />
|
||||
<div class="flake color-4" />
|
||||
<div class="ribbon color-1" />
|
||||
<div /> <!-- spacer -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ONBOARDING STEPS -->
|
||||
<template id="onboarding_company_step">
|
||||
<t t-call="base.onboarding_step">
|
||||
|
||||
Reference in New Issue
Block a user