insomnia/app/ui/css/components/key-value-editor.less
Gregory Schier 2cdd4761c8 Remaining V5 Features (#122)
* Add digest auth and response timeline

* Some css fixes

* Fixed Button

* More auth methods, fixed URL regex, and fix gzip

* Get rid of negotiate auth

* Fix proxy

* Fixed GA tracking

* Some very small changes and fixes

* Fix content type names

* Even better auth switching and timeline syntax

* Some auth tweaks

* CSS tweaks

* Reworked toasts

* Fixed timer rounding quirk

* Request settings and render errors

* Fixed tests

* Vertical dragging and stuff

* Remove beta
2017-03-28 15:45:23 -07:00

118 lines
2.4 KiB
Plaintext

@import '../constants/dimensions';
@import '../constants/colors';
.key-value-editor {
padding: @padding-md 0;
// This is the actual row
.key-value-editor__row-wrapper {
position: relative;
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
padding-bottom: @padding-sm;
box-sizing: border-box;
&.key-value-editor__row-wrapper--disabled > * {
opacity: @opacity-subtle;
color: var(--hl) !important;
input, .input {
border-style: dashed;
}
}
&.key-value-editor__row-wrapper--dragging {
// Set opacity on children so we can still see the separator
& > * {
opacity: 0.2;
}
}
&.key-value-editor__row-wrapper--dragging-below::after,
&.key-value-editor__row-wrapper--dragging-above::before {
position: absolute;
height: 0;
right: 0;
left: 0;
border-bottom: 2px dotted var(--color-surprise);
content: " ";
display: block
}
// So the line appears on the next row
&.key-value-editor__row-wrapper--dragging-below::after {
bottom: -1px; // half border thickness
}
// So the line appears on the next row
&.key-value-editor__row-wrapper--dragging-above::before {
top: -1px; // half border thickness
}
// Style last row the same no matter if focused or not.
&.key-value-editor__row-wrapper--clicker input {
border-color: var(--hl-sm) !important;
}
}
.key-value-editor__drag {
padding-left: @padding-md;
padding-right: @padding-md;
box-sizing: border-box;
overflow: hidden;
// Remove hover effect
&, &:hover {
color: var(--hl-xl);
}
}
.key-value-editor__row {
width: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
padding: 0 @padding-sm 0 0;
box-sizing: border-box;
// Pad the first form if there's no drag handle before it
&:first-child, &:first-child .form-control {
padding-left: @padding-md;
}
.form-control {
margin-bottom: 0;
&:first-child {
padding-left: 0;
}
}
input, .input {
margin: 0;
}
& > * {
padding: 0 @padding-xs;
}
& > button,
.dropdown > button {
color: @hl;
margin: 0;
&:hover,
&:focus {
background: transparent;
}
&:hover,
&:focus {
color: inherit;
}
}
}
}