@carbon/charts 0.41.91 → 0.41.95

package/styles/vendor/@carbon/elements/scss/grid/_inlined/_mixins.scss

@@ -62,11 +62,11 @@
   } @else {
     // Explicitly include `display: block` to override
     display: block;
-    flex: 0 0 percentage($span / $columns);
     // 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.
     max-width: percentage($span / $columns);
+    flex: 0 0 percentage($span / $columns);
   }
 }
 
@@ -117,17 +117,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
+        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
         width: auto;
         // Reset earlier grid tiers
         max-width: 100%;
+        flex: 1 0 0%;
       }
 
       @for $i from 0 through $columns {
@@ -243,6 +243,8 @@ $carbon--aspect-ratios: (
   (1, 2),
   (4, 3),
   (3, 4),
+  (3, 2),
+  (2, 3),
   (1, 1)
 );
 
@@ -264,11 +266,11 @@ $carbon--aspect-ratios: (
   }
 
   .#{$prefix}--aspect-ratio::before {
-    float: left;
     width: 1px;
     height: 0;
     margin-left: -1px;
     content: '';
+    float: left;
   }
 
   .#{$prefix}--aspect-ratio::after {

package/styles/vendor/@carbon/elements/scss/grid/_mixins.scss

@@ -62,11 +62,11 @@
   } @else {
     // Explicitly include `display: block` to override
     display: block;
-    flex: 0 0 percentage($span / $columns);
     // 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.
     max-width: percentage($span / $columns);
+    flex: 0 0 percentage($span / $columns);
   }
 }
 
@@ -117,17 +117,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
+        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
         width: auto;
         // Reset earlier grid tiers
         max-width: 100%;
+        flex: 1 0 0%;
       }
 
       @for $i from 0 through $columns {
@@ -243,6 +243,8 @@ $carbon--aspect-ratios: (
   (1, 2),
   (4, 3),
   (3, 4),
+  (3, 2),
+  (2, 3),
   (1, 1)
 );
 
@@ -264,11 +266,11 @@ $carbon--aspect-ratios: (
   }
 
   .#{$prefix}--aspect-ratio::before {
-    float: left;
     width: 1px;
     height: 0;
     margin-left: -1px;
     content: '';
+    float: left;
   }
 
   .#{$prefix}--aspect-ratio::after {

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

@@ -11,30 +11,33 @@
 
 @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))
   );
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  column-gap: var(--cds-grid-gutter);
 }
 
 @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))
   );
-  column-gap: var(--cds-grid-gutter);
 }
 
 :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;
 
@@ -67,20 +70,8 @@
   @include subgrid();
 }
 
-.#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  margin-right: 0;
-  margin-left: 0;
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  --cds-grid-gutter: 2rem;
-
-  margin-right: 0;
-  margin-left: 0;
-  padding-right: calc(var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-gutter) / 2);
+.#{$prefix}--subgrid[class*='col'] {
+  display: grid;
 }
 
 // -----------------------------------------------------------------------------
@@ -98,17 +89,21 @@
   }
 }
 
-.#{$prefix}--css-grid--narrow > [class*='#{$prefix}--col'] {
+.#{$prefix}--css-grid--narrow > [class*='col'] {
   margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
 }
 
-// Narrow subgrid inside condensed
-.#{$prefix}--css-grid--condensed
+// Narrow subgrid inside wide
+.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--condensed)
   .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
-  --cds-grid-gutter: 2rem;
+  padding: 0;
+}
 
-  padding-right: calc(var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-gutter) / 2);
+// Narrow subgrid column inside wide
+.#{$prefix}--css-grid
+  .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow
+  > [class*='col'] {
+  margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
 }
 
 // -----------------------------------------------------------------------------
@@ -122,11 +117,10 @@
 }
 
 // condensed subgrid inside wide
-.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
-  margin-right: calc(
-    (var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1
-  );
-  margin-left: calc((var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1);
+.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--narrow)
+  .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);
 }
 
 // -----------------------------------------------------------------------------
@@ -142,6 +136,13 @@
   column-gap: var(--cds-grid-gutter);
 }
 
+// -----------------------------------------------------------------------------
+// Full width
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--full-width {
+  max-width: 100%;
+}
+
 // -----------------------------------------------------------------------------
 // Column span
 // -----------------------------------------------------------------------------
@@ -151,6 +152,7 @@
   } @else {
     --cds-grid-columns: #{$i};
 
+    display: block;
     grid-column: span $i / span $i;
   }
 }
@@ -268,7 +270,10 @@
   $columns: map.get($value, columns);
 
   @include breakpoint($name) {
-    @for $i from 1 through $columns {
+    // The `grid-column-end` and `grid-column-start` properies are *not* inclusive.
+    // It starts/ends 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;
       }
@@ -348,3 +353,67 @@
 .#{$prefix}--align-items-center {
   align-items: center;
 }
+
+// -----------------------------------------------------------------------------
+// Aspect ratio -- TODO: in v11 should this move to a new file to live alongside the AspectRatio component?
+// -----------------------------------------------------------------------------
+
+/// The aspect ratios that are used to generate corresponding aspect ratio
+/// classes in code
+/// @type List
+/// @access public
+/// @group @carbon/grid
+$carbon--aspect-ratios: (
+  (16, 9),
+  (9, 16),
+  (2, 1),
+  (1, 2),
+  (4, 3),
+  (3, 4),
+  (3, 2),
+  (2, 3),
+  (1, 1)
+);
+
+/// Generates the CSS classname utilities for the aspect ratios
+///
+/// CSS Tricks article on aspect ratios and all the different ways it can be done.
+/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
+///
+/// That article references an earlier article on the topic.
+/// https://keithjgrant.com/posts/2017/03/aspect-ratios/
+///
+/// @param {Number} $width width from an aspect ratio
+/// @param {Number} $height height from an aspect ratio
+/// @access private
+/// @group @carbon/grid
+@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
+  .#{$prefix}--aspect-ratio {
+    position: relative;
+  }
+
+  .#{$prefix}--aspect-ratio::before {
+    width: 1px;
+    height: 0;
+    margin-left: -1px;
+    content: '';
+    float: left;
+  }
+
+  .#{$prefix}--aspect-ratio::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  @each $aspect-ratio in $aspect-ratios {
+    $width: nth($aspect-ratio, 1);
+    $height: nth($aspect-ratio, 2);
+
+    .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
+      padding-top: percentage($height / $width);
+    }
+  }
+}
+
+@include carbon--aspect-ratio();

package/styles/vendor/@carbon/elements/scss/grid/modules/_mixins.scss

@@ -58,11 +58,11 @@
   } @else {
     // Explicitly include `display: block` to override
     display: block;
-    flex: 0 0 percentage($span / $columns);
     // 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.
     max-width: percentage($span / $columns);
+    flex: 0 0 percentage($span / $columns);
   }
 }
 
@@ -113,17 +113,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
+        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
         width: auto;
         // Reset earlier grid tiers
         max-width: 100%;
+        flex: 1 0 0%;
       }
 
       @for $i from 0 through $columns {

package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/_breakpoint.scss

@@ -196,8 +196,16 @@ $carbon--grid-breakpoints: (
   $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), $min);
-    $max-width: if(not $is-number-upper and $max, map-get($max, width), $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;
     }

package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_size.scss

@@ -0,0 +1,17 @@
+// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$size-xs: 1.5rem;
+$size-sm: 2rem;
+$size-md: 2.5rem;
+$size-lg: 3rem;
+$size-xl: 4rem;
+$size-2xl: 5rem;

package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/generated/_spacing.scss

@@ -66,6 +66,11 @@ $carbon--spacing-11: 5rem !default;
 /// @group @carbon/layout
 $carbon--spacing-12: 6rem !default;
 
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--spacing-13: 10rem !default;
+
 /// @type List
 /// @access public
 /// @group @carbon/layout
@@ -81,7 +86,8 @@ $carbon--spacing: (
   $carbon--spacing-09,
   $carbon--spacing-10,
   $carbon--spacing-11,
-  $carbon--spacing-12
+  $carbon--spacing-12,
+  $carbon--spacing-13
 );
 
 /// @type Number
@@ -155,3 +161,9 @@ $spacing-11: $carbon--spacing-11 !default;
 /// @group @carbon/layout
 /// @alias carbon--spacing-12
 $spacing-12: $carbon--spacing-12 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-13
+$spacing-13: $carbon--spacing-13 !default;

package/styles/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/modules/generated/_spacing.scss

@@ -66,6 +66,11 @@ $spacing-11: 5rem !default;
 /// @group @carbon/layout
 $spacing-12: 6rem !default;
 
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-13: 10rem !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/layout
@@ -82,4 +87,5 @@ $spacing: (
   spacing-10: $spacing-10,
   spacing-11: $spacing-11,
   spacing-12: $spacing-12,
+  spacing-13: $spacing-13,
 );

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

@@ -196,8 +196,16 @@ $carbon--grid-breakpoints: (
   $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), $min);
-    $max-width: if(not $is-number-upper and $max, map-get($max, width), $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;
     }

package/styles/vendor/@carbon/elements/scss/layout/generated/_size.scss

@@ -0,0 +1,17 @@
+// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$size-xs: 1.5rem;
+$size-sm: 2rem;
+$size-md: 2.5rem;
+$size-lg: 3rem;
+$size-xl: 4rem;
+$size-2xl: 5rem;

package/styles/vendor/@carbon/elements/scss/layout/generated/_spacing.scss

@@ -66,6 +66,11 @@ $carbon--spacing-11: 5rem !default;
 /// @group @carbon/layout
 $carbon--spacing-12: 6rem !default;
 
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--spacing-13: 10rem !default;
+
 /// @type List
 /// @access public
 /// @group @carbon/layout
@@ -81,7 +86,8 @@ $carbon--spacing: (
   $carbon--spacing-09,
   $carbon--spacing-10,
   $carbon--spacing-11,
-  $carbon--spacing-12
+  $carbon--spacing-12,
+  $carbon--spacing-13
 );
 
 /// @type Number
@@ -155,3 +161,9 @@ $spacing-11: $carbon--spacing-11 !default;
 /// @group @carbon/layout
 /// @alias carbon--spacing-12
 $spacing-12: $carbon--spacing-12 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-13
+$spacing-13: $carbon--spacing-13 !default;

package/styles/vendor/@carbon/elements/scss/layout/modules/generated/_spacing.scss

@@ -66,6 +66,11 @@ $spacing-11: 5rem !default;
 /// @group @carbon/layout
 $spacing-12: 6rem !default;
 
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-13: 10rem !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/layout
@@ -82,4 +87,5 @@ $spacing: (
   spacing-10: $spacing-10,
   spacing-11: $spacing-11,
   spacing-12: $spacing-12,
+  spacing-13: $spacing-13,
 );