AugurProject/augur-ui

// RESPONSIVE
// These are determined largely by the content being displayed NOT the device displaying the content.
// This allows for the most optimal presentation regardless of the device.

//     Raw Break Points
//     The breakpoints encompass:
//     Steps (1, 2, etc.) -- Account for large structural view reflows that may need to occur (Ascending in px)
//     Sub-Steps (1-1, 2-1, etc.) -- Account for fine styling adjustments between steps (Descending in px)

//     STEP 1
//     Smallest layout @ < 600px
//        Step
@step-1: 600px;
//        Rules
@breakpoint-1: ~"all and (max-width: @{step-1})";

//    STEP 2
//     Medium layout @ > 600px && <= 1200px
//        Steps
@step-1-1: 1319px;
@step-2: 1200px;
//        Sub-Steps
@step-2-0: 1152px;
@step-2-1: 1050px;
@step-2-15: 965px;
@step-2-2: 1090px; // Mobile tipping point
@step-2-25: 950px; // Top bar changes
@step-2-3: 450px;

@step-3: 575px; // Decreased Height
@step-3-4: 375px; // iphone X landscape height
@step-4: 320px; // extra small mobile: iPhone 5/se

//        Rules
@breakpoint-1-0: ~"all and (min-width: @{step-1}) and (max-width: @{step-1-1})";
@breakpoint-2: ~"all and (min-width: @{step-1}) and (max-width: @{step-2})";
@breakpoint-2-0: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-0})";
@breakpoint-2-1: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-1})";
@breakpoint-2-15: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-15})";
@breakpoint-2-2: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-2})"; // Mobile tipping point
@breakpoint-2-25: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-25})"; // Top bar changes
@breakpoint-2-3: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-3})";
@breakpoint-3: ~"all and (min-height: @{step-1}) and (max-height: @{step-3})";

//    STEP 3
//     Full layout @ > 1200px
//        Step
//            Explicit declaration of step not necessary here
//        Rules
@breakpoint-3: ~"all and (min-width: @{step-2})";

// Helper Breakpoints
// Smallish desktop (up to step 2-0)
@breakpoint-smallish-desktop: ~"all and (max-width: @{step-2-0})";
// Small desktop (up to step 2-1)
@breakpoint-small-desktop: ~"all and (max-width: @{step-2-1})";
// Very small desktop (up to step 2-15)
@breakpoint-smaller-desktop: ~"all and (max-width: @{step-2-15})";
//    Mobile (up to step-2-2)
@breakpoint-mobile: ~"all and (max-width: @{step-2-2})"; // 900
// Mobile (up to step-2-25)
@breakpoint-mobile-mid: ~"all and (max-width: @{step-2-25})"; // 850
// Mobile (up to step-1)
@breakpoint-mobile-medium: ~"all and (max-width: @{step-1})"; // 600
//    Mobile (up to step-2-2)
@breakpoint-mobile-small: ~"all and (max-width: @{step-2-3})"; // 450
// Mobile (up to step-4)
@breakpoint-mobile-extra-small: ~"all and (max-width: @{step-4})"; // 320
// Mobile (up-to-step-3)
@breakpoint-mobile-small-height: ~"all and (max-height: @{step-3})";
// Mobile (between step 3 and 4) iphoneX landscape
@breakpoint-mobile-smaller-height: ~"all and (max-height: @{step-3-4})";
// Mobile (up-to-step-4)
@breakpoint-mobile-extra-small-height: ~"all and (max-height: @{step-4})";