Skip to content

Latest commit

 

History

History
110 lines (83 loc) · 3.08 KB

sass.md

File metadata and controls

110 lines (83 loc) · 3.08 KB
Raw

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/motion

✅carbon--easings [variable]

Common component easings

Source code 
$carbon--easings: (
  standard: (
    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
  ),
  entrance: (
    productive: cubic-bezier(0, 0, 0.38, 0.9),
    expressive: cubic-bezier(0, 0, 0.3, 1),
  ),
  exit: (
    productive: cubic-bezier(0.2, 0, 1, 0.9),
    expressive: cubic-bezier(0.4, 0.14, 1, 1),
  ),
);

✅carbon--motion [function]

Get the transition-timing-function for a given easing and motion mode

Source code 
@function carbon--motion($name, $mode: productive, $easings: $carbon--easings) {
  @if map-has-key($easings, $name) {
    $easing: map-get($easings, $name);
    @if map-has-key($easing, $mode) {
      @return map-get($easing, $mode);
    } @else {
      @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.';
    }
  } @else {
    @error 'Unable to find an easing named #{$name} in our supported easings.';
  }
}
  • Parameters:
Name Description Type Default value
$name Can be standard, entrance, or exit String —
$mode Can be productive or expressive String productive
$easings Easings map Map $carbon--easings

✅carbon--motion [mixin]

Set the transition-timing-function for a given easing and motion mode

Source code 
@mixin carbon--motion($name, $mode) {
  transition-timing-function: carbon--motion($name, $mode);
}
  • Parameters:
Name Description Type Default value
$name The name of the easing curve to apply String —
$mode The mode for the easing curve to use String —