[Frontend] Splitter re-styling
open #90 Significant redo of splitter styling;
This commit is contained in:
Charles Hacskaylo
@@ -41,39 +41,39 @@
|
||||
width: $d;
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice($prop, $t: 500ms, $delay: 0) {
|
||||
// This only works for a single property right now
|
||||
@if $t == 0 {
|
||||
@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
|
||||
// Multiple $props must be in parans like this: (left, right)
|
||||
@if $dur == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property($prop);
|
||||
@include transition-duration($t);
|
||||
@include transition-property($props);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-fade($t: 500ms, $delay: 0) {
|
||||
@if $t == 0 {
|
||||
@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
|
||||
@if $dur == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property(opacity, background-color, border-color, color);
|
||||
@include transition-duration($t);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-resize-h($t: 500ms, $delay: 0) {
|
||||
@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
|
||||
@include transition-property(height, bottom, top);
|
||||
@include transition-duration($t);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-resize-w($t: 500ms, $delay: 0) {
|
||||
@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
|
||||
@include transition-property(width, left, right);
|
||||
@include transition-duration($t);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
@@ -162,7 +162,7 @@
|
||||
|
||||
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
|
||||
//&:before {
|
||||
@include trans-prop-nice("border-color", 25ms);
|
||||
//@include trans-prop-nice("border-color", 25ms);
|
||||
content: '';
|
||||
display: block;
|
||||
//height: auto;
|
||||
|
||||
@@ -19,71 +19,87 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.split-layout {
|
||||
$b: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
|
||||
.splitter {
|
||||
background-color: $b;
|
||||
@include border-radius($splitterEndCr);
|
||||
@include boxShdw($splitterShdw);
|
||||
//overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
.splitter {
|
||||
// Redo the splitter.
|
||||
// New look is a simple line.
|
||||
// Main width is used to provide a good click area, and is always transparent
|
||||
// :after will be a positioned and colored element that is the handle
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
&:after {
|
||||
// The handle
|
||||
content:"";
|
||||
pointer-events: none;
|
||||
@include absPosDefault(0);
|
||||
background: $colorSplitterBg;
|
||||
display: block;
|
||||
|
||||
@if $splitterEndCr != 'none' {
|
||||
@include border-radius($splitterEndCr);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
&:after {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
}
|
||||
|
||||
@if $colorSplitterHover != 'none' {
|
||||
&:hover {
|
||||
background-color: $colorSplitterHover;
|
||||
&:after {
|
||||
//@include trans-prop-nice("border-color", 25ms);
|
||||
border-color: $colorGrippyInteriorHover !important;
|
||||
}
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
&:active {
|
||||
background-color: pullForward($b, 5%);
|
||||
}
|
||||
}
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
}
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
|
||||
.pane {
|
||||
left: 0;
|
||||
right: 0;
|
||||
&.top {
|
||||
bottom: auto;
|
||||
}
|
||||
&.bottom {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
&:after {
|
||||
@include controlGrippy($colorSplitterInterior, horizontal);
|
||||
.pane {
|
||||
left: 0;
|
||||
right: 0;
|
||||
&.top {
|
||||
bottom: auto;
|
||||
}
|
||||
cursor: row-resize;
|
||||
left: 0; right: 0;
|
||||
width: auto;
|
||||
height: $splitterW;
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
// Slides horizontally left to right, splitting the element vertically
|
||||
.pane {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&.left {
|
||||
right: auto;
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
bottom: 0;
|
||||
cursor: col-resize;
|
||||
width: $splitterW;
|
||||
&:after {
|
||||
@include controlGrippy($colorBodyBg, vertical);
|
||||
&.bottom {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
cursor: row-resize;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: $splitterD;
|
||||
&:after {
|
||||
top: $splitterHandleInset; bottom: $splitterHandleInset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
// Slides horizontally left to right, splitting the element vertically
|
||||
.pane {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&.left {
|
||||
right: auto;
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $splitterD;
|
||||
&:after {
|
||||
left: $splitterHandleInset; right: $splitterHandleInset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area .splitter {
|
||||
|
||||
@@ -244,6 +244,11 @@
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.primary-pane {
|
||||
// Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&.treeview.left {
|
||||
.create-btn-holder {
|
||||
bottom: auto;
|
||||
@@ -264,7 +269,8 @@
|
||||
}
|
||||
|
||||
.mini-tab.toggle-pane {
|
||||
$paneOffset: -1 * ($uePaneMiniTabW + $interiorMargin + $splitterW);
|
||||
//@include test(blue, 0.6);
|
||||
$paneOffset: -2 * $splitterD;
|
||||
$paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM;
|
||||
z-index: 2;
|
||||
@include desktop {
|
||||
@@ -406,7 +412,7 @@
|
||||
// Sets the left tree menu when the tree is shown.
|
||||
.pane.left.treeview,
|
||||
.splitter-treeview {
|
||||
@include trans-prop-nice-fade(250ms, 250ms);
|
||||
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -415,7 +421,7 @@
|
||||
.l-object-and-inspector {
|
||||
.pane.right,
|
||||
.splitter-inspect {
|
||||
@include trans-prop-nice-fade(250ms, 250ms);
|
||||
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -135,7 +135,7 @@ define(
|
||||
splitter.css(anchor.edge, (firstSize + splitterSize) + 'px');
|
||||
splitter.css(anchor.opposite, "auto");
|
||||
|
||||
last.css(anchor.edge, (firstSize + splitterSize * 3) + 'px');
|
||||
last.css(anchor.edge, (firstSize + splitterSize * 2) + 'px');
|
||||
last.css(anchor.opposite, "0px");
|
||||
|
||||
position = firstSize + splitterSize;
|
||||
|
||||
Reference in New Issue
Block a user