@carbon/type 10.40.0 → 10.42.0-rc.0

package/scss/vendor/@carbon/grid/modules/_css-grid.scss

@@ -0,0 +1,347 @@
+//
+// 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/grid/modules/_flex-grid.scss

@@ -0,0 +1,374 @@
+//
+// 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.
+//
+
+// Helpers for defining columns, rows, and containers are heavily inspired by,
+// and often derived from, bootstrap:
+// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
+
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:map';
+
+@use 'config' as *;
+@use 'breakpoint' as *;
+
+// -----------------------------------------------------------------------------
+// Columns
+// -----------------------------------------------------------------------------
+
+/// Used to initialize the default properties for a column class, most notably
+/// for setting width and default gutters when a column's breakpoint has not been
+/// hit yet.
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @param {Number} $collapsed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @access private
+/// @group @carbon/grid
+@mixin -make-col-ready(
+  $gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter--condensed
+) {
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  padding-right: $gutter * 0.5;
+  padding-left: $gutter * 0.5;
+
+  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
+  // side.
+  .#{$prefix}--row--condensed &,
+  .#{$prefix}--grid--condensed & {
+    padding-right: $condensed-gutter * 0.5;
+    padding-left: $condensed-gutter * 0.5;
+  }
+
+  // For our narrow use-case, our container hangs 16px into the gutter
+  .#{$prefix}--row--narrow &,
+  .#{$prefix}--grid--narrow & {
+    padding-right: $gutter * 0.5;
+    padding-left: 0;
+  }
+}
+
+/// Define the width of the column for a given span and column count.
+/// A width of 0 will hide the column entirely.
+/// @param {Number} $span - The number of columns covered
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @carbon/grid
+@mixin -make-col($span, $columns) {
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly include `display: block` to override
+    display: block;
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    @if meta.function-exists('div', 'math') {
+      max-width: math.percentage(math.div($span, $columns));
+      flex: 0 0 math.percentage(math.div($span, $columns));
+    } @else {
+      max-width: math.percentage(($span / $columns));
+      flex: 0 0 math.percentage(($span / $columns));
+    }
+  }
+}
+
+/// Create a column offset for a given span and column count.
+/// @param {Number} $span - The number of columns the offset should cover
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @carbon/grid
+@mixin -make-col-offset($span, $columns) {
+  $offset: 0;
+  @if meta.function-exists('div', 'math') {
+    $offset: math.div($span, $columns);
+  } @else {
+    $offset: ($span / $columns);
+  }
+  @if $offset == 0 {
+    margin-left: 0;
+  } @else {
+    margin-left: math.percentage($offset);
+  }
+}
+
+/// Output the CSS required for all the columns in a given grid system.
+/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints in the grid system
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin -make-grid-columns(
+  $breakpoints: $grid-breakpoints,
+  $gutter: $grid-gutter
+) {
+  .#{$prefix}--col {
+    @include -make-col-ready($gutter);
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint);
+    $columns: map.get(map.get($breakpoints, $breakpoint), columns);
+
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 0 through $columns {
+      .#{$prefix}--col#{$infix}-#{$i} {
+        @include -make-col-ready($gutter);
+      }
+    }
+
+    .#{$prefix}--col#{$infix},
+    .#{$prefix}--col#{$infix}--auto {
+      @include -make-col-ready($gutter);
+    }
+
+    @include breakpoint($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .#{$prefix}--col,
+      .#{$prefix}--col#{$infix} {
+        max-width: 100%;
+        flex-basis: 0;
+        flex-grow: 1;
+      }
+
+      .#{$prefix}--col--auto,
+      .#{$prefix}--col#{$infix}--auto {
+        width: auto;
+        // Reset earlier grid tiers
+        max-width: 100%;
+        flex: 1 0 0%;
+      }
+
+      @for $i from 0 through $columns {
+        .#{$prefix}--col#{$infix}-#{$i} {
+          @include -make-col($i, $columns);
+        }
+      }
+
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}--offset#{$infix}-#{$i} {
+            @include -make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Rows
+// -----------------------------------------------------------------------------
+
+/// Define the properties for a selector assigned to a row in the grid system.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin -make-row($gutter: $grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
+}
+
+// -----------------------------------------------------------------------------
+// No gutter
+// -----------------------------------------------------------------------------
+
+/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
+/// classes are useful for dropping the gutter in fluid situations.
+/// @access private
+/// @group @carbon/grid
+@mixin -no-gutter {
+  .#{$prefix}--no-gutter,
+  .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+
+  // Deprecated ☠️
+  .#{$prefix}--no-gutter--left,
+  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--right,
+  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Hang
+// -----------------------------------------------------------------------------
+
+/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin -hang($gutter: $grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: $gutter * 0.5;
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: $gutter * 0.5;
+  }
+
+  // Deprecated ☠️
+  .#{$prefix}--hang--left {
+    padding-left: $gutter * 0.5;
+  }
+
+  .#{$prefix}--hang--right {
+    padding-right: $gutter * 0.5;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Grid
+// -----------------------------------------------------------------------------
+
+/// Create the container for a grid. Will cause full-bleed for the grid unless
+/// max-width properties are added with `make-container-max-widths`
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @carbon/grid
+@mixin -make-container($breakpoints: $grid-breakpoints) {
+  margin-right: auto;
+  margin-left: auto;
+
+  @include -set-largest-breakpoint();
+
+  @each $name, $value in $breakpoints {
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
+
+    @if $prev-breakpoint {
+      $prev-margin: map.get($prev-breakpoint, margin);
+      @if $prev-margin != $margin {
+        @include breakpoint($name) {
+          padding-right: #{($grid-gutter * 0.5) + $margin};
+          padding-left: #{($grid-gutter * 0.5) + $margin};
+        }
+      }
+    } @else {
+      @include breakpoint($name) {
+        padding-right: #{($grid-gutter * 0.5) + $margin};
+        padding-left: #{($grid-gutter * 0.5) + $margin};
+      }
+    }
+  }
+}
+
+/// Get the last breakpoint width and set max-width to its value
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @carbon/grid
+@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
+  $largest-breakpoint: last-map-item($breakpoints);
+
+  max-width: map.get($largest-breakpoint, 'width');
+}
+
+/// Add in the max-widths for each breakpoint to the container
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @carbon/grid
+@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
+  @each $name, $value in $breakpoints {
+    @include breakpoint($name) {
+      max-width: map.get($value, width);
+    }
+  }
+}
+
+/// Generate the CSS for a grid for the given breakpoints and gutters
+/// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints
+/// @param {Number} $grid-gutter [$grid-gutter] - The default gutters
+/// @param {Number} $condensed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @access public
+/// @group @carbon/grid
+@mixin flex-grid(
+  $breakpoints: $grid-breakpoints,
+  $grid-gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter--condensed
+) {
+  .#{$prefix}--grid {
+    @include -make-container($breakpoints);
+  }
+
+  @include largest-breakpoint($breakpoints) {
+    .#{$prefix}--grid--full-width {
+      max-width: 100%;
+    }
+  }
+
+  .#{$prefix}--row {
+    @include -make-row();
+  }
+
+  .#{$prefix}--row-padding [class*='#{$prefix}--col'],
+  .#{$prefix}--col-padding {
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
+  }
+
+  .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
+  }
+
+  @include -make-grid-columns($breakpoints, $grid-gutter);
+  @include -no-gutter();
+  @include -hang($grid-gutter);
+}
+
+@if $flex-grid-columns == 12 {
+  $flex-12-column-grid: map.merge(
+    $grid-breakpoints,
+    (
+      lg:
+        map.merge(
+          map.get($grid-breakpoints, lg),
+          (
+            columns: 12,
+          )
+        ),
+      xlg:
+        map.merge(
+          map.get($grid-breakpoints, xlg),
+          (
+            columns: 12,
+          )
+        ),
+      max:
+        map.merge(
+          map.get($grid-breakpoints, max),
+          (
+            columns: 12,
+          )
+        ),
+    )
+  );
+
+  @include flex-grid($breakpoints: $flex-12-column-grid);
+} @else {
+  @include flex-grid();
+}