Mirror
/
CyberChef
mirror of https://github.com/gchq/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Switched toggle string dropdown sides and removed form-control padding

This commit is contained in:
n1474335 2018-06-17 23:52:00 +01:00
parent fa523e0d4a
commit 974ab29e36
4 changed files with 2224 additions and 2237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4395
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
src/web/HTMLIngredient.mjs
View File

@ -70,14 +70,6 @@ class HTMLIngredient {
break;
case "toggleString":
html += `<div class="form-group input-group">
<div class="input-group-prepend">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${this.toggleValues[0]}</button>
<div class="dropdown-menu toggle-dropdown">`;
for (i = 0; i < this.toggleValues.length; i++) {
html += `<a class="dropdown-item" href="#">${this.toggleValues[i]}</a>`;
}
html += `</div>
</div>
<div class="toggle-string">
<label for="${this.id}" class="bmd-label-floating toggle-string">${this.name}</label>
<input type="text"
@ -88,6 +80,15 @@ class HTMLIngredient {
${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>
<div class="input-group-append">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${this.toggleValues[0]}</button>
<div class="dropdown-menu toggle-dropdown">`;
for (i = 0; i < this.toggleValues.length; i++) {
html += `<a class="dropdown-item" href="#">${this.toggleValues[i]}</a>`;
}
html += `</div>
</div>
</div>`;
break;
case "number":

20
src/web/stylesheets/components/_operation.css
View File

@ -59,6 +59,26 @@ div.toggle-string {
flex: 1;
}
.operation [class^='bmd-label'],
.operation [class*=' bmd-label'],
.operation label {
color: #388e3c;
}
.operation .is-focused [class^='bmd-label'],
.operation .is-focused [class*=' bmd-label'],
.operation .is-focused [class^='bmd-label'],
.operation .is-focused [class*=' bmd-label'],
.operation .is-focused label {
color: #1976d2;
}
.operation .form-control {
background-color: transparent;
border-color: var(--primary-border-colour);
color: var(--primary-font-colour);
}
.bmd-form-group.is-filled div.toggle-string label.bmd-label-floating,
.bmd-form-group.is-focused div.toggle-string label.bmd-label-floating {
left: unset;

29
src/web/stylesheets/layout/_operations.css
View File

@ -31,32 +31,3 @@
border: 2px dashed var(--rec-list-operation-font-colour) !important;
padding: 8px 8px 9px 8px;
}
.operation input.form-control,
.operation select.form-control,
.operation textarea,
.operation .bmd-label-floating,
.operation .bmd-label-static {
padding-left: 5px;
padding-right: 5px;
}
.operation [class^='bmd-label'],
.operation [class*=' bmd-label'],
.operation label {
color: #388e3c;
}
.operation .is-focused [class^='bmd-label'],
.operation .is-focused [class*=' bmd-label'],
.operation .is-focused [class^='bmd-label'],
.operation .is-focused [class*=' bmd-label'],
.operation .is-focused label {
color: #1976d2;
}
.operation .form-control {
background-color: transparent;
border-color: var(--primary-border-colour);
color: var(--primary-font-colour);
}