skyquake/framework/widgets/skyquake_container/eventCenter.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19
  20 @import '../../style/colors.scss';
  21
  22 .eventCenter {
  23         background-color: $white;
  24         z-index: 9999;
  25         position: relative;
  26
  27         [data-open-close-icon] {
  28             &:after {
  29                 content: " ";
  30                 display: block;
  31                 float: right;
  32                 margin-right: 8px;
  33                 height: 51px;
  34                 width: 51px;
  35                 opacity: 0.25;
  36                 background-size: 20px 20px;
  37                 background-repeat: no-repeat;
  38                 background-position: center center;
  39                 /* background-image required in order for background-size to work*/
  40                 background-image: url(../../../node_modules/open-iconic/svg/caret-bottom.svg);
  41                 vertical-align: middle;
  42             }
  43             &:hover:after {
  44                 opacity: 1;
  45             }
  46         }
  47         [data-open-close-icon="closed"]:after {
  48             transform: rotate(180deg);
  49             transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  50         }
  51         [data-open-close-icon="open"]:after {
  52             transform: rotate(0deg);
  53             transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  54         }
  55
  56
  57         .notification {
  58         .crouton {
  59             right: 4px;
  60             top: 34px;
  61             width: 30%;
  62             left: auto;
  63             .info {
  64                 border-radius: 25px;
  65             }
  66         }
  67     }
  68         &.-with-transitions {
  69                 transition: height 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
  70         }
  71         &.open {
  72                 .notificationListBody {
  73                         height: 300px;
  74                 }
  75         }
  76         &.closed {
  77                 .notificationListBody {
  78                         height: 0px;
  79                 }
  80         }
  81         .title {
  82                 border-top: 1px solid $gray-dark;
  83                 border-bottom: 1px solid $gray-dark;
  84                 cursor: pointer;
  85                 color: $gray-darker;
  86                 font-style: normal;
  87                 font-size: 1.625rem;
  88         font-weight: 400;
  89                 height: 51px;
  90                 line-height: 51px;
  91                 margin: 0;
  92                 padding-left: 0;
  93                 padding-right: 0;
  94                 text-align: center;
  95                 text-transform: uppercase;
  96                 background-color: $gray-lighter;
  97         }
  98         .notificationListBody {
  99                 overflow: auto;
 100                 .notificationList {
 101                         width: 100%;
 102                         &:hover {
 103                                 overflow: auto;
 104                         }
 105
 106                         .notificationItem {
 107
 108                         }
 109
 110                         th {
 111                                 text-align: left;
 112                 padding: 0.5rem;
 113                 background: $gray-darker;
 114                 border: 1px solid black;
 115                                 color: $white;
 116                                 &.source {
 117                                         width: 20%;
 118                                 }
 119                                 &.timestamp {
 120                                         width: 20%;
 121                                 }
 122                                 &.event {
 123                                         width: 20%;
 124                                 }
 125                                 &.details {
 126                                         width: 40%;
 127                                 }
 128                         }
 129
 130                         tr {
 131                                 padding: 0.5rem;
 132                                 border: 1px solid black;
 133
 134                                 &:nth-child(odd) {
 135                                         background: $white;
 136                                         td {
 137                             border: 1px solid black;
 138                             padding: 0.5rem;
 139                         }
 140                                 }
 141
 142                                 &:nth-child(even) {
 143                                         background: $gray-lighter;
 144                                         td {
 145                             border: 1px solid black;
 146                             padding: 0.5rem;
 147                         }
 148                                 }
 149                         }
 150                 }
 151         }
 152 }