santa-tutorial.scss

/**
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

$tutorial-width: 275px;
$tutorial-height: 270px;
$tutorial-step-time: 1s;

:host {

}

// This is invisible, but is circular so as to provide a friendly dismiss target.
button {
  pointer-events: auto;
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: absolute;
  opacity: 0;
  border-radius: 100000px;
}

svg {
  pointer-events: none;
  opacity: 0.95;
  transition: opacity 0.125s;
  filter: drop-shadow(4px 12px 0 rgba(0, 0, 0, 0.15));
}

button:focus {
  outline: none;
}

button:focus + svg {
  opacity: 0.7;
}

.size {
  width: $tutorial-width;
  height: $tutorial-height;
  overflow: hidden;
}

img {
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
  height: $tutorial-height;
}

video {
  object-fit: cover;
}

img,
video {
  pointer-events: none;
  // This is the encoded cloud image that's included in the element as a clip-path; Safari won't
  // apply foreignObject clip-path to img/video (because they are animated GPU players).
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjc1LjA3NCIgaGVpZ2h0PSIyNzAuNTA4IiB2aWV3Qm94PSIwIDAgMjc1LjA3NCAyNzAuNTA4Ij48ZGVmcz48cGF0aCBpZD0iYSIgZD0iTTEwNC4xMSAyNjcuNjhhNDguNDk4IDQ4LjQ5OCAwIDAgMCAxOC4wNDMtNi42NzJjMTMuMzQ2IDcuODEgMjkuMzY4IDExLjIzNiA0NS44MzQgOC42NDggMjguMDg3LTQuNDE1IDQ5LjU3NS0yNS4wODcgNTYuMzk2LTUwLjkyLjE2Ny0uMDI0LjMzNC0uMDQ2LjUtLjA3MiAyNy4yMy00LjI4IDQ2LjA2Ny0yOC4zMzIgNDIuMDc2LTUzLjcyLTEuMzA2LTguMy00Ljg5LTE1LjcxNS0xMC4wNzQtMjEuNzg4IDEyLjQ4LTYuMjM0IDIwLjA2Ni0yMC4wMTggMTcuNzg0LTM0LjUzLTIuNTUtMTYuMjMtMTYuNTY0LTI3LjgwNy0zMi40OTUtMjcuNzg2YTYyLjE1IDYyLjE1IDAgMCAwLS43NDctOC44ODhjLTUuMDctMzIuMjUtMzQuMzI2LTU0LjY4NC02Ni4zODItNTEuNzM1QzE2OS4zNDYgNi41NDQgMTU0Ljg3Ni0yIDEzOS41OS40MDRjLTkuNjczIDEuNTItMTcuNjg4IDcuMTE2LTIyLjU4NSAxNC43NTgtOS41NTQtMy40MjQtMjAuMDc4LTQuNTcyLTMwLjgxLTIuODg1LTMxLjAyMiA0Ljg3Ny01My4xMiAzMS43NDYtNTIuOTE0IDYyLjIyNWEzNC43NyAzNC43NyAwIDAgMC00LjI1OC4zOUMxMC4zNTggNzcuODMtMi4zOTQgOTUuMzM3LjU0MiAxMTRjMS45NDUgMTIuMzc4IDEwLjMwNCAyMi4xNSAyMS4xNTYgMjYuNDc1LTE1LjA0NiA4LjQ1My0yNC4wMTMgMjUuNjMtMjEuMTc1IDQzLjY3OCAzLjU4IDIyLjc4IDI0LjYzIDM4LjQ3IDQ3LjM1MyAzNS41NzIuMDEgMi40NTIuMjA0IDQuOTM1LjU5NyA3LjQzMyA0LjE3MyAyNi41NTQgMjkuMDg0IDQ0LjY5NyA1NS42MzcgNDAuNTIzeiIvPjwvZGVmcz48dXNlIHhsaW5rOmhyZWY9IiNhIiBvdmVyZmxvdz0idmlzaWJsZSIvPjwvc3ZnPg==);
}

// generate tutorial-steps-N, where it moves -275px each time
@for $i from 2 through 6 {
  @keyframes tutorial-steps-#{$i} {
    $part: (100 / $i);

    @for $j from 0 through ($i - 1) {
      #{$j * $part}% {
        transform: translateX(-($j * $tutorial-width));
      }
    }
    100% {
      transform: translateX(0);
    }
  }
  img.steps-#{$i} {
    animation-name: tutorial-steps-#{$i};
    animation-duration: $i * $tutorial-step-time;
    width: $tutorial-width * $i;
  }
}