diff options
Diffstat (limited to 'packages/gitbook-plugin-theme-default')
3 files changed, 107 insertions, 0 deletions
diff --git a/packages/gitbook-plugin-theme-default/less/Tooltipped.less b/packages/gitbook-plugin-theme-default/less/Tooltipped.less new file mode 100644 index 0000000..126daab --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Tooltipped.less @@ -0,0 +1,100 @@ +.GitBook-Tooltipped { + display: inline-block; + position: relative; + + &:hover, &.Tooltipped-o { + &:after { + line-height: 1em; + background: @tooltip-background; + border-radius: @tooltip-radius; + bottom: auto; + top: ~"calc(100% + 10px)"; + color: @tooltip-color; + content: attr(aria-label); + display: block; + left: 50%; + padding: 5px 5px; + position: absolute; + white-space: nowrap; + z-index: @zindex-tooltip; + font-size: 13px; + text-transform: none; + font-weight: @font-size-base; + pointer-events: none; + transform: translateX(-50%); + } + + &:before { + border: solid; + border-color: @tooltip-background transparent; + bottom:auto; + top: ~"calc(100% + 5px)"; + border-width: 0px 5px 5px 5px; + content: ""; + display: block; + left: 50%; + position: absolute; + z-index: @zindex-tooltip+1; + transform: translateX(-50%); + } + } + + .north() { + &:after { + top: auto; + bottom: ~"calc(100% + 10px)"; + transform: translateX(0%); + } + &:before { + top: auto; + border-width: 5px 5px 0px 5px; + bottom: ~"calc(100% + 5px)"; + transform: translateX(0%); + } + } + .west() { + &:after { + left: auto; + right: 5px; + transform: translateX(0%); + } + &:before { + left: auto; + right: 10px; + transform: translateX(0%); + } + } + .east() { + &:after { + right: auto; + left: 5px; + transform: translateX(0%); + } + &:before { + right: auto; + left: 10px; + transform: translateX(0%); + } + } + + &.Tooltipped-e { + .east() + } + + &.Tooltipped-n { + .north(); + } + + &.Tooltipped-ne { + .north(); + .east(); + } + + &.Tooltipped-nw { + .north(); + .west(); + } + &.Tooltipped-sw, &.Tooltipped-w { + .west(); + } +} diff --git a/packages/gitbook-plugin-theme-default/less/main.less b/packages/gitbook-plugin-theme-default/less/main.less index 960477d..65219bc 100644 --- a/packages/gitbook-plugin-theme-default/less/main.less +++ b/packages/gitbook-plugin-theme-default/less/main.less @@ -15,6 +15,7 @@ @import "Body.less"; @import "Dropdown.less"; @import "LoadingBar.less"; +@import "Tooltipped.less"; * { .box-sizing(border-box); diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less index 95d34ab..38bb0af 100644 --- a/packages/gitbook-plugin-theme-default/less/variables.less +++ b/packages/gitbook-plugin-theme-default/less/variables.less @@ -38,9 +38,15 @@ @dropdown-border-color: #e5e5e5; @dropdown-color: @button-color; @dropdown-hover-color: @button-hover-color; +// Tooltip +@tooltip-background: rgba(0,0,0,.8); +@tooltip-radius: 3px; +@tooltip-color: #fff; // Search @search-highlight-color: rgba(255, 220, 0, 0.4); // Font awesome @path-assets: '.'; @path-fonts: '@{path-assets}/fonts'; @fa-font-path: '@{path-fonts}/fontawesome'; +// Z-indexes +@zindex-tooltip: 300; |