insomnia/app/css/components/envmodal.scss
Gregory Schier 9e84bc4387 Workspaces, Cookies, and More! (#31)
* Start on workspace dropdown and upgrade fontawesome

* WorkspaceDropdown start and Elm components!

* Lots of CSS shit

* Refactor some db stuff and move filter out of sidebar

* Adjust dropdown css

* Handle duplicate header names, and stuff

* Shitty cookies tab

* fixed cookie table a bit

* Modal refactor

* Starteed cookie modal design

* Better cookie storage and filter cookie modal

* Cookie editor round 1

* Fix kve cursor jumping and form encoding templating

* New cookies now show up in filter

* Checkpoint

* Stuff and fix environments css

* Added manage cookies button to cookie pane

* Fix accidental sidebar item drag on sidebar resize

* Environments modal is looking pretty good now

* Pretty much done environments nad cookies

* Some changes

* Fixed codemirror in modals

* Fixed some things

* Add basic proxy support

* Updated shortcuts

* Code snippet generation

* Some style

* bug fix

* Code export now gets cookies for correct domain
2016-08-15 10:04:36 -07:00

120 lines
2.3 KiB
SCSS

@import '../constants/dimensions';
@import '../constants/colors';
.env-modal.modal__body {
display: grid;
grid-template-columns: 17rem 1fr;
grid-template-rows: 1fr;
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-xxl;
height: 100%;
padding: $padding-sm;
&:hover {
color: $font-light-bg;
}
}
}
.env-modal__sidebar-root-item,
.env-modal__sidebar-item {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: $line-height-xs;
color: $hl-xxl;
& > 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:focus {
color: $font-light-bg;
background-color: $hl-xs;
}
&:hover > button {
background-color: $hl-xxs;
}
}
.env-modal__sidebar-item {
& > button {
padding-left: $padding-lg;
}
}
}
.env-modal__main {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
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%;
}
}
}