In between menu large on the right side
This commit is contained in:
jos
parent
5d4a551526
commit
d53e5360a3
|
|
@ -525,6 +525,22 @@ button.jsoneditor-type-Array.jsoneditor-selected span.jsoneditor-icon {
|
|||
div.jsoneditor-node-container {
|
||||
position: relative;
|
||||
transition: background-color 100ms ease-in; }
|
||||
div.jsoneditor-node-container div.jsoneditor-insert-area {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; }
|
||||
div.jsoneditor-node-container div.jsoneditor-insert-area:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: 0;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
background: inherit; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected {
|
||||
background-color: #ffed99; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover {
|
||||
|
|
@ -532,43 +548,34 @@ div.jsoneditor-node-container {
|
|||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover.jsoneditor-hover-insert-area-after {
|
||||
background-color: #ffed99; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area {
|
||||
border: 1px dashed gray;
|
||||
background-color: #f2f2f2; }
|
||||
border-color: #e5e5e5;
|
||||
background-color: #e5e5e5; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover.jsoneditor-hover-insert-area-after.jsoneditor-selected-insert-area-before > div.jsoneditor-insert-area {
|
||||
border: 1px dashed #f4af41;
|
||||
border-color: #ffdb80;
|
||||
background-color: #ffdb80; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before {
|
||||
background-color: inherit; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before.jsoneditor-hover {
|
||||
background-color: #f2f2f2; }
|
||||
background-color: #e5e5e5; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before.jsoneditor-hover.jsoneditor-hover-insert-area-after {
|
||||
background-color: inherit; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before > div.jsoneditor-insert-area {
|
||||
border: 1px dashed #f4af41;
|
||||
background: #ffed99; }
|
||||
border-color: #ffed99;
|
||||
background-color: #ffed99; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected div.jsoneditor-hover {
|
||||
background-color: #ffdb80; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected div.jsoneditor-hover.jsoneditor-hover-insert-area-after {
|
||||
background-color: inherit; }
|
||||
div.jsoneditor-node-container.jsoneditor-selected div.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area {
|
||||
border: 1px dashed #f4af41;
|
||||
background: #ffdb80; }
|
||||
border-color: #ffdb80;
|
||||
background-color: #ffdb80; }
|
||||
div.jsoneditor-node-container.jsoneditor-hover {
|
||||
background-color: #f2f2f2; }
|
||||
background-color: #e5e5e5; }
|
||||
div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after {
|
||||
background-color: inherit; }
|
||||
div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area {
|
||||
border: 1px dashed gray;
|
||||
background-color: #f2f2f2; }
|
||||
div.jsoneditor-node-container div.jsoneditor-insert-area {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
border: 1px transparent;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; }
|
||||
border-color: #e5e5e5;
|
||||
background-color: #e5e5e5; }
|
||||
div.jsoneditor-node-container div.jsoneditor-floating-menu {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,15 @@ $floating-menu-background: #4d4d4d;
|
|||
$floating-menu-color: #fff;
|
||||
// $selectedColor: #e5e5e5;
|
||||
$selectedColor: #ffed99;
|
||||
$hoverColor: #f2f2f2;
|
||||
//$hoverColor: #f2f2f2;
|
||||
$hoverColor: #e5e5e5;
|
||||
$hoverAndSelectedColor: #ffdb80;
|
||||
|
||||
// TODO: split this scss file into separate files per React component
|
||||
|
||||
$line-height: 20px;
|
||||
$insert-area-height: 6px;
|
||||
|
||||
.jsoneditor {
|
||||
border: 1px solid $theme-color;
|
||||
width: 100%;
|
||||
|
|
@ -139,7 +143,7 @@ div.jsoneditor-list {
|
|||
.jsoneditor-value,
|
||||
.jsoneditor-readonly,
|
||||
.jsoneditor-separator {
|
||||
line-height: 20px;
|
||||
line-height: $line-height;
|
||||
|
||||
font-family: $fontFamily;
|
||||
font-size: $fontSize;
|
||||
|
|
@ -569,6 +573,42 @@ div.jsoneditor-node-container {
|
|||
|
||||
// TODO: can the hover/select css be simplified?
|
||||
|
||||
div.jsoneditor-insert-area {
|
||||
//background: gray;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $insert-area-height;
|
||||
left: 0;
|
||||
top: -$insert-area-height/2;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; // must be on top of next node, it overlaps a bit
|
||||
|
||||
$top: -$line-height / 2 + 3px;
|
||||
|
||||
// FIXME: nice border color
|
||||
//&:before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// right: 60px;
|
||||
// top: $top;
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// border-top: $line-height / 2 solid transparent;
|
||||
// border-right: $line-height / 2 solid red;
|
||||
// border-bottom: $line-height / 2 solid transparent;
|
||||
//}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: $top;
|
||||
right: 0;
|
||||
width: 60px;
|
||||
height: $line-height;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.jsoneditor-selected {
|
||||
background-color: $selectedColor;
|
||||
|
||||
|
|
@ -579,13 +619,13 @@ div.jsoneditor-node-container {
|
|||
background-color: $selectedColor;
|
||||
|
||||
> div.jsoneditor-insert-area {
|
||||
border: 1px dashed gray;
|
||||
border-color: $hoverColor;
|
||||
background-color: $hoverColor;
|
||||
}
|
||||
|
||||
&.jsoneditor-selected-insert-area-before {
|
||||
> div.jsoneditor-insert-area {
|
||||
border: 1px dashed #f4af41;
|
||||
border-color: $hoverAndSelectedColor;
|
||||
background-color: $hoverAndSelectedColor;
|
||||
}
|
||||
}
|
||||
|
|
@ -604,8 +644,8 @@ div.jsoneditor-node-container {
|
|||
}
|
||||
|
||||
> div.jsoneditor-insert-area {
|
||||
border: 1px dashed #f4af41;
|
||||
background: $selectedColor;
|
||||
border-color: $selectedColor;
|
||||
background-color: $selectedColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -617,8 +657,8 @@ div.jsoneditor-node-container {
|
|||
background-color: inherit;
|
||||
|
||||
> div.jsoneditor-insert-area {
|
||||
border: 1px dashed #f4af41;
|
||||
background: $hoverAndSelectedColor;
|
||||
border-color: $hoverAndSelectedColor;
|
||||
background-color: $hoverAndSelectedColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -631,25 +671,12 @@ div.jsoneditor-node-container {
|
|||
background-color: inherit;
|
||||
|
||||
> div.jsoneditor-insert-area {
|
||||
border: 1px dashed gray;
|
||||
border-color: $hoverColor;
|
||||
background-color: $hoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.jsoneditor-insert-area {
|
||||
$height: 8px;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
left: 0;
|
||||
top: -$height/2;
|
||||
border: 1px transparent;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; // must be on top of next node, it overlaps a bit
|
||||
}
|
||||
|
||||
div.jsoneditor-floating-menu {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue