refactor(navigation): implemented left navigation new fabric styles #854
Conversation
|
Deploy preview for helix-ui ready! Built with commit e388937 |
badejayayesubabu
force-pushed
the
SURF-2172
branch
from
0346e32 to
4d34b4e
Compare
badejayayesubabu
force-pushed
the
SURF-2172
branch
from
4d34b4e to
a04b787
Compare
| border-left: 0.125rem solid $purple-500; | ||
| color: $purple-500; | ||
| margin-left: 0.3rem; | ||
| padding-left: 3.25rem !important; |
There was a problem hiding this comment.
We should avoid using !important...is it needed here?
There was a problem hiding this comment.
Yes I removed , Please review
| } | ||
| } | ||
|
|
||
| hx-reveal { | ||
| a.active { |
There was a problem hiding this comment.
You should be able to add styles based on the :active pseudo-class. Try using a:active here.
There was a problem hiding this comment.
Changes have been done, Please review
| @@ -45,7 +45,7 @@ <h2 id="left-navigation">Left (Vertical) Navigation</h2> | |||
| <hx-icon class="toggle-icon" type="angle-down"></hx-icon> | |||
| </hx-disclosure> | |||
| <hx-reveal id="section-1-2" open> | |||
| <a href="#">Link 3-1</a> | |||
| <a href="#" class="active">Link 3-1</a> | |||
There was a problem hiding this comment.
To show this state in our documentation, you can add documentation level styles.
There was a problem hiding this comment.
Changes have been done, Please review
badejayayesubabu
force-pushed
the
SURF-2172
branch
from
a04b787 to
42633b0
Compare
badejayayesubabu
force-pushed
the
SURF-2172
branch
5 times, most recently
from
f391ea2 to
c96654b
Compare
badejayayesubabu
force-pushed
the
SURF-2172
branch
2 times, most recently
from
db437aa to
06c5a77
Compare
| // ===== SUB-LEFT NAVIGATION ===== | ||
| #sub-leftNav, #section-1, #section-1-2 { | ||
| > a:active, > a:focus { | ||
| border-left: 0.125rem solid $purple-500; | ||
| color: $purple-500; | ||
| font-weight: 600; | ||
| outline: none; | ||
| } | ||
| } | ||
|
|
||
| #sub-leftNav a:active, #sub-leftNav a:focus { | ||
| margin-left: 0.3rem; | ||
| padding-left: 0.8rem; | ||
| } | ||
|
|
||
| #section-1 > a:active, #section-1 > a:focus { | ||
| margin-left: 1.25rem; | ||
| padding-left: 1.063rem; | ||
| } | ||
|
|
||
| #section-1-2 > a:active, #section-1-2 > a:focus { | ||
| margin-left: 2.5rem; | ||
| padding-left: 1.125rem; | ||
| } |
There was a problem hiding this comment.
@badejayayesubabu let's chat about this approach. Normally, we avoid using ids.
There was a problem hiding this comment.
Changes have been done. Please review
badejayayesubabu
force-pushed
the
SURF-2172
branch
2 times, most recently
from
d3e4be1 to
f45af00
Compare
| @@ -93,3 +99,32 @@ | |||
| } | |||
| }//hx-reveal | |||
| } | |||
|
|
|||
| // ===== SUB-LEFT NAVIGATION ===== | |||
There was a problem hiding this comment.
This is better and very close!
In the screenshot, please see:
Primary Selectedis bolder font when selected.Secondary Selectedhas normal font when selected.- Please verify we have all nav states (e.g, disabled).
- Please verify the proper padding when
selected. - The specs include an example
w/ Icon. We should have styles for these.
badejayayesubabu
force-pushed
the
SURF-2172
branch
2 times, most recently
from
520ab1a to
271d38c
Compare
badejayayesubabu
force-pushed
the
SURF-2172
branch
from
271d38c to
e388937
Compare
Description
<navigation>: implement left navigation new fabric stylesWhat are the relevant story cards/tickets? Any additional PRs or other references?
Jira: SURF-2172
Before you request a review for this PR:
yarn testto ensure all tests passed?