@central-design-system/components 3.0.0-beta.8 → 3.0.0-rc.1

package/src/scss/modules/grid/_css-grid.scss

@@ -75,20 +75,18 @@
     --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
 
     display: grid;
-    width: 100%;
-    max-width: get-grid-width($breakpoints, largest-breakpoint-name($breakpoints));
-    padding-right: var(--cds-grid-margin);
-    padding-left: var(--cds-grid-margin);
-    margin-right: auto;
-    margin-left: auto;
     grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+    inline-size: 100%;
+    margin-inline: auto;
+    padding-inline: var(--cds-grid-margin);
+    max-inline-size: get-grid-width($breakpoints, largest-breakpoint-name($breakpoints));
   }
 
   // -----------------------------------------------------------------------------
   // Full width
   // -----------------------------------------------------------------------------
-  .#{$prefix}--css-grid--full-width {
-    max-width: 100%;
+  .#{$prefix}--css-grid--wide {
+    max-inline-size: 100%;
   }
 
   // -----------------------------------------------------------------------------
@@ -105,12 +103,10 @@
     --cds-grid-mode-start: var(--cds-grid-gutter-start);
     --cds-grid-mode-end: var(--cds-grid-gutter-end);
 
-    margin-right: var(--cds-grid-gutter-end);
-    margin-left: var(--cds-grid-gutter-start);
+    margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
 
     [dir='rtl'] & {
-      margin-right: var(--cds-grid-gutter-start);
-      margin-left: var(--cds-grid-gutter-end);
+      margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
     }
   }
 
@@ -134,13 +130,11 @@
   // -----------------------------------------------------------------------------
   .#{$prefix}--subgrid {
     display: grid;
-    margin-right: calc(var(--cds-grid-mode-end) * -1);
-    margin-left: calc(var(--cds-grid-mode-start) * -1);
     grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+    margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1);
 
     [dir='rtl'] & {
-      margin-right: calc(var(--cds-grid-mode-start) * -1);
-      margin-left: calc(var(--cds-grid-mode-end) * -1);
+      margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1);
     }
   }
 
@@ -171,11 +165,10 @@
   // Helper class to allow for text alignment in columns where the leading
   // gutter is missing (like narrow) or is reduced (like in condensed).
   .#{$prefix}--grid-column-hang {
-    margin-left: var(--cds-grid-column-hang);
+    margin-inline-start: var(--cds-grid-column-hang);
 
     [dir='rtl'] & {
-      margin-right: var(--cds-grid-column-hang);
-      margin-left: initial;
+      margin-inline: initial var(--cds-grid-column-hang);
     }
   }
 

package/src/scss/modules/grid/_flex-grid.scss

@@ -3,6 +3,12 @@
 
 @import 'mixins';
 
+/// 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 @cds/grid
 @mixin flex-grid(
   $breakpoints: $grid-breakpoints,
   $grid-gutter: $grid-gutter,
@@ -14,7 +20,7 @@
 
   @include cds-largest-breakpoint($breakpoints) {
     .#{$prefix}-grid--wide {
-      max-width: 100%;
+      max-inline-size: 100%;
     }
   }
 
@@ -24,13 +30,11 @@
 
   .#{$prefix}-row-padding [class*='#{$prefix}-col'],
   .#{$prefix}-col-padding {
-    padding-top: $grid-gutter * 0.5;
-    padding-bottom: $grid-gutter * 0.5;
+    padding-block: $grid-gutter * 0.5;
   }
 
   .#{$prefix}-grid-condensed [class*='#{$prefix}-col'] {
-    padding-top: $condensed-gutter * 0.5;
-    padding-bottom: $condensed-gutter * 0.5;
+    padding-block: $condensed-gutter * 0.5;
   }
 
   @include -make-grid-columns($breakpoints, $grid-gutter);

package/src/scss/modules/grid/_mixins.scss

@@ -24,8 +24,7 @@
 /// @access private
 /// @group @cds/grid
 @mixin -make-container($breakpoints: $grid-breakpoints) {
-  margin-right: auto;
-  margin-left: auto;
+  margin-inline: auto;
 
   @include -set-largest-breakpoint($breakpoints);
 
@@ -38,15 +37,13 @@
 
       @if $prev-margin != $margin {
         @include cds-breakpoint($name) {
-          padding-right: #{($grid-gutter * 0.5) + $margin};
-          padding-left: #{($grid-gutter * 0.5) + $margin};
-        }
-      } @else {
-        @include cds-breakpoint($name) {
-          padding-right: #{($grid-gutter * 0.5) + $margin};
-          padding-left: #{($grid-gutter * 0.5) + $margin};
+          padding-inline: #{($grid-gutter * 0.5) + $margin};
         }
       }
+    } @else {
+      @include cds-breakpoint($name) {
+        padding-inline: #{($grid-gutter * 0.5) + $margin};
+      }
     }
   }
 }
@@ -57,7 +54,7 @@
 /// @group @cds/grid
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: -last-map-item($breakpoints);
-  max-width: map.get($largest-breakpoint, 'width');
+  max-inline-size: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
@@ -67,7 +64,7 @@
 @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
     @include cds-breakpoint($name) {
-      max-width: map.get($value, width);
+      max-inline-size: map.get($value, width);
     }
   }
 }
@@ -88,22 +85,19 @@
   // 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);
+  inline-size: 100%;
+  padding-inline: $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);
+    padding-inline: $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;
+    padding-inline: 0 $gutter * 0.5;
   }
 }
 
@@ -122,8 +116,8 @@
     // 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: math.percentage(math.div($span, $columns));
     flex: 0 0 math.percentage(math.div($span, $columns));
+    max-inline-size: math.percentage(math.div($span, $columns));
   }
 }
 
@@ -137,9 +131,9 @@
   $offset: math.div($span, $columns);
 
   @if $offset == 0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   } @else {
-    margin-left: math.percentage($offset);
+    margin-inline-start: math.percentage($offset);
   }
 }
 
@@ -181,9 +175,9 @@
       // 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-inline-size: 100%;
       }
 
       .#{$prefix}-col-auto,
@@ -192,7 +186,7 @@
 
         // Reset earlier grid tiers
         width: auto;
-        max-width: 100%;
+        max-inline-size: 100%;
         flex: 0 0 auto;
       }
 
@@ -233,8 +227,7 @@
 @mixin -make-row($gutter: $grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * $gutter * 0.5;
-  margin-left: -1 * $gutter * 0.5;
+  margin-inline: -1 * $gutter * 0.5;
 }
 
 
@@ -249,18 +242,17 @@
 @mixin -no-gutter {
   .#{$prefix}-no-gutter,
   .#{$prefix}-row.#{$prefix}-no-gutter [class*='#{$prefix}-col'] {
-    padding-right: 0;
-    padding-left: 0;
+    padding-inline: 0;
   }
 
   .#{$prefix}-no-gutter--start,
   .#{$prefix}-row.#{$prefix}-no-gutter--start [class*='#{$prefix}-col'] {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   .#{$prefix}-no-gutter--end,
   .#{$prefix}-row.#{$prefix}-no-gutter--end [class*='#{$prefix}-col'] {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 }
 
@@ -275,11 +267,11 @@
 /// @group @carbon/grid
 @mixin -hang($gutter: $grid-gutter) {
   .#{$prefix}-hang--start {
-    padding-left: $gutter * 0.5;
+    padding-inline-start: $gutter * 0.5;
   }
 
   .#{$prefix}-hang--end {
-    padding-right: $gutter * 0.5;
+    padding-inline-end: $gutter * 0.5;
   }
 }
 

package/src/scss/themes/.deprecated

@@ -0,0 +1 @@
+Все переменные представленные в этой директории являются Deprecated и не рекомендуются к использованию.