Skip to content

Conversation

Phreshhh
Copy link
Contributor

Brief description

Switch components.

Issue: Switch component #121

Sample pictures

switch components

Further details

2x2+1 variable styled switches.

  • Default inline switch style with square and circle form. (first 4 row)
  • Default outline switch style with square and circle form. (second 4 row)
  • Tile styled switches. (last row)

@Phreshhh
Copy link
Contributor Author

I don't understand this alphabetical sorting.. Why good/better?
The code is much unreadable and cuz' this so hard interpretable for humans, who write it.

@TotomInc
Copy link
Contributor

You're right, especially when I see this:

bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;

and instead as humans we expect to see

position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
cursor: pointer;

We will take into consideration proper lint rules when working for the v2 of PaperCSS.

Copy link
Member

@rhyneav rhyneav left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

100% agree about the lint rules with you guys. The rationale behind doing it alphabetically is to avoid bike-shedding by not having to think about where to put position vs color vs shadow properties; it’s all in the same order every time. That said, maybe there’s a happy medium where these position elements can be put together...

Anyways, these switches look amazing! Really well done! The initial comments I have are to make sure you are using the colors given in the config file rather than hardcoding them with the switches. Same with the shadows. But these are really cool, excited to have these in PaperCSS. Thank you for your contribution!

@rhyneav rhyneav requested a review from koester February 1, 2019 12:40
@Phreshhh
Copy link
Contributor Author

Phreshhh commented Feb 1, 2019

Hi @rhyneav !

I want a bit different for better visibility :( , but I changed to variable colors.

@rhyneav
Copy link
Member

rhyneav commented Feb 8, 2019

I totally understand, it just makes the framework easier to customize when all of the colors use the variables.

But these look great! I really like the animations on all of them. Thank you for your contribution!

@rhyneav rhyneav merged commit 2bf563c into papercss:develop Feb 8, 2019
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.

3 participants