This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
^D^D[⠋] 🚀 [⠙] 🚀 [⠹] 🚀 [⠸] 🚀 [⠼] 🚀 [⠴] 🚀 [⠦] 🚀 [⠧] 🚀 [⠇] 🚀 [✔] 🚀 | |
+-------------------------+---------+---------------------------+ | |
| Used plugins | | |
+-------------------------+---------+---------------------------+ | |
| Plugin | Version | Action | | |
+-------------------------+---------+---------------------------+ | |
| fastlane-plugin-bugsnag | 1.4.1 | upload_symbols_to_bugsnag | | |
| | | send_build_to_bugsnag | | |
+-------------------------+---------+---------------------------+ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@keyframes tooltipFadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Tooltip extends HTMLElement { | |
connectedCallback() { | |
this.setup(); | |
} | |
toggle() { | |
if (this.classList.contains('tooltip--open')) { | |
this.close(); | |
} else { | |
this.open(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) { |