insomnia/app/ui/css/components/environment-modal.less
Gregory Schier 8452e8b777 Some eslint refactoring (#109)
* Fixed duplication kve bug

* Some changes

* Add proptypes linting

* Fixed proptypes even more

* Filename linting
2017-03-07 21:52:17 -08:00

122 lines
2.4 KiB
Plaintext

@import '../constants/dimensions';
@import '../constants/colors';
.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 @hl-md;
padding: @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: @padding-sm @padding-sm 0;
& > * {
height: 100%;
padding: 0;
}
& > *:first-child {
width: 100%;
padding: @padding-sm 0 @padding-sm @padding-sm;
}
button {
color: @hl-xl;
height: 100%;
padding: @padding-sm;
&:hover {
color: var(--color-font);
}
}
}
.env-modal__sidebar-root-item,
.env-modal__sidebar-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: @line-height-xs;
color: @hl;
& > button {
padding: 0 @padding-md 0 @padding-md;
width: 100%;
&:first-child {
padding-right: 0;
}
.editable {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-right: @padding-xs;
box-sizing: border-box;
width: 100%;
line-height: @line-height-xs;
}
}
&.env-modal__sidebar-item--active > button {
color: var(--color-font);
background-color: @hl-xs;
}
&:hover > button {
background-color: @hl-xs;
}
}
.env-modal__sidebar-item {
& > button {
display: flex;
flex-direction: row;
align-items: center;
padding-left: @padding-md;
}
}
}
.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: @padding-sm @padding-md @padding-sm;
height: @line-height-sm;
}
h1, h1 > * {
padding: 0;
font-size: @font-size-xl;
width: 100%;
}
}
}