alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Manual re-do of collapse/expand panes

Browse Source 
open #90
Fixed broken mobile styles;
Removed commented out scss;
This commit is contained in:
Charles Hacskaylo
2015-10-22 18:45:47 -07:00
parent bf17b77e82
commit 3687cc5edd
6 changed files with 327 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@@ -104,64 +104,66 @@ $pad: $interiorMargin * $baseRatio;
.mini-tab {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
@extend .ui-symbol;
@include trans-prop-nice(left, 150ms);
//@include test(green);
$iconD: 12px;
$arwD: 7px;
$c: pullForward($colorBodyBg, 15%);
color: $c;
cursor: pointer;
display: block;
position: absolute;
font-size: $iconD;
line-height: $iconD;
height: $iconD; width: $iconD;
&:hover {
color: pullForward($c, 20%);
&:after {
color: $colorKey;
}
}
&:before,
&:after {
@include trans-prop-nice(color, 200ms);
display: block;
position: absolute;
}
&:before {
// Always the arrow icon
@include desktop {
@include trans-prop-nice(left, 150ms);
//@include test(green);
font-size: $arwD;
height: 100%; width: $arwD;
}
&:after {
// Representative icon
//@include test(red);
width: 100%;
height: 100%;
}
$iconD: 12px;
$arwD: 7px;
$c: pullForward($colorBodyBg, 15%);
color: $c;
cursor: pointer;
display: block;
position: absolute;
font-size: $iconD;
line-height: $iconD;
height: $iconD; width: $iconD;
&.anchor-left {
// < []
$xpos: (1px + $arwD) * -1;
&:before {
content:'\3c';
left: $xpos;
&:hover {
color: pullForward($c, 20%);
&:after {
color: $colorKey;
}
}
&:hover:before { left: $xpos - 3; }
}
&.anchor-right {
// [] >
$xpos: $iconD + 2px;
&:before {
content:'\3e';
left: $xpos;
&:before,
&:after {
@include trans-prop-nice(color, 200ms);
display: block;
position: absolute;
}
&:before {
// Always the arrow icon
@include trans-prop-nice(left, 150ms);
//@include test(green);
font-size: $arwD;
height: 100%; width: $arwD;
}
&:after {
// Representative icon
//@include test(red);
width: 100%;
height: 100%;
}
&.anchor-left {
// < []
$xpos: (1px + $arwD) * -1;
&:before {
content:'\3c';
left: $xpos;
}
&:hover:before { left: $xpos - 3; }
}
&.anchor-right {
// [] >
$xpos: $iconD + 2px;
&:before {
content:'\3e';
left: $xpos;
}
&:hover:before { left: $xpos + 3; }
}
&:hover:before { left: $xpos + 3; }
}
}