feat(truncation): add truncation classes (carbon-design-system#757)

* feat(truncation): add truncation classes * fix(truncation): update truncation classes to be more semantic * fix(truncation): use prefix variable
asudoh · May 15, 2018 · e8fbe5b · e8fbe5b
1 parent 8045d5f
commit e8fbe5b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/globals/scss/_helper-classes.scss b/src/globals/scss/_helper-classes.scss
@@ -0,0 +1,16 @@
+.#{$prefix}--text-truncate--end {
+  width: 100%;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.#{$prefix}--text-truncate--front {
+  width: 100%;
+  display: inline-block;
+  direction: rtl;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
diff --git a/src/globals/scss/_layout.scss b/src/globals/scss/_layout.scss
@@ -1,6 +1,16 @@
-$breakpoints: (bp--xs--major: 500px, bp--sm--major: 768px, bp--md--major: 992px, bp--lg--major: 1200px);
+@import 'helper-classes';
 
-$padding: ('mobile': 3%, 'xs': 5%);
+$breakpoints: (
+  bp--xs--major: 500px,
+  bp--sm--major: 768px,
+  bp--md--major: 992px,
+  bp--lg--major: 1200px
+);
+
+$padding: (
+  'mobile': 3%,
+  'xs': 5%
+);
 
 @function padding($value) {
   @if map-has-key($padding, $value) {