-
Notifications
You must be signed in to change notification settings - Fork 13
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
Tweak and consolidate date picker #2121
Conversation
✅ Thanks for the improvements! Browse a preview of your changes using the link below.
To edit notification comments on pull requests, go to your Netlify site configuration. |
62842a6
to
62cc483
Compare
@@ -35,6 +35,10 @@ textarea { | |||
input[type='date'] { | |||
appearance: textfield; | |||
display: revert; | |||
|
|||
&.a-text-input--full { | |||
-webkit-min-logical-width: calc(100% - 16px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not min-width
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok ok I went a min-width approach in c41101f
I realized the calc(100% - 16px) works on iOS, but then it is shorter on desktop browsers. Instead I set a min width/height to what it would be if the appearance was a textfield, and then set the appearance to none. This appears to look good across iOS Safari, desktop Safari, FF, and Chrome.
Merge two date picker examples we had, and make a regular and full width example.
Changes
Testing