@carbon/grid 10.0.0-rc.0 → 10.2.0

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

@@ -0,0 +1,237 @@
+//
+// 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(2px);
+
+// 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(16px),
+    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 brekapoint
+/// @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 brekapoint
+/// @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 brekapoint
+/// @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. Usesful for generate 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 up to the width of the given breakpoint name
+/// @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) {
+    $breakpoint: map-get($breakpoints, $name);
+    $width: map-get($breakpoint, width);
+    @if carbon--is-smallest-breakpoint($name, $breakpoints) {
+      @content;
+    } @else {
+      @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), $min);
+    $max-width: if(not $is-number-upper and $max, map-get($max, width), $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;
+  }
+}

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

@@ -0,0 +1,30 @@
+//
+// 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.
+//
+
+/// Default font size
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--base-font-size: 16px !default;
+
+/// Convert a given px unit to a rem unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+@function carbon--rem($px) {
+  @return ($px / $carbon--base-font-size) * 1rem;
+}
+
+/// Convert a given px unit to a em unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with em unit
+/// @access public
+/// @group @carbon/layout
+@function carbon--em($px) {
+  @return ($px / $carbon--base-font-size) * 1em;
+}

package/scss/vendor/@carbon/layout/_key-height.scss

@@ -0,0 +1,97 @@
+//
+// 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 'breakpoint';
+@import 'utilities';
+
+/// Get the column width for a given breakpoint
+/// @param {String} $breakpoint
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints]
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/layout
+@function carbon--get-column-width(
+  $breakpoint,
+  $breakpoints: $carbon--grid-breakpoints
+) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    $values: map-get($breakpoints, $breakpoint);
+    $width: map-get($values, width);
+    $margin: map-get($values, margin);
+    $columns: map-get($values, columns);
+
+    @return ($width - (2 * $margin)) / $columns;
+  } @else {
+    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
+  }
+}
+
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$carbon--key-height-scales: (
+  sm: (
+    carbon--get-column-width(sm),
+    carbon--get-column-width(sm) * 2,
+    carbon--get-column-width(sm) * 3,
+    carbon--get-column-width(sm) * 4,
+    carbon--get-column-width(sm) * 5,
+    carbon--get-column-width(sm) * 6,
+  ),
+  md: (
+    carbon--get-column-width(md),
+    carbon--get-column-width(md) * 2,
+    carbon--get-column-width(md) * 3,
+    carbon--get-column-width(md) * 4,
+    carbon--get-column-width(md) * 5,
+    carbon--get-column-width(md) * 6,
+  ),
+  lg: (
+    carbon--get-column-width(lg),
+    carbon--get-column-width(lg) * 2,
+    carbon--get-column-width(lg) * 3,
+    carbon--get-column-width(lg) * 4,
+    carbon--get-column-width(lg) * 5,
+    carbon--get-column-width(lg) * 6,
+    carbon--get-column-width(lg) * 7,
+    carbon--get-column-width(lg) * 8,
+  ),
+  xlg: (
+    carbon--get-column-width(xlg),
+    carbon--get-column-width(xlg) * 2,
+    carbon--get-column-width(xlg) * 3,
+    carbon--get-column-width(xlg) * 4,
+    carbon--get-column-width(xlg) * 5,
+    carbon--get-column-width(xlg) * 6,
+    carbon--get-column-width(xlg) * 7,
+    carbon--get-column-width(xlg) * 8,
+  ),
+  max: (
+    carbon--get-column-width(max),
+    carbon--get-column-width(max) * 2,
+    carbon--get-column-width(max) * 3,
+    carbon--get-column-width(max) * 4,
+    carbon--get-column-width(max) * 5,
+    carbon--get-column-width(max) * 6,
+    carbon--get-column-width(max) * 7,
+    carbon--get-column-width(max) * 8,
+  ),
+);
+
+/// Get the value of a key height step at a given breakpoint
+/// @param {String} $breakpoint
+/// @param {Number} $step
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/layout
+@function carbon--key-height($breakpoint, $step) {
+  @if map-has-key($carbon--key-height-scales, $breakpoint) {
+    @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
+  } @else {
+    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
+  }
+}

package/scss/vendor/@carbon/layout/_mini-unit.scss

@@ -0,0 +1,23 @@
+//
+// 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 'convert';
+
+/// Default mini-unit value
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--mini-unit-size: 8px !default;
+
+/// Get the value of the corresponding number of units
+/// @param {Number} $count - The number of units to get the value for
+/// @return {Number} In rem units
+/// @access public
+/// @group @carbon/layout
+@function carbon--mini-units($count) {
+  @return carbon--rem($carbon--mini-unit-size * $count);
+}