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/style/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;
  }

}