diff options
| author | Iftekharul Islam <iislam@us.ibm.com> | 2017-04-19 14:37:55 -0500 |
|---|---|---|
| committer | Patrick Williams <patrick@stwcx.xyz> | 2017-09-20 12:41:34 -0500 |
| commit | 8b4828a6553a4a9f839fd40cb5dd357cdc435767 (patch) | |
| tree | e22d59d3bca0833e248080a2cce7b9f8cda6a898 /app/overview/styles | |
| parent | cd78950815d9b230f0eaa41a947fcae6d4cbbcb7 (diff) | |
| download | phosphor-webui-8b4828a6553a4a9f839fd40cb5dd357cdc435767.tar.gz phosphor-webui-8b4828a6553a4a9f839fd40cb5dd357cdc435767.zip | |
Add event log search and filter capabilities
Change-Id: I9dc891e0f1e30abe488d401c57e1cf4f5656c3af
Signed-off-by: Iftekharul Islam <iislam@us.ibm.com>
Diffstat (limited to 'app/overview/styles')
| -rw-r--r-- | app/overview/styles/log.scss | 338 |
1 files changed, 0 insertions, 338 deletions
diff --git a/app/overview/styles/log.scss b/app/overview/styles/log.scss deleted file mode 100644 index afe773d..0000000 --- a/app/overview/styles/log.scss +++ /dev/null @@ -1,338 +0,0 @@ -// Event Log SCSS -#event-log { - - .accord-trigger { - transform: rotate(90deg); - font-size: 1.5em; - color: lighten($darkgrey, 10%); - padding: .3em; - display: block; - margin: 0 auto; - transition: all .2s ease; - &:after { - content: '\276F' - } - &.active { - transform: rotate(-90deg); - color: $darkbg__accent; - } - &:focus { - outline: 0; - color: $darkbg__accent; - } - } - - // Dropwdowns filter - .dropdown__date.row { - padding: .5em; - } - - //Timezone select - .event-log__timezone, - .event-log__timezone button { - position: relative; - text-transform: uppercase; - color: $lightbg__primary; - font-size: .9em; - font-weight: 700; - border: 0; - } - - .content__search { - @include mediaQuery(x-large) { - max-width: 61%; - @include fastTransition-all; - } - } -} - -#event-filter { - .filter-label { - color: darken($lightgrey, 10%); - text-transform: uppercase; - font-weight: 700; - font-size: .75em; - margin-bottom: 3px; - } - .event__severity-filter { - margin-right: 2em; - margin-bottom: 1em; - button { - margin: 3px -3px; - padding: .6em 2em; - min-height: 2.1em; - font-size: .9em; - font-weight: 700; - border-radius: 0; - &.first, - &.last { - border-radius: 3px; - } - &.last { - border-left: 0; - } - } - .btn-primary { - border: 2px solid $primebtn__bg; - } - - } - .event__date-filter { - margin-right: 1.5em; - color: $darkgrey; - input { - width: 170px; - height: 2.1rem; - } - label { - height: 0; - text-indent: -999px; - } - } -} - -.event-log__filters { - position: relative; - padding-bottom: .5em; - padding-top: .5em; - - @media (min-width: 1333px) { - float: right; - display: inline-block; - } -} - -// Event Log Events -#event-log__events.row { - padding-left: 0; - padding-right: 0; -} -#event-log__events { - display: block; - margin-top: 1.6em; - border-top: 1px solid $lightgrey; - position: relative; - overflow: hidden; - - .header__actions-bar { - .btn-export, - .btn-delete, - .btn-resolve { - color: $white; - } - } - .inline__confirm { - height: auto; - margin-left: 0; - left: 0; - padding: 1em 2em 1em 2em - } - - .inline__confirm-message { - margin-top: 5px; - margin-bottom: -10px; - } - .inline__confirm-buttons .btn-primary { - padding: .5em 2em; - min-height: 25px; - margin-top: .5em; - @include mediaQuery(medium) { - margin-top: 0; - } - } - - .event-log__col-check { - max-width: 60px; - text-align: center; - } - .col-logged-events { - span { - display: inline-block; - font-weight: 700; - margin-right: .3em; - } - } - - //Export log - .btn-export, .btn-meta-copy, - .btn-delete, - .btn-resolve { - text-transform: capitalize; - color: black; - font-size: .9em; - font-weight: 700; - position: relative; - padding: 0 0 1em 2em; - &:hover { - text-decoration: underline; - } - } - .btn-export { - margin-top: 7px; - padding-bottom: 0; - } - .btn-export:before { - content: '\21E5'; - position: absolute; - font-size: 1.7em; - vertical-align: middle; - transform: rotate(90deg); - display: inline-block; - left: 2px; - top: -5px; - } - - .btn-meta-copy, - .btn-delete, - .btn-resolve { - margin-left: 5px; - padding: .5em .5em; - } - - // Single event log card - .event-log__single-event { - border-top: 1px solid $lightgrey; - padding: 1em 1em 1em .7em; - } - - .event-log__event-info { - &:hover { - cursor: pointer; - } - } - - //Event priorities - .event__priority { - color: $white; - font-size: .8em; - text-transform: uppercase; - padding: 2px 2em; - font-weight: 700; - line-height: inherit; - min-width: 103px; - text-align: center; - - &.high-priority { - background: $error-color; - - } - &.med-priority { - background: $alert__warning; - - } - &.low-priority { - background: $lightbg__primary; - } - &.event-resolved { - background: $purple; - padding: 2px 1em; - } - } - - //Event Severity - .event__severity { - font-size: .7em; - text-transform: uppercase; - color: $darkgrey; - font-weight: 700; - margin: 0 1em; - min-width: 103px; - } - - //Event description - .event__description { - font-weight: 400; - } - - //Event ID - .event__id { - @include fontCourierBold; - font-size: .9em; - color: $darkgrey; - } - - .event__timestamp { - @include fontCourierBold; - font-size: .9em; - color: #999999; - margin-left: 1.2em; - } - - // Event metadata row - .event__metadata-row { - max-height: 0; - overflow: hidden; - -webkit-transition: 0.5s linear max-height; - transition: 0.5s linear max-height; - &.active { - max-height: 1000px; //max-height used to allow flexible height of content and still allow transition - @include mediaQuery(small) { - max-height: 1000px; - } - @include mediaQuery(medium) { - max-height: 1000px; - } - } - } - - //Event metadata - .event__metadata { - height: 200px; - overflow-y: scroll; - border: 1px solid $lightgrey; - padding: .5em .5em 0; - background: $white; - display: block; - margin-bottom: 1.5em; - &::-webkit-scrollbar { - -webkit-appearance: none; - width: 7px; - } - - &::-webkit-scrollbar-thumb { - border-radius: 4px; - background-color: rgba(0, 0, 0, .5); - -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); - } - } - - //Event Related Items - .event__related { - width: 100%; - } - .event__related-label { - font-weight: 700; - margin-right: 1.2em; - padding-top: .3em; - } - - .event__related-item { - margin-right: 1em; - padding-top: .3em; - display: inline-block; - float: left; - clear: both; - } - .event__actions { - margin-left: -1em; - //margin-bottom: 1em; - @include mediaQuery(medium) { - float: right; - } - } - - .event__icon { - width: 20px; - height: 20px; - font-weight: normal; - margin-right: .5em; - margin-top: -3px; - display: inline-block; - } - -} - -//end event-log__events - - - |

