Add Size options for the Buttons with Expiry block

[cjyabraham]

@meganelizabethphillips would like some size options for our new buttons. Can you copy the "Size" option used in the Stackable button and copy the normal and large sizes? See this page for reference. Create these options:

• Small - this should look roughly the same size as the "Stackable Small" size
• Medium - this should look roughly the same size as the "Stackable Normal" size
• Large - this should be the default and look like our current button and the "Stackable Medium" size
• X-Large - this should look roughly the same size as the "Stackable Large" size

[cjyabraham]

@deigolocco heads-up that I changed the size options above ^

[rodmeurer]

@cjyabraham done!

https://pr-542-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-north-america/

[cjyabraham]

A few comments:

• the sizes don't look right. Each size seems too small.
• The default should be "Large" and this should match the size of the button the way you had it before
• border-radius now seems like it's being held at 4px for each size. Can you make it scale with the button size, so set it to .5rem

[rodmeurer]

@cjyabraham I think it's all ok now. Let us know if you need any other adjustments.

https://pr-542-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-north-america/

[cjyabraham]

@rodmeurer In the CSS, is there a reason you use em in some places and rem in others? Wouldn't it be better to use rem throughout to avoid inheriting any container styles?

[cjyabraham]

@meganelizabethphillips any comments on these button sizes?

[rodmeurer]

@cjyabraham sorry for the delay. All changed to rem now.

[meganelizabethphillips]

Do we have a large button size, or is that the default?

Thanks!

Megan Knight (Phillips), PMP Events Web Project Manager The Linux Foundation 1 Letterman Drive Building D, Suite D4700 San Francisco, CA 94129 E: mphillips@linuxfoundation.org

Why Attend Linux Foundation Events https://youtu.be/X_rLxfmLlYY Why Sponsor Linux Foundation Events https://youtu.be/Rr-9cIH42fE

On Thu, Apr 23, 2020 at 8:16 PM Chris Abraham notifications@github.com wrote:

@meganelizabethphillips https://github.com/meganelizabethphillips any comments on these button sizes https://pr-542-lfeventsci.pantheonsite.io/promcon/?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/LF-Engineering/lfevents/issues/539#issuecomment-618763858, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALM44SRVY6LLYEV5YOFEULTRODZAHANCNFSM4MM57ULQ .

[cjyabraham]

Correct. The default size is "Large".

[meganelizabethphillips]

Sorry, I guess I am getting confused. is there a reason we can't match the stackable names/sizes? Also, would it be possible to reduce the amount of shadow on the new buttons? I didn't notice it before and it's heavy. We don't use the shadow at all on the stackable buttons.

[cjyabraham]

@meganelizabethphillips We have matched the Stackable sizes (except for "Tiny" which I think is too small and I think you said you didn't need that size).

As for size names, I don't think the Stackable names are really well thought out. For example, they have both "Normal" and "Medium". Which one would you expect to be bigger? It's not clear. I've suggested size names here that are more logical and, I think, will serve us better going forward.

The shadow hasn't changed recently and matches the shadows on other buttons on the site. I feel the shadow gives the buttons some height and helps differentiate them from the expired buttons which have no shadow and can't be clicked on. It also helps to give a small click movement when you click it.

[cjyabraham]

I have deployed these new sizes and have broken out another issue to experiment with a lighter shadow.