github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-27 10:33:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Make the togglers more obvious when panes are closed.

Browse source
This commit is contained in:
Paulo Reis 2017-12-08 15:29:05 +00:00
parent 9575e80291
commit 97129b5dda
1 changed files with 52 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
services/web/public/stylesheets/app/editor.less
View file

@ -14,6 +14,9 @@
@import "./editor/review-panel.less";
@import "./editor/feature-onboarding.less";
@ui-layout-toggler-def-height: 50px;
@ui-resizer-extra-hit-area: 8px;
@keyframes blink {
0% {
opacity: 0.2;
@ -285,38 +288,37 @@
}
.ui-layout-resizer when (@is-overleaf = true) {
@extra-hit-area: 8px;
margin-left: -(@extra-hit-area) !important;
margin-right: -(@extra-hit-area - 1px) !important;
padding-left: @extra-hit-area !important;
padding-right: @extra-hit-area !important;
margin-left: -(@ui-resizer-extra-hit-area) !important;
margin-right: -(@ui-resizer-extra-hit-area - 1px) !important;
padding-left: @ui-resizer-extra-hit-area !important;
padding-right: @ui-resizer-extra-hit-area !important;
z-index: 5 !important;
box-sizing: content-box;
background-image: linear-gradient(90deg,
transparent,
transparent (@extra-hit-area - 1px),
@editor-resizer-bg-color (@extra-hit-area - 1px),
@editor-resizer-bg-color (@extra-hit-area + 1px),
transparent (@extra-hit-area + 1px),
transparent (@ui-resizer-extra-hit-area - 1px),
@editor-resizer-bg-color (@ui-resizer-extra-hit-area - 1px),
@editor-resizer-bg-color (@ui-resizer-extra-hit-area + 1px),
transparent (@ui-resizer-extra-hit-area + 1px),
transparent);
.ui-layout-toggler {
padding: 0 @extra-hit-area !important;
padding: 0 @ui-resizer-extra-hit-area !important;
background-image: linear-gradient(90deg,
transparent,
transparent (@extra-hit-area - 1px),
@editor-toggler-bg-color (@extra-hit-area - 1px),
@editor-toggler-bg-color (@extra-hit-area + 1px),
transparent (@extra-hit-area + 1px),
transparent (@ui-resizer-extra-hit-area - 1px),
@editor-toggler-bg-color (@ui-resizer-extra-hit-area - 1px),
@editor-toggler-bg-color (@ui-resizer-extra-hit-area + 1px),
transparent (@ui-resizer-extra-hit-area + 1px),
transparent);
&:hover {
background-image: linear-gradient(90deg,
transparent,
transparent (@extra-hit-area - 2px),
@editor-toggler-hover-bg-color (@extra-hit-area - 2px),
@editor-toggler-hover-bg-color (@extra-hit-area + 2px),
transparent (@extra-hit-area + 2px),
transparent (@ui-resizer-extra-hit-area - 2px),
@editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area - 2px),
@editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 2px),
transparent (@ui-resizer-extra-hit-area + 2px),
transparent);
}
}
@ -336,6 +338,38 @@
}
}
}
.ui-layout-toggler.ui-layout-toggler-closed when (@is-overleaf = true) {
background-color: @editor-resizer-bg-color;
background-image: none;
line-height: @ui-layout-toggler-def-height;
&::before {
content: "\22EE"; // Vertical ellipsis
display: block;
color: #FFF;
font-weight: 700;
font-size: @font-size-h2;
width: @ui-resizer-extra-hit-area / 2;
}
&:hover {
background-color: @editor-toggler-hover-bg-color;
background-image: none;
}
.ui-layout-resizer-west > & {
border-radius: 0 @border-radius-base @border-radius-base 0;
&::before {
margin-left: -2px;
}
}
.ui-layout-resizer-east > & {
border-radius: @border-radius-base 0 0 @border-radius-base;
&::before {
margin-left: (-1 - @ui-resizer-extra-hit-area);
}
}
}
.ui-layout-resizer-dragging {
background-color: @editor-resizer-bg-color-dragging;
}