Skip to content

Commit

Permalink
improve styling for invalid state
Browse files Browse the repository at this point in the history
  • Loading branch information
@jab
jab committed Oct 6, 2015
1 parent f1a04f8 commit eb89618
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 4 deletions.
7 changes: 4 additions & 3 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,11 @@

<hr>

<form is="iron-form" style="outline: thin solid #ccc; padding: .5rem 2rem;">
<form is="iron-form" style="border: 1px solid #ccc; padding: 0 25px 25px;">
<h2>Demo within an iron-form</h2>
<google-recaptcha required sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"></google-recaptcha>
<button type="submit" >Submit</button>
<google-recaptcha required sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"
style="display: inline-block; padding-top: 2px; padding-left: 2px;"></google-recaptcha>
<div><button type="submit">Submit</button></div>
</form>

</body>
Expand Down
3 changes: 2 additions & 1 deletion google-recaptcha.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
display: block;
}
:host.invalid {
outline: 1px solid red;
border: 1px solid red;
border-radius: 3px;
}
</style>
<template><content></content></template>
Expand Down

2 comments on commit eb89618

@jab
Copy link
Owner Author

@jab jab commented on eb89618 Oct 6, 2015

Choose a reason for hiding this comment

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

Had to tweak styles above to get the demo to show something a little bit less unpolished:

screen shot 2015-10-06 at 14 17 37

Is this leaking styling into the wrong places? Having to add that style="display: inline-block; padding-top: 2px; padding-left: 2px; to the google-recaptcha element to fix the padding of the red "invalid" border set off some alarm bells. (Without this, the red border around the recaptcha would have asymmetrical padding and take up the full width of the container.)

Not sure how much of this should be left to users to add vs. provided out of the box.

@jab
Copy link
Owner Author

@jab jab commented on eb89618 Oct 6, 2015

Choose a reason for hiding this comment

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

Just remembered @cbalit's "maybe it will be nice to add a css mixin" and not sure what that would look like but sounds like it might address exactly the concerns I was just raising?

Please sign in to comment.