From e78b3c34348f26d40a813612c5a3786f1c56607a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 29 Aug 2017 18:07:53 +0800 Subject: Initial SASS build --- src/_tooltips.scss | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 src/_tooltips.scss (limited to 'src/_tooltips.scss') diff --git a/src/_tooltips.scss b/src/_tooltips.scss new file mode 100644 index 0000000..90cf1ad --- /dev/null +++ b/src/_tooltips.scss @@ -0,0 +1,77 @@ +// Tooltips +.tooltip { + position: relative; + &::after { + background: rgba($dark-color, .9); + border-radius: $border-radius; + bottom: 100%; + color: $light-color; + content: attr(data-tooltip); + display: block; + font-size: $font-size-sm; + left: 50%; + max-width: $control-max-width; + opacity: 0; + overflow: hidden; + padding: $unit-1 $unit-2; + pointer-events: none; + position: absolute; + text-overflow: ellipsis; + transform: translate(-50%, $unit-2); + transition: all .2s ease; + white-space: nowrap; + z-index: $zindex-3; + } + &:focus, + &:hover { + &::after { + opacity: 1; + transform: translate(-50%, -$unit-1); + } + } + &[disabled], + &.disabled { + pointer-events: auto; + } + + &.tooltip-right { + &::after { + bottom: 50%; + left: 100%; + transform: translate(-$unit-1, 50%); + } + &:focus, + &:hover { + &::after { + transform: translate($unit-1, 50%); + } + } + } + &.tooltip-bottom { + &::after { + bottom: auto; + top: 100%; + transform: translate(-50%, -$unit-2); + } + &:focus, + &:hover { + &::after { + transform: translate(-50%, $unit-1); + } + } + } + &.tooltip-left { + &::after { + bottom: 50%; + left: auto; + right: 100%; + transform: translate($unit-2, 50%); + } + &:focus, + &:hover { + &::after { + transform: translate(-$unit-1, 50%); + } + } + } +} -- cgit v1.3.1-23-gd82d From 8c0f6b2d3ae609b581af7d71610d50e00ab49990 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 29 Aug 2017 21:43:06 +0800 Subject: Improve Docs navbar --- docs/components.html | 30 ++++++++------ docs/css/docs.css | 87 ++++++++++++++++++++++++++-------------- docs/dist/spectre.css | 25 +++++++++++- docs/dist/spectre.min.css | 2 +- docs/elements.html | 29 ++++++++------ docs/experimentals.html | 29 ++++++++------ docs/getting-started.html | 34 ++++++++++------ docs/layout.html | 29 ++++++++------ docs/src/docs.scss | 98 +++++++++++++++++++++++++++++---------------- docs/utilities.html | 29 ++++++++------ gulpfile.js | 1 - src/_accordions.scss | 2 +- src/_chips.scss | 1 + src/_tooltips.scss | 2 + src/utilities/_display.scss | 17 ++++++++ 15 files changed, 275 insertions(+), 140 deletions(-) (limited to 'src/_tooltips.scss') diff --git a/docs/components.html b/docs/components.html index ed34761..251401e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -14,19 +14,13 @@
-
- -
- -
-
- GitHub -
-