added svcapi ui and camunda code
[it/otf.git] / otf-frontend / client / src / app / not-found / not-found.component.scss
diff --git a/otf-frontend/client/src/app/not-found/not-found.component.scss b/otf-frontend/client/src/app/not-found/not-found.component.scss
new file mode 100644 (file)
index 0000000..26188f7
--- /dev/null
@@ -0,0 +1,241 @@
+/*  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
+*\r
+{\r
+  font-family: 'PT Sans Caption', sans-serif, 'arial', 'Times New Roman';\r
+}\r
+/* Error Page */\r
+    .error .clip .shadow\r
+    {\r
+        height: 180px;  /*Contrall*/\r
+    }\r
+    .error .clip:nth-of-type(2) .shadow\r
+    {\r
+        width: 130px;   /*Contrall play with javascript*/ \r
+    }\r
+    .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow\r
+    {\r
+        width: 250px; /*Contrall*/\r
+    }\r
+    .error .digit\r
+    {\r
+        width: 150px;   /*Contrall*/\r
+        height: 150px;  /*Contrall*/\r
+        line-height: 150px; /*Contrall*/\r
+        font-size: 120px;\r
+        font-weight: bold;\r
+    }\r
+    .error h2   /*Contrall*/\r
+    {\r
+        font-size: 32px;\r
+    }\r
+    .error .msg /*Contrall*/\r
+    {\r
+        top: -190px;\r
+        left: 30%;\r
+        width: 80px;\r
+        height: 80px;\r
+        line-height: 80px;\r
+        font-size: 32px;\r
+    }\r
+    .error span.triangle    /*Contrall*/\r
+    {\r
+        top: 70%;\r
+        right: 0%;\r
+        border-left: 20px solid #535353;\r
+        border-top: 15px solid transparent;\r
+        border-bottom: 15px solid transparent;\r
+    }\r
+\r
+\r
+    .error .container-error-404\r
+    {\r
+      margin-top: 10%;\r
+        position: relative;\r
+        height: 250px;\r
+        padding-top: 40px;\r
+    }\r
+    .error .container-error-404 .clip\r
+    {\r
+        display: inline-block;\r
+        transform: skew(-45deg);\r
+    }\r
+    .error .clip .shadow\r
+    {\r
+        \r
+        overflow: hidden;\r
+    }\r
+    .error .clip:nth-of-type(2) .shadow\r
+    {\r
+        overflow: hidden;\r
+        position: relative;\r
+        box-shadow: inset 20px 0px 20px -15px rgba(150, 150, 150,0.8), 20px 0px 20px -15px rgba(150, 150, 150,0.8);\r
+    }\r
+    \r
+    .error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after\r
+    {\r
+        content: "";\r
+        position: absolute;\r
+        right: -8px;\r
+        bottom: 0px;\r
+        z-index: 9999;\r
+        height: 100%;\r
+        width: 10px;\r
+        background: linear-gradient(90deg, transparent, rgba(173,173,173, 0.8), transparent);\r
+        border-radius: 50%;\r
+    }\r
+    .error .clip:nth-of-type(3) .shadow:after\r
+    {\r
+        left: -8px;\r
+    }\r
+    .error .digit\r
+    {\r
+        position: relative;\r
+        top: 8%;\r
+        color: white;\r
+        background: #07B3F9;\r
+        border-radius: 50%;\r
+        display: inline-block;\r
+        transform: skew(45deg);\r
+    }\r
+    .error .clip:nth-of-type(2) .digit\r
+    {\r
+        left: -10%;\r
+    }\r
+    .error .clip:nth-of-type(1) .digit\r
+    {\r
+        right: -20%;\r
+    }.error .clip:nth-of-type(3) .digit\r
+    {\r
+        left: -20%;\r
+    }    \r
+    .error h2\r
+    {\r
+        color: #A2A2A2;\r
+        font-weight: bold;\r
+        padding-bottom: 20px;\r
+    }\r
+    .error .msg\r
+    {\r
+        position: relative;\r
+        z-index: 9999;\r
+        display: block;\r
+        background: #535353;\r
+        color: #A2A2A2;\r
+        border-radius: 50%;\r
+        font-style: italic;\r
+    }\r
+    .error .triangle\r
+    {\r
+        position: absolute;\r
+        z-index: 999;\r
+        transform: rotate(45deg);\r
+        content: "";\r
+        width: 0; \r
+        height: 0; \r
+    }\r
+\r
+/* Error Page */\r
+@media(max-width: 767px)\r
+{\r
+    /* Error Page */\r
+            .error .clip .shadow\r
+            {\r
+                height: 100px;  /*Contrall*/\r
+            }\r
+            .error .clip:nth-of-type(2) .shadow\r
+            {\r
+                width: 80px;   /*Contrall play with javascript*/ \r
+            }\r
+            .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow\r
+            {\r
+                width: 100px; /*Contrall*/\r
+            }\r
+            .error .digit\r
+            {\r
+                width: 80px;   /*Contrall*/\r
+                height: 80px;  /*Contrall*/\r
+                line-height: 80px; /*Contrall*/\r
+                font-size: 52px;\r
+            }\r
+            .error h2   /*Contrall*/\r
+            {\r
+                font-size: 24px;\r
+            }\r
+            .error .msg /*Contrall*/\r
+            {\r
+                top: -110px;\r
+                left: 15%;\r
+                width: 40px;\r
+                height: 40px;\r
+                line-height: 40px;\r
+                font-size: 18px;\r
+            }\r
+            .error span.triangle    /*Contrall*/\r
+            {\r
+                top: 70%;\r
+                right: -3%;\r
+                border-left: 10px solid #535353;\r
+                border-top: 8px solid transparent;\r
+                border-bottom: 8px solid transparent;\r
+            }\r
+.error .container-error-404\r
+  {\r
+    height: 150px;\r
+  }\r
+        /* Error Page */\r
+}\r
+\r
+/*--------------------------------------------Framework --------------------------------*/\r
+\r
+.overlay { position: relative; z-index: 20; } /*done*/\r
+    .ground-color { background: white; }  /*done*/\r
+    .item-bg-color { background: #EAEAEA } /*done*/\r
+    \r
+    /* Padding Section*/\r
+        .padding-top { padding-top: 10px; } /*done*/\r
+        .padding-bottom { padding-bottom: 10px; }   /*done*/\r
+        .padding-vertical { padding-top: 10px; padding-bottom: 10px; }\r
+        .padding-horizontal { padding-left: 10px; padding-right: 10px; }\r
+        .padding-all { padding: 10px; }   /*done*/\r
+\r
+        .no-padding-left { padding-left: 0px; }    /*done*/\r
+        .no-padding-right { padding-right: 0px; }   /*done*/\r
+        .no-vertical-padding { padding-top: 0px; padding-bottom: 0px; }\r
+        .no-horizontal-padding { padding-left: 0px; padding-right: 0px; }\r
+        .no-padding { padding: 0px; }   /*done*/\r
+    /* Padding Section*/\r
+\r
+    /* Margin section */\r
+        .margin-top { margin-top: 10px; }   /*done*/\r
+        .margin-bottom { margin-bottom: 10px; } /*done*/\r
+        .margin-right { margin-right: 10px; } /*done*/\r
+        .margin-left { margin-left: 10px; } /*done*/\r
+        .margin-horizontal { margin-left: 10px; margin-right: 10px; } /*done*/\r
+        .margin-vertical { margin-top: 10px; margin-bottom: 10px; } /*done*/\r
+        .margin-all { margin: 10px; }   /*done*/\r
+        .no-margin { margin: 0px; }   /*done*/\r
+\r
+        .no-vertical-margin { margin-top: 0px; margin-bottom: 0px; }\r
+        .no-horizontal-margin { margin-left: 0px; margin-right: 0px; }\r
+\r
+        .inside-col-shrink { margin: 0px 20px; }    /*done - For the inside sections that has also Title section*/ \r
+    /* Margin section */\r
+\r
+    hr\r
+    { margin: 0px; padding: 0px; border-top: 1px dashed #999; }\r
+/*--------------------------------------------FrameWork------------------------*/
\ No newline at end of file