diff options
| author | silverwind <me@silverwind.io> | 2022-07-19 00:33:34 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-07-19 00:33:34 +0200 |
| commit | 00d3876c8582e6b706f5f21a7c57dfee209a017c (patch) | |
| tree | bca2ffd3ab16e1c64bc666e44cfee309c2d6f6bc /web_src/less | |
| parent | 17ce5f86608b6d14309b772db0578f09bd034bbf (diff) | |
| download | gitea-00d3876c8582e6b706f5f21a7c57dfee209a017c.tar.gz gitea-00d3876c8582e6b706f5f21a7c57dfee209a017c.zip | |
Use tippy.js for context popup (#20393)
By appending the tooltips to `document.body`, we can avoid any stacking context issues caused by surrounding element's CSS.
This uses [tippy.js](https://github.com/atomiks/tippyjs) instead of Fomantic popups. We should aim to replace all Fomantic popups with this eventually and then get rid of the Fomantic `popup` module completely.
Diffstat (limited to 'web_src/less')
| -rw-r--r-- | web_src/less/index.less | 1 | ||||
| -rw-r--r-- | web_src/less/modules/tippy.less | 84 |
2 files changed, 85 insertions, 0 deletions
diff --git a/web_src/less/index.less b/web_src/less/index.less index 4a6bd330fe..4823c56173 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -9,6 +9,7 @@ @import "./features/imagediff.less"; @import "./features/codeeditor.less"; @import "./features/projects.less"; +@import "./modules/tippy.less"; @import "./markup/content.less"; @import "./markup/codecopy.less"; @import "./code/linebutton.less"; diff --git a/web_src/less/modules/tippy.less b/web_src/less/modules/tippy.less new file mode 100644 index 0000000000..aa2aed6ce2 --- /dev/null +++ b/web_src/less/modules/tippy.less @@ -0,0 +1,84 @@ +/* styles are based on node_modules/tippy.js/dist/tippy.css */ + +.tippy-box[data-animation="fade"][data-state="hidden"] { + opacity: 0; +} + +[data-tippy-root] { + max-width: calc(100vw - 10px); +} + +.tippy-box { + position: relative; + background-color: var(--color-body); + color: var(--color-secondary-dark-6); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + font-size: 1rem; + transition-property: transform, visibility, opacity; +} + +.tippy-content { + position: relative; + padding: 1rem; + z-index: 1; +} + +.tippy-box[data-placement^="top"] > .tippy-svg-arrow { + bottom: 0; +} + +.tippy-box[data-placement^="top"] > .tippy-svg-arrow::after, +.tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg { + top: 16px; + transform: rotate(180deg); +} + +.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow { + top: 0; +} + +.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg { + bottom: 16px; +} + +.tippy-box[data-placement^="left"] > .tippy-svg-arrow { + right: 0; +} + +.tippy-box[data-placement^="left"] > .tippy-svg-arrow::after, +.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg { + transform: rotate(90deg); + top: calc(50% - 3px); + left: 11px; +} + +.tippy-box[data-placement^="right"] > .tippy-svg-arrow { + left: 0; +} + +.tippy-box[data-placement^="right"] > .tippy-svg-arrow::after, +.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg { + transform: rotate(-90deg); + top: calc(50% - 3px); + right: 11px; +} + +.tippy-svg-arrow { + width: 16px; + height: 16px; + text-align: initial; +} + +.tippy-svg-arrow, +.tippy-svg-arrow > svg { + position: absolute; +} + +.tippy-svg-arrow-outer { + fill: var(--color-secondary); +} + +.tippy-svg-arrow-inner { + fill: var(--color-body); +} |