Footer logic/styles #1636
Footer logic/styles #1636
Conversation
|
Added logic and styles for the footer:
|
| App Id: {CONFIG.appId} | ||
| </a> | ||
| ) : ( | ||
| '' |
| @@ -39,7 +39,7 @@ const DarkColors = ` | |||
|
|
|||
| /* Text */ | |||
| --color-text-primary: #ffffff; | |||
| --color-text-secondary1: #EDEDED | |||
| --color-text-secondary1: #EDEDED; | |||
| > a { | ||
| text-decoration: none; | ||
|
|
||
| &:focus, | ||
| &:hover { | ||
| text-decoration: underline; | ||
| } | ||
| } |
There was a problem hiding this comment.
| > a { | |
| text-decoration: none; | |
| &:focus, | |
| &:hover { | |
| text-decoration: underline; | |
| } | |
| } | |
| > a { | |
| &, | |
| &:focus, | |
| &:hover { | |
| text-decoration: underline; | |
| } | |
| } |
There was a problem hiding this comment.
Care to elaborate? Never seen it in use like this :)
There was a problem hiding this comment.
Is what I get. So in this case we merged all styles ( element + the focus/hover pseudo). But I intended it to be text-decoration: none by default and only on hover have the text-decoration.
There was a problem hiding this comment.
& duplicates current selector, try here
There was a problem hiding this comment.
ok, disregard me, I misread tex-decoration values as the same, shame on me 😞
There was a problem hiding this comment.
Still good to explore options! Thanks for checking :)
| > a:not(:last-of-type) { | ||
| margin: 0 1.6rem 0 0; | ||
| flex-flow: row nowrap; | ||
| display: flex; | ||
| position: relative; | ||
|
|
||
| &::after { | ||
| content: '-'; | ||
| position: absolute; | ||
| right: -1rem; | ||
| display: block; | ||
| } | ||
| } |
There was a problem hiding this comment.
| > a:not(:last-of-type) { | |
| margin: 0 1.6rem 0 0; | |
| flex-flow: row nowrap; | |
| display: flex; | |
| position: relative; | |
| &::after { | |
| content: '-'; | |
| position: absolute; | |
| right: -1rem; | |
| display: block; | |
| } | |
| } | |
| > a:not(:last-of-type)::after { | |
| content: " - "; | |
| white-space: pre; | |
| } |
I feel this would accomplish about the same with less css
There was a problem hiding this comment.
Yes, except that on hover it also applies the underline to the - character:
Tried doing text-decoration: none; on the parent a element, and then play with border-bottom. But same result otherwise. Using position: absolute in this case mitigates it...
There was a problem hiding this comment.
Understandable, have a nice day
Co-authored-by: Velenir <Velenir@users.noreply.github.com>
Co-authored-by: Velenir <Velenir@users.noreply.github.com>
Started working on the Footer logic for V2.