@carbon/grid 10.42.0 → 11.0.0-rc.0

package/scss/modules/_css-grid.scss

@@ -1,347 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 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.
-//
-
-@use 'sass:list';
-@use 'sass:map';
-@use "sass:math";
-@use 'sass:meta';
-@use 'config' as *;
-@use 'breakpoint' as *;
-
-@mixin css-grid() {
-  display: grid;
-  max-width: 99rem;
-  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  margin-right: auto;
-  margin-left: auto;
-  column-gap: var(--cds-grid-gutter);
-  grid-template-columns: repeat(
-    var(--cds-grid-columns),
-    minmax(0, var(--cds-grid-column-size))
-  );
-}
-
-@mixin subgrid() {
-  display: grid;
-  column-gap: var(--cds-grid-gutter);
-  grid-template-columns: repeat(
-    var(--cds-grid-columns),
-    minmax(0, var(--cds-grid-column-size))
-  );
-}
-
-:root {
-  --cds-grid-columns: 4;
-  --cds-grid-column-size: 1fr;
-  --cds-grid-gutter: 2rem;
-  // Used to configure appropriate margins for condensed subgrids inside wide grids
-  --cds-grid-gutter-wide: 2rem;
-  --cds-grid-hang: 1rem;
-  --cds-grid-margin: 0;
-
-  @include breakpoint(md) {
-    --cds-grid-columns: 8;
-    --cds-grid-margin: 1rem;
-  }
-
-  @include breakpoint(lg) {
-    --cds-grid-columns: 16;
-  }
-
-  @include breakpoint(max) {
-    --cds-grid-margin: 1.5rem;
-  }
-}
-
-.#{$prefix}--css-grid {
-  @include css-grid();
-}
-
-.#{$prefix}--css-grid--12 {
-  @include css-grid();
-  @include breakpoint(lg) {
-    --cds-grid-columns: 12;
-  }
-}
-
-.#{$prefix}--subgrid {
-  @include subgrid();
-}
-
-.#{$prefix}--subgrid[class*='col'] {
-  display: grid;
-}
-
-// -----------------------------------------------------------------------------
-// Condensed
-// -----------------------------------------------------------------------------
-.#{$prefix}--css-grid--condensed {
-  --cds-grid-gutter: 1px;
-
-  column-gap: var(--cds-grid-gutter);
-  row-gap: var(--cds-grid-gutter);
-}
-
-// condensed subgrid inside wide
-.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
-  margin-right: calc((var(--cds-grid-gutter-wide) / 2) * -1);
-  margin-left: calc((var(--cds-grid-gutter-wide) / 2) * -1);
-}
-
-// -----------------------------------------------------------------------------
-// No Gutter
-// -----------------------------------------------------------------------------
-.#{$prefix}--css-grid--no-gutter {
-  // This is set to 0px (versus 0) so that the calc expression for padding for
-  // a grid container works as expected. Without the unit, the calc() will
-  // result in a value of 0.
-  // stylelint-disable-next-line length-zero-no-unit
-  --cds-grid-gutter: 0px;
-
-  column-gap: var(--cds-grid-gutter);
-}
-
-// -----------------------------------------------------------------------------
-// Full width
-// -----------------------------------------------------------------------------
-.#{$prefix}--css-grid--full-width {
-  max-width: 100%;
-}
-
-// -----------------------------------------------------------------------------
-// Column span
-// -----------------------------------------------------------------------------
-@mixin -column-span($i) {
-  @if $i == 0 {
-    display: none;
-  } @else {
-    --cds-grid-columns: #{$i};
-
-    display: block;
-    grid-column: span $i / span $i;
-  }
-}
-
-@for $i from 0 through 16 {
-  .#{$prefix}--col-span-#{$i} {
-    @include -column-span($i);
-  }
-}
-
-.#{$prefix}--col-span-auto {
-  grid-column: auto;
-}
-
-.#{$prefix}--col-span-100 {
-  grid-column: 1 / -1;
-}
-
-.#{$prefix}--col-span-25 {
-  --cds-grid-columns: 1;
-
-  grid-column: span 1;
-
-  @include breakpoint(md) {
-    --cds-grid-columns: 2;
-
-    grid-column: span 2;
-  }
-
-  @include breakpoint(lg) {
-    --cds-grid-columns: 4;
-
-    grid-column: span 4;
-  }
-}
-
-.#{$prefix}--col-span-50 {
-  --cds-grid-columns: 2;
-
-  grid-column: span 2;
-
-  @include breakpoint(md) {
-    --cds-grid-columns: 4;
-
-    grid-column: span 4;
-  }
-
-  @include breakpoint(lg) {
-    --cds-grid-columns: 8;
-
-    grid-column: span 8;
-  }
-}
-
-.#{$prefix}--col-span-75 {
-  --cds-grid-columns: 3;
-
-  grid-column: span 3;
-
-  @include breakpoint(md) {
-    --cds-grid-columns: 6;
-
-    grid-column: span 6;
-  }
-
-  @include breakpoint(lg) {
-    --cds-grid-columns: 12;
-
-    grid-column: span 12;
-  }
-}
-
-@each $name, $value in $grid-breakpoints {
-  $columns: map.get($value, columns);
-
-  @include breakpoint($name) {
-    @for $i from 0 through $columns {
-      .#{$prefix}--#{$name}\:col-span-#{$i} {
-        @include -column-span($i);
-      }
-    }
-
-    .#{$prefix}--#{$name}\:col-span-auto {
-      grid-column: auto;
-    }
-
-    .#{$prefix}--#{$name}\:col-span-100 {
-      grid-column: 1 / -1;
-    }
-
-    $quarterGridColumns: math.div($columns, 4);
-
-    .#{$prefix}--#{$name}\:col-span-75 {
-      $calc: $quarterGridColumns * 3;
-      --cds-grid-columns: #{$calc};
-
-      grid-column: span $calc / span $calc;
-    }
-
-    .#{$prefix}--#{$name}\:col-span-50 {
-      $calc: $quarterGridColumns * 2;
-      --cds-grid-columns: #{$calc};
-
-      grid-column: span $calc / span $calc;
-    }
-
-    .#{$prefix}--#{$name}\:col-span-25 {
-      --cds-grid-columns: #{$quarterGridColumns};
-
-      grid-column: span $quarterGridColumns / span $quarterGridColumns;
-    }
-  }
-}
-
-// -----------------------------------------------------------------------------
-// Column offset
-// -----------------------------------------------------------------------------
-@for $i from 1 through 17 {
-  .#{$prefix}--col-start-#{$i} {
-    grid-column-start: $i;
-  }
-
-  .#{$prefix}--col-end-#{$i} {
-    grid-column-start: $i;
-  }
-}
-
-.#{$prefix}--col-start-auto {
-  grid-column-start: auto;
-}
-
-.#{$prefix}--col-end-auto {
-  grid-column-start: end;
-}
-
-@each $name, $value in $grid-breakpoints {
-  $columns: map.get($value, columns);
-
-  @include breakpoint($name) {
-    // The `grid-column-start` property is *not* inclusive.
-    // It starts the column *at* the column, not *on* the column. We must
-    // ensure that there is one additional class available for each breakpoint.
-    @for $i from 1 through $columns + 1 {
-      .#{$prefix}--#{$name}\:col-start-#{$i} {
-        grid-column-start: $i;
-      }
-
-      .#{$prefix}--#{$name}\:col-end-#{$i} {
-        grid-column-end: $i;
-      }
-    }
-
-    .#{$prefix}--#{$name}\:col-start-auto {
-      grid-column-start: auto;
-    }
-
-    .#{$prefix}--#{$name}\:col-end-auto {
-      grid-column-start: end;
-    }
-  }
-}
-
-// -----------------------------------------------------------------------------
-// Hang
-// -----------------------------------------------------------------------------
-.#{$prefix}--hang {
-  padding-left: var(--cds-grid-hang);
-}
-
-// -----------------------------------------------------------------------------
-// Column gutter
-// -----------------------------------------------------------------------------
-.#{$prefix}--gutter {
-  padding-right: var(--cds-grid-hang);
-  padding-left: var(--cds-grid-hang);
-}
-
-.#{$prefix}--gutter-start {
-  padding-left: var(--cds-grid-hang);
-}
-
-[dir='rtl'] .#{$prefix}--gutter-start {
-  padding-right: var(--cds-grid-hang);
-}
-
-.#{$prefix}--gutter-end {
-  padding-right: var(--cds-grid-hang);
-}
-
-[dir='rtl'] .#{$prefix}--gutter-end {
-  padding-left: var(--cds-grid-hang);
-}
-
-// -----------------------------------------------------------------------------
-// Utilities
-// -----------------------------------------------------------------------------
-
-/// Justify items
-.#{$prefix}--justify-items-start {
-  justify-items: start;
-}
-
-.#{$prefix}--justify-items-end {
-  justify-items: end;
-}
-
-.#{$prefix}--justify-items-center {
-  justify-items: center;
-}
-
-/// Align items
-.#{$prefix}--align-items-start {
-  align-items: start;
-}
-
-.#{$prefix}--align-items-end {
-  align-items: end;
-}
-
-.#{$prefix}--align-items-center {
-  align-items: center;
-}

package/scss/vendor/@carbon/import-once/import-once.scss

@@ -1,27 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 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.
-//
-
-/// Used by `exports` mixin to track which modules have been imported
-/// @type Map
-/// @access public
-/// @group @carbon/import-once
-$imported-modules: () !default;
-
-/// Module export mixin that helps making sure a module is imported once and only once
-/// @access public
-/// @param {String} $name - Name of exported module
-/// @param {Bool} $warn [false] - Warn when a module has been already imported
-/// @content Declaration blocks to be imported
-/// @group @carbon/import-once
-@mixin exports($name, $warn: false) {
-  @if not(index($imported-modules, $name)) {
-    $imported-modules: append($imported-modules, $name) !global;
-    @content;
-  } @else if $warn == true {
-    @warn 'Module `#{$name}` has already been imported.';
-  }
-}

package/scss/vendor/@carbon/import-once/index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 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 'import-once';

package/scss/vendor/@carbon/layout/_breakpoint.scss

@@ -1,246 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 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.
-//
-
-// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
-@import 'convert';
-@import 'utilities';
-
-/// Carbon gutter size in rem
-/// @type Number
-/// @access public
-/// @group @carbon/layout
-$carbon--grid-gutter: carbon--rem(32px);
-
-/// Carbon condensed gutter size in rem
-/// @type Number
-/// @access public
-/// @group @carbon/layout
-$carbon--grid-gutter--condensed: carbon--rem(1px);
-
-// Initial map of our breakpoints and their values
-/// @type Map
-/// @access public
-/// @group @carbon/layout
-$carbon--grid-breakpoints: (
-  sm: (
-    columns: 4,
-    margin: 0,
-    width: carbon--rem(320px),
-  ),
-  md: (
-    columns: 8,
-    margin: carbon--rem(16px),
-    width: carbon--rem(672px),
-  ),
-  lg: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1056px),
-  ),
-  xlg: (
-    columns: 16,
-    margin: carbon--rem(16px),
-    width: carbon--rem(1312px),
-  ),
-  max: (
-    columns: 16,
-    margin: carbon--rem(24px),
-    width: carbon--rem(1584px),
-  ),
-) !default;
-
-/// Get the value of the next breakpoint, or null for the last breakpoint
-/// @param {String} $name - The name of the breakpoint
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
-/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
-/// @return {String}
-/// @access public
-/// @group @carbon/layout
-@function carbon--breakpoint-next(
-  $name,
-  $breakpoints: $carbon--grid-breakpoints,
-  $breakpoint-names: map-keys($breakpoints)
-) {
-  $n: index($breakpoint-names, $name);
-  @if $n != null and $n < length($breakpoint-names) {
-    @return nth($breakpoint-names, $n + 1);
-  }
-  @return null;
-}
-
-/// Get the value of the previous breakpoint, or null for the first breakpoint
-/// @param {String} $name - The name of the breakpoint
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
-/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
-/// @return {String}
-/// @access public
-/// @group @carbon/layout
-@function carbon--breakpoint-prev(
-  $name,
-  $breakpoints: $carbon--grid-breakpoints,
-  $breakpoint-names: map-keys($breakpoints)
-) {
-  $n: index($breakpoint-names, $name);
-  @if $n != null and $n > 1 {
-    @return nth($breakpoint-names, $n - 1);
-  }
-  @return null;
-}
-
-/// Check to see if the given breakpoint name
-/// @param {String} $name - The name of the breakpoint
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
-/// @return {Bool}
-/// @access public
-/// @group @carbon/layout
-@function carbon--is-smallest-breakpoint(
-  $name,
-  $breakpoints: $carbon--grid-breakpoints
-) {
-  @return index(map-keys($breakpoints), $name) == 1;
-}
-
-/// Returns the largest breakpoint name
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
-/// @return {String}
-/// @access public
-/// @group @carbon/layout
-@function carbon--largest-breakpoint-name(
-  $breakpoints: $carbon--grid-breakpoints
-) {
-  $total-breakpoints: length($breakpoints);
-  @return carbon--key-by-index($breakpoints, $total-breakpoints);
-}
-
-/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.
-/// @param {String} $name - The name of the breakpoint
-/// @return {String}
-/// @access public
-/// @group @carbon/layout
-@function carbon--breakpoint-infix($name) {
-  @return '-#{$name}';
-}
-
-/// Generate a media query from the width of the given breakpoint to infinity
-/// @param {String | Number} $name
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
-  @if type-of($name) == 'number' {
-    @media (min-width: $name) {
-      @content;
-    }
-  } @else if map-has-key($breakpoints, $name) {
-    $breakpoint: map-get($breakpoints, $name);
-    $width: map-get($breakpoint, width);
-    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
-      @content;
-    } @else {
-      @media (min-width: $width) {
-        @content;
-      }
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
-  }
-}
-
-/// Generate a media query for the maximum width of the given styles
-/// @param {String | Number} $name
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
-  @if type-of($name) == 'number' {
-    @media (max-width: $name) {
-      @content;
-    }
-  } @else if map-has-key($breakpoints, $name) {
-    // We borrow this logic from bootstrap for specifying the value of the
-    // max-width. The maximum width is calculated by finding the breakpoint and
-    // subtracting .02 from its value. This value is used instead of .01 to
-    // avoid rounding issues in Safari
-    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
-    $breakpoint: map-get($breakpoints, $name);
-    $width: map-get($breakpoint, width) - 0.02;
-    @media (max-width: $width) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
-  }
-}
-
-/// Generate a media query for the range between the lower and upper breakpoints
-/// @param {String | Number} $lower
-/// @param {String | Number} $upper
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin carbon--breakpoint-between(
-  $lower,
-  $upper,
-  $breakpoints: $carbon--grid-breakpoints
-) {
-  $is-number-lower: type-of($lower) == 'number';
-  $is-number-upper: type-of($upper) == 'number';
-  $min: if($is-number-lower, $lower, map-get($breakpoints, $lower));
-  $max: if($is-number-upper, $upper, map-get($breakpoints, $upper));
-
-  @if $min and $max {
-    $min-width: if(
-      not $is-number-lower and $min,
-      map-get($min, width) + 0.02,
-      $min
-    );
-    $max-width: if(
-      not $is-number-upper and $max,
-      map-get($max, width) - 0.02,
-      $max
-    );
-    @media (min-width: $min-width) and (max-width: $max-width) {
-      @content;
-    }
-  } @else if $min != null and $max == null {
-    @include carbon--breakpoint-up($lower) {
-      @content;
-    }
-  } @else if $min == null and $max != null {
-    @include carbon--breakpoint-down($upper) {
-      @content;
-    }
-  } @else {
-    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).';
-  }
-}
-
-/// Generate media query for the largest breakpoint
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
-  @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
-    @content;
-  }
-}
-
-/// Generate a media query for a given breakpoint
-/// @param {String | Number} $name
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
-/// @content
-/// @access public
-/// @group @carbon/layout
-@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
-  @include carbon--breakpoint-up($name, $breakpoints) {
-    @content;
-  }
-}