feat(user card) - Update User Card to SHINE styles (part 2) #2123
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@stackoverflow/stacks": minor | ||
| "@stackoverflow/stacks-svelte": minor | ||
| --- | ||
|
|
||
| Update User Card to new SHINE design (part 2) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,6 +5,12 @@ | |
| --_uc-group-gap: var(--su4); | ||
| --_uc-row-gap: var(--su6); | ||
| --_uc-username-fs: unset; | ||
| --_uc-username-p: unset; | ||
| --_uc-username-bl: unset; | ||
| --_uc-username-bg: unset; | ||
| --_uc-username-fc: unset; | ||
| --_uc-username-d: unset; | ||
| --_uc-username-ai: unset; | ||
|
|
||
| // VARIANTS | ||
| // SIZES | ||
|
|
@@ -26,6 +32,10 @@ | |
| --_uc-username-fs: var(--fs-body3); | ||
| } | ||
|
|
||
| &&__deleted { | ||
| --_uc-username-fc: var(--black-400); | ||
| } | ||
|
|
||
| // CHILD ELEMENTS | ||
| & &--bio { | ||
| .truncation(3); | ||
|
|
@@ -41,6 +51,13 @@ | |
| } | ||
| } | ||
|
|
||
| & &--recognition-additional-bling { | ||
| &, | ||
| & a { | ||
| color: var(--theme-primary); | ||
| } | ||
| } | ||
|
|
||
| & &--rep { | ||
| color: var(--black-600); | ||
| font-weight: 600; | ||
|
|
@@ -51,13 +68,42 @@ | |
| } | ||
|
|
||
| & &--username { | ||
| align-items: var(--_uc-username-ai); | ||
| background-color: var(--_uc-username-bg); | ||
| border-left: var(--_uc-username-bl); | ||
| color: var(--_uc-username-fc); | ||
| display: var(--_uc-username-d); | ||
| font-size: var(--_uc-username-fs); | ||
| font-weight: 500; | ||
| min-width: 0; | ||
| overflow-wrap: break-word; | ||
| padding: var(--_uc-username-p); | ||
| word-break: break-all; | ||
| } | ||
|
|
||
| &--username__op { | ||
| --_uc-username-p: var(--su2) var(--su4) var(--su2) var(--su4); | ||
| --_uc-username-bg: var(--blue-100); | ||
| --_uc-username-bl: var(--su4) solid var(--blue-300); | ||
| --_uc-username-d: flex; | ||
| --_uc-username-ai: center; | ||
| .s-user-card__sm & { | ||
| --_uc-username-p: 0px var(--su4); | ||
| } | ||
| } | ||
|
|
||
| & &--awarded-third { | ||
|
Contributor
There was a problem hiding this comment. How are those used? I cannot find them in the docs snippets?
Collaborator
Author
There was a problem hiding this comment. It's used to set the colors for the additional bling trophies. It's used in the awarded snippet like so
Contributor
There was a problem hiding this comment. Thanks for clarifying. I would like to get @dancormier opinions on the API naming here. There is a part of me that still wonder if this "additional blings" are worthy to be included already in the central library or we should just have the consumer define them for now and only centralize when we see the pattern is used across several scenarios (not just collectives). What I mean is that instead of creating a Also cc @CGuindon for visibility.
Contributor
There was a problem hiding this comment. By the way what I am suggesting is some version of the last responsible moment. Do we have enough confidence to nail the API at this stage, with the information and the use case we have or is it better to keep things flexible for the time being and defer centralization of some styling to a later moment.
Collaborator
There was a problem hiding this comment. I'm good with "just have the consumer define them for now" but I think we wanted @dancormier to weigh in as well
Contributor
There was a problem hiding this comment.
💯 I would much prefer to push this onto the consumer as to not over complicate our API if we're not certain of our approach |
||
| color: var(--orange-400) | ||
| } | ||
|
|
||
| & &--awarded-second { | ||
| color: var(--blue-400) | ||
| } | ||
|
|
||
| & &--awarded-first { | ||
| color: var(--yellow-400) | ||
| } | ||
|
|
||
| // Layout specific | ||
| & &--column { | ||
| align-items: flex-start; | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.