search

standards-hub / docs

A documentation template made with Nuxt UI Pro.
https://standards-hub.github.io/docs/
0 stars 0 forks source link

ShAvatar Issues #108

Closed jpradocueva closed 5 months ago

jpradocueva commented 6 months ago

Style Properties

What are these three three style properties for and how can we manipulate them via wrapper? (assuming that it can be done)

FroudeDescartes commented 5 months ago

We can manipulate all four of these through the ui styling (ui.base, ui.socials, ui.icon & ui.avatar). These are some examples of how some effects will be displayed targeting different class:

  1. ui.base

    Here and in the next class, ui.socials, I will just color the background of what is wrapped by them, so you will have a visual representation that may give some ideas on how can we manipulate these classes further

Update: I have deleted the values for styling of the base since they had a minor impact on the overall looks. It is good option to have if we want to add some padding, margins, translate or anything else to the colored section on the picture below. image image

  1. ui.socials

    Here is the visual representation of what is wrapped by ui.socials image image

  2. ui.icon

    Here we can add a certain color (I have added hover:text-oma-500) to the icons that will take place, in this case when we hover over them (see Facebook icon) image image

  3. ui.avatar

    Here we can also apply some styles, but since we used grayscale for color of avatar, we are limited with colors. So here, I have added some shadow below avatar (drop-shadow-2xl) image image

jpradocueva commented 5 months ago

@FroudeDescartes, excellent! I will add these descriptions to the guidelines.