Moved frontend of REST Mock to frontend container (solves #168)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #186
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/assets/css/tools/mock/r11tooltip.css

@@ -0,0 +1,76 @@
+.tooltip-window {
+    position: fixed;
+    right: 0;
+    background: #FFFFFF;
+    padding: 15px 30px;
+    font-family: 'Nunito', sans-serif;
+    width: 40%;
+    height: 100%;
+    overflow: scroll;
+}
+
+.tooltip-window.lite {
+    width: 30%;
+}
+
+.tip {
+    display: none;
+}
+
+.tip.active {
+    display: block;
+}
+
+/* TODO: Remove !important. It's bad practice and it can cause errors in future */
+.section-button {
+    width: 100%;
+    padding: 15px 0;
+    font-size: 18px;
+    background: #b4b4b4c5;
+    cursor: pointer;
+    border-bottom: darkgray 2px solid !important;
+}
+
+.section-button:hover {
+    backdrop-filter: brightness(110%); 
+}
+
+.section-button .active {
+    background: #00000030;
+}
+
+.List .collapsibleContent {
+    border-left: #bdc5c9 2px solid;
+    overflow: hidden;
+    background: #ffffff50;
+}
+
+/* TODO: .section class is to generic. It should be renamed */
+.section{
+    padding: 10px 0px 20px 0px ;
+}
+
+/* TODO: content subclass already in use. Creating content class overrides the subclass.
+Make .content a subclass of .content */
+/* .content {
+    padding: 0px 15px 0px 15px ;
+    text-align: justify;
+    overflow: hidden;
+    transition: max-height .2s ease-out;
+    max-height: 0px;
+    border-left: #c0c2c3 2px solid;
+    
+} */
+
+.collapsibleMini::before{
+    content: "►";
+}
+
+.collapsibleMini.active::before{
+    content: "▼";
+}
+
+/* TODO: Add proper class */
+/* button:hover{
+    filter: brightness(110%);
+} */