mirror of
https://github.com/nasa/openmct.git
synced 2025-01-02 19:36:41 +00:00
[Mobile] Right Pane sets
Right pane sets the size of itself, causing the left pane to re-adjust to fit the screen based on it. Also transitions work on the slide and the fade in.
This commit is contained in:
Shivam Dave
parent
2614427e0e
commit
6e406fd060
@ -756,106 +756,137 @@ mct-container {
|
||||
@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), 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 48, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .pane-special.left {
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
transition-duration: 0.35s;
|
||||
transition-timing-function: ease;
|
||||
width: 0px !important;
|
||||
right: auto !important;
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
-webkit-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
transition-duration: 0.35s;
|
||||
-moz-transition-timing-function: ease-in-out;
|
||||
-o-transition-timing-function: ease-in-out;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
opacity: 0;
|
||||
right: 100% !important;
|
||||
width: auto !important;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden; } }
|
||||
@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), 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 58, ../sass/mobile/_layout.scss */
|
||||
/* line 60, ../sass/mobile/_layout.scss */
|
||||
.browse-hidetree .pane-special.right {
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
transition-duration: 0.35s;
|
||||
transition-timing-function: ease;
|
||||
width: auto !important;
|
||||
left: 0px !important; } }
|
||||
left: auto !important;
|
||||
width: 100% !important; } }
|
||||
|
||||
@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), 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 68, ../sass/mobile/_layout.scss */
|
||||
/* line 70, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
transition-duration: 0.35s;
|
||||
transition-timing-function: ease;
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
-webkit-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
-moz-transition-duration: 0.4s;
|
||||
-o-transition-duration: 0.4s;
|
||||
-webkit-transition-duration: 0.4s;
|
||||
transition-duration: 0.4s;
|
||||
-moz-transition-timing-function: ease-in-out;
|
||||
-o-transition-timing-function: ease-in-out;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
right: auto !important; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
|
||||
/* line 68, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
width: 80% !important; } }
|
||||
@media 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 68, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
width: 30% !important; } }
|
||||
@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) {
|
||||
/* line 68, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
width: 35% !important; } }
|
||||
@media 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 68, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
width: 25% !important; } }
|
||||
@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), 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 87, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.right {
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: ease;
|
||||
width: auto !important; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
|
||||
/* line 87, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.right {
|
||||
left: 80% !important; } }
|
||||
/* line 70, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
right: 19px !important; } }
|
||||
@media 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 87, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.right {
|
||||
left: 30% !important; } }
|
||||
/* line 70, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
right: 66% !important; } }
|
||||
@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) {
|
||||
/* line 87, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.right {
|
||||
left: 35% !important; } }
|
||||
/* line 70, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
right: 600px !important; } }
|
||||
@media 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 87, ../sass/mobile/_layout.scss */
|
||||
/* line 70, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.left {
|
||||
right: 78% !important; } }
|
||||
@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), 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 91, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.right {
|
||||
left: 25% !important; } }
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
transition-duration: 0.35s;
|
||||
transition-timing-function: ease;
|
||||
left: auto !important; } }
|
||||
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
|
||||
/* line 91, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.right {
|
||||
width: 19px !important; } }
|
||||
@media 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 91, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.right {
|
||||
width: 66% !important; } }
|
||||
@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) {
|
||||
/* line 91, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.right {
|
||||
width: 600px !important; } }
|
||||
@media 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 91, ../sass/mobile/_layout.scss */
|
||||
.browse-showtree .pane-special.right {
|
||||
width: 78% !important; } }
|
||||
|
||||
@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), 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 107, ../sass/mobile/_layout.scss */
|
||||
/* line 111, ../sass/mobile/_layout.scss */
|
||||
.mobile-splitter {
|
||||
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), 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 113, ../sass/mobile/_layout.scss */
|
||||
/* line 117, ../sass/mobile/_layout.scss */
|
||||
.button-pos {
|
||||
position: absolute;
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-moz-transition-duration: 0.35s;
|
||||
-o-transition-duration: 0.35s;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
transition-duration: 0.35s;
|
||||
transition-timing-function: ease; } }
|
||||
|
||||
@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), 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 120, ../sass/mobile/_layout.scss */
|
||||
@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 124, ../sass/mobile/_layout.scss */
|
||||
.object-header-mobile {
|
||||
position: relative;
|
||||
left: 30px; } }
|
||||
@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 124, ../sass/mobile/_layout.scss */
|
||||
.object-header-mobile {
|
||||
position: relative;
|
||||
left: 35px; } }
|
||||
|
||||
@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), 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 127, ../sass/mobile/_layout.scss */
|
||||
/* line 135, ../sass/mobile/_layout.scss */
|
||||
.mobile-hide {
|
||||
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) {
|
||||
/* line 133, ../sass/mobile/_layout.scss */
|
||||
/* line 141, ../sass/mobile/_layout.scss */
|
||||
.phone-hide {
|
||||
display: none; } }
|
||||
|
||||
@ -2867,11 +2898,11 @@ label.checkbox.custom {
|
||||
@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 2, ../sass/mobile/controls/_menus.scss */
|
||||
.mobile-menu-icon {
|
||||
font-size: 125%; } }
|
||||
font-size: 25px; } }
|
||||
@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 2, ../sass/mobile/controls/_menus.scss */
|
||||
.mobile-menu-icon {
|
||||
font-size: 175%; } }
|
||||
font-size: 29px; } }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 2, ../sass/mobile/controls/_menus.scss */
|
||||
.mobile-menu-icon {
|
||||
|
||||
@ -67,8 +67,8 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
|
||||
$desktopLandscape: "screen and #{$desktopLanscapeCheck}";
|
||||
|
||||
/************************** DEVICE PARAMETERS FOR MENUS */
|
||||
$phoneMenuSizePortrait: 80%;
|
||||
$phoneMenuSizeLandscape: 30%;
|
||||
$tabletMenuSizePortrait: 35%;
|
||||
$tabletMenuSizeLandscape: 25%;
|
||||
$phoneMenuSizePortrait: 19px;
|
||||
$phoneMenuSizeLandscape: 66%;
|
||||
$tabletMenuSizePortrait: 600px;
|
||||
$tabletMenuSizeLandscape: 78%;
|
||||
$desktopMenuSize: 25%;
|
||||
@ -20,8 +20,6 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
// NOTE: Added to adjust the browse folder left list view
|
||||
|
||||
.browse-wrapper,
|
||||
.pane-special {
|
||||
@include phoneandtablet {
|
||||
@ -48,8 +46,10 @@
|
||||
.pane-special.left {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
width: 0px !important;
|
||||
right: auto !important;
|
||||
@include trans-prop-nice(opacity, .35s);
|
||||
opacity: 0;
|
||||
right: 100% !important;
|
||||
width: auto !important;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@ -58,8 +58,8 @@
|
||||
.pane-special.right {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
width: auto !important;
|
||||
left: 0px !important;
|
||||
left: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -68,8 +68,28 @@
|
||||
.pane-special.left {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
right: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
@include phonePortrait {
|
||||
right: $phoneMenuSizePortrait !important;
|
||||
}
|
||||
@include phoneLandscape {
|
||||
right: $phoneMenuSizeLandscape !important;
|
||||
}
|
||||
@include tabletPortrait {
|
||||
right: $tabletMenuSizePortrait !important;
|
||||
}
|
||||
@include tabletLandscape {
|
||||
right: $tabletMenuSizeLandscape !important;
|
||||
}
|
||||
}
|
||||
.pane-special.right {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
left: auto !important;
|
||||
}
|
||||
@include phonePortrait {
|
||||
width: $phoneMenuSizePortrait !important;
|
||||
@ -84,24 +104,6 @@
|
||||
width: $tabletMenuSizeLandscape !important;
|
||||
}
|
||||
}
|
||||
.pane-special.right {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
width: auto !important;
|
||||
}
|
||||
@include phonePortrait {
|
||||
left: $phoneMenuSizePortrait !important;
|
||||
}
|
||||
@include phoneLandscape {
|
||||
left: $phoneMenuSizeLandscape !important;
|
||||
}
|
||||
@include tabletPortrait {
|
||||
left: $tabletMenuSizePortrait !important;
|
||||
}
|
||||
@include tabletLandscape {
|
||||
left: $tabletMenuSizeLandscape !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-splitter {
|
||||
@ -118,9 +120,13 @@
|
||||
}
|
||||
|
||||
.object-header-mobile {
|
||||
@include phoneandtablet {
|
||||
@include phone {
|
||||
position: relative;
|
||||
left: 30px;
|
||||
}
|
||||
@include tablet {
|
||||
position: relative;
|
||||
left: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -89,6 +89,6 @@
|
||||
}
|
||||
|
||||
@mixin slMenuTransitions {
|
||||
@include transition-duration(.2s);
|
||||
@include transition-duration(.35s);
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
.mobile-menu-icon {
|
||||
display: inline-block;
|
||||
@include phone {
|
||||
font-size: 125%;
|
||||
font-size: 25px;
|
||||
}
|
||||
@include tablet {
|
||||
font-size: 175%;
|
||||
font-size: 29px;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user