[Frontend] Infobubble markup and CSS
WTD-1054 Markup and styling for infobubble; Includes fake data in infobubble.html
This commit is contained in:
Charles Hacskaylo
@@ -1,5 +1,5 @@
|
||||
/* CONSTANTS */
|
||||
/* line 17, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 17, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@@ -20,38 +20,38 @@ time, mark, audio, video {
|
||||
font-size: 100%;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1; }
|
||||
|
||||
/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none; }
|
||||
/* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none; }
|
||||
|
||||
/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block; }
|
||||
|
||||
@@ -2716,49 +2716,96 @@ input[type="text"] {
|
||||
.tool-bar .input-labeled label {
|
||||
font-size: 12.6px; }
|
||||
|
||||
/* line 1, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper {
|
||||
/* line 6, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper {
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
|
||||
position: absolute;
|
||||
z-index: 10; }
|
||||
/* line 8, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper .bubble {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
z-index: 70; }
|
||||
/* line 11, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble {
|
||||
display: inline-block;
|
||||
background: #990000;
|
||||
color: #ff9999;
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
max-width: 200px;
|
||||
padding: 4px 8px; }
|
||||
/* line 17, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper .bubble:before {
|
||||
max-width: 400px;
|
||||
padding: 5px 10px; }
|
||||
/* line 15, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
/* line 24, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper.arw-left .bubble:before {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-right: 10.5px solid #990000; }
|
||||
/* line 32, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper.arw-down .bubble:before {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-left: -7px;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 10.5px solid #990000; }
|
||||
/* line 22, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td {
|
||||
max-width: 150px;
|
||||
padding: 2px 0;
|
||||
vertical-align: top; }
|
||||
/* line 29, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.value {
|
||||
padding-left: 10px; }
|
||||
/* line 32, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
|
||||
white-space: normal; }
|
||||
/* line 39, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-left {
|
||||
margin-left: 10px; }
|
||||
/* line 41, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-left .l-infobubble::before {
|
||||
right: 100%;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-right: 7.5px solid #dddddd; }
|
||||
/* line 49, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-right {
|
||||
margin-right: 10px; }
|
||||
/* line 51, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-right .l-infobubble::before {
|
||||
left: 100%;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 7.5px solid #dddddd; }
|
||||
/* line 60, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-top .l-infobubble::before {
|
||||
top: 10px; }
|
||||
/* line 66, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-btm .l-infobubble::before {
|
||||
bottom: 10px; }
|
||||
/* line 71, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-down {
|
||||
margin-bottom: 10px; }
|
||||
/* line 73, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-down .l-infobubble::before {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-left: -5px;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 7.5px solid #dddddd; }
|
||||
|
||||
/* line 86, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #dddddd;
|
||||
color: #666666;
|
||||
font-size: 0.8rem; }
|
||||
/* line 92, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .title {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px; }
|
||||
/* line 98, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr td {
|
||||
border-top: 1px solid #c4c4c4;
|
||||
font-size: 0.9em; }
|
||||
/* line 102, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr:first-child td {
|
||||
border-top: none; }
|
||||
/* line 106, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .value {
|
||||
color: #333333; }
|
||||
|
||||
/* line 8, ../sass/helpers/_splitter.scss */
|
||||
.split-layout .splitter {
|
||||
@@ -2882,10 +2929,10 @@ input[type="text"] {
|
||||
.wait-spinner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
-webkit-animation: rotation .6s infinite linear;
|
||||
-moz-animation: rotation .6s infinite linear;
|
||||
-o-animation: rotation .6s infinite linear;
|
||||
animation: rotation .6s infinite linear;
|
||||
-webkit-animation: rotation 0.6s infinite linear;
|
||||
-moz-animation: rotation 0.6s infinite linear;
|
||||
-o-animation: rotation 0.6s infinite linear;
|
||||
animation: rotation 0.6s infinite linear;
|
||||
border-color: rgba(0, 153, 204, 0.25);
|
||||
border-top-color: #0099cc;
|
||||
border-style: solid;
|
||||
@@ -2924,10 +2971,10 @@ input[type="text"] {
|
||||
.treeview .wait-spinner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
-webkit-animation: rotation .6s infinite linear;
|
||||
-moz-animation: rotation .6s infinite linear;
|
||||
-o-animation: rotation .6s infinite linear;
|
||||
animation: rotation .6s infinite linear;
|
||||
-webkit-animation: rotation 0.6s infinite linear;
|
||||
-moz-animation: rotation 0.6s infinite linear;
|
||||
-o-animation: rotation 0.6s infinite linear;
|
||||
animation: rotation 0.6s infinite linear;
|
||||
border-color: rgba(0, 153, 204, 0.25);
|
||||
border-top-color: #0099cc;
|
||||
border-style: solid;
|
||||
@@ -3041,7 +3088,7 @@ input[type="text"] {
|
||||
padding-left: 0; }
|
||||
|
||||
/* Styles for the iframe EmbeddedPageController element */
|
||||
/* line 4, ../sass/iframe.scss */
|
||||
/* line 4, ../sass/_iframe.scss */
|
||||
.l-iframe iframe {
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
||||
Reference in New Issue
Block a user