From 21fd16ddf106f22ccb6a394b7a1d0a619b1b1156 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 11 Dec 2015 15:02:10 -0800 Subject: [PATCH 1/2] [Frontend] Delay added to expanded status indicator collapse open #336 --- .../general/res/sass/controls/_messages.scss | 3 +- .../espresso/res/css/theme-espresso.css | 124 ++++++++++-------- .../themes/snow/res/css/theme-snow.css | 124 ++++++++++-------- 3 files changed, 142 insertions(+), 109 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 740df6ba8d..4d2c5ca155 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -65,7 +65,7 @@ } .label { // Max-width silliness is necessary for width transition - @include trans-prop-nice(max-width, .25s); + @include trans-prop-nice(max-width, .25s, 1.5s); overflow: hidden; max-width: 0px; } @@ -76,6 +76,7 @@ } &:hover { .label { + @include trans-prop-nice(max-width, .25s, 0s); max-width: 450px; width: auto; } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 2493661aa8..8db04cc119 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -3069,10 +3069,10 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - -moz-transition-delay: 0; - -o-transition-delay: 0; - -webkit-transition-delay: 0; - transition-delay: 0; + -moz-transition-delay: 1.5s; + -o-transition-delay: 1.5s; + -webkit-transition-delay: 1.5s; + transition-delay: 1.5s; overflow: hidden; max-width: 0px; } /* line 72, ../../../../general/res/sass/controls/_messages.scss */ @@ -3097,25 +3097,41 @@ label.checkbox.custom { opacity: 1; } /* line 78, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { + -moz-transition-property: max-width; + -o-transition-property: max-width; + -webkit-transition-property: max-width; + transition-property: max-width; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -moz-transition-delay: 0s; + -o-transition-delay: 0s; + -webkit-transition-delay: 0s; + transition-delay: 0s; max-width: 450px; width: auto; } - /* line 82, ../../../../general/res/sass/controls/_messages.scss */ + /* line 83, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .count { opacity: 0; } /* Styles for messages and message banners */ -/* line 90, ../../../../general/res/sass/controls/_messages.scss */ +/* line 91, ../../../../general/res/sass/controls/_messages.scss */ .message.block { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 10px; } -/* line 94, ../../../../general/res/sass/controls/_messages.scss */ +/* line 95, ../../../../general/res/sass/controls/_messages.scss */ .message.error { background-color: rgba(255, 60, 0, 0.3); color: #ff8a66; } -/* line 100, ../../../../general/res/sass/controls/_messages.scss */ +/* line 101, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -3144,7 +3160,7 @@ label.checkbox.custom { -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; } - /* line 116, ../../../../general/res/sass/controls/_messages.scss */ + /* line 117, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.minimized { -moz-transition-property: left, opacity; -o-transition-property: left, opacity; @@ -3160,11 +3176,11 @@ label.checkbox.custom { transition-timing-function: ease-in-out; left: 0; opacity: 0; } - /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + /* line 125, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.new { left: 50%; opacity: 1; } - /* line 127, ../../../../general/res/sass/controls/_messages.scss */ + /* line 128, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.new:not(.info) { -moz-animation-name: pulse; -webkit-animation-name: pulse; @@ -3181,33 +3197,33 @@ label.checkbox.custom { -moz-animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } - /* line 132, ../../../../general/res/sass/controls/_messages.scss */ + /* line 133, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 136, ../../../../general/res/sass/controls/_messages.scss */ + /* line 137, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } - /* line 139, ../../../../general/res/sass/controls/_messages.scss */ + /* line 140, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-action { line-height: 15px; padding: 0 5px; } - /* line 143, ../../../../general/res/sass/controls/_messages.scss */ + /* line 144, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .close { cursor: pointer; font-size: 7px; width: 8px; } - /* line 149, ../../../../general/res/sass/controls/_messages.scss */ + /* line 150, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-progress-bar { height: 8px; line-height: 8px; width: 100px; } - /* line 155, ../../../../general/res/sass/controls/_messages.scss */ + /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .progress-info { display: none; } -/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +/* line 166, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -3224,10 +3240,10 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action:hover { background-color: gray; } - /* line 169, ../../../../general/res/sass/controls/_messages.scss */ + /* line 170, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner a { color: inherit; } - /* line 170, ../../../../general/res/sass/controls/_messages.scss */ + /* line 171, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -3248,13 +3264,13 @@ label.checkbox.custom { -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; } - /* line 174, ../../../../general/res/sass/controls/_messages.scss */ + /* line 175, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close { opacity: 0.5; } - /* line 176, ../../../../general/res/sass/controls/_messages.scss */ + /* line 177, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close:hover { opacity: 1; } - /* line 180, ../../../../general/res/sass/controls/_messages.scss */ + /* line 181, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok, .s-message-banner.info { background-color: #285b31; color: #ccc; } @@ -3267,7 +3283,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover, .s-message-banner.info .s-action:hover { background-color: #285b31; } - /* line 184, ../../../../general/res/sass/controls/_messages.scss */ + /* line 185, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution, .s-message-banner.warning, .s-message-banner.alert { background-color: #d35200; color: #ccc; } @@ -3280,7 +3296,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action:hover, .s-message-banner.warning .s-action:hover, .s-message-banner.alert .s-action:hover { background-color: #d35200; } - /* line 189, ../../../../general/res/sass/controls/_messages.scss */ + /* line 190, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.error { background-color: #751e21; color: #ccc; } @@ -3307,7 +3323,7 @@ label.checkbox.custom { ... same as above bottom-bar */ -/* line 231, ../../../../general/res/sass/controls/_messages.scss */ +/* line 232, ../../../../general/res/sass/controls/_messages.scss */ .l-message { display: -webkit-flex; display: flex; @@ -3315,52 +3331,52 @@ label.checkbox.custom { flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } - /* line 235, ../../../../general/res/sass/controls/_messages.scss */ + /* line 236, ../../../../general/res/sass/controls/_messages.scss */ .l-message .type-icon.message-type { -webkit-flex: 0 1 auto; flex: 0 1 auto; position: relative; } - /* line 240, ../../../../general/res/sass/controls/_messages.scss */ + /* line 241, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-left: 25px; position: relative; } - /* line 246, ../../../../general/res/sass/controls/_messages.scss */ + /* line 247, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents .top-bar, .l-message .message-contents .message-body { margin-bottom: 20px; } -/* line 195, ../../../../general/res/sass/controls/_messages.scss */ +/* line 196, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type { text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; color: #ccc; font-size: 80px; padding: 1px; width: 82px; } - /* line 197, ../../../../general/res/sass/controls/_messages.scss */ + /* line 198, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type:before { content: "\e608"; } -/* line 204, ../../../../general/res/sass/controls/_messages.scss */ +/* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type { color: #62ba72; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 206, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 208, ../../../../general/res/sass/controls/_messages.scss */ +/* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type { color: #ffa66d; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 212, ../../../../general/res/sass/controls/_messages.scss */ +/* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type { color: #d4585c; } - /* line 213, ../../../../general/res/sass/controls/_messages.scss */ + /* line 214, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type:before { content: "\21"; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 259, ../../../../general/res/sass/controls/_messages.scss */ + /* line 260, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .l-message, .t-message-single .bottom-bar { overflow: hidden; @@ -3371,40 +3387,40 @@ label.checkbox.custom { left: 0px; width: auto; height: auto; } - /* line 264, ../../../../general/res/sass/controls/_messages.scss */ + /* line 265, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .bottom-bar { top: auto; height: 24px; } } -/* line 195, ../../../../general/res/sass/controls/_messages.scss */ +/* line 196, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type { text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; color: #ccc; font-size: 32px; padding: 1px; width: 34px; } - /* line 197, ../../../../general/res/sass/controls/_messages.scss */ + /* line 198, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type:before { content: "\e608"; } -/* line 204, ../../../../general/res/sass/controls/_messages.scss */ +/* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type { color: #62ba72; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 206, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 208, ../../../../general/res/sass/controls/_messages.scss */ +/* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type { color: #ffa66d; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 212, ../../../../general/res/sass/controls/_messages.scss */ +/* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type { color: #d4585c; } - /* line 213, ../../../../general/res/sass/controls/_messages.scss */ + /* line 214, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type:before { content: "\21"; } -/* line 276, ../../../../general/res/sass/controls/_messages.scss */ +/* line 277, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -3412,26 +3428,26 @@ label.checkbox.custom { background: rgba(230, 230, 230, 0.1); margin-bottom: 5px; padding: 10px; } - /* line 283, ../../../../general/res/sass/controls/_messages.scss */ + /* line 284, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents, .t-message-list .message-contents .l-message .bottom-bar { position: relative; } - /* line 289, ../../../../general/res/sass/controls/_messages.scss */ + /* line 290, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents { font-size: 0.9em; margin-left: 10px; } - /* line 292, ../../../../general/res/sass/controls/_messages.scss */ + /* line 293, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .message-action { color: #b3b3b3; } - /* line 293, ../../../../general/res/sass/controls/_messages.scss */ + /* line 294, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .bottom-bar { text-align: left; } - /* line 296, ../../../../general/res/sass/controls/_messages.scss */ + /* line 297, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .top-bar, .t-message-list .message-contents .l-message .message-body { margin-bottom: 10px; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 304, ../../../../general/res/sass/controls/_messages.scss */ + /* line 305, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { margin-right: 10px; } } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 0b00551ac4..8096adf533 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -3008,10 +3008,10 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - -moz-transition-delay: 0; - -o-transition-delay: 0; - -webkit-transition-delay: 0; - transition-delay: 0; + -moz-transition-delay: 1.5s; + -o-transition-delay: 1.5s; + -webkit-transition-delay: 1.5s; + transition-delay: 1.5s; overflow: hidden; max-width: 0px; } /* line 72, ../../../../general/res/sass/controls/_messages.scss */ @@ -3036,25 +3036,41 @@ label.checkbox.custom { opacity: 1; } /* line 78, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { + -moz-transition-property: max-width; + -o-transition-property: max-width; + -webkit-transition-property: max-width; + transition-property: max-width; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -moz-transition-delay: 0s; + -o-transition-delay: 0s; + -webkit-transition-delay: 0s; + transition-delay: 0s; max-width: 450px; width: auto; } - /* line 82, ../../../../general/res/sass/controls/_messages.scss */ + /* line 83, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .count { opacity: 0; } /* Styles for messages and message banners */ -/* line 90, ../../../../general/res/sass/controls/_messages.scss */ +/* line 91, ../../../../general/res/sass/controls/_messages.scss */ .message.block { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 10px; } -/* line 94, ../../../../general/res/sass/controls/_messages.scss */ +/* line 95, ../../../../general/res/sass/controls/_messages.scss */ .message.error { background-color: rgba(255, 60, 0, 0.3); color: #ff8a66; } -/* line 100, ../../../../general/res/sass/controls/_messages.scss */ +/* line 101, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -3083,7 +3099,7 @@ label.checkbox.custom { -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; } - /* line 116, ../../../../general/res/sass/controls/_messages.scss */ + /* line 117, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.minimized { -moz-transition-property: left, opacity; -o-transition-property: left, opacity; @@ -3099,11 +3115,11 @@ label.checkbox.custom { transition-timing-function: ease-in-out; left: 0; opacity: 0; } - /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + /* line 125, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.new { left: 50%; opacity: 1; } - /* line 127, ../../../../general/res/sass/controls/_messages.scss */ + /* line 128, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.new:not(.info) { -moz-animation-name: pulse; -webkit-animation-name: pulse; @@ -3120,33 +3136,33 @@ label.checkbox.custom { -moz-animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } - /* line 132, ../../../../general/res/sass/controls/_messages.scss */ + /* line 133, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 136, ../../../../general/res/sass/controls/_messages.scss */ + /* line 137, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } - /* line 139, ../../../../general/res/sass/controls/_messages.scss */ + /* line 140, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-action { line-height: 15px; padding: 0 5px; } - /* line 143, ../../../../general/res/sass/controls/_messages.scss */ + /* line 144, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .close { cursor: pointer; font-size: 7px; width: 8px; } - /* line 149, ../../../../general/res/sass/controls/_messages.scss */ + /* line 150, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-progress-bar { height: 8px; line-height: 8px; width: 100px; } - /* line 155, ../../../../general/res/sass/controls/_messages.scss */ + /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .progress-info { display: none; } -/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +/* line 166, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -3163,10 +3179,10 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action:hover { background-color: gray; } - /* line 169, ../../../../general/res/sass/controls/_messages.scss */ + /* line 170, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner a { color: inherit; } - /* line 170, ../../../../general/res/sass/controls/_messages.scss */ + /* line 171, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -3187,13 +3203,13 @@ label.checkbox.custom { -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; } - /* line 174, ../../../../general/res/sass/controls/_messages.scss */ + /* line 175, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close { opacity: 0.5; } - /* line 176, ../../../../general/res/sass/controls/_messages.scss */ + /* line 177, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close:hover { opacity: 1; } - /* line 180, ../../../../general/res/sass/controls/_messages.scss */ + /* line 181, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok, .s-message-banner.info { background-color: #275a36; color: #fff; } @@ -3206,7 +3222,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover, .s-message-banner.info .s-action:hover { background-color: #275a36; } - /* line 184, ../../../../general/res/sass/controls/_messages.scss */ + /* line 185, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution, .s-message-banner.warning, .s-message-banner.alert { background-color: #d26a00; color: #fff; } @@ -3219,7 +3235,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action:hover, .s-message-banner.warning .s-action:hover, .s-message-banner.alert .s-action:hover { background-color: #d26a00; } - /* line 189, ../../../../general/res/sass/controls/_messages.scss */ + /* line 190, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.error { background-color: #702a28; color: #fff; } @@ -3246,7 +3262,7 @@ label.checkbox.custom { ... same as above bottom-bar */ -/* line 231, ../../../../general/res/sass/controls/_messages.scss */ +/* line 232, ../../../../general/res/sass/controls/_messages.scss */ .l-message { display: -webkit-flex; display: flex; @@ -3254,52 +3270,52 @@ label.checkbox.custom { flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } - /* line 235, ../../../../general/res/sass/controls/_messages.scss */ + /* line 236, ../../../../general/res/sass/controls/_messages.scss */ .l-message .type-icon.message-type { -webkit-flex: 0 1 auto; flex: 0 1 auto; position: relative; } - /* line 240, ../../../../general/res/sass/controls/_messages.scss */ + /* line 241, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-left: 25px; position: relative; } - /* line 246, ../../../../general/res/sass/controls/_messages.scss */ + /* line 247, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents .top-bar, .l-message .message-contents .message-body { margin-bottom: 20px; } -/* line 195, ../../../../general/res/sass/controls/_messages.scss */ +/* line 196, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type { text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; color: #ccc; font-size: 80px; padding: 1px; width: 82px; } - /* line 197, ../../../../general/res/sass/controls/_messages.scss */ + /* line 198, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type:before { content: "\e608"; } -/* line 204, ../../../../general/res/sass/controls/_messages.scss */ +/* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type { color: #60ba7b; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 206, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 208, ../../../../general/res/sass/controls/_messages.scss */ +/* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type { color: #ffb66c; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 212, ../../../../general/res/sass/controls/_messages.scss */ +/* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type { color: #c96b68; } - /* line 213, ../../../../general/res/sass/controls/_messages.scss */ + /* line 214, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type:before { content: "\21"; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 259, ../../../../general/res/sass/controls/_messages.scss */ + /* line 260, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .l-message, .t-message-single .bottom-bar { overflow: hidden; @@ -3310,40 +3326,40 @@ label.checkbox.custom { left: 0px; width: auto; height: auto; } - /* line 264, ../../../../general/res/sass/controls/_messages.scss */ + /* line 265, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .bottom-bar { top: auto; height: 24px; } } -/* line 195, ../../../../general/res/sass/controls/_messages.scss */ +/* line 196, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type { text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; color: #ccc; font-size: 32px; padding: 1px; width: 34px; } - /* line 197, ../../../../general/res/sass/controls/_messages.scss */ + /* line 198, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type:before { content: "\e608"; } -/* line 204, ../../../../general/res/sass/controls/_messages.scss */ +/* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type { color: #60ba7b; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 206, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 208, ../../../../general/res/sass/controls/_messages.scss */ +/* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type { color: #ffb66c; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 212, ../../../../general/res/sass/controls/_messages.scss */ +/* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type { color: #c96b68; } - /* line 213, ../../../../general/res/sass/controls/_messages.scss */ + /* line 214, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type:before { content: "\21"; } -/* line 276, ../../../../general/res/sass/controls/_messages.scss */ +/* line 277, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -3351,26 +3367,26 @@ label.checkbox.custom { background: rgba(102, 102, 102, 0.1); margin-bottom: 5px; padding: 10px; } - /* line 283, ../../../../general/res/sass/controls/_messages.scss */ + /* line 284, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents, .t-message-list .message-contents .l-message .bottom-bar { position: relative; } - /* line 289, ../../../../general/res/sass/controls/_messages.scss */ + /* line 290, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents { font-size: 0.9em; margin-left: 10px; } - /* line 292, ../../../../general/res/sass/controls/_messages.scss */ + /* line 293, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .message-action { color: #999999; } - /* line 293, ../../../../general/res/sass/controls/_messages.scss */ + /* line 294, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .bottom-bar { text-align: left; } - /* line 296, ../../../../general/res/sass/controls/_messages.scss */ + /* line 297, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .top-bar, .t-message-list .message-contents .l-message .message-body { margin-bottom: 10px; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 304, ../../../../general/res/sass/controls/_messages.scss */ + /* line 305, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { margin-right: 10px; } } From 33b1c1689c01f3111fe87983395f2fe96d90b940 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 11 Dec 2015 15:49:50 -0800 Subject: [PATCH 2/2] [Frontend] Added classes for no-collapse indicator open #304 Added classes string and related classes to ClockIndicator; --- .../general/res/sass/controls/_messages.scss | 56 +++-- .../general/res/templates/indicator.html | 1 - .../espresso/res/css/theme-espresso.css | 193 ++++++++++-------- .../themes/snow/res/css/theme-snow.css | 193 ++++++++++-------- .../clock/src/indicators/ClockIndicator.js | 2 +- 5 files changed, 257 insertions(+), 188 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 4d2c5ca155..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,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 */ 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. --> -