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

[Mobile] Desktop

Browse Source 
Cleans up the _layout by making the different
pane sizes device specific. Also adds a new
sass class just for desktop versions.
This commit is contained in:
Shivam Dave
2015-07-16 10:44:20 -07:00
parent a9dd1f9828
commit ce75d19480
4 changed files with 247 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/browse/res/templates/browse.html
View File

@@ -26,11 +26,11 @@
<!-- WRAPPER CLASS IS HERE--> <!-- WRAPPER CLASS IS HERE-->
<!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right--> <!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
<div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'" anchor='left'> <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
<mct-split-pane class='contents abs'> <mct-split-pane class='contents abs' anchor='left'>
<!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example--> <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
<div class='split-pane-component treeview pane pane-special left'> <div class='split-pane-component treeview pane pane-special left desktop-browse'>
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>
@@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<mct-splitter class="mobile-hide"></mct-splitter> <mct-splitter class="mobile-splitter"></mct-splitter>
<!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example--> <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
<div class='split-pane-component items pane pane-special right'> <div class='split-pane-component items pane pane-special right'>

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

@@ -734,56 +734,120 @@ mct-container {
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/* line 25, ../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) {
.browse-wrapper, /* line 25, ../sass/mobile/_layout.scss */
.pane-special { .browse-wrapper,
-moz-transition-duration: 0.2s; .pane-special {
-o-transition-duration: 0.2s; position: absolute;
-webkit-transition-duration: 0.2s; left: 0;
transition-duration: 0.2s; top: 0;
position: absolute; right: 0;
left: 0; left: 0;
top: 0; white-space: nowrap;
right: 0; height: 100%; } }
left: 0; @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) {
white-space: nowrap; /* line 25, ../sass/mobile/_layout.scss */
height: 100%; } .browse-wrapper,
.pane-special {
position: absolute;
left: 0;
top: 0;
right: 0;
left: 0;
white-space: nowrap;
height: 100%; } }
/* line 36, ../sass/mobile/_layout.scss */ @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
.browse-hidetree .pane-special.left { /* line 49, ../sass/mobile/_layout.scss */
-moz-transition-duration: 0.2s; .desktop-browse {
-o-transition-duration: 0.2s; min-width: 150px;
-webkit-transition-duration: 0.2s; max-width: 800px;
transition-duration: 0.2s; width: 25%; } }
display: none !important; }
/* line 41, ../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;
width: auto !important;
left: 0px !important; }
/* line 49, ../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) {
.browse-showtree .pane-special.left { /* line 58, ../sass/mobile/_layout.scss */
-moz-transition-duration: 0.2s; .browse-hidetree .pane-special.left {
-o-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s; -o-transition-duration: 0.2s;
transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
display: block !important; transition-duration: 0.2s;
width: 300px !important; display: none !important; } }
right: auto !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), 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 56, ../sass/mobile/_layout.scss */ /* line 58, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right { .browse-hidetree .pane-special.left {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
left: 300px !important; display: none !important; } }
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), 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 69, ../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;
width: auto !important;
left: 0px !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), 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 69, ../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;
width: auto !important;
left: 0px !important; } }
/* line 66, ../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 84, ../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;
display: block !important;
width: 80% !important;
right: auto !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), 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 84, ../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;
display: block !important;
width: 60% !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), 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 */
.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: 80% !important;
width: auto !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), 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 99, ../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;
left: 60% !important;
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), 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 113, ../sass/mobile/_layout.scss */
.mobile-splitter {
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) {
/* line 113, ../sass/mobile/_layout.scss */
.mobile-splitter {
display: none; } }
/* line 124, ../sass/mobile/_layout.scss */
.button-pos { .button-pos {
position: absolute; position: absolute;
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
@@ -791,38 +855,44 @@ mct-container {
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; } transition-duration: 0.2s; }
/* line 71, ../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) {
.object-header-mobile { /* line 129, ../sass/mobile/_layout.scss */
position: relative; .object-header-mobile {
left: 30px; } 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 129, ../sass/mobile/_layout.scss */
.object-header-mobile {
position: relative;
left: 30px; } }
/* line 76, ../sass/mobile/_layout.scss */ /* line 140, ../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 76, ../sass/mobile/_layout.scss */ /* line 140, ../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 76, ../sass/mobile/_layout.scss */ /* line 140, ../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 76, ../sass/mobile/_layout.scss */ /* line 140, ../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 89, ../sass/mobile/_layout.scss */ /* line 154, ../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 89, ../sass/mobile/_layout.scss */ /* line 154, ../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 98, ../sass/mobile/_layout.scss */ /* line 163, ../sass/mobile/_layout.scss */
.phone-hide { .phone-hide {
display: none; } } display: none; } }

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

@@ -24,42 +24,100 @@
.browse-wrapper, .browse-wrapper,
.pane-special { .pane-special {
@include transition-duration(.2s); // @include transition-duration(.2s);
position: absolute; @include phone {
left: 0; top: 0; position: absolute;
right: 0; left: 0; left: 0; top: 0;
white-space: nowrap; right: 0; left: 0;
height: 100%; white-space: nowrap;
height: 100%;
}
@include tablet {
position: absolute;
left: 0; top: 0;
right: 0; left: 0;
white-space: nowrap;
height: 100%;
}
}
$phoneMenuSize: 80%;
$tabletMenuSize: 60%;
$desktopMenuSize: 25%;
.desktop-browse {
@include desktop {
min-width: 150px;
max-width: 800px;
width: $desktopMenuSize;
}
} }
.browse-hidetree { .browse-hidetree {
.pane-special.left { .pane-special.left {
@include transition-duration(.2s); @include phone {
display: none !important; @include transition-duration(.2s);
display: none !important;
}
@include tablet {
@include transition-duration(.2s);
display: none !important;
}
} }
.pane-special.right { .pane-special.right {
@include transition-duration(.2s); @include phone {
width: auto !important; @include transition-duration(.2s);
left: 0px !important; width: auto !important;
left: 0px !important;
}
@include tablet {
@include transition-duration(.2s);
width: auto !important;
left: 0px !important;
}
} }
} }
.browse-showtree { .browse-showtree {
.pane-special.left { .pane-special.left {
@include transition-duration(.2s); @include phone {
display: block !important; @include transition-duration(.2s);
width: 300px !important; display: block !important;
right: auto !important; width: $phoneMenuSize !important;
right: auto !important;
}
@include tablet {
@include transition-duration(.2s);
display: block !important;
width: $tabletMenuSize !important;
right: auto !important;
}
} }
.pane-special.right { .pane-special.right {
@include transition-duration(.2s); @include phone {
left: 300px !important; @include transition-duration(.2s);
width: auto !important; left: $phoneMenuSize !important;
width: auto !important;
}
@include tablet {
@include transition-duration(.2s);
left: $tabletMenuSize !important;
width: auto !important;
}
} }
} }
.mobile-splitter {
@include phone {
display: none;
}
@include tablet {
display: none;
}
}
@@ -69,8 +127,14 @@
} }
.object-header-mobile { .object-header-mobile {
position: relative; @include phone {
left: 30px; position: relative;
left: 30px;
}
@include tablet {
position: relative;
left: 30px;
}
} }
.mobile-menu-icon { .mobile-menu-icon {
@@ -86,6 +150,7 @@
} }
} }
.mobile-hide { .mobile-hide {
@include phone { @include phone {
display: none; display: none;

30
platform/commonUI/general/res/sass/mobile/_mixins.scss
View File

@@ -24,7 +24,20 @@
@mixin phone { @mixin phone {
@media #{$phonePortrait}, @media #{$phonePortrait},
#{$phoneLandscape}, #{$phoneLandscape},
#{$phoneLandscapeEmu}{ #{$phoneLandscapeEmu} {
@content
}
}
@mixin phonePortrait {
@media #{$phonePortrait} {
@content
}
}
@mixin phoneLandscape {
@media #{$phoneLandscape},
#{$phoneLandscapeEmu} {
@content @content
} }
} }
@@ -32,7 +45,20 @@
@mixin tablet { @mixin tablet {
@media #{$tabletPortrait}, @media #{$tabletPortrait},
#{$tabletLandscape}, #{$tabletLandscape},
#{$tabletLandscapeEmu}{ #{$tabletLandscapeEmu} {
@content
}
}
@mixin tabletPortrait {
@media #{$tabletPortrait} {
@content
}
}
@mixin tabletLandscape {
@media #{$tabletLandscape},
#{$tabletLandscapeEmu} {
@content @content
} }
} }