@carbon/grid 10.43.1 → 11.1.0-rc.0

package/scss/_inlined/_mixins.scss

@@ -4,27 +4,12 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-//-------------------------------------------
-// Compatibility notes
-// ------------------------------------------
-//
-// This file is intended to be consumed and processed with node-sass/libsass.
-// Sass language features only available in dart-sass, such as `math.div`,
-// should not be used.
-//
-// The `.import` suffixed version of this file eg. `_filename.import.scss`
-// is intended to be compatible with dart-sass.
-//
-// Styles authored within this file must be duplicated to the corresponding
-// compatibility file to ensure we continue to support node-sass and dart-sass
-// in v10.
 
-// 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";
 
-@import '../vendor/@carbon/layout/breakpoint';
-@import 'prefix';
+@use 'config' as *;
+@use 'breakpoint' as *;
 
 // -----------------------------------------------------------------------------
 // Columns
@@ -33,33 +18,33 @@
 /// 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 [$carbon--grid-gutter] - The gutter for the grid system
-/// @param {Number} $collapsed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter
+/// @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 carbon--make-col-ready(
-  $gutter: $carbon--grid-gutter,
-  $condensed-gutter: $carbon--grid-gutter--condensed
+@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 / 2);
-  padding-left: ($gutter / 2);
+  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 / 2);
-    padding-left: ($condensed-gutter / 2);
+    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 / 2);
+    padding-right: ($gutter * 0.5);
     padding-left: 0;
   }
 }
@@ -70,7 +55,7 @@
 /// @param {Number} $columns - The total number of columns available
 /// @access private
 /// @group @carbon/grid
-@mixin carbon--make-col($span, $columns) {
+@mixin -make-col($span, $columns) {
   @if $span == 0 {
     display: none;
   } @else {
@@ -79,8 +64,13 @@
     // 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);
+    @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));
+    }
   }
 }
 
@@ -89,45 +79,50 @@
 /// @param {Number} $columns - The total number of columns available
 /// @access private
 /// @group @carbon/grid
-@mixin carbon--make-col-offset($span, $columns) {
-  $offset: $span / $columns;
+@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: percentage($offset);
+    margin-left: math.percentage($offset);
   }
 }
 
 /// Output the CSS required for all the columns in a given grid system.
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints in the grid system
-/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter for the 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 carbon--make-grid-columns(
-  $breakpoints: $carbon--grid-breakpoints,
-  $gutter: $carbon--grid-gutter
+@mixin -make-grid-columns(
+  $breakpoints: $grid-breakpoints,
+  $gutter: $grid-gutter
 ) {
   .#{$prefix}--col {
-    @include carbon--make-col-ready($gutter);
+    @include -make-col-ready($gutter);
   }
 
   @each $breakpoint in map-keys($breakpoints) {
-    $infix: carbon--breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
+    $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 carbon--make-col-ready($gutter);
+        @include -make-col-ready($gutter);
       }
     }
 
     .#{$prefix}--col#{$infix},
     .#{$prefix}--col#{$infix}--auto {
-      @include carbon--make-col-ready($gutter);
+      @include -make-col-ready($gutter);
     }
 
-    @include carbon--breakpoint($breakpoint, $breakpoints) {
+    @include breakpoint($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
@@ -146,14 +141,14 @@
 
       @for $i from 0 through $columns {
         .#{$prefix}--col#{$infix}-#{$i} {
-          @include carbon--make-col($i, $columns);
+          @include -make-col($i, $columns);
         }
       }
 
       @for $i from 0 through ($columns - 1) {
         @if not($infix == '') {
           .#{$prefix}--offset#{$infix}-#{$i} {
-            @include carbon--make-col-offset($i, $columns);
+            @include -make-col-offset($i, $columns);
           }
         }
       }
@@ -166,14 +161,14 @@
 // -----------------------------------------------------------------------------
 
 /// Define the properties for a selector assigned to a row in the grid system.
-/// @param {Number} $gutter [$carbon--grid-gutter] - The gutter in the grid system
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
 /// @access private
 /// @group @carbon/grid
-@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
+@mixin make-row($gutter: $grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * $gutter / 2;
-  margin-left: -1 * $gutter / 2;
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
 }
 
 // -----------------------------------------------------------------------------
@@ -184,7 +179,7 @@
 /// classes are useful for dropping the gutter in fluid situations.
 /// @access private
 /// @group @carbon/grid
-@mixin carbon--no-gutter {
+@mixin -no-gutter {
   .#{$prefix}--no-gutter,
   .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
     padding-right: 0;
@@ -200,17 +195,6 @@
   .#{$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;
-  }
 }
 
 // -----------------------------------------------------------------------------
@@ -219,96 +203,16 @@
 
 /// 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 [$carbon--grid-gutter] - The gutter in the grid system
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
 /// @access private
 /// @group @carbon/grid
-@mixin carbon--hang($gutter: $carbon--grid-gutter) {
+@mixin -hang($gutter: $grid-gutter) {
   .#{$prefix}--hang--start {
-    padding-left: ($gutter / 2);
+    padding-left: ($gutter * 0.5);
   }
 
   .#{$prefix}--hang--end {
-    padding-right: ($gutter / 2);
-  }
-
-  // Deprecated ☠️
-  .#{$prefix}--hang--left {
-    padding-left: ($gutter / 2);
-  }
-
-  .#{$prefix}--hang--right {
-    padding-right: ($gutter / 2);
-  }
-}
-
-// -----------------------------------------------------------------------------
-// Aspect ratio
-// -----------------------------------------------------------------------------
-
-/// 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);
-    }
-  }
-
-  // leaving here for legacy support
-  .#{$prefix}--aspect-ratio--object {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    padding-right: ($gutter * 0.5);
   }
 }
 
@@ -317,99 +221,96 @@ $carbon--aspect-ratios: (
 // -----------------------------------------------------------------------------
 
 /// 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 [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
+/// 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 carbon--make-container($breakpoints: $carbon--grid-breakpoints) {
+@mixin -make-container($breakpoints: $grid-breakpoints) {
   margin-right: auto;
   margin-left: auto;
 
-  @include carbon--set-largest-breakpoint();
+  @include -set-largest-breakpoint();
 
   @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name));
-    $margin: map-get($value, margin);
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
 
     @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
+      $prev-margin: map.get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
-        @include carbon--breakpoint($name) {
-          padding-right: #{($carbon--grid-gutter / 2) + $margin};
-          padding-left: #{($carbon--grid-gutter / 2) + $margin};
+        @include breakpoint($name) {
+          padding-right: #{($grid-gutter * 0.5) + $margin};
+          padding-left: #{($grid-gutter * 0.5) + $margin};
         }
       }
     } @else {
-      @include carbon--breakpoint($name) {
-        padding-right: #{($carbon--grid-gutter / 2) + $margin};
-        padding-left: #{($carbon--grid-gutter / 2) + $margin};
+      @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 [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
 /// @access private
 /// @group @carbon/grid
-@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
+@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: last-map-item($breakpoints);
 
-  max-width: map-get($largest-breakpoint, 'width');
+  max-width: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
 /// @access private
 /// @group @carbon/grid
-@mixin carbon--make-container-max-widths(
-  $breakpoints: $carbon--grid-breakpoints
-) {
+@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
-    @include carbon--breakpoint($name) {
-      max-width: map-get($value, width);
+    @include breakpoint($name) {
+      max-width: map.get($value, width);
     }
   }
 }
 
 /// Generate the CSS for a grid for the given breakpoints and gutters
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The default breakpoints
-/// @param {Number} $grid-gutter [$carbon--grid-gutter] - The default gutters
-/// @param {Number} $condensed-gutter [$carbon--grid-gutter--condensed] - The condensed mode gutter
+/// @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 carbon--grid(
-  $breakpoints: $carbon--grid-breakpoints,
-  $grid-gutter: $carbon--grid-gutter,
-  $condensed-gutter: $carbon--grid-gutter--condensed
+@mixin grid(
+  $breakpoints: $grid-breakpoints,
+  $grid-gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter--condensed
 ) {
   .#{$prefix}--grid {
-    @include carbon--make-container($breakpoints);
+    @include -make-container($breakpoints);
   }
 
-  @include carbon--largest-breakpoint($breakpoints) {
+  @include largest-breakpoint($breakpoints) {
     .#{$prefix}--grid--full-width {
       max-width: 100%;
     }
   }
 
   .#{$prefix}--row {
-    @include carbon--make-row();
+    @include make-row();
   }
 
   .#{$prefix}--row-padding [class*='#{$prefix}--col'],
   .#{$prefix}--col-padding {
-    padding-top: $grid-gutter / 2;
-    padding-bottom: $grid-gutter / 2;
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
   }
 
   .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: $condensed-gutter / 2;
-    padding-bottom: $condensed-gutter / 2;
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
   }
 
-  @include carbon--make-grid-columns($breakpoints, $grid-gutter);
-  @include carbon--no-gutter();
-  @include carbon--hang($grid-gutter);
-  @include carbon--aspect-ratio();
+  @include -make-grid-columns($breakpoints, $grid-gutter);
+  @include -no-gutter();
+  @include -hang($grid-gutter);
 }