.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 .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-status { padding: 0 var(--padding-sm) 0 var(--padding-sm); align-self: center; .active { color: var(--hl-xl); } .inactive { color: var(--hl-xl); opacity: 0; } } &.env-modal__sidebar-item--dragging , &.env-modal__sidebar-item--active { color: var(--color-font); background-color: var(--hl-xs); } &:hover { background-color: var(--hl-xs); } &.env-modal__sidebar-item--dragging .drag-handle, &:hover .drag-handle, &:hover .inactive { opacity: 1; } &:hover .inactive:hover { color: var(--color-font); } } .env-modal__sidebar-item { & > button { display: flex; flex-direction: row; align-items: center; padding-left: var(--padding-md); } }