Style drag and drop, also renaming and inputs.

This commit is contained in:
Paulo Reis 2017-11-22 11:54:57 +00:00
parent 8758119e62
commit ead190bf23
3 changed files with 28 additions and 16 deletions

View file

@ -67,10 +67,15 @@ aside#file-tree {
input {
line-height: 1.6;
}
&.droppable-hover {
// TODO pick right color for the OL Beta theme.
background-color: fade(@file-tree-droppable-background-color, 60%);
&.droppable-hover when (@is-overleaf = false) {
background-color: fade(@file-tree-droppable-bg-color, 60%);
}
&.droppable-hover when (@is-overleaf = true) {
background-color: @file-tree-droppable-bg-color;
box-shadow: -200px 0 0 @file-tree-droppable-bg-color;
}
}
i.fa {
@ -130,6 +135,7 @@ aside#file-tree {
top: 1px;
left: 44px;
right: 32px;
color: @file-tree-item-input-color;
input {
width: 100%;
}
@ -182,9 +188,12 @@ aside#file-tree {
}
}
// TODO pick right color for the OL Beta theme.
ul.droppable-hover {
background-color: fade(@file-tree-droppable-background-color, 60%);
ul.droppable-hover when (@is-overleaf = false) {
background-color: fade(@file-tree-droppable-bg-color, 60%);
}
ul.droppable-hover when (@is-overleaf = true) {
background-color: @file-tree-droppable-bg-color;
box-shadow: -200px 0 0 @file-tree-droppable-bg-color;
}
}

View file

@ -796,7 +796,7 @@
@toolbar-border-color: @gray-lighter;
@common-border-color: @gray-lighter;
@editor-border-color: @gray-lighter;
@file-tree-droppable-background-color: rgb(252, 231, 199);
@file-tree-droppable-bg-color: rgb(252, 231, 199);
@editor-dark-background-color: #333;
@editor-dark-toolbar-border-color: #222;
@ -908,6 +908,7 @@
@file-tree-item-color : @gray-darker;
@file-tree-item-toggle-color : @gray;
@file-tree-item-icon-color : @gray-light;
@file-tree-item-input-color : inherit;
@file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%);
@file-tree-item-hover-bg : @gray-lightest;
@file-tree-item-selected-bg : transparent;

View file

@ -173,15 +173,17 @@
@toolbar-icon-btn-hover-shadow : none;
// Editor file-tree
@file-tree-bg : @ol-blue-gray-4;
@file-tree-item-color : #FFF;
@file-tree-item-toggle-color : @ol-blue-gray-2;
@file-tree-item-icon-color : @ol-blue-gray-2;
@file-tree-item-folder-color : @ol-blue-gray-2;
@file-tree-item-hover-bg : @ol-blue-gray-5;
@file-tree-item-selected-bg : @ol-green;
@file-tree-multiselect-bg : @ol-blue;
@file-tree-multiselect-hover-bg : @ol-dark-blue;
@file-tree-bg : @ol-blue-gray-4;
@file-tree-item-color : #FFF;
@file-tree-item-input-color : @ol-blue-gray-5;
@file-tree-item-toggle-color : @ol-blue-gray-2;
@file-tree-item-icon-color : @ol-blue-gray-2;
@file-tree-item-folder-color : @ol-blue-gray-2;
@file-tree-item-hover-bg : @ol-blue-gray-5;
@file-tree-item-selected-bg : @ol-green;
@file-tree-multiselect-bg : @ol-blue;
@file-tree-multiselect-hover-bg : @ol-dark-blue;
@file-tree-droppable-bg-color : tint(@ol-green, 5%);
//== Colors
//
//## Gray and brand colors for use across Bootstrap.