mirror of
https://github.com/nasa/openmct.git
synced 2025-02-22 10:11:06 +00:00
[Mobile] Desktop adjusted
Adjusted the desktop to accomodate browser orientation changes. Done so by forgoing checking the orientation because the actual device can be in landscape, but it reads orientation based on the viewport.
This commit is contained in:
Shivam Dave
parent
885433390e
commit
be757066f5
@ -70,6 +70,7 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
/************************** WINDOW CHECKS FOR RWD */
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
|
||||
@ -70,6 +70,7 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
/************************** WINDOW CHECKS FOR RWD */
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
@ -347,26 +348,26 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
|
||||
@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 24, ../sass/mobile/_item.scss */
|
||||
.items-holder .item.grid-item {
|
||||
width: 100%;
|
||||
height: 50px; } }
|
||||
@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
|
||||
@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 24, ../sass/mobile/_item.scss */
|
||||
.items-holder .item.grid-item {
|
||||
width: 100%;
|
||||
height: 100px; } }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 24, ../sass/mobile/_item.scss */
|
||||
.items-holder .item.grid-item {
|
||||
width: 200px;
|
||||
height: 200px; } }
|
||||
@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
|
||||
@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 49, ../sass/mobile/_item.scss */
|
||||
.items-holder .item.grid-item .icon {
|
||||
display: none; } }
|
||||
@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
|
||||
@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 49, ../sass/mobile/_item.scss */
|
||||
.items-holder .item.grid-item .icon {
|
||||
display: none; } }
|
||||
|
||||
@ -71,6 +71,7 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
/************************** WINDOW CHECKS FOR RWD */
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
@ -731,7 +732,7 @@ mct-container {
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
|
||||
@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 26, ../sass/mobile/_layout.scss */
|
||||
.holder-hide {
|
||||
-moz-transition-duration: 0.2s;
|
||||
@ -739,7 +740,7 @@ mct-container {
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
left: -257px; } }
|
||||
@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
|
||||
@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 26, ../sass/mobile/_layout.scss */
|
||||
.holder-hide {
|
||||
-moz-transition-duration: 0.2s;
|
||||
@ -748,7 +749,7 @@ mct-container {
|
||||
transition-duration: 0.2s;
|
||||
left: -399.5px; } }
|
||||
|
||||
@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
|
||||
@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 37, ../sass/mobile/_layout.scss */
|
||||
.holder-show {
|
||||
-moz-transition-duration: 0.2s;
|
||||
@ -756,7 +757,7 @@ mct-container {
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
left: 0px; } }
|
||||
@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
|
||||
@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 37, ../sass/mobile/_layout.scss */
|
||||
.holder-show {
|
||||
-moz-transition-duration: 0.2s;
|
||||
@ -768,7 +769,7 @@ mct-container {
|
||||
/* line 48, ../sass/mobile/_layout.scss */
|
||||
.button-show {
|
||||
position: absolute; }
|
||||
@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
|
||||
@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 48, ../sass/mobile/_layout.scss */
|
||||
.button-show {
|
||||
-moz-transition-duration: 0.2s;
|
||||
@ -776,7 +777,7 @@ mct-container {
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
left: 257px; } }
|
||||
@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
|
||||
@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 48, ../sass/mobile/_layout.scss */
|
||||
.button-show {
|
||||
-moz-transition-duration: 0.2s;
|
||||
@ -792,11 +793,11 @@ mct-container {
|
||||
-o-transition-duration: 0.2s;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s; }
|
||||
@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
|
||||
@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 60, ../sass/mobile/_layout.scss */
|
||||
.button-hide {
|
||||
left: 257px; } }
|
||||
@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
|
||||
@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 60, ../sass/mobile/_layout.scss */
|
||||
.button-hide {
|
||||
left: 399.5px; } }
|
||||
@ -804,11 +805,11 @@ mct-container {
|
||||
/* line 71, ../sass/mobile/_layout.scss */
|
||||
.object-header-mobile {
|
||||
position: relative; }
|
||||
@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
|
||||
@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 71, ../sass/mobile/_layout.scss */
|
||||
.object-header-mobile {
|
||||
left: 25.7px; } }
|
||||
@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
|
||||
@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 71, ../sass/mobile/_layout.scss */
|
||||
.object-header-mobile {
|
||||
left: 39.95px; } }
|
||||
@ -816,20 +817,20 @@ mct-container {
|
||||
/* line 81, ../sass/mobile/_layout.scss */
|
||||
.mobile-menu-icon {
|
||||
top: 5px; }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 81, ../sass/mobile/_layout.scss */
|
||||
.mobile-menu-icon {
|
||||
display: none; } }
|
||||
|
||||
@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
|
||||
@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 88, ../sass/mobile/_layout.scss */
|
||||
.browse-manage {
|
||||
width: 257px; } }
|
||||
@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
|
||||
@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 88, ../sass/mobile/_layout.scss */
|
||||
.browse-manage {
|
||||
width: 399.5px; } }
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
|
||||
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
|
||||
/* line 88, ../sass/mobile/_layout.scss */
|
||||
.browse-manage {
|
||||
min-width: 150px;
|
||||
|
||||
@ -70,6 +70,7 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
/************************** WINDOW CHECKS FOR RWD */
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
|
||||
@ -22,42 +22,51 @@
|
||||
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
$phoMaxW: 514px;
|
||||
$phoWidPorCheck: "(max-width: #{$phoMaxW})";
|
||||
$phoWidLanCheck: "(max-height: #{$phoMaxW})";
|
||||
|
||||
$phoMaxH: 740px;
|
||||
$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
|
||||
$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
|
||||
|
||||
$tabMinW: 515px;
|
||||
$tabMaxW: 799px;
|
||||
$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
|
||||
$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
|
||||
|
||||
$tabMinH: 741px;
|
||||
$tabMaxH: 1024px;
|
||||
|
||||
$compMinW: 800px;
|
||||
$compMinH: 1025px;
|
||||
/************************** WINDOW CHECKS FOR RWD */
|
||||
|
||||
$phoWidPorCheck: "(max-width: #{$phoMaxW})";
|
||||
$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
|
||||
|
||||
$phoWidLanCheck: "(max-height: #{$phoMaxW})";
|
||||
$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
|
||||
|
||||
$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
|
||||
$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
|
||||
|
||||
$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
|
||||
$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
|
||||
|
||||
$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
|
||||
$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
|
||||
|
||||
$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
|
||||
$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
|
||||
$phoneHeightEmu: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
|
||||
|
||||
$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
|
||||
$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
|
||||
$tabletHeightEmu: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
|
||||
|
||||
$compMinW: 800px;
|
||||
$compMinH: 1025px;
|
||||
|
||||
$phoneWidth: "screen and (orientation: portrait) and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}";
|
||||
$phoneHeight: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}";
|
||||
$phoneHeightEmu: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}";
|
||||
|
||||
$tabletWidth: "screen and (orientation: portrait) and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}";
|
||||
$tabletHeight: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}";
|
||||
$tabletHeightEmu: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}";
|
||||
|
||||
|
||||
|
||||
$desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
|
||||
$desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
|
||||
|
||||
$compWidth: "screen and #{$desktopDevicePortrait} and (orientation: portrait)";
|
||||
$compHeight: "screen and #{$desktopDeviceLandscape} and (orientation: landscape)";
|
||||
$compWidth: "screen and #{$desktopDevicePortrait}";
|
||||
$compHeight: "screen and #{$desktopDeviceLandscape}";
|
||||
|
||||
$leftPhone: $phoMaxW/2;
|
||||
$leftTab: $tabMaxW/2;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user