bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00
Code Issues Releases Wiki Activity

Cherry pick finished/merged tabs component [CL-17] Tabs - Router (#2952)

Browse Source
This commit is contained in:
Shane Melton
2022-07-18 14:39:35 -07:00
parent 8a04d85a6b
commit d242721b26
2 changed files with 11 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/src/tabs/tab-group.component.html
View File

@@ -1,6 +1,6 @@
<div <div
role="tablist" role="tablist"
class="tw-flex tw-flex-wrap tw-pl-0 tw-my-0 tw-leading-5 tw-text-left tw-box-border" class="tw-inline-flex tw-flex-wrap tw-leading-5 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
> >
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>

25
libs/components/src/tabs/tab-item.component.ts
View File

@@ -14,29 +14,23 @@ export class TabItemComponent {
"tw-relative", "tw-relative",
"tw-py-2", "tw-py-2",
"tw-px-4", "tw-px-4",
"tw-leading-5",
"tw-text-left",
"tw-font-semibold", "tw-font-semibold",
"tw-bg-transparent",
"tw-transition", "tw-transition",
"tw-rounded-t", "tw-rounded-t",
"tw-border-0", "tw-border-0",
"tw-border-x",
"tw-border-t-4", "tw-border-t-4",
"tw-border-t-transparent", "tw-border-transparent",
"tw-border-b",
"tw-border-b-secondary-300",
"tw-border-solid", "tw-border-solid",
"tw-cursor-pointer", "!tw-text-main",
"tw-box-border",
"tw-text-main",
"hover:tw-underline", "hover:tw-underline",
"hover:tw-text-main", "hover:!tw-text-main",
"focus:tw-z-10", "focus:tw-z-10",
"focus:tw-outline-none", "focus:tw-outline-none",
"focus:tw-ring-2", "focus:tw-ring-2",
"focus:tw-ring-primary-700", "focus:tw-ring-primary-700",
"disabled:tw-bg-secondary-100", "disabled:tw-bg-secondary-100",
"disabled:tw-text-muted", "disabled:!tw-text-muted",
"disabled:tw-no-underline", "disabled:tw-no-underline",
"disabled:tw-cursor-not-allowed", "disabled:tw-cursor-not-allowed",
]; ];
@@ -44,16 +38,17 @@ export class TabItemComponent {
get activeClassList(): string { get activeClassList(): string {
return [ return [
"tw-border-x", "tw--mb-px",
"tw-border-x-secondary-300", "tw-border-x-secondary-300",
"tw-border-t-primary-500", "tw-border-t-primary-500",
"tw-border-b-transparent", "tw-border-b",
"tw-border-b-background",
"tw-bg-background", "tw-bg-background",
"tw-text-primary-500", "!tw-text-primary-500",
"hover:tw-border-t-primary-700", "hover:tw-border-t-primary-700",
"hover:!tw-text-primary-700", "hover:!tw-text-primary-700",
"focus:tw-border-t-primary-700", "focus:tw-border-t-primary-700",
"focus:tw-text-primary-700", "focus:!tw-text-primary-700",
].join(" "); ].join(" ");
} }
} }