Fixed all HTML operations

This commit is contained in:
n1474335 2018-07-15 13:25:44 +01:00
parent ab44100312
commit 651ca6cf5d
13 changed files with 62 additions and 52 deletions

View file

@ -115,6 +115,7 @@ class HTMLIngredient {
${this.disabled ? " disabled" : ""}
value="${this.name}"> ${this.name}
</label>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>
</div>`;
break;

View file

@ -241,7 +241,7 @@
<div id="input-file">
<div class="file-overlay"></div>
<div style="position: relative; height: 100%;">
<div class="card">
<div class="io-card card">
<img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
<div class="card-body">
<button type="button" class="close" id="input-file-close">&times;</button>
@ -290,7 +290,7 @@
<div id="output-file">
<div class="file-overlay"></div>
<div style="position: relative; height: 100%;">
<div class="card">
<div class="io-card card">
<img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
<div class="card-body">
Size: <span id="output-file-size"></span><br>

View file

@ -66,7 +66,7 @@ div.toggle-string {
.operation [class^='bmd-label'],
.operation [class*=' bmd-label'] {
top: 13px;
top: 13px !important;
left: 12px;
z-index: 10;
}
@ -109,12 +109,16 @@ div.toggle-string {
filter: brightness(100%);
}
.bmd-form-group.is-filled label.bmd-label-floating,
.bmd-form-group.is-focused label.bmd-label-floating {
top: 4px;
.operation .bmd-form-group.is-filled label.bmd-label-floating,
.operation .bmd-form-group.is-focused label.bmd-label-floating {
top: 4px !important;
left: 12px;
}
.operation .bmd-form-group .bmd-help {
margin-top: -17px;
}
.input-group .form-control {
border-top-left-radius: 4px !important;
}

View file

@ -33,7 +33,7 @@
padding: 0;
}
.card {
.io-card.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 400px;
@ -49,11 +49,11 @@
flex-direction: row;
}
.card:hover {
.io-card.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card>img {
.io-card.card>img {
float: left;
width: 128px;
height: 128px;
@ -61,13 +61,13 @@
margin-top: 11px;
}
.card-body .close {
.io-card.card .card-body .close {
position: absolute;
right: 10px;
top: 4px;
}
.card-body {
.io-card.card .card-body {
float: left;
padding: 16px;
width: 250px;
@ -77,12 +77,12 @@
user-select: text;
}
.card-body>.btn {
.io-card.card .card-body>.btn {
margin-bottom: 5px;
margin-top: 5px;
}
.card input[type=number] {
.io-card.card input[type=number] {
padding-right: 6px;
padding-left: 6px;
}

View file

@ -72,3 +72,8 @@
#faqs a.btn {
text-transform: unset;
}
#faqs > div {
padding: 20px;
border-left: 2px solid var(--primary-border-colour);
}