Adding supporrting samples for border corners to support request #502 #553
Conversation
| <div id="output" class="output large hidden"> | ||
|
|
||
| <section id="default-example" class="default-example"> | ||
| <div id="example-element" class="transition-all">This is a box with bottom left rounded corner.</div> |
There was a problem hiding this comment.
Grammar nit: I think this should be "This is a box with a bottom left rounded corner." - here and in the other files.
| width: 250px; | ||
| height: 250px; | ||
| display: flex; | ||
| text-align: center; |
There was a problem hiding this comment.
I don't think you need text-align: center because you inherit it from https://github.com/mdn/interactive-examples/blob/master/css/editable-css.css#L50.
There was a problem hiding this comment.
I'm not sure why you need a different CSS for these and for the main border-radius example. It seems like this one works a little better, so could border-radius use this (probably renamed from border-radius-corner to just border-radius?
Or am I missing something here?
There was a problem hiding this comment.
Good point!
The reason why we need a different version is because border-radius uses a width of 80% while the corner cases use a fix with of 250px. Do you want to use 250px for all instead of 80% for the main case?
There was a problem hiding this comment.
I think it would be better to use 80% for both cases, unless there's a reason I'm missing that we sholdn't use it for the single-corner cases.
There was a problem hiding this comment.
Do you mean 80% for width and height? or 80% as it is on the main example?
There was a problem hiding this comment.
By the way, do you know how to see this comments more prominent? It took me about 10 minutes to find this comment since it was buried in a review. Thanks!
There was a problem hiding this comment.
Actually I think 80% width and 80% height, probably. That seems to work well with both border-radius and the single-corner variants..
By the way, do you know how to see this comments more prominent? It took me about 10 minutes to find this comment since it was buried in a review. Thanks!
Sorry, I should probably have added this comment at the top level. GitHub hides comments on code when another commit has changed the code, which is kind of annoying.
There was a problem hiding this comment.
@wbamberg, sounds good! In that case I went ahead and removed the "corner" only stylesheet and updated the size per your request.
…corner.css. Meta updated as well.
wbamberg
left a comment
There was a problem hiding this comment.
Thanks for these awesome examples @helmutgranda !
New branch to support corner cases for borders (associate properties). Specifically for request #502