</div>
<div class="component-viewer-header-measures-scope">
- <a data-scope="issues" title="Toggle issues"
- class="js-toggle-issues component-viewer-header-measures-toggle-scope {{#if settings.issues}}active{{/if}}"></a>
<a data-scope="issues" class="component-viewer-header-measures-expand">
{{#if component.measures.debt}}
<div class="component-viewer-header-measure">
</div>
<i class="icon-dropdown"></i>
</a>
+ <a data-scope="issues" title="Toggle issues"
+ class="js-toggle-issues component-viewer-header-measures-toggle-scope {{#if settings.issues}}active{{/if}}"></a>
</div>
<div class="component-viewer-header-measures-scope">
- <a data-scope="coverage" title="Toggle coverage"
- class="js-toggle-coverage component-viewer-header-measures-toggle-scope {{#if settings.coverage}}active{{/if}}"></a>
<a data-scope="coverage" class="component-viewer-header-measures-expand">
{{#if component.measures.coverage}}
<div class="component-viewer-header-measure">
{{/if}}
<i class="icon-dropdown"></i>
</a>
+ <a data-scope="coverage" title="Toggle coverage"
+ class="js-toggle-coverage component-viewer-header-measures-toggle-scope {{#if settings.coverage}}active{{/if}}"></a>
</div>
<div class="component-viewer-header-measures-scope">
- <a data-scope="duplications" title="Toggle duplications"
- class="js-toggle-duplications component-viewer-header-measures-toggle-scope {{#if settings.duplications}}active{{/if}}"></a>
<a data-scope="duplications" class="component-viewer-header-measures-expand">
{{#if component.measures.duplication_density}}
<div class="component-viewer-header-measure">
{{/if}}
<i class="icon-dropdown"></i>
</a>
+ <a data-scope="duplications" title="Toggle duplications"
+ class="js-toggle-duplications component-viewer-header-measures-toggle-scope {{#if settings.duplications}}active{{/if}}"></a>
</div>
</div>
</div>
.component-viewer-header {
margin-bottom: 10px;
- padding-top: 8px;
}
.component-viewer-header-bar {
.component-viewer-header-measures-scope {
position: relative;
float: left;
- border-left: 1px solid transparent;
+// border-left: 1px solid transparent;
}
.component-viewer-header-measures-toggle-scope {
position: absolute;
- top: -9px;
+ top: 0;
display: block;
- .size(100%, 8px);
+ .size(100%, 6px);
+ margin-bottom: -1px;
background-color: lighten(@blue, 30%);
+ .transform-origin(0 0);
.trans;
- &:hover { background-color: lighten(@blue, 15%); }
+ &:after {
+ content: " ";
+ position: absolute;
+ top: 100%;
+ .size(100%, 4px);
+ background-color: transparent;
+ }
+
+ &:hover {
+ background-color: lighten(@blue, 15%);
+ .scale2(1, 2);
+ }
+
&.active { background-color: @blue; }
&.inactive { background-color: transparent; }
}
.component-viewer-header-measures-expand {
display: block;
padding: 10px 20px;
+ white-space: nowrap;
.trans(background);
&:hover { background-color: @barBorderColor; }
.component-viewer-header-links {
float: right;
padding: 8px 10px;
- border-left: 1px solid @barBorderColor;
a {
float: left;
.component-viewer-header-expanded-bar {
display: none;
.clearfix;
+ margin-top: -1px;
padding: 10px;
border: 1px solid @barBorderColor;
border-top: none;
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
+.transform-origin(@origin) {
+ -webkit-transform-origin: @origin;
+ -ms-transform-origin: @origin;
+ transform-origin: @origin;
+}
.box-sizing(@boxmodel) {
-moz-box-sizing: @boxmodel;