carbon-components/scss/globals/scss/_layout.scss

//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import 'helper-classes';
@import 'deprecate';
@import 'functions';

/// @deprecated (For v10) Superseded by `$carbon--grid-breakpoints`
/// @access private
/// @type Map
/// @group @mixin breakpoint/max-breakpoint
$breakpoints: (
  bp--xs--major: 500px,
  bp--sm--major: 768px,
  bp--md--major: 992px,
  bp--lg--major: 1200px,
  sm: 320px,
  md: 672px,
  lg: 1056px,
  xlg: 1312px,
  max: 1584px,
);

/// @deprecated (For v10) Was used primary for older grid
/// @access private
/// @type Map
/// @group @function padding();
$padding: (
  'mobile': 3%,
  'xs': 5%,
);

//-------------------------------------
// @function: padding($value)
//-------------------------------------
/// @deprecated (For v10) Was used primary for older grid
/// @group $padding map
/// @param {String} $value - mobile or xs
/// @example
//    .container {
//      padding: padding(mobile);
//    }
@function padding($value) {
  @if feature-flag-enabled('breaking-changes-x') {
    @warn ('`@function padding()` has been removed.');
  } @else {
    @if map-has-key($padding, $value) {
      @return map-get($padding, $value);
    } @else {
      @warn 'padding: could not find #{$value} in $padding map. Please make sure it is defined';
    }
  }
}

//-------------------------------------
// @mixin: breakpoint($size)
//-------------------------------------
/// @access public
/// @deprecated (For v10) Use `@include carbon--breakpoint()`
/// @param {String} $size - from $breakpoints map (see line 16)
/// @content will add media query for styles using breakpoint as min-width
/// @example
//    @include breakpoint(bp--md--major) {
//        - styles here --
//    }
@mixin breakpoint($size) {
  @include deprecate(
    '`@include breakpoint()` has been removed. ' + 'Use `@include carbon--breakpoint()` instead.',
    feature-flag-enabled('breaking-changes-x'),
    true
  ) {
    @if map-has-key($breakpoints, $size) {
      @media screen and (min-width: map-get($breakpoints, $size)) {
        @content;
      }
    } @else {
      @media (min-width: $size) {
        @content;
      }
    }
  }
}

//-------------------------------------
// @mixin: max-breakpoint($size)
//-------------------------------------
/// @access public
/// @deprecated (For v10) Use `@include carbon--breakpoint-down()`
/// @param {String} $size - from $breakpoints map (see line 16)
/// @example @include max-breakpoint('bp--xs--major') { ... };
/// @content will add media query for styles using breakpoint as max-width
@mixin max-breakpoint($size) {
  @include deprecate(
    '`@include max-breakpoint()` has been removed. ' + 'Use `@include carbon--breakpoint-down()` instead.',
    feature-flag-enabled('breaking-changes-x'),
    true
  ) {
    @if map-has-key($breakpoints, $size) {
      @media screen and (max-width: map-get($breakpoints, $size)) {
        @content;
      }
    } @else {
      @media (max-width: $size) {
        @content;
      }
    }
  }
}

//-------------------------------------
// @mixin: grid-container
//-------------------------------------
/// @access public
/// @deprecated (For v10) Use `@include carbon--make-container()`
/// @example
///   .some-container {
///     @include grid-container;
///   }
@mixin grid-container {
  @include deprecate(
    '`@include grid-container` has been removed. ' + 'Use `@include carbon--make-container()` instead.',
    feature-flag-enabled('breaking-changes-x'),
    true
  ) {
    width: 100%;
    padding-right: padding(mobile);
    padding-left: padding(mobile);

    @include breakpoint(bp--xs--major) {
      padding-right: padding(xs);
      padding-left: padding(xs);
    }
  }
}

/// @access private
/// @type Map
/// @group @function z();
$z-indexes: (
  modal: 9000,
  overlay: 8000,
  dropdown: 7000,
  header: 6000,
  footer: 5000,
  hidden: - 1,
  overflowHidden: - 1,
  floating: 10000,
);

//-------------------------------------
// @function: z($layer)
//-------------------------------------
/// @access public
/// @param {String} $layer value from $z-indexes map (See line 139)
/// @group $z-indexes
/// @example
//    .modal {
//       z-index: z('modal');
//    }
@function z($layer) {
  @if not map-has-key($z-indexes, $layer) {
    @warn 'No layer found for `#{$layer}` in $z-indexes map. Property omitted.';
  }

  @return map-get($z-indexes, $layer);
}