[Frontend] Added classes for no-collapse indicator

open #304
Added classes string and related classes to ClockIndicator;
This commit is contained in:
Charles Hacskaylo
2015-12-11 15:49:50 -08:00
parent 21fd16ddf1
commit 33b1c1689c
5 changed files with 257 additions and 188 deletions

View File

@@ -37,6 +37,8 @@
}
.status.block {
$transDelay: 1.5s;
$transSpeed: .25s;
color: $colorStatusDefault;
cursor: default;
display: inline-block;
@@ -44,13 +46,47 @@
.status-indicator,
.label,
.count {
//@include test(#00ff00);
display: inline-block;
vertical-align: top;
}
&.no-icon {
.status-indicator {
display: none;
}
}
&.float-right {
float: right;
}
&.subtle {
opacity: 0.5;
}
.status-indicator {
margin-right: $interiorMarginSm;
}
&:not(.no-collapse) {
.label {
// Max-width silliness is necessary for width transition
@include trans-prop-nice(max-width, $transSpeed, $transDelay);
overflow: hidden;
max-width: 0px;
}
&:hover {
.label {
@include trans-prop-nice(max-width, $transSpeed, 0s);
max-width: 450px;
width: auto;
}
.count {
@include trans-prop-nice(max-width, $transSpeed, 0s);
opacity: 0;
}
}
}
&.ok .status-indicator,
&.info .status-indicator {
color: $colorStatusInfo;
@@ -63,27 +99,11 @@
&.error .status-indicator {
color: $colorStatusError;
}
.label {
// Max-width silliness is necessary for width transition
@include trans-prop-nice(max-width, .25s, 1.5s);
overflow: hidden;
max-width: 0px;
}
.count {
@include trans-prop-nice(opacity, .25s);
@include trans-prop-nice(opacity, $transSpeed, $transDelay);
font-weight: bold;
opacity: 1;
}
&:hover {
.label {
@include trans-prop-nice(max-width, .25s, 0s);
max-width: 450px;
width: auto;
}
.count {
opacity: 0;
}
}
}
/* Styles for messages and message banners */

View File

@@ -20,7 +20,6 @@
at runtime from the About dialog for additional information.
-->
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
<!--<div ng-init="reps = [1,2,3]"></div>-->
<div class='status block'
title="{{ngModel.getDescription()}}"
ng-click='ngModel.configure()'