pxt-core/react-common/styles/react-common-breakpoints.less

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

@mobileBreakpoint: 320px;
@tabletBreakpoint: 768px;
@computerBreakpoint: 992px;
@largeMonitorBreakpoint: 1200px;
@widescreenMonitorBreakpoint: 1920px;

@largestMobilePortraitScreen: (@mobileBreakpoint + 100px);
@largestMobileScreen: (@tabletBreakpoint - 1px);
@largestTabletScreen: (@computerBreakpoint - 1px);
@largestSmallMonitor: (@largeMonitorBreakpoint - 1px);
@largestLargeMonitor: (@widescreenMonitorBreakpoint - 1px);

@portraitMobileAndBelow: ~"only screen and (max-width: @{largestMobilePortraitScreen})";
@mobileAndBelow: ~"only screen and (max-width: @{largestMobileScreen})";
@tabletAndBelow: ~"only screen and (max-width: @{largestTabletScreen})";
@computerAndBelow: ~"only screen and (max-width: @{largestSmallMonitor})";
@largeMonitorAndBelow: ~"only screen and (max-width: @{largestLargeMonitor})";

/****************************************************
 *                Mobile Portrait                   *
 ****************************************************/

@media only screen and (min-width: @portraitMobileAndBelow) {
    .mobile-portrait-only {
        display: none !important;
    }
}

@media @mobileAndBelow {
    .mobile-portrait-hidden {
        display: none !important;
    }
}

/****************************************************
 *                    Mobile                        *
 ****************************************************/

@media only screen and (min-width: @tabletBreakpoint) {
    .mobile-only {
        display: none !important;
    }
}

@media @mobileAndBelow {
    .mobile-hidden {
        display: none !important;
    }
}


/****************************************************
 *                    Tablet                        *
 ****************************************************/

@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
    .tablet-hidden {
        display: none !important;
    }
}

@media @mobileAndBelow {
    .tablet-only {
        display: none !important;
    }
}

@media only screen and (min-width: @computerBreakpoint) {
    .tablet-only {
        display: none !important;
    }
}

/****************************************************
 *                    Computer                      *
 ****************************************************/

@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
    .computer-hidden {
        display: none !important;
    }
}

@media @tabletAndBelow {
    .computer-only {
        display: none !important;
    }
}

@media only screen and (min-width: @largeMonitorBreakpoint) {
    .computer-only {
        display: none !important;
    }
}


/****************************************************
 *                  Large Monitor                   *
 ****************************************************/

@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
    .large-monitor-hidden {
        display: none !important;
    }
}

@media @computerAndBelow {
    .large-monitor-only {
        display: none !important;
    }
}

@media only screen and (min-width: @widescreenMonitorBreakpoint) {
    .large-monitor-only {
        display: none !important;
    }
}


/****************************************************
 *                   Widescreen                     *
 ****************************************************/

@media only screen and (min-width: @widescreenMonitorBreakpoint) {
    .widescreen-hidden {
        display: none !important;
    }
}

@media @largeMonitorAndBelow {
    .widescreen-only {
        display: none !important;
    }
}


/****************************************************
 *            Desktop and Portrait                  *
 ****************************************************/

// Desktop is computer + large monitor + widescreen
// Portrait is the inverse of that
@media only screen and (min-width: @computerBreakpoint) {
    .desktop-hidden, .portrait-only {
        display: none !important;
    }
}

@media @tabletAndBelow {
    .desktop-only, .portrait-hidden {
        display: none !important;
    }
}