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/r11tool.css

@@ -0,0 +1,325 @@
+@font-face {
+    font-family: "Nunito";
+    src: url('font/Nunito-VariableFont_wght.ttf') format('truetype');
+}
+
+input {
+    box-sizing: border-box;
+}
+
+.hyperlink, .hyperlink:visited, .hyperlink:active {
+    color: rgb(47, 125, 146);
+    cursor: pointer;
+}
+
+.hyperlink:hover {
+    filter: brightness(120%);
+}
+
+.bordered-field {
+    background-color: #FFFFFF;
+    border: 2px solid rgba(93, 99, 96, 0.705);
+    border-radius: 5px;
+    padding: 8px;
+    
+}
+
+.bordered-field:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(81, 203, 238);
+    border: 2px solid #00000070;
+}
+
+.bordered-field:disabled {
+    background: #eeeeeed2;
+}
+
+.vertically-resizeable {
+    resize: vertical;
+}
+
+body {
+    font-family: 'Nunito', sans-serif;
+}
+
+.container {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.tool {
+    width: 55%;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.tool.extended {
+    width: 65%;
+}
+
+.tool .tool-context {
+    width: 90%;
+}
+
+.tool.extended .tool-context {
+    width: 75%;
+}
+
+.tool.extended .tool-extention {
+    width: 20%;
+    padding-top: 2%;
+    display: block;
+}
+
+.tool .tool-extention {
+    display: none;
+}
+
+.tool-extention {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.tool-extention.active {
+    opacity: 100%;
+    pointer-events: all;
+}
+
+.clickable-text {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+    cursor: pointer;
+}
+
+.clickable-text.highlight:hover {
+    color: #3bc4f1;
+}
+
+.clickable-text.switch {
+    font-size: 18px;
+    font-weight: 300;
+}
+
+.clickable-text.switch span.toggleIndicator:before {
+    content: '>';
+}
+
+.clickable-text.switch span.toggleIndicator.active:before {
+    content: 'v';
+}
+
+.modification-button {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+}
+
+.text-aligned-to-right {
+    text-align: right;
+}
+
+.centered-vertically {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.display-space-between {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.display-space-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.float-left {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.version-span {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(85,85,85,0.555);
+}
+
+.block-display {
+    display: block;
+}
+
+.block-label {
+    display: block;
+    margin: 0 0 0 5px;
+}
+
+.tabmenu {
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    border-bottom: 1px solid rgba(185, 185, 185, 0.5);
+}
+
+.tabitem {
+    flex-grow: 1;
+    cursor: pointer;
+    padding: 5px 0;
+}
+
+.tabitem:hover {
+    font-weight: 700;
+}
+
+.tabitem.active {
+    background: rgba(33, 34, 34, 0.705);
+    color: white;
+    font-weight: 700;
+    cursor:default;
+    flex-grow: 1;
+}
+
+.big-font {
+    font-size: 20px;
+}
+
+.action-button.active {
+    background: #2A93B0;
+    border: 1px solid #7ed0eb;
+    cursor: pointer;
+    
+}
+
+.action-button.active:hover {
+    filter: brightness(110%);
+}
+
+.action-button {
+    background: #CCD1CF;
+    border:1px solid rgba(186, 197, 191, 0.507);
+    border-radius: 5px;
+    color: white;
+    padding: 10px 20px;
+    font-weight: 700;
+    margin: 3px 0;
+}
+
+.quater-width {
+    width: 25%;
+}
+
+.half-width {
+    width: 50%;
+}
+
+.tree-fourth-width {
+    width: 75%;
+}
+
+.half-width.with-padding {
+    width: 45%;
+}
+
+.max-width {
+    width: 100%;
+}
+
+.max-width.with-padding {
+    width: 94%;
+}
+
+.max-height {
+    height: 100%;
+}
+
+.height-300 {
+    height: 300px;
+}
+
+.max-height.with-padding {
+    height: 90%;
+}
+
+.small-margins {
+    margin: 3%;
+}
+
+.small-vertical-margin {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.medium-vertical-margin {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.large-vertical-margin {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.textarea-300 {
+    height: 300px;
+}
+
+.centered-content {
+    display: flex;
+    justify-content: center;
+}
+
+
+.tabcontent {
+    display: none;
+}
+
+.tabcontent.active {
+    display: flex;
+    justify-content: center;
+}
+
+.hiddable {
+    display: none;
+}
+
+.hiddable.active {
+    display: inherit;
+}
+
+/* In case of collision with classes that use 'active' */
+.hidden {
+    display: none;
+}
+
+h1 {
+    font-weight: 400;
+}
+
+h2 {
+    font-weight: 400;
+}
+
+h3 {
+    font-weight: 400;
+}
+
+
+
+/* TODO: Add proper class */
+/* textarea {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+} */
+
+/* TODO: Add proper class */
+/* code{
+    line-height: 150%;
+} */