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

[Mobile] Transistions

Browse Source 
Cleaned up and added transitions.
This commit is contained in:
Shivam Dave
2015-07-15 16:57:36 -07:00
parent 4b5540830b
commit a9dd1f9828
2 changed files with 41 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
platform/commonUI/general/res/css/theme-espresso.css
View File

@@ -737,6 +737,10 @@ mct-container {
/* line 25, ../sass/mobile/_layout.scss */ /* line 25, ../sass/mobile/_layout.scss */
.browse-wrapper, .browse-wrapper,
.pane-special { .pane-special {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -747,23 +751,39 @@ mct-container {
/* line 36, ../sass/mobile/_layout.scss */ /* line 36, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.left { .browse-hidetree .pane-special.left {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
display: none !important; } display: none !important; }
/* line 43, ../sass/mobile/_layout.scss */ /* line 41, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.right { .browse-hidetree .pane-special.right {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
width: auto !important; width: auto !important;
left: 0px !important; } left: 0px !important; }
/* line 51, ../sass/mobile/_layout.scss */ /* line 49, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left { .browse-showtree .pane-special.left {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
display: block !important; display: block !important;
width: 300px !important; width: 300px !important;
right: auto !important; } right: auto !important; }
/* line 58, ../sass/mobile/_layout.scss */ /* line 56, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right { .browse-showtree .pane-special.right {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: 300px !important; left: 300px !important;
width: auto !important; } width: auto !important; }
/* line 68, ../sass/mobile/_layout.scss */ /* line 66, ../sass/mobile/_layout.scss */
.button-pos { .button-pos {
position: absolute; position: absolute;
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
@@ -771,37 +791,38 @@ mct-container {
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; } transition-duration: 0.2s; }
/* line 73, ../sass/mobile/_layout.scss */ /* line 71, ../sass/mobile/_layout.scss */
.object-header-mobile { .object-header-mobile {
position: relative; } position: relative;
left: 30px; }
/* line 77, ../sass/mobile/_layout.scss */ /* line 76, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
top: 5px; } top: 5px; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 77, ../sass/mobile/_layout.scss */ /* line 76, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 125%; } } font-size: 125%; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 77, ../sass/mobile/_layout.scss */ /* line 76, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 175%; } } font-size: 175%; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 77, ../sass/mobile/_layout.scss */ /* line 76, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
display: none; } } display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 90, ../sass/mobile/_layout.scss */ /* line 89, ../sass/mobile/_layout.scss */
.mobile-hide { .mobile-hide {
display: none; } } display: none; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 90, ../sass/mobile/_layout.scss */ /* line 89, ../sass/mobile/_layout.scss */
.mobile-hide { .mobile-hide {
display: none; } } display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 99, ../sass/mobile/_layout.scss */ /* line 98, ../sass/mobile/_layout.scss */
.phone-hide { .phone-hide {
display: none; } } display: none; } }

15
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@@ -24,24 +24,22 @@
.browse-wrapper, .browse-wrapper,
.pane-special { .pane-special {
@include transition-duration(.2s);
position: absolute; position: absolute;
left: 0; top: 0; left: 0; top: 0;
right: 0; left: 0; right: 0; left: 0;
white-space: nowrap; white-space: nowrap;
height: 100%; height: 100%;
// overflow: hidden;
} }
.browse-hidetree { .browse-hidetree {
.pane-special.left { .pane-special.left {
// background-color: #FFF; @include transition-duration(.2s);
// right: auto;
// width: 50px;
display: none !important; display: none !important;
} }
.pane-special.right { .pane-special.right {
// background-color: #325DE6; @include transition-duration(.2s);
width: auto !important; width: auto !important;
left: 0px !important; left: 0px !important;
} }
@@ -49,14 +47,14 @@
.browse-showtree { .browse-showtree {
.pane-special.left { .pane-special.left {
@include transition-duration(.2s);
display: block !important; display: block !important;
// background-color: #FFF;
width: 300px !important; width: 300px !important;
right: auto !important; right: auto !important;
} }
.pane-special.right { .pane-special.right {
// background-color: #325DE6; @include transition-duration(.2s);
left: 300px !important; left: 300px !important;
width: auto !important; width: auto !important;
} }
@@ -67,11 +65,12 @@
.button-pos { .button-pos {
position: absolute; position: absolute;
@include transition-duration(.2s); @include transition-duration(.2s);
} }
.object-header-mobile { .object-header-mobile {
position: relative; position: relative;
left: 30px;
} }
.mobile-menu-icon { .mobile-menu-icon {