beenull/CyberChef
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Switched to unbordered args

Browse source
This commit is contained in:
n1474335 2018-07-13 10:30:24 +00:00
parent 052c32e2ce
commit d182261ff3
3 changed files with 57 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package-lock.json generated
View file

@ -2229,7 +2229,7 @@
}, },
"compression": { "compression": {
"version": "1.7.2", "version": "1.7.2",
"resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz", "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
"integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=", "integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
"dev": true, "dev": true,
"requires": { "requires": {

2
src/web/HTMLIngredient.mjs
View file

@ -104,7 +104,7 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "boolean": case "boolean":
html += `<div class="form-group inline"> html += `<div class="form-group inline boolean-arg">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" <input type="checkbox"

77
src/web/stylesheets/components/_operation.css
View file

@ -41,7 +41,8 @@
} }
.ingredients .form-group { .ingredients .form-group {
padding-top: 1rem; margin-top: 1rem;
padding-top: 0;
} }
.arg { .arg {
@ -65,8 +66,9 @@ div.toggle-string {
.operation [class^='bmd-label'], .operation [class^='bmd-label'],
.operation [class*=' bmd-label'] { .operation [class*=' bmd-label'] {
top: 31px; top: 13px;
left: 10px; left: 12px;
z-index: 10;
} }
.operation label { .operation label {
@ -83,35 +85,48 @@ div.toggle-string {
} }
.operation .form-control { .operation .form-control {
border-width: 1px; padding: 20px 12px 6px 12px;
border-style: solid; border-top-left-radius: 4px;
padding: 12px 10px; border-top-right-radius: 4px;
border-radius: 4px;
background-color: var(--arg-background);
background-image: none; background-image: none;
border-color: var(--arg-border-colour); background-color: var(--arg-background);
background-position-y: 100%, 100%;
color: var(--arg-font-colour); color: var(--arg-font-colour);
} }
.operation .form-control:focus { .operation .form-control:hover {
border-width: 2px; background-image:
padding: 11px 9px; linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
border-color: #1976d2; linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
filter: brightness(97%);
} }
.bmd-form-group.is-filled div.toggle-string label.bmd-label-floating, .operation .form-control:focus {
.bmd-form-group.is-focused div.toggle-string label.bmd-label-floating { background-color: var(--arg-background);
left: unset; background-image:
linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
filter: brightness(100%);
} }
.bmd-form-group.is-filled label.bmd-label-floating, .bmd-form-group.is-filled label.bmd-label-floating,
.bmd-form-group.is-focused label.bmd-label-floating { .bmd-form-group.is-focused label.bmd-label-floating {
top: 0.65rem; top: 4px;
left: 0.5rem; left: 12px;
background-image: linear-gradient(to top, }
var(--arg-background) 8px,
var(--rec-list-operation-bg-colour) 8px); .input-group .form-control {
padding: 0 4px; border-top-left-radius: 4px !important;
}
.input-group-append button {
border-top-right-radius: 4px;
background-color: var(--arg-background) !important;
margin: unset;
}
.input-group-append button:hover {
filter: brightness(97%);
} }
.editable-option-menu { .editable-option-menu {
@ -126,6 +141,24 @@ div.toggle-string {
max-width: 20rem; max-width: 20rem;
} }
.boolean-arg {
height: 46px;
}
.boolean-arg .checkbox {
height: 100%;
}
.boolean-arg .checkbox label {
height: 100%;
display: flex;
align-items: center;
}
.boolean-arg .checkbox-decorator {
top: 13px;
}
.register-list { .register-list {
background-color: var(--fc-operation-border-colour); background-color: var(--fc-operation-border-colour);
font-family: var(--fixed-width-font-family); font-family: var(--fixed-width-font-family);