[Frontend] Expand/collapse finessing

open #90
Icon positioning; top of treeview splitter moved
back down below to previous position;
This commit is contained in:
Charles Hacskaylo
2015-10-29 12:55:20 -07:00
parent 1b0ce7166d
commit 8c4fdf5c1c
4 changed files with 116 additions and 117 deletions

View File

@@ -128,6 +128,7 @@ $pad: $interiorMargin * $baseRatio;
position: absolute;
line-height: $iconH;
height: $iconH; width: $iconW;
text-align: center;
&:hover {
//background-color: $cBg;
@@ -148,6 +149,7 @@ $pad: $interiorMargin * $baseRatio;
&:before,
&:after {
//@include test();
@include trans-prop-nice((left, right, opacity), 250ms);
display: block;
height: 100%;
@@ -171,13 +173,10 @@ $pad: $interiorMargin * $baseRatio;
// |<
text-align: right;
&:before {
content:'\3c';
content:'\e613'; // Collapse left icon
right: $iconInnerLR;
}
//&:after {
// right: auto; left: $iconInnerLR;
//}
&:hover:before { right: $arwAnimOffsetX; }
//&:hover:before { right: $arwAnimOffsetX; }
&.collapsed {
@include border-left-radius(0);
text-align: left;
@@ -190,15 +189,12 @@ $pad: $interiorMargin * $baseRatio;
}
&.anchor-right {
// >|
text-align: left;
&:before {
text-align: left;
content:'\3e';
content:'\e614'; // Collapse right icon
left: $iconInnerLR;
}
//&:after {
// right: $iconInnerLR; left: auto;
//}
&:hover:before { left: $arwAnimOffsetX; }
//&:hover:before { left: $arwAnimOffsetX; }
&.collapsed {
@include border-right-radius(0);
&:before {

View File

@@ -282,7 +282,7 @@
//@include test(green);
left: 0; //$ox;
@include transform(translateX(-1 * $paneExpandedOffset));
&:after { content: 'F'; }
&:after { content: 'F'; } // Folder icon
&.collapsed {
@include transform(translateX(-1 * $paneCollapsedOffset));
}
@@ -291,7 +291,7 @@
$oCx: -1 * $paneCollapsedOffset;
right: 0; //$ox;
@include transform(translateX($paneExpandedOffset));
&:after { content: '\e608'; }
&:after { content: '\e608'; } // Info "i" icon
&.collapsed {
@include transform(translateX($paneCollapsedOffset));
}
@@ -443,6 +443,9 @@
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1;
}
.splitter-treeview {
top: $interiorMarginLg + $ueTopBarH !important;
}
.create-and-search-holder {
@include trans-prop-nice(top, $dur: 250ms, $delay: 200ms);
}