Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: skin/options.css

Issue 29322581: Issue 2356 - Implemented tooltip functionality (Closed)
Patch Set: Created July 28, 2015, 6:10 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « options.html ('k') | skin/options-sprite.png » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: skin/options.css
===================================================================
--- a/skin/options.css
+++ b/skin/options.css
@@ -95,12 +95,16 @@
.option-name
{
display: flex;
+ margin-bottom: 16px;
+ margin-top: 24px;
}
-.option-name > *
+.option-name > :first-child
{
- -moz-margin-end: 6px;
- -webkit-margin-end: 6px;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
#nav-sidebar
@@ -134,12 +138,17 @@
padding: 8px 0px 16px 0px;
}
-.flex-container
+.hbox
{
display: flex;
flex-flow: row wrap;
}
+.hbox > div
+{
+ flex: 1;
saroyanm 2015/07/29 09:38:59 In this case "flex-wrap: wrap" will have no effect
Thomas Greiner 2015/07/29 09:59:52 There's no wrapping necessary in the current versi
+}
+
.tabs li
{
cursor: pointer;
@@ -253,6 +262,7 @@
background-color: #FFFFFF;
border: 1px solid #CDCDCD;
border-radius: 8px;
+ box-sizing: border-box;
padding: 0px 60px 40px 60px;
width: 960px;
}
@@ -307,7 +317,6 @@
margin: 0px;
padding: 0px;
position: relative;
- width: 400px;
}
.table li
@@ -546,7 +555,6 @@
#custom-wrapper
{
- width: 400px;
height: 290px;
overflow: auto;
}
@@ -747,11 +755,20 @@
width: 10px;
}
+/*
+ Tooltips
+*/
+
.tooltip, #block-element-explanation a
{
- border-bottom: dotted 2px;
+ border-bottom: dashed 1px;
color: #3A7BA6;
+ cursor: default;
font-size: 12px;
+ height: 15px;
+ line-height: 19px;
+ margin: 0px 4px;
+ position: relative;
text-decoration: none;
}
@@ -770,6 +787,103 @@
-webkit-padding-start: 0px;
}
+div[role="tooltip"]
+{
+ background-color: rgba(45, 45, 45, 0.95);
+ border-radius: 3px;
+ color: #FFF;
+ font-size: 14px;
+ font-weight: 400;
+ left: -20px;
+ line-height: 18px;
+ margin-top: 14px;
+ opacity: 1;
+ padding: 20px;
+ position: absolute;
+ -webkit-transition: opacity 200ms ease-in-out 400ms,
+ visibility 0ms linear 400ms;
+ transition: opacity 200ms ease-in-out 400ms,
+ visibility 0ms linear 400ms;
+ visibility: visible;
+ width: 400px;
+ z-index: 1;
+}
+
+html[dir="ltr"] div[role="tooltip"].flip-vertical,
+html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)
+{
+ left: inherit;
+ right: -20px;
+}
+
+.tooltip:not(:hover) > div[role="tooltip"],
+div[role="tooltip"]:hover
+{
+ visibility: hidden;
+ opacity: 0;
+ -webkit-transition-delay: 0ms;
+ transition-delay: 0ms;
+}
+
+div[role="tooltip"]::before
+{
+ background-image: url(options-sprite.png);
+ background-position: -8px -42px;
+ content: "";
+ height: 6px;
+ position: absolute;
+ top: -6px;
+ width: 14px;
+ left: 30px;
+}
+
+html[dir="ltr"] div[role="tooltip"].flip-vertical::before,
+html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before
+{
+ left: inherit;
+ right: 30px;
+}
+
+div[role="tooltip"] img
+{
+ float: left;
+ height: 64px;
+ margin-top: -2px;
+ margin-bottom: 10px;
+ width: 64px;
+ -moz-margin-end: 10px;
+ -webkit-margin-end: 10px;
+}
+
+html[dir="rtl"] div[role="tooltip"] img
+{
+ float: right;
+}
+
+div[role="tooltip"] p
+{
+ font-weight: 400;
+ margin: 0px;
+}
+
+div[role="tooltip"] p:not(:first-of-type)
+{
+ margin-top: 18px;
+}
+
+div[role="tooltip"] .notes
+{
+ border-top: 1px solid #717171;
+ font-size: 12px;
+ margin-top: 14px;
+ padding-top: 14px;
+}
+
+div[role="tooltip"] .notes p
+{
+ font-weight: 300;
+}
+
/*
Help tab content
*/
« no previous file with comments | « options.html ('k') | skin/options-sprite.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld