diff options
| author | 2023-12-15 09:11:47 +0800 | |
|---|---|---|
| committer | 2023-12-15 09:11:47 +0800 | |
| commit | be8de118db913711eb72ae5187d26e54a0055727 (patch) | |
| tree | 96cd6c012dafa3f4015e54edef90df5eaaab0ddb /src/templates/assets/stylesheets/main/components/_tooltip.scss | |
| parent | 9b2d27ba1d91a0d5531bc9c0d52c3887a2dfb2aa (diff) | |
| download | infini-be8de118db913711eb72ae5187d26e54a0055727.tar.gz infini-be8de118db913711eb72ae5187d26e54a0055727.zip | |
refactor(docs): optmst `docs` dir & `deps`
Diffstat (limited to 'src/templates/assets/stylesheets/main/components/_tooltip.scss')
| -rw-r--r-- | src/templates/assets/stylesheets/main/components/_tooltip.scss | 292 |
1 files changed, 0 insertions, 292 deletions
diff --git a/src/templates/assets/stylesheets/main/components/_tooltip.scss b/src/templates/assets/stylesheets/main/components/_tooltip.scss deleted file mode 100644 index 421e5858..00000000 --- a/src/templates/assets/stylesheets/main/components/_tooltip.scss +++ /dev/null @@ -1,292 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Keyframes -// ---------------------------------------------------------------------------- - -// Continuous pulse animation -@keyframes pulse { - 0% { - transform: scale(0.95); - } - - 75% { - transform: scale(1); - } - - 100% { - transform: scale(0.95); - } -} - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Tooltip variables -:root { - --md-annotation-bg-icon: svg-load("material/circle.svg"); - --md-annotation-icon: svg-load("material/plus-circle.svg"); - --md-tooltip-width: #{px2rem(400px)}; -} - -// ---------------------------------------------------------------------------- - -// Tooltip -.md-tooltip { - position: absolute; - top: var(--md-tooltip-y); - left: - clamp( - var(--md-tooltip-0, #{px2rem(0px)}) + #{px2rem(16px)}, - var(--md-tooltip-x), - 100vw + - var(--md-tooltip-0, #{px2rem(0px)}) + #{px2rem(16px)} - - var(--md-tooltip-width) - - 2 * #{px2rem(16px)} - ); - // Hack: set an explicit `z-index` so we can transition it to ensure that any - // following elements are not overlaying the tooltip during the transition. - z-index: 0; - width: var(--md-tooltip-width); - max-width: calc(100vw - 2 * #{px2rem(16px)}); - font-family: var(--md-text-font-family); - color: var(--md-default-fg-color); - background-color: var(--md-default-bg-color); - border-radius: px2rem(2px); - box-shadow: var(--md-shadow-z2); - opacity: 0; - transition: - transform 0ms 250ms, - opacity 250ms, - z-index 250ms; - transform: translateY(px2rem(-8px)); - // Hack: promote to own layer to reduce jitter - backface-visibility: hidden; - - // Active tooltip - &--active { - z-index: 2; - opacity: 1; - transition: - transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 250ms, - z-index 0ms; - transform: translateY(0); - } - - // Show outline on target and for keyboard devices - :is(.focus-visible > &, &:target) { - outline: var(--md-accent-fg-color) auto; - } - - // Tooltip wrapper - &__inner { - padding: px2rem(16px); - font-size: px2rem(12.8px); - - // Adjust spacing on first child - &.md-typeset > :first-child { - margin-top: 0; - } - - // Adjust spacing on last child - &.md-typeset > :last-child { - margin-bottom: 0; - } - } -} - -// ---------------------------------------------------------------------------- - -// Annotation -.md-annotation { - font-weight: 400; - white-space: normal; - vertical-align: text-bottom; - outline: none; - - // Adjust for right-to-left languages - [dir="rtl"] & { - direction: rtl; - } - - // Annotation index in code block - code & { - font-family: var(--md-code-font-family); - font-size: inherit; - } - - // Annotation is not hidden (e.g. when copying) - &:not([hidden]) { - display: inline-block; - // Hack: ensure that the line height doesn't exceed the line height of the - // hosting line, because it will lead to dancing pixels. - line-height: 1.25; - } - - // Annotation index - &__index { - position: relative; - z-index: 0; - display: inline-block; - margin-inline: 0.4ch; - vertical-align: text-top; - cursor: pointer; - user-select: none; - outline: none; - - // Hack: increase specificity to override default for anchors in typesetted - // content, because transitions are defined on anchor elements - .md-annotation & { - transition: z-index 250ms; - } - - // Hack: Work around Firefox bug that renders a subpixel outline when - // rotating a mask image element. - // https://bugzilla.mozilla.org/show_bug.cgi?id=1671784 - overflow: hidden; // stylelint-disable-line order/properties-order - border-radius: 0.01px; - - // [screen]: Render annotation markers as icons - @media screen { - width: 2.2ch; - - // Annotation is visible - [data-md-visible] > & { - animation: pulse 2000ms infinite; - } - - // Annotation marker background - &::before { - position: absolute; - top: -0.1ch; - z-index: -1; - width: 2.2ch; - height: 2.2ch; - content: ""; - background: var(--md-default-bg-color); - mask-image: var(--md-annotation-bg-icon); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } - - // Annotation marker – the marker must be positioned absolutely behind - // the index, because it shouldn't impact the rendering of a code block. - // Otherwise, small rounding differences in browsers can sometimes mess up - // alignment of text following an annotation. - &::after { - position: absolute; - top: -0.1ch; - z-index: -1; - width: 2.2ch; - height: 2.2ch; - content: ""; - background-color: var(--md-default-fg-color--lighter); - transition: - background-color 250ms, - transform 250ms; - // Hack: promote to own layer to reduce jitter - transform: scale(1.0001); - mask-image: var(--md-annotation-icon); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - - // Annotation marker for active tooltip - .md-tooltip--active + & { - transform: rotate(45deg); - } - - // Annotation marker for active tooltip or on hover - :is(.md-tooltip--active + &, :hover > &) { - background-color: var(--md-accent-fg-color); - } - } - } - - // Annotation index for active tooltip - .md-tooltip--active + & { - z-index: 2; - transition-duration: 0ms; - animation-play-state: paused; - } - - // Annotation marker - [data-md-annotation-id] { - display: inline-block; - - // [print]: Render annotation markers as numbers - @media print { - padding: 0 0.6ch; - font-weight: 700; - color: var(--md-default-bg-color); - white-space: nowrap; - background: var(--md-default-fg-color--lighter); - border-radius: 2ch; - - // Annotation marker content - &::after { - content: attr(data-md-annotation-id); - } - } - } - } -} - -// ---------------------------------------------------------------------------- - -// Scoped in typesetted content to match specificity of regular content -.md-typeset { - - // Annotation list - .md-annotation-list { - list-style: none; - counter-reset: xxx; - - // Annotation list item - li { - position: relative; - - // Annotation list marker - &::before { - position: absolute; - top: px2em(4px); - inset-inline-start: px2em(-34px); - min-width: 2ch; - height: 2ch; - padding: 0 0.6ch; - font-size: px2em(14.2px); - font-weight: 700; - line-height: 1.25; - color: var(--md-default-bg-color); - text-align: center; - content: counter(xxx); - counter-increment: xxx; - background: var(--md-default-fg-color--lighter); - border-radius: 2ch; - } - } - } -} |
