vincentnavetat

handleDropdownPosition() {
  const screenPadding = 16;

  const placeholderRect = this.placeholder.getBoundingClientRect();
  const dropdownRect = this.dropdown.getBoundingClientRect();

  const dropdownRightX = dropdownRect.x + dropdownRect.width;
  const placeholderRightX = placeholderRect.x + placeholderRect.width;

  if (dropdownRect.x < 0) {

vincentnavetat

class Tooltip extends HTMLElement {
  connectedCallback() {
    this.setup();
  }

  toggle() {
    if (this.classList.contains('tooltip--open')) {
      this.close();
    } else {
      this.open();

vincentnavetat

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

vincentnavetat

<wow-tooltip class="tooltip">
  <div class="tooltip__label" aria-describedby="tooltip-demo-content" data-tooltip-placeholder>
    Here is a tooltip label
  </div>
  <div class="tooltip-dropdown" data-tooltip-dropdown>
    <div role="tooltip" id="tooltip-demo-content" class="tooltip-dropdown__content">
      It is a long established fact that a reader will be
      <strong>distracted</strong>
      by the readable content of a page when looking at its layout.
    </div>

vincentnavetat

^D^D[⠋] 🚀 [⠙] 🚀 [⠹] 🚀 [⠸] 🚀 [⠼] 🚀 [⠴] 🚀 [⠦] 🚀 [⠧] 🚀 [⠇] 🚀 [✔] 🚀 
+-------------------------+---------+---------------------------+
|                         Used plugins                          |
+-------------------------+---------+---------------------------+
| Plugin                  | Version | Action                    |
+-------------------------+---------+---------------------------+
| fastlane-plugin-bugsnag | 1.4.1   | upload_symbols_to_bugsnag |
|                         |         | send_build_to_bugsnag     |
+-------------------------+---------+---------------------------+

vincentnavetat

@media screen and (max-width: 1023px) {
  .carousel {
    padding-left: 0;
    padding-right: 0;
  }

  .carousel__activator:nth-of-type(n):checked {
    ~ .carousel__controls:nth-of-type(n) {
      display: none;
    }

vincentnavetat

// maximum number of slides the carousel can have on large screens
$number-of-slides: 10;

.carousel {
  max-width: 1236px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  position: relative;

vincentnavetat

<div class='demo-container'>
  <div class='carousel'>
    <input class='carousel__activator' checked='checked'>
    <input class='carousel__activator'>
    <input class='carousel__activator'>
    <div class='carousel__controls'>
      <label class='carousel__control carousel__control--forward'>
        👉
      </label>
    </div>