added svcapi ui and camunda code

[it/otf.git] / otf-frontend / client / src / app / layout / components / right-sidebar / right-sidebar.component.scss

diff --git a/otf-frontend/client/src/app/layout/components/right-sidebar/right-sidebar.component.scss b/otf-frontend/client/src/app/layout/components/right-sidebar/right-sidebar.component.scss
new file mode 100644 (file)
index 0000000..66102b3
--- /dev/null
+++ b/otf-frontend/client/src/app/layout/components/right-sidebar/right-sidebar.component.scss
@@ -0,0 +1,176 @@
+/*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
+#                                                                              #\r
+#   Licensed under the Apache License, Version 2.0 (the "License");            #\r
+#   you may not use this file except in compliance with the License.           #\r
+#   You may obtain a copy of the License at                                    #\r
+#                                                                              #\r
+#       http://www.apache.org/licenses/LICENSE-2.0                             #\r
+#                                                                              #\r
+#   Unless required by applicable law or agreed to in writing, software        #\r
+#   distributed under the License is distributed on an "AS IS" BASIS,          #\r
+#   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
+#   See the License for the specific language governing permissions and        #\r
+#   limitations under the License.                                             #\r
+##############################################################################*/\r
+\r
+\r
+$topnav-background-color: #000;\r
+.sidebar {\r
+    display: none;\r
+    font-size: 1em;\r
+    border-radius: 0;\r
+    position: fixed;\r
+    z-index: 1000;\r
+    top: 56px;\r
+    right: 235px;\r
+    width: 235px;\r
+    margin-right: -235px;\r
+    border: none;\r
+    border-radius: 0;\r
+    overflow-y: auto;\r
+    background-color: $topnav-background-color;\r
+    bottom: 43px;\r
+    overflow-x: hidden;\r
+    padding-bottom: 40px;\r
+    -webkit-transition: all 0.2s ease-in-out;\r
+    -moz-transition: all 0.2s ease-in-out;\r
+    -ms-transition: all 0.2s ease-in-out;\r
+    -o-transition: all 0.2s ease-in-out;\r
+    transition: all 0.2s ease-in-out;\r
+    // border-top: 1px solid rgba(255,255,255,0.3);\r
+    .list-group {\r
+        a.list-group-item {\r
+            background: $topnav-background-color;\r
+            border: 0;\r
+            border-radius: 0;\r
+            color: #999;\r
+            text-decoration: none;\r
+            .fa {\r
+                margin-right: 10px;\r
+            }\r
+        }\r
+        a:hover {\r
+            background: lighten($topnav-background-color, 10%);\r
+            color: #fff;\r
+        }\r
+        a.router-link-active {\r
+            background: lighten($topnav-background-color, 10%);\r
+            color: #fff;\r
+        }\r
+        .header-fields {\r
+            padding-top: 10px;\r
+        \r
+            > .list-group-item:first-child {\r
+                border-top: 1px solid rgba(255, 255, 255, 0.2);\r
+            }\r
+        }\r
+    }\r
+    .sidebar-dropdown {\r
+        *:focus {\r
+            border-radius: none;\r
+            border: none;\r
+        }\r
+        .panel-title {\r
+            font-size: 1rem;\r
+            height: 50px;\r
+            margin-bottom: 0;\r
+            a {\r
+                color: #999;\r
+                text-decoration: none;\r
+                font-weight: 400;\r
+                background: $topnav-background-color;\r
+                span {\r
+                    position: relative;\r
+                    display: block;\r
+                    padding: 0.75rem 1.5rem;\r
+                    padding-top: 1rem;\r
+                }\r
+            }\r
+            a:hover,\r
+            a:focus {\r
+                color: #fff;\r
+                outline: none;\r
+                outline-offset: -2px;\r
+            }\r
+        }\r
+        .panel-title:hover {\r
+            background: lighten($topnav-background-color, 10%);\r
+        }\r
+        .panel-collapse {\r
+            border-radious: 0;\r
+            border: none;\r
+            .panel-body {\r
+                .list-group-item {\r
+                    border-radius: 0;\r
+                    background-color: $topnav-background-color;\r
+                    border: 0 solid transparent;\r
+                    a {\r
+                        color: #999;\r
+                    }\r
+                    a:hover {\r
+                        color: #fff;\r
+                    }\r
+                }\r
+                .list-group-item:hover {\r
+                    background: lighten($topnav-background-color, 10%);\r
+                }\r
+            }\r
+        }\r
+    }\r
+}\r
+.nested-menu {\r
+    .list-group-item {\r
+        cursor: pointer;\r
+    }\r
+    .nested {\r
+        list-style-type: none;\r
+    }\r
+    ul.submenu {\r
+        display: none;\r
+        height: 0;\r
+    }\r
+    & .expand {\r
+        ul.submenu {\r
+            display: block;\r
+            list-style-type: none;\r
+            height: auto;\r
+            li {\r
+                a {\r
+                    color: #fff;\r
+                    padding: 10px;\r
+                    display: block;\r
+                }\r
+            }\r
+        }\r
+    }\r
+}\r
+@media screen and (max-width: 992px) {\r
+    .sidebar {\r
+        top: 54px;\r
+        left: 0px;\r
+    }\r
+}\r
+@media print {\r
+    .sidebar {\r
+        display: none !important;\r
+    }\r
+}\r
+@media (min-width: 992px) {\r
+    .header-fields {\r
+        display: none;\r
+    }\r
+}\r
+\r
+::-webkit-scrollbar {\r
+    width: 8px;\r
+}\r
+\r
+::-webkit-scrollbar-track {\r
+    -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);\r
+    border-radius: 3px;\r
+}\r
+\r
+::-webkit-scrollbar-thumb {\r
+    border-radius: 3px;\r
+    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);\r
+}\r