diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 740df6ba8d..8bb8337d9c 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -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,26 +99,11 @@ &.error .status-indicator { color: $colorStatusError; } - .label { - // Max-width silliness is necessary for width transition - @include trans-prop-nice(max-width, .25s); - 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 { - max-width: 450px; - width: auto; - } - .count { - opacity: 0; - } - } } /* Styles for messages and message banners */ diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html index e9be598b18..fb4a2f89c9 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -20,7 +20,6 @@ at runtime from the About dialog for additional information. --> -