From aa1ca65e7c9807c6d6020e39166536297fe1cdae Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 15 Jan 2022 22:45:57 +0100 Subject: chore: update sidebar and widgets styles I'm now using a widget that can be expanded/collapsed. It also allows me to handle more effectively widgets overflow and to avoid styles repetitions. However, with stylelint rule "no-descending-specificity", I'm not sure if the stylesheets are really logical... Maybe I should deactivate this rule. --- src/components/WidgetParts/List/List.module.scss | 47 ++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/components/WidgetParts/List/List.module.scss (limited to 'src/components/WidgetParts/List/List.module.scss') diff --git a/src/components/WidgetParts/List/List.module.scss b/src/components/WidgetParts/List/List.module.scss new file mode 100644 index 0000000..5da5741 --- /dev/null +++ b/src/components/WidgetParts/List/List.module.scss @@ -0,0 +1,47 @@ +@use "@styles/abstracts/functions" as fun; + +.list { + margin: 0; + padding: 0; + list-style-type: none; + + .list { + border: none; + border-top: fun.convert-px(1) solid var(--color-primary-dark); + } + + li { + margin: 0; + + &:not(:last-of-type) { + border-bottom: fun.convert-px(1) solid var(--color-primary-dark); + } + } + + a { + display: flex; + flex-flow: row nowrap; + width: 100%; + padding: var(--spacing-2xs) var(--spacing-xs); + background: none; + text-decoration: underline solid transparent 0; + transition: all 0.16s ease-in-out 0s, text-decoration-color 0s; + + &:hover, + &:focus { + background: var(--color-bg-secondary); + } + + &:focus { + color: var(--color-primary); + text-decoration-color: var(--color-primary-light); + text-decoration-thickness: 0.25ex; + } + + &:active { + background: var(--color-bg-tertiary); + text-decoration-color: transparent; + text-decoration-thickness: 0; + } + } +} -- cgit v1.2.3