search

ASU / asu-unity-stack

ASU Unity Design System
https://unity.web.asu.edu/
Other
11 stars 8 forks source link

fix(unity-bootstrap-theme): adjust endorsed-logo css #1238

Closed scott-williams-az closed 6 months ago

scott-williams-az commented 7 months ago

combine media queries and use css3 variable to implement

Links

Checklist

Browsers

scott-williams-az commented 7 months ago

@davidornelas11 @mlsamuelson What do you think of this css3 variable pattern. I think it can help in a lot of ways, but if we do not have a clear pattern it may end up confusing us. So I am open to ideas. @media query changes the var values and does not add any new rules.

WS2 or other platforms can then use the variable if needed, and will not have to use !important

So in this PR code, css variables are at the root style and I am trying to be specific about how the variables are named

#endorsed-logo {
  --endorsed-logo-display: block; // is meant for endorsed-logo attribute display
  --endorsed-logo-img-width: // is meant for endorsed-logo  img attribute width

Can you think of a other things we should lookout for or think about. We don't want css variable to start conflicting.

mlsamuelson commented 6 months ago

@scott-williams-az This pattern makes sense to me. I wonder about how best to surface this (or at least the functionality it enables) to consumers. Perhaps simply socializing it when possible. AND of course it would be a candidate for being a documented pattern under the https://asudev.jira.com/browse/UDS-1586 effort.

The naming convention is clear, though what do you think about avoiding using -y and instead being more explicit and granular with -top and -bottom in an attempt to align more closely with the naming convention of selector-property? Might make it more of a no-brainer what to name the variables.

I would like to get @bebaps 's opinion on it as well, as he's a good representative power-user of the theme.