Skip to content

Switch components - #181

Merged
rhyneav merged 10 commits into
papercss:developfrom
Phreshhh:feture-switch-component
Feb 8, 2019
Merged

rhyneav merged 10 commits into
papercss:developfrom
Phreshhh:feture-switch-component

Conversation

@Phreshhh

Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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.

@rhyneav rhyneav left a comment

Copy link
Copy Markdown
Member

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

Phreshhh commented Feb 1, 2019

Copy link
Copy Markdown
Contributor Author

Hi @rhyneav !

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

@rhyneav

rhyneav commented Feb 8, 2019

Copy link
Copy Markdown
Member

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