alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Infobubble markup and CSS

Browse Source 
WTD-1054
Markup and styling for infobubble;
Includes fake data in infobubble.html
This commit is contained in:
Charles Hacskaylo
2015-04-29 17:52:06 -07:00
parent ec2d5892a5
commit eafc603e03
3 changed files with 247 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
platform/commonUI/general/res/sass/helpers/_bubbles.scss
View File

@@ -1,40 +1,110 @@
.bubble-wrapper {
$arwSize: 7px;
$c: #990000;
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
position: absolute;
//top: 200px; left: 200px;
z-index: 10;
.bubble {
@include border-radius($basicCr);
display: inline-block;
background: $c;
color: lighten($c, 50%);
font-size: 0.8rem;
font-style: italic;
max-width: 200px;
padding: 4px 8px;
&:before {
content:"";
position: absolute;
width: 0;
height: 0;
}
//************************************************* LAYOUT
$infoBubbleFg: #666;
$infoBubbleBg: #ddd;
.l-infobubble-wrapper {
$arwSize: 5px;
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
position: absolute;
z-index: 70;
.l-infobubble {
display: inline-block;
max-width: 400px;
padding: 5px 10px;
&:before {
content:"";
position: absolute;
width: 0;
height: 0;
}
table tr {
td {
max-width: 150px;
padding: 2px 0;
vertical-align: top;
//white-space: nowrap;
//overflow: hidden;
//text-overflow: ellipsis;
&.value {
padding-left: $interiorMargin * 2;
}
&.align-wrap {
white-space: normal;
}
}
}
}
&.arw-left .bubble:before {
right: 100%;
top: 50%; // 26px;
margin-top: -1 * $arwSize;
border-top: $arwSize solid transparent;
border-bottom: $arwSize solid transparent;
border-right: ($arwSize * 1.5) solid $c;
}
&.arw-down .bubble:before {
left: 50%;
top: 100%;
margin-left: -1 * $arwSize;
border-left: $arwSize solid transparent;
border-right: $arwSize solid transparent;
border-top: ($arwSize * 1.5) solid $c;
}
&.arw-left {
margin-left: $arwSize*2;
.l-infobubble::before {
right: 100%;
border-top: $arwSize solid transparent;
border-bottom: $arwSize solid transparent;
border-right: ($arwSize * 1.5) solid $infoBubbleBg;
}
}
&.arw-right {
margin-right: $arwSize*2;
.l-infobubble::before {
left: 100%;
border-top: $arwSize solid transparent;
border-bottom: $arwSize solid transparent;
border-left: ($arwSize * 1.5) solid $infoBubbleBg;
}
}
&.arw-top {
.l-infobubble::before {
top: $arwSize * 2;
}
}
&.arw-btm {
.l-infobubble::before {
bottom: $arwSize * 2;
}
}
&.arw-down {
margin-bottom: $arwSize*2;
.l-infobubble::before {
left: 50%;
top: 100%;
margin-left: -1 * $arwSize;
border-left: $arwSize solid transparent;
border-right: $arwSize solid transparent;
border-top: ($arwSize * 1.5) solid $infoBubbleBg;
}
}
}
//************************************************* LOOK AND FEEL
.s-infobubble {
$emFg: darken($infoBubbleFg, 20%);
@include border-radius($basicCr);
background: $infoBubbleBg;
color: $infoBubbleFg;
font-size: 0.8rem;
.title {
color: $emFg;
font-weight: bold;
margin-bottom: $interiorMargin;
}
tr {
td {
border-top: 1px solid darken($infoBubbleBg, 10%);
font-size: 0.9em;
}
&:first-child td {
border-top: none;
}
}
.value {
color: $emFg;
}
}