Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Copying colors not working correctly #453

Open
you06 opened this issue Jun 20, 2018 · 4 comments
Open

Copying colors not working correctly #453

you06 opened this issue Jun 20, 2018 · 4 comments
Labels

Comments

@you06
Copy link

you06 commented Jun 20, 2018

I was using https://uigradients.com/#Margo to generate gradient CSS code.

copy

When I click copy, I get the following CSS.

background: #FFEFBA;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #FFFFFF, #FFEFBA);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #FFFFFF, #FFEFBA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

The gradient order is reversed.

@tomdreamevil
Copy link

Colour copying reverts to #ffffff on the Kyoto page also:
https://uigradients.com/#Kyoto

Looks like the list item id's are reverting to c-ffffff instead of the actual colours?
image

@ghosh
Copy link
Owner

ghosh commented Jun 25, 2018

@you06 @tomdreamevil Thank you for opening this issue.

<span class="codeblock__property">background</span>: <span class="codeblock__spec">{{ this.gradient.colors[0] | lowercase }}</span>; <span class="codeblock__comment">/* fallback for old browsers */</span>
<span class="codeblock__property">background</span>: -webkit-linear-gradient({{ this.direction }}, <span class="codeblock__spec">{{ [...this.gradient.colors].join(', ') | lowercase }}</span>); <span class="codeblock__comment">/* Chrome 10-25, Safari 5.1-6 */</span>
<span class="codeblock__property">background</span>: linear-gradient({{ this.direction }}, <span class="codeblock__spec">{{ [...this.gradient.colors].join(', ') | lowercase }}</span>); <span class="codeblock__comment">/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */</span>

We would need to reverse the array of colors being rendered in the modal.

[...this.gradient.colors].join(', ')

to

[...this.gradient.colors].reverse().join(', ')

This should fix this.

@max-ci
Copy link
Contributor

max-ci commented Oct 10, 2018

#497 Fix

@joshuabalduff
Copy link

It is still doing this just fyi

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants