Skip to content

Add new component: show/hide truncated text#66

Open
srekoble wants to merge 2 commits into
una:gh-pagesfrom
srekoble:gh-pages
Open

Add new component: show/hide truncated text#66
srekoble wants to merge 2 commits into
una:gh-pagesfrom
srekoble:gh-pages

Conversation

@srekoble

@srekoble srekoble commented Oct 28, 2016

Copy link
Copy Markdown

A pure css component with :target, row truncation via line-clamp and flex
in order to create together a fully functional show/hide toggle for
truncated text(in specific rows that we assign with the help of a mixin).

Demo: http://codepen.io/srekoble/pen/WGBzZa

Cheers!

A pure css component with :target, row truncation via line-clamp and flex
in order to create together a fully functional show/hide toggle for
truncated text(in specific rows that we assign with the help of a mixin)
@PMK

PMK commented Nov 1, 2016

Copy link
Copy Markdown

Can you maybe add also Mozilla prefixes to support Firefox (if possible)?

@srekoble

srekoble commented Nov 1, 2016

Copy link
Copy Markdown
Author

Sure @PMK will add in the next hours

* Add prefixes for flex properties
* Update truncate mixin to provide fallback for firefox with
a usage of a gradient instead of line-clamp
@srekoble

srekoble commented Nov 2, 2016

Copy link
Copy Markdown
Author

@PMK updated solution with a firefox fallback.
demo: https://codepen.io/srekoble/pen/WGBzZa?editors=1100

@una

una commented Nov 17, 2016

Copy link
Copy Markdown
Owner

Super cool demo! I'm going to take a look and see if we could simplify it in any way for the website code

@srekoble

srekoble commented Nov 17, 2016

Copy link
Copy Markdown
Author

Thanks @una 😄 . Feel free to request/apply any changes.

@Myzel394

Copy link
Copy Markdown

When will this be added?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants