insomnia/app/ui/css/components/wrapper.less

77 lines
1.4 KiB
Plaintext
Raw Normal View History

2016-05-01 19:56:30 +00:00
@import '../constants/dimensions';
@import '../constants/colors';
.wrapper {
2016-08-29 17:58:59 +00:00
background-color: @bg-super-dark;
color: @font-super-dark-bg;
2016-05-01 19:56:30 +00:00
display: grid;
2016-09-20 21:17:01 +00:00
grid-template-rows: minmax(0, 0.5fr) minmax(0, 0.5fr);
2016-05-01 19:56:30 +00:00
height: 100%;
width: 100%;
.sidebar {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: span 2;
2016-09-20 21:17:01 +00:00
min-width: 0;
2016-05-01 19:56:30 +00:00
}
2016-06-19 00:08:14 +00:00
.drag {
grid-row-start: 1;
grid-row-end: span 2;
position: relative;
& > * {
2016-09-13 21:18:22 +00:00
//background-color: rgba(255, 0, 0, 0.2);
2016-06-19 00:08:14 +00:00
cursor: ew-resize;
position: absolute;
height: 100%;
z-index: 20;
2016-08-29 17:58:59 +00:00
width: @drag-width;
2016-06-19 00:08:14 +00:00
top: 0;
2016-07-08 06:30:26 +00:00
// More to the right so it doesn't cover scroll bars
2016-08-29 17:58:59 +00:00
left: -@drag-width / 8;
2016-06-19 00:08:14 +00:00
}
}
2016-05-01 19:56:30 +00:00
.request-pane {
2016-09-20 21:17:01 +00:00
min-width: 0;
2016-06-19 00:08:14 +00:00
grid-column-start: 3;
2016-05-01 19:56:30 +00:00
grid-row-start: 1;
grid-row-end: span 2;
background: inherit;
2016-05-01 19:56:30 +00:00
}
.response-pane {
2016-09-20 21:17:01 +00:00
min-width: 0;
2016-06-19 00:08:14 +00:00
grid-column-start: 5;
2016-05-01 19:56:30 +00:00
grid-row-start: 1;
grid-row-end: span 2;
background: inherit;
2016-05-01 19:56:30 +00:00
}
}
2016-08-29 17:58:59 +00:00
@media (max-width: @breakpoint-md) {
2016-05-01 19:56:30 +00:00
.wrapper {
.request-pane {
2016-06-19 00:08:14 +00:00
grid-column-start: 3;
grid-column-end: span 3;
2016-05-01 19:56:30 +00:00
grid-row-start: 1;
grid-row-end: span 1;
}
.response-pane {
2016-06-19 00:08:14 +00:00
grid-column-start: 3;
grid-column-end: span 3;
2016-05-01 19:56:30 +00:00
grid-row-start: 2;
grid-row-end: span 1;
}
2016-06-19 00:08:14 +00:00
2016-06-19 01:30:13 +00:00
.drag--pane {
2016-06-19 00:08:14 +00:00
display: none;
}
2016-05-01 19:56:30 +00:00
}
}