mirror of
https://github.com/Kong/insomnia
synced 2024-11-12 17:26:32 +00:00
136 lines
2.7 KiB
Plaintext
136 lines
2.7 KiB
Plaintext
.env-modal.modal__body {
|
|
display: grid;
|
|
grid-template-columns: 17rem minmax(0, 1fr);
|
|
grid-template-rows: 100%;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
|
|
.env-modal__sidebar {
|
|
border-right: 1px solid var(--hl-md);
|
|
padding: var(--padding-md) 0;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
|
|
.env-modal__sidebar-heading {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: var(--padding-sm) var(--padding-sm) 0;
|
|
|
|
& > * {
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
& > *:first-child {
|
|
width: 100%;
|
|
padding: var(--padding-sm) 0 var(--padding-sm) var(--padding-sm);
|
|
}
|
|
|
|
button {
|
|
color: var(--hl);
|
|
height: 100%;
|
|
padding: var(--padding-sm);
|
|
|
|
&:hover {
|
|
color: var(--color-font);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.env-modal__main {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
grid-template-columns: 100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.env-modal__editor {
|
|
display: block;
|
|
max-height: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.env-modal__main__header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: var(--padding-sm) var(--padding-md) var(--padding-sm);
|
|
height: var(--line-height-sm);
|
|
}
|
|
|
|
h1,
|
|
h1 > * {
|
|
padding: 0;
|
|
font-size: var(--font-size-xl);
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// These are at the top-level because sorting pulls the row out into <body>
|
|
.env-modal__sidebar-root-item,
|
|
.env-modal__sidebar-item {
|
|
z-index: 100000;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
grid-template-rows: var(--line-height-xs);
|
|
color: var(--hl);
|
|
|
|
& > button {
|
|
padding: 0 var(--padding-md) 0 var(--padding-md);
|
|
width: 100%;
|
|
|
|
&:first-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
position: relative;
|
|
.drag-handle {
|
|
position: absolute;
|
|
left: 0;
|
|
opacity: 0;
|
|
color: var(--hl-lg);
|
|
}
|
|
|
|
.editable {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
padding-right: var(--padding-xs);
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
line-height: var(--line-height-xs);
|
|
}
|
|
}
|
|
|
|
&.env-modal__sidebar-item--dragging > button,
|
|
&.env-modal__sidebar-item--active > button {
|
|
color: var(--color-font);
|
|
background-color: var(--hl-xs);
|
|
}
|
|
|
|
&:hover > button {
|
|
background-color: var(--hl-xs);
|
|
}
|
|
|
|
&.env-modal__sidebar-item--dragging .drag-handle,
|
|
&:hover .drag-handle {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.env-modal__sidebar-item {
|
|
& > button {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-left: var(--padding-md);
|
|
}
|
|
}
|