-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #834 from Orfium/feat/NDS-87_tabs_v5
[NDS-87] feat: Tabs
- Loading branch information
Showing
34 changed files
with
2,615 additions
and
0 deletions.
There are no files selected for viewing
335 changes: 335 additions & 0 deletions
335
src/__storyshots__/Updated Components/Tabs/Tabs-Playground.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,335 @@ | ||
| .emotion-0 { | ||
| width: -webkit-fit-content; | ||
| width: -moz-fit-content; | ||
| width: fit-content; | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-flex-direction: column; | ||
| -ms-flex-direction: column; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .emotion-1 { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| } | ||
|
|
||
| .emotion-1 [role='tab'] { | ||
| position: relative; | ||
| width: -webkit-fit-content; | ||
| width: -moz-fit-content; | ||
| width: fit-content; | ||
| font-family: Roboto; | ||
| font-weight: 400; | ||
| line-height: 1.375rem; | ||
| font-size: 1rem; | ||
| letter-spacing: 0.015625rem; | ||
| color: #111530; | ||
| } | ||
|
|
||
| .emotion-1 [role='tab'][data-selected] { | ||
| color: #194DCC; | ||
| font-family: Roboto; | ||
| font-weight: 500; | ||
| line-height: 1.375rem; | ||
| font-size: 1rem; | ||
| letter-spacing: 0.00625rem; | ||
| } | ||
|
|
||
| .emotion-1 [role='tab'][data-focus-visible]:after { | ||
| content: ''; | ||
| position: absolute; | ||
| border-radius: 0.125rem; | ||
| border: 0.25rem solid #A566FF; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='horizontal'] { | ||
| gap: 0.75rem; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after { | ||
| inset: -3px -8px; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='horizontal'] [role='tab'] { | ||
| border-bottom: 0.125rem solid rgba(200,206,255,0); | ||
| -webkit-transition: color ease-in-out 0.2s; | ||
| transition: color ease-in-out 0.2s; | ||
| -webkit-transition: border-bottom 0.2s; | ||
| transition: border-bottom 0.2s; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='horizontal'] [role='tab']:hover { | ||
| border-color: #8EAAEC; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='horizontal'] [role='tab'][data-selected] { | ||
| color: #194DCC; | ||
| font-family: Roboto; | ||
| font-weight: 500; | ||
| line-height: 1.375rem; | ||
| font-size: 1rem; | ||
| letter-spacing: 0.00625rem; | ||
| border-color: #175BF5; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='vertical'] { | ||
| -webkit-flex-direction: column; | ||
| -ms-flex-direction: column; | ||
| flex-direction: column; | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='vertical'] [role='tab'][data-focus-visible]:after { | ||
| inset: -4px -2px; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='vertical'] [role='tab'] { | ||
| padding: 0.75rem 0.5rem; | ||
| box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0); | ||
| -webkit-transition: color ease-in-out 0.2s; | ||
| transition: color ease-in-out 0.2s; | ||
| -webkit-transition: box-shadow 0.2s; | ||
| transition: box-shadow 0.2s; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='vertical'] [role='tab']:hover { | ||
| box-shadow: inset 0.125rem 0 0 0 #8EAAEC; | ||
| } | ||
|
|
||
| .emotion-1[data-orientation='vertical'] [role='tab'][data-selected] { | ||
| box-shadow: inset 0.125rem 0 0 0 #175BF5; | ||
| } | ||
|
|
||
| .emotion-2 { | ||
| cursor: pointer; | ||
| display: -webkit-box; | ||
| display: -moz-box; | ||
| display: -ms-flexbox; | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-align-items: center; | ||
| -moz-box-align: center; | ||
| -ms-flex-align: center; | ||
| -webkit-align-items: center; | ||
| -webkit-box-align: center; | ||
| -ms-flex-align: center; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| padding: 0.5rem; | ||
| } | ||
|
|
||
| .emotion-7 { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-flex-direction: row; | ||
| -ms-flex-direction: row; | ||
| flex-direction: row; | ||
| gap: 1.25rem; | ||
| padding: 0.75rem 0; | ||
| } | ||
|
|
||
| .emotion-8 { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-box-pack: center; | ||
| -ms-flex-pack: center; | ||
| -webkit-justify-content: center; | ||
| justify-content: center; | ||
| -webkit-align-items: center; | ||
| -webkit-box-align: center; | ||
| -ms-flex-align: center; | ||
| align-items: center; | ||
| height: 1.5rem; | ||
| width: -webkit-fit-content; | ||
| width: -moz-fit-content; | ||
| width: fit-content; | ||
| box-sizing: border-box; | ||
| gap: 0.25rem; | ||
| padding: 0.125rem 0.5rem; | ||
| cursor: auto; | ||
| background: #E9EFFB; | ||
| color: #194DCC; | ||
| border: 0.0625rem solid; | ||
| border-color: #B8CCFA; | ||
| border-radius: 0.25rem; | ||
| font-family: Roboto; | ||
| font-weight: 500; | ||
| line-height: 1.25rem; | ||
| font-size: 0.875rem; | ||
| letter-spacing: 0.015625rem; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| .emotion-9 { | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| <div> | ||
| <div | ||
| class="emotion-0" | ||
| data-orientation="horizontal" | ||
| data-rac="" | ||
| > | ||
| <div | ||
| aria-orientation="horizontal" | ||
| class="emotion-1" | ||
| data-orientation="horizontal" | ||
| data-rac="" | ||
| id="react-aria-:test-id:" | ||
| role="tablist" | ||
| > | ||
| <div | ||
| aria-controls="react-aria-:test-id:-tabpanel-geller" | ||
| aria-selected="true" | ||
| class="emotion-2" | ||
| data-key="geller" | ||
| data-rac="" | ||
| data-selected="true" | ||
| data-testid="ictinus_tab_geller" | ||
| id="react-aria-:test-id:-tab-geller" | ||
| role="tab" | ||
| tabindex="0" | ||
| > | ||
| <span> | ||
| Geller | ||
| </span> | ||
| </div> | ||
| <div | ||
| aria-selected="false" | ||
| class="emotion-2" | ||
| data-key="bing" | ||
| data-rac="" | ||
| data-testid="ictinus_tab_bing" | ||
| id="react-aria-:test-id:-tab-bing" | ||
| role="tab" | ||
| tabindex="-1" | ||
| > | ||
| <span> | ||
| Bing | ||
| </span> | ||
| </div> | ||
| <div | ||
| aria-selected="false" | ||
| class="emotion-2" | ||
| data-key="tribbiani" | ||
| data-rac="" | ||
| data-testid="ictinus_tab_tribbiani" | ||
| id="react-aria-:test-id:-tab-tribbiani" | ||
| role="tab" | ||
| tabindex="-1" | ||
| > | ||
| <span> | ||
| Tribbiani | ||
| </span> | ||
| </div> | ||
| <div | ||
| aria-selected="false" | ||
| class="emotion-2" | ||
| data-key="green" | ||
| data-rac="" | ||
| data-testid="ictinus_tab_green" | ||
| id="react-aria-:test-id:-tab-green" | ||
| role="tab" | ||
| tabindex="-1" | ||
| > | ||
| <span> | ||
| Green | ||
| </span> | ||
| </div> | ||
| <div | ||
| aria-selected="false" | ||
| class="emotion-2" | ||
| data-key="buffay" | ||
| data-rac="" | ||
| data-testid="ictinus_tab_buffay" | ||
| id="react-aria-:test-id:-tab-buffay" | ||
| role="tab" | ||
| tabindex="-1" | ||
| > | ||
| <span> | ||
| Buffay | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div | ||
| aria-labelledby="react-aria-:test-id:-tab-geller" | ||
| class="react-aria-TabPanel" | ||
| data-rac="" | ||
| id="react-aria-:test-id:-tabpanel-geller" | ||
| role="tabpanel" | ||
| tabindex="0" | ||
| > | ||
| <div | ||
| class="emotion-7" | ||
| > | ||
| <div | ||
| aria-label="Ross Geller" | ||
| aria-selected="false" | ||
| class="emotion-8" | ||
| data-testid="undefined_tag_container" | ||
| tabindex="-1" | ||
| > | ||
| <div | ||
| class="emotion-9" | ||
| > | ||
| Ross Geller | ||
| </div> | ||
| </div> | ||
| <div | ||
| aria-label="Monica Geller" | ||
| aria-selected="false" | ||
| class="emotion-8" | ||
| data-testid="undefined_tag_container" | ||
| tabindex="-1" | ||
| > | ||
| <div | ||
| class="emotion-9" | ||
| > | ||
| Monica Geller | ||
| </div> | ||
| </div> | ||
| <div | ||
| aria-label="Judy Geller" | ||
| aria-selected="false" | ||
| class="emotion-8" | ||
| data-testid="undefined_tag_container" | ||
| tabindex="-1" | ||
| > | ||
| <div | ||
| class="emotion-9" | ||
| > | ||
| Judy Geller | ||
| </div> | ||
| </div> | ||
| <div | ||
| aria-label="Jack Geller" | ||
| aria-selected="false" | ||
| class="emotion-8" | ||
| data-testid="undefined_tag_container" | ||
| tabindex="-1" | ||
| > | ||
| <div | ||
| class="emotion-9" | ||
| > | ||
| Jack Geller | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.