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

[Frontend] Expand/collapse styling

Browse Source 
open #90
Modding mini-tab look, just started;
This commit is contained in:
Charles Hacskaylo
2015-10-23 15:36:52 -07:00
parent efd209826d
commit 17b3378655
5 changed files with 491 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,6 +102,97 @@ $pad: $interiorMargin * $baseRatio;
}
.mini-tab {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
@extend .ui-symbol;
@include desktop {
@include trans-prop-nice(left, 150ms);
//@include test(green);
$iconD: 12px;
$arwD: 7px;
$arwOffsetX: 0px;
$arwAnimOffsetX: 2px;
$arwToLeftAnimX: -1 * $arwAnimOffsetX;
$arwToRightAnimX: $arwAnimOffsetX;
$arwToLeftX: ($arwOffsetX + $arwD) * -1;
$arwToRightX: $iconD + $arwOffsetX;
$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 trans-prop-nice(left, 150ms);
//@include test(green);
font-size: $arwD;
height: 100%; width: $arwD;
}
&:after {
// Always vertical bar element
width: 100%;
height: 100%;
}
&.anchor-left {
// < []
$xpos: $arwToLeftX;
&:before {
content:'\3c';
left: $xpos;
}
&:hover:before { left: $xpos + $arwToLeftAnimX; }
&.collapsed {
$xpos: $arwToRightX;
&:before {
content:'\3e';
left: $xpos;
}
&:hover:before { left: $xpos + $arwToRightAnimX; }
}
}
&.anchor-right {
// [] >
$xpos: $arwToRightX;
&:before {
content:'\3e';
left: $xpos;
}
&:hover:before { left: $xpos + $arwToRightAnimX; }
&.collapsed {
$xpos: $arwToLeftX;
&:before {
content:'\3c';
left: $xpos;
}
&:hover:before { left: $xpos + $arwToLeftAnimX; }
}
}
&.collapsed {
// State when the pane this element controls has been collapsed
}
}
}
.mini-tab-icon {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
@extend .ui-symbol;
@include desktop {