mirror of
https://github.com/nasa/openmct.git
synced 2025-01-19 03:06:54 +00:00
[Frontend] Fix word wrapping issues in hover bubble
#75 CSS modified to utilize word-break property;
This commit is contained in:
Charles Hacskaylo
parent
f4b87cf70d
commit
08d68f99a5
@ -92,7 +92,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/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,
|
||||
@ -113,38 +113,38 @@ time, mark, audio, video {
|
||||
font-size: 100%;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1; }
|
||||
|
||||
/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/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-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none; }
|
||||
/* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/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-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
|
||||
display: block; }
|
||||
|
||||
@ -4429,26 +4429,26 @@ input[type="text"] {
|
||||
.l-infobubble-wrapper .l-infobubble table tr td {
|
||||
padding: 2px 0;
|
||||
vertical-align: top; }
|
||||
/* line 57, ../sass/helpers/_bubbles.scss */
|
||||
/* line 53, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.label {
|
||||
padding-right: 10px;
|
||||
white-space: nowrap; }
|
||||
/* line 61, ../sass/helpers/_bubbles.scss */
|
||||
/* line 57, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.value {
|
||||
white-space: nowrap; }
|
||||
/* line 65, ../sass/helpers/_bubbles.scss */
|
||||
word-break: break-all; }
|
||||
/* line 61, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
|
||||
white-space: normal; }
|
||||
/* line 71, ../sass/helpers/_bubbles.scss */
|
||||
/* line 67, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble .title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 5px; }
|
||||
/* line 78, ../sass/helpers/_bubbles.scss */
|
||||
/* line 74, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-left {
|
||||
margin-left: 20px; }
|
||||
/* line 80, ../sass/helpers/_bubbles.scss */
|
||||
/* line 76, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-left .l-infobubble::before {
|
||||
right: 100%;
|
||||
width: 0;
|
||||
@ -4456,10 +4456,10 @@ input[type="text"] {
|
||||
border-top: 6.66667px solid transparent;
|
||||
border-bottom: 6.66667px solid transparent;
|
||||
border-right: 10px solid #ddd; }
|
||||
/* line 86, ../sass/helpers/_bubbles.scss */
|
||||
/* line 82, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-right {
|
||||
margin-right: 20px; }
|
||||
/* line 88, ../sass/helpers/_bubbles.scss */
|
||||
/* line 84, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-right .l-infobubble::before {
|
||||
left: 100%;
|
||||
width: 0;
|
||||
@ -4467,16 +4467,16 @@ input[type="text"] {
|
||||
border-top: 6.66667px solid transparent;
|
||||
border-bottom: 6.66667px solid transparent;
|
||||
border-left: 10px solid #ddd; }
|
||||
/* line 95, ../sass/helpers/_bubbles.scss */
|
||||
/* line 91, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-top .l-infobubble::before {
|
||||
top: 20px; }
|
||||
/* line 101, ../sass/helpers/_bubbles.scss */
|
||||
/* line 97, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-btm .l-infobubble::before {
|
||||
bottom: 20px; }
|
||||
/* line 106, ../sass/helpers/_bubbles.scss */
|
||||
/* line 102, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-down {
|
||||
margin-bottom: 10px; }
|
||||
/* line 108, ../sass/helpers/_bubbles.scss */
|
||||
/* line 104, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-down .l-infobubble::before {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
@ -4484,21 +4484,21 @@ input[type="text"] {
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 7.5px solid #ddd; }
|
||||
/* line 117, ../sass/helpers/_bubbles.scss */
|
||||
/* line 113, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .arw {
|
||||
z-index: 2; }
|
||||
/* line 120, ../sass/helpers/_bubbles.scss */
|
||||
/* line 116, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-up .arw.arw-down, .l-infobubble-wrapper.arw-down .arw.arw-up {
|
||||
display: none; }
|
||||
|
||||
/* line 127, ../sass/helpers/_bubbles.scss */
|
||||
/* line 125, ../sass/helpers/_bubbles.scss */
|
||||
.l-thumbsbubble-wrapper .arw-up {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6.66667px solid transparent;
|
||||
border-right: 6.66667px solid transparent;
|
||||
border-bottom: 10px solid #4d4d4d; }
|
||||
/* line 130, ../sass/helpers/_bubbles.scss */
|
||||
/* line 128, ../sass/helpers/_bubbles.scss */
|
||||
.l-thumbsbubble-wrapper .arw-down {
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -4506,7 +4506,7 @@ input[type="text"] {
|
||||
border-right: 6.66667px solid transparent;
|
||||
border-top: 10px solid #4d4d4d; }
|
||||
|
||||
/* line 134, ../sass/helpers/_bubbles.scss */
|
||||
/* line 133, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
@ -4517,22 +4517,29 @@ input[type="text"] {
|
||||
background: #ddd;
|
||||
color: #666;
|
||||
font-size: 0.8rem; }
|
||||
/* line 141, ../sass/helpers/_bubbles.scss */
|
||||
/* line 140, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .title {
|
||||
color: #333333;
|
||||
font-weight: bold; }
|
||||
/* line 146, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr td {
|
||||
border-top: 1px solid #c4c4c4;
|
||||
.s-infobubble table tr td {
|
||||
border: none;
|
||||
border-top: 1px solid #c4c4c4 !important;
|
||||
font-size: 0.9em; }
|
||||
/* line 150, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr:first-child td {
|
||||
/* line 152, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble table tr:first-child td {
|
||||
border-top: none !important; }
|
||||
/* line 157, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble:first-child td {
|
||||
border-top: none; }
|
||||
/* line 154, ../sass/helpers/_bubbles.scss */
|
||||
/* line 161, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .label {
|
||||
color: gray; }
|
||||
/* line 165, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .value {
|
||||
color: #333333; }
|
||||
|
||||
/* line 159, ../sass/helpers/_bubbles.scss */
|
||||
/* line 171, ../sass/helpers/_bubbles.scss */
|
||||
.s-thumbsbubble {
|
||||
background: #4d4d4d;
|
||||
color: #b3b3b3; }
|
||||
|
||||
@ -48,19 +48,15 @@
|
||||
width: 100%;
|
||||
tr {
|
||||
td {
|
||||
//max-width: 150px;
|
||||
padding: 2px 0;
|
||||
vertical-align: top;
|
||||
//white-space: nowrap;
|
||||
//overflow: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
&.label {
|
||||
padding-right: $interiorMargin * 2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.value {
|
||||
white-space: nowrap;
|
||||
//width: 90%;
|
||||
//word-wrap: break-word; // Doesn't work in <td>?
|
||||
word-break: break-all;
|
||||
}
|
||||
&.align-wrap {
|
||||
white-space: normal;
|
||||
@ -118,7 +114,9 @@
|
||||
z-index: 2;
|
||||
}
|
||||
&.arw-up .arw.arw-down,
|
||||
&.arw-down .arw.arw-up { display: none; }
|
||||
&.arw-down .arw.arw-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//************************************************* LOOK AND FEEL
|
||||
@ -131,6 +129,7 @@
|
||||
@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
|
||||
}
|
||||
}
|
||||
|
||||
.s-infobubble {
|
||||
$emFg: darken($colorInfoBubbleFg, 20%);
|
||||
@include border-radius($basicCr);
|
||||
@ -142,18 +141,31 @@
|
||||
color: $emFg;
|
||||
font-weight: bold;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
border-top: 1px solid darken($colorInfoBubbleBg, 10%);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
&:first-child td {
|
||||
border-top: none;
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
border: none;
|
||||
border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&:first-child td {
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: lighten($emFg, 30%);
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $emFg;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.s-thumbsbubble {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user