diff options
Diffstat (limited to 'catapult/third_party/polymer/components/core-tooltip/core-tooltip.css')
-rw-r--r-- | catapult/third_party/polymer/components/core-tooltip/core-tooltip.css | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/core-tooltip/core-tooltip.css b/catapult/third_party/polymer/components/core-tooltip/core-tooltip.css new file mode 100644 index 00000000..aa24c39f --- /dev/null +++ b/catapult/third_party/polymer/components/core-tooltip/core-tooltip.css @@ -0,0 +1,104 @@ +/* Copyright (c) 2014 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ + +:host { + box-sizing: border-box; + position: relative; + display: inline-block; + outline: none; +} + +:host(:hover:not([disabled])) .core-tooltip { + visibility: visible !important; +} + +:host([focused]) .core-tooltip { + visibility: visible !important; +} + +.core-tooltip:not(.show) { + visibility: hidden; +} + +.core-tooltip { + position: absolute; + font-size: 10px; + font-weight: 500; + padding: 8px; + color: white; + background-color: rgba(0, 0, 0, 0.9); + box-sizing: border-box; + border-radius: 3px; /* TODO: not in spec. */ + white-space: nowrap; + line-height: 6px; + z-index: 1002; /* TODO: this is brittle. */ + -webkit-user-select: none; + user-select: none; +} + +:host([large]) .core-tooltip { + line-height: 14px; + font-size: 14px; + padding: 16px; +} + +.core-tooltip.noarrow::after { + display: none; +} + +.core-tooltip::after { + position: absolute; + border: solid transparent; + content: ''; + height: 0; + width: 0; + border-width: 4px; +} + +.top { + margin-bottom: 10px; /* TODO: not specified in spec */ + bottom: 100%; +} + +.right { + margin-left: 10px; /* TODO: not specified in spec */ + left: 100%; +} + +.bottom { + top: 100%; + margin-top: 10px; /* TODO: not specified in spec */ +} + +.left { + margin-right: 10px; /* TODO: not specified in spec */ + right: 100%; +} + +.core-tooltip.bottom::after { + bottom: 100%; + left: calc(50% - 4px); + border-bottom-color: rgba(0,0,0,0.8); +} + +.core-tooltip.left::after { + left: 100%; + top: calc(50% - 4px); + border-left-color: rgba(0,0,0,0.8); +} + +.core-tooltip.top::after { + top: 100%; + left: calc(50% - 4px); + border-top-color: rgba(0,0,0,0.8); +} + +.core-tooltip.right::after { + right: 100%; + top: calc(50% - 4px); + border-right-color: rgba(0,0,0,0.8); +} |