@import "../buttons";
$background: #23282d;
.sf-guided-tour {
display: block;
background-color: rgba(35, 40, 45, 0.95);
border-radius: 5px;
box-shadow: 3px 1px 5px -2px rgba(0, 0, 0, 0.145);
color: #a4a4a4;
font-size: 1.1em;
z-index: 999999998;
text-align: left;
box-sizing: border-box;
position: fixed;
left: 5px;
width: 360px;
transition-duration: 250ms;
transition-property: opacity;
transition-timing-function: ease-in-out;
opacity: 0;
&::before {
content: "";
position: absolute;
top: 30px;
left: -14px;
width: 0;
height: 0;
border-style: solid;
border-width: 14px 14px 14px 0;
border-color: transparent $background transparent transparent;
border-right-color: rgba(35, 40, 45, 0.95);
}
.sf-guided-tour-step {
padding: 30px;
overflow: hidden;
p {
font-size: 1em;
line-height: 1.7;
}
h2 {
margin-top: 0;
font-size: 1.1em;
font-weight: 500;
color: #fff;
}
.sf-guided-tour-skip {
margin-left: 10px;
color: #00aadc;
&:hover {
opacity: 0.75;
}
}
}
&:not(.sf-first-step) {
.sf-guided-tour-step {
a.sf-nux-button {
display: none;
}
.sf-guided-tour-skip {
display: block;
float: right;
}
}
}
&.sf-inside-section {
.sf-guided-tour-step {
a.sf-nux-button {
display: inline-block;
}
.sf-guided-tour-skip {
display: none;
}
}
}
&.sf-last-step {
.sf-guided-tour-step {
a.sf-nux-button {
display: inline-block;
}
}
}
}
a.sf-nux-button {
vertical-align: middle;
&:active {
vertical-align: middle;
}
}
.sf-loaded {
opacity: 1;
}
.sf-moving {
transition-duration: 250ms;
transition-property: transform;
transition-timing-function: cubic-bezier(0.84, 0.45, 0.68, 1.44);
}
.sf-entering,
.sf-exiting {
.sf-guided-tour {
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: ease-in-out;
}
}
.sf-entering {
.sf-guided-tour {
animation-name: bounceInLeft;
-webkit-animation-name: bounceInLeft;
}
}
.sf-exiting {
.sf-guided-tour {
animation-name: bounceOutRight;
-webkit-animation-name: bounceOutRight;
}
}
@-webkit-keyframes bounceInLeft {
from {
opacity: 0;
-webkit-transform: translateX(100%);
}
to {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes bounceInLeft {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes bounceOutRight {
to {
opacity: 0;
-webkit-transform: translateX(100%);
}
}
@keyframes bounceOutRight {
to {
opacity: 0;
transform: translateX(100%);
}
}