Third and final part of style draft implemented

This commit is contained in:
2021-04-06 11:53:38 +02:00
parent 261cd57899
commit e526bc34fc
2 changed files with 62 additions and 5 deletions

View File

@@ -28,6 +28,12 @@
width: 30%;
}
.tooltip-window .tip {
width: 80%;
background: gray;
}
.bordered-field {
border: 2px solid rgba(93, 99, 96, 0.705);
border-radius: 5px;

View File

@@ -15,7 +15,7 @@
<div class="tool extended">
<div class="tool-context">
<div>
<h1>MockedServices <span class="version-span">v0.0.1</span></h1>
<h1>MockedServices <span class="version-span">v1.0.0</span></h1>
</div>
<div>
<!-- h2 -->
@@ -56,7 +56,7 @@
</datalist>
</div>
</div>
<button class="small-margins half-width action-button active">Save</button>
<button class="small-margins half-width with-padding action-button active">Save</button>
</div>
<!-- body -->
<div class="small-vertical-margin">
@@ -114,15 +114,66 @@
</div>
<div class="tool-extention">
<!-- header -->
<div></div>
<div>
<h2>Message List</h2>
</div>
<!-- tile list -->
<div>
<div class="tile active">
<div class="content">
<div class="display-space-between">
<div class="centered-vertically">
<p>Id: 1</p>
<p>Status: 200</p>
</div>
<div>
<button class="deletion-button btn-tile"><i class="icon-cancel"></i></button>
</div>
</div>
</div>
</div>
<div class="tile">
<div class="content">
<div class="display-space-between">
<div class="centered-vertically">
<p>Id: 2</p>
<p>Status: 200</p>
</div>
<div>
<button class="deletion-button btn-tile"><i class="icon-cancel"></i></button>
</div>
</div>
</div>
</div>
<div class="tile">
<div class="content">
<div class="display-space-between">
<div class="centered-vertically">
<p>Id: 3</p>
<p>Status: 200</p>
</div>
<div>
<button class="deletion-button btn-tile"><i class="icon-cancel"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tooltip-window lite">
<div>
<h2>What's this?</h2>
<p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
<h2>Help</h2>
<p>When cursor hovers over an item. It's description is displayed below.</p>
<div class="large-vertical-margin">
<div>
<h3>Example</h3>
<p>Here should be instruction for given field.</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/js/modal.js"></script>