sogo/UI/WebServerResources/scss/core/layout.scss

/// layout.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

// Import from sources for extends
// -------------------------------
@import "../../angular-material/src/core/services/layout/layout";


/**
 * Overrides angular-material sources
 * There are some redundancies (thanks to breakpoint-slicer) that can't
 * be easily overriden and are interfeering
 *
 */
// todo: look for redundancies and find a way to override them

// Responsive attributes
// Some value are defined in project variables
// ------------------------------

// hide means hide everywhere
/* Sizes:
  0    <= size < 600  Phone
  600  <= size < 960  Tablet
  960  <= size < 1200 Tablet-Landscape
  1200 <= size         PC
*/

// SMALL SCREEN
//@include at(sm) {
//  .hide-sm, .hide {
//    &:not(.show-sm):not(.show) {
//      display: none !important;
//    }
//  }
//
//  @include flex-order-for-name(sm);
//  @include layout-align-for-name(sm);
//  @include layout-for-name(sm);
//  @include flex-properties-for-name(sm);
//}

//@include from(md) {
//  .show-sm {
//    display: none !important;
//  }
//}


// BIGGER THAN SMALL SCREEN
//@include from(md) {
//  @include flex-order-for-name(gt-sm);
//  @include layout-align-for-name(gt-sm);
//  @include layout-for-name(gt-sm);
//  @include flex-properties-for-name(gt-sm);
//}

// MEDIUM SCREEN
//@include at(md) {
//  .hide, .hide-gt-sm {
//    &:not(.show-gt-sm):not(.show-md):not(.show) {
//      display: none;
//    }
//  }
//  .hide-md:not(.show-md):not(.show) {
//    display: none;
//  }
//
//  @include flex-order-for-name(md);
//  @include layout-align-for-name(md);
//  @include layout-for-name(md);
//  @include flex-properties-for-name(md);
//}

// BIGGER THAN MEDIUM SCREEN
//@include from(lg) {
//  @include flex-order-for-name(gt-md);
//  @include layout-align-for-name(gt-md);
//  @include layout-for-name(gt-md);
//  @include flex-properties-for-name(gt-md);
//  @include flex-order-for-name(lg);
//  @include layout-align-for-name(lg);
//  @include layout-for-name(lg);
//  @include flex-properties-for-name(lg);
//}
// BIGGER THAN LARGE SCREEN
//@include  from(lg) {
//  .hide, .hide-gt-sm, .hide-gt-md {
//    &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
//      display: none;
//    }
//  }
//  .hide-lg:not(.show-lg):not(.show) {
//    display: none;
//  }
//}

// BIGGER THAN X-LARGE SCREEN in needed
//@include from(xl) {
//  .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
//    &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
//      display: none;
//    }
//  }
//
//  @include flex-order-for-name(gt-lg);
//  @include layout-align-for-name(gt-lg);
//  @include layout-for-name(gt-lg);
//  @include flex-properties-for-name(gt-lg);
//}


// Utility classes to compensate for the the xml mandatory attribute values
// ------------------------------------------------------------------------
//$selectors: layout, layout-align, layout-padding, layout-margin, layout-wrap, layout-fill,
//flex, hide, show, show-sm;

//@include attributesToClasses($selectors);
//
// We need to silently extend this class
//%md-layout-fill {
//  margin: 0;
//  min-height: 100%;
//  width: 100%;
//}

.md-flex {
  flex: 1 1 auto;
}

.md-flex-fix {
  flex: 1 1 0;
}

// Generate responsive columns
// ----------------------------------------------------------------------------
//@mixin responsive-columns($breakpoint, $query) {
//  $cols: map-get($base-grid-total-columns, $breakpoint);
//  $colWidth: ((100 / $cols) * 1vw);
//  // there must be a way to escape the rule but we didn't found-out
//  @if ($query == 'from') {
//    @include from($breakpoint)  {
//      @for $i from 1 to $cols {
//        .cols-#{$i}, {
//          max-width: ($colWidth * $i);
//          flex: 1 1 ($colWidth * $i);
//        }
//      }
//    }
//  } @else {
//    @include at($breakpoint) {
//      @for $i from 1 to $cols {
//        .cols-#{$i} {
//          max-width: ($colWidth * $i);
//          flex: 1 1 ($colWidth * $i);
//        }
//      }
//    }
//  }
//}
//@include responsive-columns('md', 'at');
//@include responsive-columns('lg', 'from');

// Utility to implement a specific one without extending
// todo: include error handling

@mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
   $cols: map-get($base-grid-total-columns, $breakpoint);
   $colWidth: ((100 / $cols) * 1vw);
     max-width: ($colWidth * $nb);
     flex: $grow $shrink ($colWidth * $nb);
}

// Rows are included in padded containers, margins are used for vertical spacing
// ----------------------------------------------------------------------------
//[layout="row"].md-layout-margin {
//  margin-right: 0;
//  margin-left: 0;
//}

// App container for responsive
.sg-app-content {
  @include to(sm) {
    width: 100%;
    overflow-x: hidden;
  }

}