Skip to content
This repository has been archived by the owner on Jul 12, 2019. It is now read-only.

fix(motion): use correct css property #326

Merged
merged 2 commits into from Feb 7, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/motion/README.md
Expand Up @@ -28,7 +28,7 @@ curves using either Sass or JavaScript.
### Sass

`@carbon/motion` exports a `carbon--motion` function and `carbon--motion` mixin that you can use to access the value of a motion
curve or include that curve as the `transition-property` for a
curve or include that curve as the `transition-timing-function` for a
selector. To use these helpers, you can do the following in your
project:

Expand All @@ -37,12 +37,12 @@ project:

.my-custom-selector {
// Supplies the standard easing curve, using the productive mode by default
transition-property: carbon--motion(standard);
transition-timing-function: carbon--motion(standard);
}

.my-custom-selector-v2 {
// Supplies the standard easing curve, but with the expressive mode, on the
// transition-property property for this selector
// transition-timing-function property for this selector
@include carbon--motion(standard, expressive);
}
```
Expand Down
10 changes: 5 additions & 5 deletions packages/motion/scss/motion.scss
Expand Up @@ -21,9 +21,9 @@ $carbon--easings: (
),
);

/// Get the transition property for a given easing and motion mode. Easings that
/// are currently supported include: standard, entrance, and exit. We also offer
/// two modes: productive and expressive.
/// Get the transition-timing-function for a given easing and motion mode.
/// Easings that are currently supported include: standard, entrance, and exit.
/// We also offer two modes: productive and expressive.
/// @param {String} $name - the name of the easing curve to apply
/// @param {String} $mode - the mode for the easing curve to use
/// @return {cubic-bezier}
Expand All @@ -40,9 +40,9 @@ $carbon--easings: (
}
}

/// Set the transition-property for a given easing and motion mode.
/// Set the transition-timing-function for a given easing and motion mode.
/// @param {String} $name - the name of the easing curve to apply
/// @param {String} $mode - the mode for the easing curve to use
@mixin carbon--motion($name, $mode) {
transition-property: carbon--motion($name, $mode);
transition-timing-function: carbon--motion($name, $mode);
}