Skip to content

Latest commit

 

History

History
1681 lines (1225 loc) · 39.7 KB

sass.md

File metadata and controls

1681 lines (1225 loc) · 39.7 KB

Sass API

Mark Description
Public functions, mixins, placeholders, and variables
Private items - not supported outside package's build
⚠️ Deprecated items - may not be available in future releases

@carbon/layout

✅carbon--grid-gutter [variable]

Carbon gutter size in rem

Source code
$carbon--grid-gutter: carbon--rem(32px);

✅carbon--grid-gutter--condensed [variable]

Carbon condensed gutter size in rem

Source code
$carbon--grid-gutter--condensed: carbon--rem(2px);

✅carbon--grid-breakpoints [variable]

Source code
$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),
  ),
);

✅carbon--breakpoint-next [function]

Get the value of the next breakpoint, or null for the last breakpoint

Source code
@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;
}
  • Parameters:
Name Description Type Default value
$name The name of the brekapoint String
$breakpoints A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint Map $carbon--grid-breakpoints
$breakpoint-names A list of names from the $breakpoints map List map-keys($breakpoints)

✅carbon--breakpoint-prev [function]

Get the value of the previous breakpoint, or null for the first breakpoint

Source code
@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;
}
  • Parameters:
Name Description Type Default value
$name The name of the brekapoint String
$breakpoints A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint Map $carbon--grid-breakpoints
$breakpoint-names A list of names from the $breakpoints map List map-keys($breakpoints)

✅carbon--is-smallest-breakpoint [function]

Check to see if the given breakpoint name

Source code
@function carbon--is-smallest-breakpoint(
  $name,
  $breakpoints: $carbon--grid-breakpoints
) {
  @return index(map-keys($breakpoints), $name) == 1;
}
  • Parameters:
Name Description Type Default value
$name The name of the brekapoint String
$breakpoints A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint Map $carbon--grid-breakpoints

✅carbon--largest-breakpoint-name [function]

Returns the largest breakpoint name

Source code
@function carbon--largest-breakpoint-name(
  $breakpoints: $carbon--grid-breakpoints
) {
  $total-breakpoints: length($breakpoints);
  @return carbon--key-by-index($breakpoints, $total-breakpoints);
}
  • Parameters:
Name Description Type Default value
$breakpoints A map of breakpoints where the key is the name Map $carbon--grid-breakpoints

✅carbon--breakpoint-infix [function]

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.

Source code
@function carbon--breakpoint-infix($name) {
  @return '-#{$name}';
}
  • Parameters:
Name Description Type Default value
$name The name of the breakpoint String

✅carbon--breakpoint-up [mixin]

Generate a media query up to the width of the given breakpoint name

Source code
@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)})';
  }
}
  • Parameters:
Name Description Type Default value
$name String | Number
$breakpoints A map of breakpoints where the key is the name Map $carbon--grid-breakpoints

✅carbon--breakpoint-down [mixin]

Generate a media query for the maximum width of the given styles

Source code
@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)})';
  }
}
  • Parameters:
Name Description Type Default value
$name String | Number
$breakpoints A map of breakpoints where the key is the name Map $carbon--grid-breakpoints

✅carbon--breakpoint-between [mixin]

Generate a media query for the range between the lower and upper breakpoints

Source code
@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)}).';
  }
}
  • Parameters:
Name Description Type Default value
$lower String | Number
$upper String | Number
$breakpoints A map of breakpoints where the key is the name Map $carbon--grid-breakpoints

✅carbon--largest-breakpoint [mixin]

Generate media query for the largest breakpoint

Source code
@mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
  @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
    @content;
  }
}
  • Parameters:
Name Description Type Default value
$breakpoints A map of breakpoints where the key is the name Map $carbon--grid-breakpoints

✅carbon--breakpoint [mixin]

Generate a media query for a given breakpoint

Source code
@mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
  @include carbon--breakpoint-up($name, $breakpoints) {
    @content;
  }
}
  • Parameters:
Name Description Type Default value
$name String | Number
$breakpoints A map of breakpoints where the key is the name Map $carbon--grid-breakpoints

✅carbon--base-font-size [variable]

Default font size

Source code
$carbon--base-font-size: 16px;

✅carbon--rem [function]

Convert a given px unit to a rem unit

Source code
@function carbon--rem($px) {
  @return ($px / $carbon--base-font-size) * 1rem;
}
  • Parameters:
Name Description Type Default value
$px Number with px unit Number

✅carbon--em [function]

Convert a given px unit to a em unit

Source code
@function carbon--em($px) {
  @return ($px / $carbon--base-font-size) * 1em;
}
  • Parameters:
Name Description Type Default value
$px Number with px unit Number

✅carbon--get-column-width [function]

Get the column width for a given breakpoint

Source code
@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.';
  }
}
  • Parameters:
Name Description Type Default value
$breakpoint String
$breakpoints Map $carbon--grid-breakpoints

✅carbon--key-height-scales [variable]

Source code
$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,
  ),
);

✅carbon--key-height [function]

Get the value of a key height step at a given breakpoint

Source code
@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.';
  }
}
  • Parameters:
Name Description Type Default value
$breakpoint String
$step Number

✅carbon--mini-unit-size [variable]

Default mini-unit value

Source code
$carbon--mini-unit-size: 8px;

✅carbon--mini-units [function]

Get the value of the corresponding number of units

Source code
@function carbon--mini-units($count) {
  @return carbon--rem($carbon--mini-unit-size * $count);
}
  • Parameters:
Name Description Type Default value
$count The number of units to get the value for Number

✅carbon--spacing-01 [variable]

0.125rem (2px) spacing with default mini unit

Source code
$carbon--spacing-01: carbon--mini-units(0.25);

✅carbon--spacing-02 [variable]

0.25rem (4px) spacing with default mini unit

Source code
$carbon--spacing-02: carbon--mini-units(0.5);

✅carbon--spacing-03 [variable]

0.5rem (8px) spacing with default mini unit

Source code
$carbon--spacing-03: carbon--mini-units(1);

✅carbon--spacing-04 [variable]

0.75rem (12px) spacing with default mini unit

Source code
$carbon--spacing-04: carbon--mini-units(1.5);

✅carbon--spacing-05 [variable]

1rem (16px) spacing with default mini unit

Source code
$carbon--spacing-05: carbon--mini-units(2);

✅carbon--spacing-06 [variable]

1.5rem (24px) spacing with default mini unit

Source code
$carbon--spacing-06: carbon--mini-units(3);

✅carbon--spacing-07 [variable]

2rem (32px) spacing with default mini unit

Source code
$carbon--spacing-07: carbon--mini-units(4);

✅carbon--spacing-08 [variable]

2.5rem (40px) spacing with default mini unit

Source code
$carbon--spacing-08: carbon--mini-units(5);

✅carbon--spacing-09 [variable]

3rem (48px) spacing with default mini unit

Source code
$carbon--spacing-09: carbon--mini-units(6);

✅carbon--spacing-10 [variable]

4rem (64px) spacing with default mini unit

Source code
$carbon--spacing-10: carbon--mini-units(8);

✅carbon--spacing-11 [variable]

5rem (80px) spacing with default mini unit

Source code
$carbon--spacing-11: carbon--mini-units(10);

✅carbon--spacing-12 [variable]

6rem (96px) spacing with default mini unit

Source code
$carbon--spacing-12: carbon--mini-units(12);

✅carbon--spacing [variable]

All spacing increments in a map

Source code
$carbon--spacing: (
  $carbon--spacing-01,
  $carbon--spacing-02,
  $carbon--spacing-03,
  $carbon--spacing-04,
  $carbon--spacing-05,
  $carbon--spacing-06,
  $carbon--spacing-07,
  $carbon--spacing-08,
  $carbon--spacing-09,
  $carbon--spacing-10,
  $carbon--spacing-11,
  $carbon--spacing-12
);

✅spacing-01 [variable]

Source code
$spacing-01: $carbon--spacing-01;

✅spacing-02 [variable]

Source code
$spacing-02: $carbon--spacing-02;

✅spacing-03 [variable]

Source code
$spacing-03: $carbon--spacing-03;

✅spacing-04 [variable]

Source code
$spacing-04: $carbon--spacing-04;

✅spacing-05 [variable]

Source code
$spacing-05: $carbon--spacing-05;

✅spacing-06 [variable]

Source code
$spacing-06: $carbon--spacing-06;

✅spacing-07 [variable]

Source code
$spacing-07: $carbon--spacing-07;

✅spacing-08 [variable]

Source code
$spacing-08: $carbon--spacing-08;

✅spacing-09 [variable]

Source code
$spacing-09: $carbon--spacing-09;

✅spacing-10 [variable]

Source code
$spacing-10: $carbon--spacing-10;

✅spacing-11 [variable]

Source code
$spacing-11: $carbon--spacing-11;

✅spacing-12 [variable]

Source code
$spacing-12: $carbon--spacing-12;

✅carbon--layout-01 [variable]

1rem (16px) layout with default mini unit

Source code
$carbon--layout-01: carbon--mini-units(2);

✅carbon--layout-02 [variable]

1.5rem (24px) layout with default mini unit

Source code
$carbon--layout-02: carbon--mini-units(3);

✅carbon--layout-03 [variable]

2rem (32px) layout with default mini unit

Source code
$carbon--layout-03: carbon--mini-units(4);

✅carbon--layout-04 [variable]

3rem (48px) layout with default mini unit

Source code
$carbon--layout-04: carbon--mini-units(6);

✅carbon--layout-05 [variable]

4rem (64px) layout with default mini unit

Source code
$carbon--layout-05: carbon--mini-units(8);

✅carbon--layout-06 [variable]

4rem (96px) layout with default mini unit

Source code
$carbon--layout-06: carbon--mini-units(12);

✅carbon--layout-07 [variable]

10rem (160px) layout with default mini unit

Source code
$carbon--layout-07: carbon--mini-units(20);

✅carbon--layout [variable]

All layout increments in a map

Source code
$carbon--layout: (
  $carbon--layout-01,
  $carbon--layout-02,
  $carbon--layout-03,
  $carbon--layout-04,
  $carbon--layout-05,
  $carbon--layout-06,
  $carbon--layout-07
);

✅layout-01 [variable]

Source code
$layout-01: $carbon--layout-01;

✅layout-02 [variable]

Source code
$layout-02: $carbon--layout-02;

✅layout-03 [variable]

Source code
$layout-03: $carbon--layout-03;

✅layout-04 [variable]

Source code
$layout-04: $carbon--layout-04;

✅layout-05 [variable]

Source code
$layout-05: $carbon--layout-05;

✅layout-06 [variable]

Source code
$layout-06: $carbon--layout-06;

✅layout-07 [variable]

Source code
$layout-07: $carbon--layout-07;

✅carbon--fluid-spacing-01 [variable]

0vw fluid spacing

Source code
$carbon--fluid-spacing-01: 0;

✅carbon--fluid-spacing-02 [variable]

2vw fluid spacing

Source code
$carbon--fluid-spacing-02: 2vw;

✅carbon--fluid-spacing-03 [variable]

5vw fluid spacing

Source code
$carbon--fluid-spacing-03: 5vw;

✅carbon--fluid-spacing-04 [variable]

10vw fluid spacing

Source code
$carbon--fluid-spacing-04: 10vw;

✅carbon--fluid-spacing [variable]

All fluid spacing increments in a map

Source code
$carbon--fluid-spacing: (
  $carbon--fluid-spacing-01,
  $carbon--fluid-spacing-02,
  $carbon--fluid-spacing-03,
  $carbon--fluid-spacing-04
);

✅fluid-spacing-01 [variable]

Source code
$fluid-spacing-01: $carbon--fluid-spacing-01;

✅fluid-spacing-02 [variable]

Source code
$fluid-spacing-02: $carbon--fluid-spacing-02;

✅fluid-spacing-03 [variable]

Source code
$fluid-spacing-03: $carbon--fluid-spacing-03;

✅fluid-spacing-04 [variable]

Source code
$fluid-spacing-04: $carbon--fluid-spacing-04;

✅map-deep-get [function]

Map deep get

Source code
@function map-deep-get($map, $keys) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}
  • Parameters:
Name Description Type Default value
$map Map Map
$keys Key chain Arglist

✅carbon--key-by-index [function]

Provide a map and index, and get back the relevant key value

Source code
@function carbon--key-by-index($map, $index) {
  $keys: map-keys($map);
  @return nth($keys, $index);
}
  • Parameters:
Name Description Type Default value
$map Map Map
$index Key chain Integer

✅last-map-item [function]

Pass in a map, and get the last one in the list back

Source code
@function last-map-item($map) {
  $total-length: length($map);
  @return map-get($map, carbon--key-by-index($map, $total-length));
}
  • Parameters:
Name Description Type Default value
$map Map Map