Mercurial > gemma
changeset 1214:3372cf2a55c7
converted tooltip.scss to sass
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 14:23:39 +0100 |
parents | 9d93968db2cd |
children | 5a8e8ee9034d |
files | client/src/application/assets/tooltip.sass client/src/application/assets/tooltip.scss client/src/usermanagement/Usermanagement.vue client/src/usermanagement/Users.vue |
diffstat | 4 files changed, 109 insertions(+), 125 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/application/assets/tooltip.sass Mon Nov 19 14:23:39 2018 +0100 @@ -0,0 +1,107 @@ +/* + * This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + */ +.tooltip + display: block !important + z-index: 10000 + + .tooltip-inner + background: black + color: white + border-radius: 16px + padding: 5px 10px 4px + + .tooltip-arrow + width: 0 + height: 0 + border-style: solid + position: absolute + margin: 5px + border-color: black + z-index: 1 + + &[x-placement^="top"] + margin-bottom: 5px + + .tooltip-arrow + border-width: 5px 5px 0 5px + border-left-color: transparent !important + border-right-color: transparent !important + border-bottom-color: transparent !important + bottom: -5px + left: calc(50% - 5px) + margin-top: 0 + margin-bottom: 0 + + &[x-placement^="bottom"] + margin-top: 5px + + .tooltip-arrow + border-width: 0 5px 5px 5px + border-left-color: transparent !important + border-right-color: transparent !important + border-top-color: transparent !important + top: -5px + left: calc(50% - 5px) + margin-top: 0 + margin-bottom: 0 + + &[x-placement^="right"] + margin-left: 5px + + .tooltip-arrow + border-width: 5px 5px 5px 0 + border-left-color: transparent !important + border-top-color: transparent !important + border-bottom-color: transparent !important + left: -5px + top: calc(50% - 5px) + margin-left: 0 + margin-right: 0 + + &[x-placement^="left"] + margin-right: 5px + + .tooltip-arrow + border-width: 5px 0 5px 5px + border-top-color: transparent !important + border-right-color: transparent !important + border-bottom-color: transparent !important + right: -5px + top: calc(50% - 5px) + margin-left: 0 + margin-right: 0 + + &.popover + $color: #f9f9f9 + + .popover-inner + background: $color + color: black + padding: 24px + border-radius: 5px + box-shadow: 0 5px 30px rgba(black, 0.1) + + .popover-arrow + border-color: $color + + &[aria-hidden="true"] + visibility: hidden + opacity: 0 + transition: opacity 0.15s, visibility 0.15s + + &[aria-hidden="false"] + visibility: visible + opacity: 1 + transition: opacity 0.15s
--- a/client/src/application/assets/tooltip.scss Mon Nov 19 14:13:01 2018 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,123 +0,0 @@ -/* - * This is Free Software under GNU Affero General Public License v >= 3.0 - * without warranty, see README.md and license for details. - * - * SPDX-License-Identifier: AGPL-3.0-or-later - * License-Filename: LICENSES/AGPL-3.0.txt - * - * Copyright (C) 2018 by via donau - * – Österreichische Wasserstraßen-Gesellschaft mbH - * Software engineering by Intevation GmbH - * - * Author(s): - * Thomas Junk <thomas.junk@intevation.de> - */ -.tooltip { - display: block !important; - z-index: 10000; - - .tooltip-inner { - background: black; - color: white; - border-radius: 16px; - padding: 5px 10px 4px; - } - - .tooltip-arrow { - width: 0; - height: 0; - border-style: solid; - position: absolute; - margin: 5px; - border-color: black; - z-index: 1; - } - - &[x-placement^="top"] { - margin-bottom: 5px; - - .tooltip-arrow { - border-width: 5px 5px 0 5px; - border-left-color: transparent !important; - border-right-color: transparent !important; - border-bottom-color: transparent !important; - bottom: -5px; - left: calc(50% - 5px); - margin-top: 0; - margin-bottom: 0; - } - } - - &[x-placement^="bottom"] { - margin-top: 5px; - - .tooltip-arrow { - border-width: 0 5px 5px 5px; - border-left-color: transparent !important; - border-right-color: transparent !important; - border-top-color: transparent !important; - top: -5px; - left: calc(50% - 5px); - margin-top: 0; - margin-bottom: 0; - } - } - - &[x-placement^="right"] { - margin-left: 5px; - - .tooltip-arrow { - border-width: 5px 5px 5px 0; - border-left-color: transparent !important; - border-top-color: transparent !important; - border-bottom-color: transparent !important; - left: -5px; - top: calc(50% - 5px); - margin-left: 0; - margin-right: 0; - } - } - - &[x-placement^="left"] { - margin-right: 5px; - - .tooltip-arrow { - border-width: 5px 0 5px 5px; - border-top-color: transparent !important; - border-right-color: transparent !important; - border-bottom-color: transparent !important; - right: -5px; - top: calc(50% - 5px); - margin-left: 0; - margin-right: 0; - } - } - - &.popover { - $color: #f9f9f9; - - .popover-inner { - background: $color; - color: black; - padding: 24px; - border-radius: 5px; - box-shadow: 0 5px 30px rgba(black, 0.1); - } - - .popover-arrow { - border-color: $color; - } - } - - &[aria-hidden="true"] { - visibility: hidden; - opacity: 0; - transition: opacity 0.15s, visibility 0.15s; - } - - &[aria-hidden="false"] { - visibility: visible; - opacity: 1; - transition: opacity 0.15s; - } -}
--- a/client/src/usermanagement/Usermanagement.vue Mon Nov 19 14:13:01 2018 +0100 +++ b/client/src/usermanagement/Usermanagement.vue Mon Nov 19 14:23:39 2018 +0100 @@ -71,7 +71,7 @@ </template> <style scoped lang="sass"> -@import "../application/assets/tooltip.scss" +@import "../application/assets/tooltip.sass" .spacer margin-left: $offset
--- a/client/src/usermanagement/Users.vue Mon Nov 19 14:13:01 2018 +0100 +++ b/client/src/usermanagement/Users.vue Mon Nov 19 14:23:39 2018 +0100 @@ -70,7 +70,7 @@ </template> <style lang="sass" scoped> -@import "../application/assets/tooltip.scss" +@import "../application/assets/tooltip.sass" .main height: 100vh