-
Notifications
You must be signed in to change notification settings - Fork 160
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
143 additions
and
100 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,247 +1,254 @@ | ||
| :host { | ||
| :host{ | ||
| display: contents; | ||
| --s: .5; | ||
| --pad: 12px; | ||
| } | ||
|
|
||
| .pop { | ||
| position: absolute; | ||
| display: flex; | ||
| flex-direction: column; | ||
| overflow: visible; | ||
| visibility: hidden; | ||
| inset: auto; | ||
| border: 0; | ||
| opacity: .5; | ||
| transition: opacity .05s, visibility .05s, transform 0s .1s; | ||
| --s: .5; | ||
| --pad: 12px; | ||
| /* transition: opacity .05s, visibility .05s, transform 0s .1s; */ | ||
| transform: translate(var(--x), var(--y)) scale(var(--s)); | ||
| z-index: 10; | ||
| } | ||
|
|
||
| :host(:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host(:is([show],[open])) .pop{ | ||
| transition: var(--transition, .2s); | ||
| --s: 1; | ||
| opacity: 1; | ||
| visibility: visible; | ||
| } | ||
|
|
||
| :host(:is(:not([trigger]),[trigger*='hover'])) { | ||
| /* | ||
| :host(:is(:not([trigger]),[trigger*='hover'])) .pop{ | ||
| transition: left 0s, top 0s, opacity .05s, visibility .05s, transform .2s; | ||
| } | ||
| } */ | ||
|
|
||
| :host::after{ | ||
| .pop::after{ | ||
| content: ''; | ||
| position: absolute; | ||
| inset: calc(var(--pad) * -1); | ||
| z-index: -1; | ||
| } | ||
|
|
||
| /* dir */ | ||
| :host([dir=top]) { | ||
| :host([dir=top]) .pop{ | ||
| transform-origin: bottom; | ||
| left: calc((var(--left) + var(--right) ) * .5px + var(--offset-x, 0) * 1px); | ||
| top: calc(var(--top) * 1px); | ||
| --x: -50%; | ||
| --y: -100%; | ||
| } | ||
|
|
||
| :host([dir=top])::before{ | ||
| :host([dir=top]) .pop::before{ | ||
| left: 50%; | ||
| bottom: 0; | ||
| transform: translate(-50%, 50%) scaleY(-1); | ||
| } | ||
|
|
||
| :host([dir=top]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=top]:is([show],[open])) .pop{ | ||
| --y: calc(-100% - var(--pad)); | ||
| } | ||
|
|
||
| :host([dir=TL]) { | ||
| :host([dir=TL]) .pop{ | ||
| transform-origin: left bottom; | ||
| left: calc( var(--left) * 1px); | ||
| top: calc(var(--top) * 1px); | ||
| --x: 0%; | ||
| --y: -100%; | ||
| } | ||
|
|
||
| :host([dir=TL])::before{ | ||
| :host([dir=TL]) .pop::before{ | ||
| left: 8px; | ||
| bottom: 0; | ||
| transform: translate(0%, 50%) scaleY(-1); | ||
| } | ||
|
|
||
| :host([dir=TL]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=TL]:is([show],[open])) .pop{ | ||
| --y: calc(-100% - var(--pad)); | ||
| } | ||
|
|
||
| :host([dir=TR]) { | ||
| :host([dir=TR]) .pop{ | ||
| transform-origin: right bottom; | ||
| left: calc( var(--right) * 1px); | ||
| top: calc(var(--top) * 1px); | ||
| --x: -100%; | ||
| --y: -100%; | ||
| } | ||
|
|
||
| :host([dir=TR])::before{ | ||
| :host([dir=TR]) .pop::before{ | ||
| right: 8px; | ||
| bottom: 0; | ||
| transform: translate(0%, 50%) scaleY(-1); | ||
| } | ||
|
|
||
| :host([dir=TR]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=TR]:is([show],[open])) .pop{ | ||
| --y: calc(-100% - var(--pad)); | ||
| } | ||
|
|
||
| :host([dir=LT]) { | ||
| :host([dir=LT]) .pop{ | ||
| transform-origin: right top; | ||
| left: calc( var(--left) * 1px); | ||
| top: calc(var(--top) * 1px); | ||
| --x: -100%; | ||
| --y: 0%; | ||
| } | ||
|
|
||
| :host([dir=LT])::before{ | ||
| :host([dir=LT]) .pop::before{ | ||
| right: 0; | ||
| top: 8px; | ||
| transform: translate(50%, 0%) rotate(90deg); | ||
| } | ||
|
|
||
| :host([dir=LT]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=LT]:is([show],[open])) .pop{ | ||
| --x: calc(-100% - var(--pad)); | ||
| } | ||
|
|
||
| :host([dir=left]) { | ||
| :host([dir=left]) .pop{ | ||
| transform-origin: right; | ||
| left: calc( var(--left) * 1px); | ||
| top: calc((var(--top) + var(--bottom) ) * .5px + var(--offset-y, 0) * 1px); | ||
| --x: -100%; | ||
| --y: -50%; | ||
| } | ||
|
|
||
| :host([dir=left])::before{ | ||
| :host([dir=left]) .pop::before{ | ||
| right: 0; | ||
| top: 50%; | ||
| transform: translate(50%, -50%) rotate(90deg); | ||
| } | ||
|
|
||
| :host([dir=left]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=left]:is([show],[open])) .pop{ | ||
| --x: calc(-100% - var(--pad)); | ||
| } | ||
|
|
||
| :host([dir=LB]) { | ||
| :host([dir=LB]) .pop{ | ||
| transform-origin: right top; | ||
| left: calc( var(--left) * 1px); | ||
| top: calc(var(--bottom) * 1px); | ||
| --x: -100%; | ||
| --y: -100%; | ||
| } | ||
|
|
||
| :host([dir=LB])::before{ | ||
| :host([dir=LB]) .pop::before{ | ||
| right: 0; | ||
| bottom: 8px; | ||
| transform: translate(50%, 0%) rotate(90deg); | ||
| } | ||
|
|
||
| :host([dir=LB]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=LB]:is([show],[open])) .pop{ | ||
| --x: calc(-100% - var(--pad)); | ||
| } | ||
|
|
||
| :host([dir=RT]) { | ||
| :host([dir=RT]) .pop{ | ||
| transform-origin: left top; | ||
| left: calc( var(--right) * 1px); | ||
| top: calc(var(--top) * 1px); | ||
| --x: 0%; | ||
| --y: 0%; | ||
| } | ||
|
|
||
| :host([dir=RT])::before{ | ||
| :host([dir=RT]) .pop::before{ | ||
| left: 0; | ||
| top: 8px; | ||
| transform: translate(-50%, 0%) rotate(-90deg); | ||
| } | ||
|
|
||
| :host([dir=RT]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=RT]:is([show],[open])) .pop{ | ||
| --x: var(--pad); | ||
| } | ||
|
|
||
| :host([dir=right]) { | ||
| :host([dir=right]) .pop{ | ||
| transform-origin: left; | ||
| left: calc( var(--right) * 1px); | ||
| top: calc((var(--top) + var(--bottom) ) * .5px + var(--offset-y, 0) * 1px); | ||
| --x: 0%; | ||
| --y: -50%; | ||
| } | ||
|
|
||
| :host([dir=right])::before{ | ||
| :host([dir=right]) .pop::before{ | ||
| left: 0; | ||
| top: 50%; | ||
| transform: translate(-50%, -50%) rotate(-90deg); | ||
| } | ||
|
|
||
| :host([dir=right]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=right]:is([show],[open])) .pop{ | ||
| --x: var(--pad); | ||
| } | ||
|
|
||
| :host([dir=RB]) { | ||
| :host([dir=RB]) .pop{ | ||
| transform-origin: left bottom; | ||
| left: calc( var(--right) * 1px); | ||
| top: calc(var(--bottom) * 1px); | ||
| --x: 0%; | ||
| --y: -100%; | ||
| } | ||
|
|
||
| :host([dir=RB])::before{ | ||
| :host([dir=RB]) .pop::before{ | ||
| left: 0; | ||
| bottom: 8px; | ||
| transform: translate(-50%, 0%) rotate(-90deg); | ||
| } | ||
|
|
||
| :host([dir=RB]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=RB]:is([show],[open])) .pop{ | ||
| --x: var(--pad); | ||
| } | ||
|
|
||
| :host([dir=bottom]) { | ||
| :host([dir=bottom]) .pop{ | ||
| transform-origin: top; | ||
| left: calc((var(--left) + var(--right) ) * .5px + var(--offset-x, 0) * 1px); | ||
| top: calc(var(--bottom) * 1px); | ||
| --x: -50%; | ||
| --y: 0%; | ||
| } | ||
|
|
||
| :host([dir=bottom])::before{ | ||
| :host([dir=bottom]) .pop::before{ | ||
| left: 50%; | ||
| top: 0; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
|
|
||
| :host([dir=bottom]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=bottom]:is([show],[open])) .pop{ | ||
| --y: var(--pad); | ||
| } | ||
|
|
||
| :host([dir=BL]) { | ||
| :host([dir=BL]) .pop{ | ||
| transform-origin: left top; | ||
| left: calc(var(--left) * 1px); | ||
| top: calc(var(--bottom) * 1px); | ||
| --x: 0%; | ||
| --y: 0%; | ||
| } | ||
|
|
||
| :host([dir=BL])::before{ | ||
| :host([dir=BL]) .pop::before{ | ||
| left: 8px; | ||
| top: 0; | ||
| transform: translate(0%, -50%); | ||
| } | ||
|
|
||
| :host([dir=BL]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=BL]:is([show],[open])) .pop{ | ||
| --y: var(--pad); | ||
| } | ||
|
|
||
| :host([dir=BR]) { | ||
| :host([dir=BR]) .pop{ | ||
| transform-origin: right top; | ||
| left: calc(var(--right) * 1px); | ||
| top: calc(var(--bottom) * 1px); | ||
| --x: -100%; | ||
| --y: 0%; | ||
| } | ||
|
|
||
| :host([dir=BR])::before{ | ||
| :host([dir=BR]) .pop::before{ | ||
| right: 8px; | ||
| top: 0; | ||
| transform: translate(0%, -50%); | ||
| } | ||
|
|
||
| :host([dir=BR]:is([show],[open],[trigger*=hover]:hover)) { | ||
| :host([dir=BR]:is([show],[open])) .pop{ | ||
| --y: var(--pad); | ||
| } |
Oops, something went wrong.