diff options
| author | Roeland Jago Douma <rullzer@users.noreply.github.com> | 2017-01-11 16:38:18 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-01-11 16:38:18 +0100 |
| commit | 96d2f2f124fa29e6986f046fa48627e151fbe59a (patch) | |
| tree | 413f390aae0712a0cf7819e1a3ba090f02a36225 /core | |
| parent | c35ea159166daca44cdd2002e5f1d0c6e4bf467c (diff) | |
| parent | 2899f34c4cd9ef5f2c5ef0e8f021bc1abe7511fa (diff) | |
| download | nextcloud-server-96d2f2f124fa29e6986f046fa48627e151fbe59a.tar.gz nextcloud-server-96d2f2f124fa29e6986f046fa48627e151fbe59a.zip | |
Merge pull request #3028 from nextcloud/tooltip-scss-optimisation
Tooltip scss optimisation
Diffstat (limited to 'core')
| -rw-r--r-- | core/css/tooltip.scss | 107 |
1 files changed, 53 insertions, 54 deletions
diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss index 42289787e8d..96073962884 100644 --- a/core/css/tooltip.scss +++ b/core/css/tooltip.scss @@ -30,96 +30,95 @@ opacity: 0.9; filter: alpha(opacity = 90); } + &.top { margin-top: -3px; padding: 5px 0; } - &.right { - margin-left: 3px; - padding: 0 5px; - } &.bottom { margin-top: 3px; padding: 5px 0; } + + &.right { + margin-left: 3px; + padding: 0 5px; + .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000000; + } + } &.left { margin-left: -3px; padding: 0 5px; + .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000000; + } } -} - -.tooltip-inner { - max-width: 350px; - padding: 3px 8px; - color: #ffffff; - text-align: center; - background-color: #000000; - border-radius: 4px; -} - -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip { - &.top .tooltip-arrow { + /* TOP */ + &.top .tooltip-arrow, + &.top-left .tooltip-arrow, + &.top-right .tooltip-arrow { bottom: 0; - left: 50%; - margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000000; } + &.top .tooltip-arrow { + left: 50%; + margin-left: -5px; + } &.top-left .tooltip-arrow { - bottom: 0; right: 5px; margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; } &.top-right .tooltip-arrow { - bottom: 0; left: 5px; margin-bottom: -5px; - border-width: 5px 5px 0; - border-top-color: #000000; - } - &.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000000; } - &.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000000; + + /* BOTTOM */ + &.bottom .tooltip-arrow, + &.bottom-left .tooltip-arrow, + &.bottom-right .tooltip-arrow { + top: 0; + border-width: 0 5px 5px; + border-bottom-color: #000000; } &.bottom .tooltip-arrow { - top: 0; left: 50%; margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; } &.bottom-left .tooltip-arrow { - top: 0; right: 5px; margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; } &.bottom-right .tooltip-arrow { - top: 0; left: 5px; margin-top: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000000; } } + +.tooltip-inner { + max-width: 350px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + background-color: #000000; + border-radius: 4px; +} + +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} |