Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / framework / widgets / skyquake_container / eventCenter.scss

diff --git a/skyquake/framework/widgets/skyquake_container/eventCenter.scss b/skyquake/framework/widgets/skyquake_container/eventCenter.scss
new file mode 100644 (file)
index 0000000..103d416
--- /dev/null
+++ b/skyquake/framework/widgets/skyquake_container/eventCenter.scss
@@ -0,0 +1,152 @@
+
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+
+@import '../../style/colors.scss';
+
+.eventCenter {
+       background-color: $white;
+       z-index: 9999;
+       position: relative;
+
+       [data-open-close-icon] {
+           &:after {
+               content: " ";
+               display: block;
+               float: right;
+               margin-right: 8px;
+               height: 51px;
+               width: 51px;
+               opacity: 0.25;
+               background-size: 20px 20px;
+               background-repeat: no-repeat;
+               background-position: center center;
+               /* background-image required in order for background-size to work*/
+               background-image: url(../../../node_modules/open-iconic/svg/caret-bottom.svg);
+               vertical-align: middle;
+           }
+           &:hover:after {
+               opacity: 1;
+           }
+       }
+       [data-open-close-icon="closed"]:after {
+           transform: rotate(180deg);
+           transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
+       }
+       [data-open-close-icon="open"]:after {
+           transform: rotate(0deg);
+           transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
+       }
+
+
+       .notification {
+        .crouton {
+            right: 4px;
+            top: 34px;
+            width: 30%;
+            left: auto;
+            .info {
+                border-radius: 25px;
+            }
+        }
+    }
+       &.-with-transitions {
+               transition: height 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
+       }
+       &.open {
+               .notificationListBody {
+                       height: 300px;
+               }
+       }
+       &.closed {
+               .notificationListBody {
+                       height: 0px;
+               }
+       }
+       .title {
+               border-top: 1px solid $gray-dark;
+               border-bottom: 1px solid $gray-dark;
+               cursor: pointer;
+               color: $gray-darker;
+               font-style: normal;
+               font-size: 1.625rem;
+       font-weight: 400;
+               height: 51px;
+               line-height: 51px;
+               margin: 0;
+               padding-left: 0;
+               padding-right: 0;
+               text-align: center;
+               text-transform: uppercase;
+               background-color: $gray-lighter;
+       }
+       .notificationListBody {
+               overflow: auto;
+               .notificationList {
+                       width: 100%;
+                       &:hover {
+                               overflow: auto;
+                       }
+                       
+                       .notificationItem {
+
+                       }
+
+                       th {
+                               text-align: left;
+                padding: 0.5rem;
+                background: $gray-darker;
+                border: 1px solid black;
+                               color: $white;
+                               &.source {
+                                       width: 20%;
+                               }
+                               &.timestamp {
+                                       width: 20%;
+                               }
+                               &.event {
+                                       width: 20%;
+                               }
+                               &.details {
+                                       width: 40%;
+                               }
+                       }
+
+                       tr {
+                               padding: 0.5rem;
+                               border: 1px solid black;
+
+                               &:nth-child(odd) {
+                                       background: $white;
+                                       td {
+                           border: 1px solid black;
+                           padding: 0.5rem;
+                       }
+                               }
+
+                               &:nth-child(even) {
+                                       background: $gray-lighter;
+                                       td {
+                           border: 1px solid black;
+                           padding: 0.5rem;
+                       }
+                               }
+                       }
+               }
+       }
+}
\ No newline at end of file