Commit dcc4d655 authored by Pat Kira's avatar Pat Kira Committed by Robert Lyon
Browse files

Bug 1409546: Styled smart evidence

behatnotneeded - style changes only

Change-Id: Idf3637b1f91a864fc7a690543bc9590df8af2b46
parent e171a342
......@@ -542,7 +542,7 @@ $popover-border-color: rgba(0,0,0,.2) !default;
$popover-fallback-border-color: #ccc !default;
//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-bg: darken($popover-bg, 5%) !default;
//** Popover arrow width
$popover-arrow-width: 10px !default;
......
......@@ -544,7 +544,7 @@
// $popover-fallback-border-color: #ccc
//** Popover title background color
// $popover-title-bg: darken($popover-bg, 3%)
// $popover-title-bg: darken($popover-bg, 5%)
//** Popover arrow width
// $popover-arrow-width: 10px
......
......@@ -246,10 +246,10 @@ jQuery(function($) {
// show / hide tooltips for standard elements
$('td.code div, tr.standard div').hover(
function() {
$(this).find('span').removeClass('hidden');
$(this).find('.popover').removeClass('hidden');
},
function() {
$(this).find('span').addClass('hidden');
$(this).find('.popover').addClass('hidden');
}
);
});
......@@ -516,7 +516,7 @@ class Framework {
),
'completed' => array(
'state' => (int) $state === self::EVIDENCE_COMPLETED ? 1 : 0,
'classes' => 'icon icon-circle completed',
'classes' => 'icon icon-check-circle completed',
),
);
if ($current) {
......
......@@ -546,7 +546,7 @@ $popover-border-color: rgba(0,0,0,.2);
$popover-fallback-border-color: #ccc;
//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%);
$popover-title-bg: darken($popover-bg, 5%);
//** Popover arrow width
$popover-arrow-width: 10px;
......
......@@ -548,7 +548,7 @@ $popover-border-color: rgba(0,0,0,.2);
$popover-fallback-border-color: #ccc;
//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%);
$popover-title-bg: darken($popover-bg, 5%);
//** Popover arrow width
$popover-arrow-width: 10px;
......
......@@ -548,7 +548,7 @@ $popover-border-color: rgba(0,0,0,.2);
$popover-fallback-border-color: #ccc;
//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%);
$popover-title-bg: darken($popover-bg, 5%);
//** Popover arrow width
$popover-arrow-width: 10px;
......
......@@ -547,7 +547,7 @@ $popover-border-color: rgba(0,0,0,.2);
$popover-fallback-border-color: #ccc;
//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%);
$popover-title-bg: darken($popover-bg, 5%);
//** Popover arrow width
$popover-arrow-width: 10px;
......
......@@ -14,7 +14,7 @@
<p>{$description|clean_html|safe}</p>
<p>{str tag="addpages" section="module.framework"}</p>
<table class="fullwidth table tablematrix" id="tablematrix">
<tr>
<tr class="table-pager">
<td colspan="2">&nbsp;</td>
<td colspan="{$viewcount}" class="special">
<button class="btn btn-default" id="prev">
......@@ -22,12 +22,12 @@
Prev
</button>
<button class="btn btn-default next" id="next">
<span class="icon left icon-chevron-right" aria-hidden="true" role="presentation"></span>
Next
<span class="icon right icon-chevron-right" aria-hidden="true" role="presentation"></span>
</button>
</td>
</tr>
<tr>
<tr class="pages">
<th>&nbsp;</th>
<th>&nbsp;</th>
{foreach from=$views key=vk item=view}
......@@ -37,20 +37,38 @@
{foreach from=$standards key=sk item=standard}
<tr class="standard">
<td colspan="{$viewcount + 2}">
<div>{$standard->name} <span class="hidden matrixtooltip">{$standard->shortname}<br>{$standard->description|clean_html|safe}</span></div>
<div class="shortname-container">
{$standard->name}
<div class="matrixtooltip popover hidden">
<h3 class="popover-title">{$standard->shortname}</h3>
<div class="popover-content">
{$standard->description|clean_html|safe}
</div>
</div>
</div>
</td>
</tr>
{if $standard->options}
{foreach from=$standard->options key=ok item=option}
<tr{if $option->parent} class="sub"{/if}>
<td class="code"><div>{$option->shortname} <span class="hidden matrixtooltip">{$option->name}<br>{$option->description|clean_html|safe}</span></div></td>
<td class="code">
<div class="shortname-container">
{$option->shortname}
<div class="matrixtooltip popover hidden">
<h3 class="popover-title">{$option->name}</h3>
<div class="popover-content">
{$option->description|clean_html|safe}
</div>
</div>
</div>
</td>
<td class="completedcount">{if $completed[$option->id]}{$completed[$option->id]}{else}0{/if}</td>
{foreach from=$views key=vk item=view}
<td class="mid"><span data-view="{$view->id}" data-option="{$option->id}"
{if $evidence[$framework][$option->id][$view->id].state}
class="{$evidence[$framework][$option->id][$view->id].classes}" title="{$evidence[$framework][$option->id][$view->id].title}">
{else}
class="dot{if !$canaddannotation} disabled{/if}">&bull;
class="icon icon-circle dot {if !$canaddannotation}disabled{/if}">
{/if}
</span>
</td>
......
.tablematrix {
position: relative;
tr.standard {
background: darken($table-bg-accent, 2%) !important;
}
tr.sub {
background: lighten($table-bg-accent, 1%) !important;
}
tr.table-pager,
tr.pages {
background-color: $body-bg;
}
th.viewtab {
text-align: center;
max-width: 70px;
......@@ -15,8 +18,9 @@
&.mid {
text-align: center;
vertical-align: middle;
span {
.icon {
display: block;
font-size: 1.2em;
cursor: pointer;
&.begun {
color: #5b9aa9;
......@@ -31,9 +35,16 @@
color: $brand-success;
}
&.dot {
padding: 5px 10px;
&.disabled {
cursor: not-allowed;
font-size: 0.8em;
color: lighten($gray-light, 15%);
}
&.dot.disabled {
font-size: 1em;
color: lighten($gray-light, 15%);
cursor: $cursor-disabled;
// Override dot icon with minus icon
&:before {
content: "\f068";
}
}
}
......@@ -47,25 +58,63 @@
border-top: 0;
}
.next {
.btn.next {
float: right;
}
}
.matrixtooltip {
z-index:2;
background-color: #fff;
border: 1px solid #999;
display: inline-block;
padding: 0 5px;
position: absolute;
// Additional styles extending popover
.matrixtooltip {
@extend .text-small;
display: inline-block !important;
min-width: 180px;
left: auto;
top: auto;
.popover-title {
font-size: 14px;
}
.popover-content {
ol,
ul {
padding-left: 15px;
}
}
}
}
.listing {
.buttonscell {
&.framework {
width: 125px;
// Styles for cell hover crosshair
// Make tbody display table to clip the crosshair
// Set tablematrix postition relative so that tooltip does not get cropped.
tbody {
overflow: hidden;
display: table;
align-content: stretch;
width: 100%;
.mid {
position: relative;
&:hover .dot {
color: $gray-light;
}
&:hover:before,
&:hover:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
background-color: rgba(0,0,0,.05);
}
&:hover:before {
top: -99999px;
left: 0;
}
&:hover:after {
top: 0;
left: -99999px;
}
}
}
}
\ No newline at end of file
......@@ -157,7 +157,7 @@ $width-sm: 90%;
color: #fff;
}
&.modal-section {
margin: 10px -15px;
margin: 0 0 10px 0;
}
.close {
@include box-shadow(-2px 0px 2px rgba(0,0,0,0.3));
......
......@@ -547,7 +547,7 @@ $popover-border-color: rgba(0,0,0,.2) !default;
$popover-fallback-border-color: #ccc !default;
//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-bg: darken($popover-bg, 5%) !default;
//** Popover arrow width
$popover-arrow-width: 10px !default;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment