From 7d081697088bf15d0672f6463e4e213fbad8a286 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Wed, 1 Aug 2012 12:42:07 +0100
Subject: [PATCH] Give the tooltip an arrow.
---
resources/static/common/css/style.css | 14 +++++++++++++-
resources/static/dialog/views/tooltip.ejs | 1 +
2 files changed, 14 insertions(+), 1 deletion(-)
diff --git a/resources/static/common/css/style.css b/resources/static/common/css/style.css
index cd2760e4c..56ee3c4d7 100644
--- a/resources/static/common/css/style.css
+++ b/resources/static/common/css/style.css
@@ -79,7 +79,7 @@ strong {
background-image: -ms-linear-gradient(top, rgba(218, 81, 50, 0.9), rgba(169, 19, 0, 1));
background-image: -o-linear-gradient(top, rgba(218, 81, 50, 0.9), rgba(169, 19, 0, 1));
background-image: linear-gradient(top, rgba(218, 81, 50, 0.9), rgba(169, 19, 0, 1));
- border-radius: 3px;
+ border-radius: 4px;
padding: 10px 15px;
box-shadow: 0 1px #666;
@@ -91,6 +91,18 @@ strong {
z-index: 5;
}
+.tooltip .arrow-down {
+ /* This is an awesome CSS only arrow! */
+ width: 0;
+ height: 0;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-top: 10px solid #aa1401;
+ border-top: 10px solid rgba(169, 19, 0, 1);
+ position: absolute;
+ bottom: -10px;
+ left: 20px;
+}
a {
color: #348fd0;
diff --git a/resources/static/dialog/views/tooltip.ejs b/resources/static/dialog/views/tooltip.ejs
index 191af143e..0c7a43ef8 100644
--- a/resources/static/dialog/views/tooltip.ejs
+++ b/resources/static/dialog/views/tooltip.ejs
@@ -1,4 +1,5 @@
<div class="tooltip">
<%= contents %>
+ <div class="arrow-down"></div>
</div>
--
GitLab