-
Notifications
You must be signed in to change notification settings - Fork 59
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: refactor side navigation #380
Changes from 9 commits
54f7f4d
321a0f4
b11c7b2
e3fda84
4528e27
deb0574
a90b601
be1d218
8782de5
c06fb2a
0ff9142
d92d662
873711f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,307 @@ | ||
@import "./settings"; | ||
@import "./mixins"; | ||
@import "./functions"; | ||
|
||
$block: #{$fd-namespace}-nested-list; | ||
|
||
@mixin fd-nested-list-arrow { | ||
font-family: "SAP-icons"; | ||
font-style: normal; | ||
font-weight: normal; | ||
color: var(--sapList_TextColor); | ||
font-size: var(--sapFontHeader4Size); | ||
text-decoration: inherit; | ||
text-transform: none; | ||
speak: none; | ||
} | ||
|
||
.#{$block} { | ||
@include fd-reset(); | ||
|
||
list-style: none; | ||
width: 100%; | ||
|
||
@for $i from 2 through 10 { | ||
.level-#{$i} { | ||
$paddingLeft: ($i - 2) + 2.75rem; | ||
|
||
.#{$block}__link, | ||
.#{$block}__content { | ||
padding-left: $paddingLeft; | ||
border-bottom: none; | ||
|
||
@include fd-selected() { | ||
border-bottom: var(--sapList_BorderWidth) solid; | ||
border-bottom-color: var(--sapList_SelectionBorderColor); | ||
} | ||
} | ||
} | ||
} | ||
|
||
@include fd-rtl() { | ||
@for $i from 2 through 10 { | ||
.level-#{$i} { | ||
$paddingRight: ($i - 2) + 2.75rem; | ||
|
||
.#{$block}__link, | ||
.#{$block}__content { | ||
padding-right: $paddingRight; | ||
padding-left: 0; | ||
} | ||
|
||
.#{$block}__item { | ||
border-bottom: none; | ||
|
||
@include fd-selected() { | ||
border-bottom: var(--sapList_BorderWidth) solid; | ||
border-bottom-color: var(--sapList_SelectionBorderColor); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
|
||
&[aria-hidden="true"] { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we want an additional There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. so I think we never fully decided how we want to handle all the aria-selectors. We've got it implemented many ways across components with no real standard. We should figure this out in general, but maybe not here. |
||
display: none; | ||
} | ||
|
||
&__item { | ||
@include fd-reset(); | ||
|
||
background: var(--sapList_Background); | ||
} | ||
|
||
&__link, | ||
&__content { | ||
@include fd-reset(); | ||
|
||
text-decoration: none; | ||
height: 2.75rem; | ||
display: flex; | ||
align-items: center; | ||
border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); | ||
|
||
@include fd-hover() { | ||
background: var(--sapList_Hover_Background); | ||
} | ||
|
||
@include fd-selected() { | ||
background: var(--sapList_SelectionBackgroundColor); | ||
border-bottom: var(--sapList_BorderWidth) solid; | ||
border-bottom-color: var(--sapList_SelectionBorderColor); | ||
|
||
@include fd-hover() { | ||
background: var(--sapList_Hover_SelectionBackground); | ||
} | ||
} | ||
|
||
@include fd-active() { | ||
background: var(--sapList_Active_Background); | ||
|
||
@include fd-selected() { | ||
background: var(--sapList_Active_Background); | ||
} | ||
|
||
.#{$block}__title, | ||
.#{$block}__icon { | ||
color: var(--sapList_Active_TextColor); | ||
} | ||
} | ||
|
||
&.has-child { | ||
&::after { | ||
@include fd-flex-center(); | ||
@include fd-nested-list-arrow(); | ||
|
||
min-height: 100%; | ||
min-width: 2.75rem; | ||
color: var(--sapList_TextColor); | ||
font-size: var(--sapFontHeader4Size); | ||
content: "\e066"; | ||
} | ||
|
||
@include fd-rtl() { | ||
&::after { | ||
content: "\e067"; | ||
} | ||
} | ||
|
||
&.is-expanded, | ||
&[aria-expanded="true"] { | ||
border-bottom: none; | ||
|
||
&::after { | ||
content: "\e1e2"; | ||
} | ||
|
||
@include fd-selected() { | ||
border-bottom: var(--sapList_BorderWidth) solid; | ||
border-bottom-color: var(--sapList_SelectionBorderColor); | ||
} | ||
} | ||
|
||
&:active::after { | ||
color: var(--sapList_Active_TextColor); | ||
} | ||
} | ||
} | ||
|
||
&__icon { | ||
@include fd-reset(); | ||
@include fd-flex-center(); | ||
|
||
height: 100%; | ||
min-width: 2.75rem; | ||
color: var(--sapList_TextColor); | ||
font-size: var(--sapFontHeader4Size); | ||
} | ||
|
||
&__title { | ||
@include fd-reset(); | ||
|
||
width: 100%; | ||
font-size: var(--sapFontLargeSize); | ||
color: var(--sapList_TextColor); | ||
white-space: nowrap; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
padding-right: 1rem; | ||
|
||
&:first-child { | ||
padding-left: 2.75rem; | ||
} | ||
|
||
@include fd-rtl() { | ||
text-align: right; | ||
padding-right: 0; | ||
padding-left: 1rem; | ||
|
||
&:first-child { | ||
padding-right: 2.75rem; | ||
padding-left: 0; | ||
} | ||
} | ||
} | ||
|
||
&__group-header { | ||
@include fd-reset(); | ||
|
||
height: 2.75rem; | ||
background: var(--sapList_GroupHeaderBackground); | ||
border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); | ||
color: var(--sapList_GroupHeaderTextColor); | ||
display: flex; | ||
align-items: flex-end; | ||
font-size: var(--sapFontSize); | ||
font-weight: bold; | ||
line-height: 2rem; | ||
padding-right: 1rem; | ||
padding-left: 1rem; | ||
white-space: nowrap; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
|
||
&--no-border { | ||
.#{$block}__item, | ||
.#{$block}__group-header { | ||
border-bottom: none; | ||
} | ||
} | ||
|
||
&--text-only { | ||
.#{$block}__link, | ||
.#{$block}__content { | ||
padding-left: 1rem; | ||
} | ||
|
||
.#{$block}__title { | ||
&:first-child { | ||
padding-left: 0; | ||
} | ||
} | ||
|
||
@for $i from 2 through 10 { | ||
.level-#{$i} { | ||
$paddingLeft: 1rem * $i; | ||
|
||
.#{$block}__link, | ||
.#{$block}__content { | ||
padding-left: $paddingLeft; | ||
border-bottom: none; | ||
|
||
@include fd-selected() { | ||
border-bottom: var(--sapList_BorderWidth) solid; | ||
border-bottom-color: var(--sapList_SelectionBorderColor); | ||
} | ||
} | ||
} | ||
|
||
&.level-#{$i} { | ||
$paddingLeft: ($i - 2) + 2.75rem; | ||
|
||
.#{$block}__link, | ||
.#{$block}__content { | ||
padding-left: $paddingLeft; | ||
} | ||
} | ||
} | ||
|
||
@include fd-rtl() { | ||
.#{$block}__link, | ||
.#{$block}__content { | ||
padding-right: 1rem; | ||
padding-left: 0; | ||
} | ||
|
||
.#{$block}__title { | ||
&:first-child { | ||
padding-right: 0; | ||
} | ||
} | ||
|
||
@for $i from 2 through 10 { | ||
.level-#{$i} { | ||
$paddingRight: 1rem * $i; | ||
|
||
.#{$block}__link, | ||
.#{$block}__content { | ||
padding-right: $paddingRight; | ||
padding-left: 0; | ||
} | ||
} | ||
|
||
&.level-#{$i} { | ||
$paddingRight: ($i - 2) + 2.75rem; | ||
|
||
.#{$block}__link, | ||
.#{$block}__content { | ||
padding-right: $paddingRight; | ||
padding-left: 0; | ||
} | ||
} | ||
} | ||
} | ||
} | ||
|
||
&--compact { | ||
.#{$block}__link, | ||
.#{$block}__content { | ||
height: 2rem; | ||
|
||
&.has-child { | ||
&::after { | ||
font-size: var(--sapFontSize); | ||
} | ||
} | ||
} | ||
|
||
.#{$block}__title { | ||
font-size: var(--sapFontSize); | ||
} | ||
|
||
.#{$block}__icon { | ||
font-size: var(--sapFontLargeSize); | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure if my previous comment got lost or if I forgot to post it, but do we want consuming libraries to have to calculate
.level-#
for classes?I love that this is a mixin, but it seems like a preferred hierarchy would just be something like this, and the styles would be ready to support all tiers of parent/child relationship (and padding size) up to a certain level.
Thoughts from the rest of the team? (pseudo-code)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Brad did rightly mention, though, that the tradeoff for this is making really deep parent-child selectors in the CSS 😕
.list > .list__item > list > .list__item {}
etcI'm not sure which is best
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@markpalfreeman what would you suggest?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can probably just leave it like this; both ways have tradeoffs.