mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 16:53:34 +00:00
Vertical Vault Navigation (#6957)
* WIP admin console layout * Update icons * Migrate more things * Migrate the last pages * Move header to web * Fix story not working * Convert header component to standalone * Migrate org layout to standalone * Enable org switcher * Add AC to product switcher * Migrate provider portal to vertical nav * Migrate PM * Prettier fixes * Change AC and PP to use secondary variant layout & update logos * Remove full width setting * Remove commented code * Add header to report pages * Add provider portal banner * Fix banner for billing pages * Move vault title to header * Prevent scrollbar jumping * Move send button to header * Replace search input with bit-search * Remove unused files and css * Add banner * Tweak storage option * Fix duplicate nav item after merge * Migrate banner state to state provider framework * [AC-2078] Fix device approvals header * [PM-5861] Hide AC from product switcher for users that do not have access * [PM-5860] Fix Vault and Send page headers * [AC-2075] Fix missing link on reporting nav group * [AC-2079] Hide Payment Method and Billing History pages for self-hosted instances * [AC-2090] Hide reports/event log nav items for users that do not have permission * [AC-2092] Fix missing provider portal option in product switcher on page load * Add null check for organization in org layout component * [AC-2094] Fix missing page header for new client orgs page * [AC-2093] Update New client button styling * Fix failing test after merge * [PM-2087] Use disk-local for web layout banner * [PM-6041] Update banner copy to read "web app" * [PM-6094] Update banner link to marketing URL * [PM-6114] add CL container component to VVR pages (#7802) * create bit-container component * add container to all page components * Fix linting errors after merge with main * Fix product switcher stories * Fix web-header stories * mock org state properly in product switcher stories (#7956) * refactor: move web layout migration banner logic into a service (#7958) * make CL codeowner of web header files * move migration banner logic to service; update stories * [PM-5862] Ensure a sync has run before hiding navigation links * Remove leftover banner global state * Re-add dropped selfHosted ngIf * Add rel noreferrer * Remove comment --------- Co-authored-by: Shane Melton <smelton@bitwarden.com> Co-authored-by: Will Martin <contact@willmartian.com>
This commit is contained in:
Oscar Hinton
GitHub
@@ -90,14 +90,6 @@ img.logo-themed {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
padding: 40px 0 40px 0;
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed("separator");
|
||||
}
|
||||
}
|
||||
|
||||
hr,
|
||||
.dropdown-divider {
|
||||
@include themify($themes) {
|
||||
|
||||
@@ -199,17 +199,3 @@ button.no-btn {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
button.header-expandable {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* special case for Send options */
|
||||
h3 button.header-expandable .bwi {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
.navbar {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
@include themify($themes) {
|
||||
background-color: themed("navBackground");
|
||||
}
|
||||
|
||||
&.nav-background-alt {
|
||||
@include themify($themes) {
|
||||
background-color: themed("navBackgroundAlt");
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
> .nav-link {
|
||||
@include themify($themes) {
|
||||
font-weight: themed("navWeight");
|
||||
}
|
||||
}
|
||||
&.active > .nav-link {
|
||||
@include themify($themes) {
|
||||
font-weight: themed("navActiveWeight");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
margin-bottom: -20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active {
|
||||
@include themify($themes) {
|
||||
background: themed("navActiveBackground");
|
||||
border-color: themed("borderColor");
|
||||
}
|
||||
}
|
||||
|
||||
.org-nav {
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
@include themify($themes) {
|
||||
background-color: themed("navOrgBackgroundColor");
|
||||
border-bottom: 1px solid themed("borderColor");
|
||||
color: themed("textColor");
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.org-name {
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
span {
|
||||
display: block;
|
||||
font-size: $font-size-lg;
|
||||
@include themify($themes) {
|
||||
color: themed("textHeadingColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabbed-nav {
|
||||
@include themify($themes) {
|
||||
border-bottom: 1px solid themed("borderColor");
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
.org-nav,
|
||||
.tabbed-nav {
|
||||
.nav-tabs {
|
||||
border-bottom: none;
|
||||
|
||||
a {
|
||||
&:not(.active) {
|
||||
border-color: transparent;
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
padding-top: calc(#{$nav-link-padding-y} - 2px);
|
||||
@include themify($themes) {
|
||||
border-top: 3px solid themed("primary");
|
||||
border-bottom: 1px solid themed("backgroundColor");
|
||||
color: themed("linkColor");
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@include themify($themes) {
|
||||
color: themed("inputDisabledColor");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -24,7 +24,7 @@
|
||||
@import "~bootstrap/scss/_input-group";
|
||||
// @import "~bootstrap/scss/_custom-forms";
|
||||
@import "~bootstrap/scss/_nav";
|
||||
@import "~bootstrap/scss/_navbar";
|
||||
// @import "~bootstrap/scss/_navbar";
|
||||
@import "~bootstrap/scss/_card";
|
||||
// @import "~bootstrap/scss/_breadcrumb";
|
||||
// @import "~bootstrap/scss/_pagination";
|
||||
@@ -50,7 +50,6 @@
|
||||
@import "./callouts";
|
||||
@import "./cards";
|
||||
@import "./forms";
|
||||
@import "./navigation";
|
||||
@import "./modals";
|
||||
@import "./pages";
|
||||
@import "./plugins";
|
||||
|
||||
@@ -3,3 +3,8 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@import "../../../../libs/components/src/tw-theme.css";
|
||||
|
||||
/* Prevent page from jumping when showing scrollbar */
|
||||
html {
|
||||
margin-right: calc(-100vw + 100%);
|
||||
}
|
||||
|
||||
@@ -34,7 +34,6 @@ $small-font-size: 90%;
|
||||
$font-size-lg: 1.15rem;
|
||||
$code-font-size: 100%;
|
||||
|
||||
$navbar-padding-y: 0.75rem;
|
||||
$grid-gutter-width: 20px;
|
||||
$card-spacer-y: 0.6rem;
|
||||
|
||||
@@ -49,13 +48,6 @@ $dropdown-link-active-color: $dropdown-link-color;
|
||||
$dropdown-link-active-bg: rgba(#000000, 0.1);
|
||||
$dropdown-item-padding-x: 1rem;
|
||||
|
||||
$navbar-brand-font-size: 35px;
|
||||
$navbar-brand-height: 35px;
|
||||
$navbar-brand-padding-y: 0;
|
||||
$navbar-dark-color: rgba($white, 0.7);
|
||||
$navbar-dark-hover-color: rgba($white, 0.9);
|
||||
$navbar-nav-link-padding-x: 0.8rem;
|
||||
|
||||
$input-bg: #fbfbfb;
|
||||
$input-focus-bg: $white;
|
||||
$input-disabled-bg: #e0e0e0;
|
||||
@@ -197,12 +189,6 @@ $themes: (
|
||||
loadingSvg: url("../images/loading.svg"),
|
||||
logoSuffix: "dark",
|
||||
mfaLogoSuffix: ".png",
|
||||
navActiveBackground: $white,
|
||||
navActiveWeight: 600,
|
||||
navBackground: $primary,
|
||||
navBackgroundAlt: $secondary-alt,
|
||||
navOrgBackgroundColor: #fbfbfb,
|
||||
navWeight: 600,
|
||||
pwStrengthBackground: #e9ecef,
|
||||
separator: $secondary,
|
||||
separatorHr: rgb(0, 0, 0, 0.1),
|
||||
@@ -306,12 +292,6 @@ $themes: (
|
||||
loadingSvg: url("../images/loading-white.svg"),
|
||||
logoSuffix: "white",
|
||||
mfaLogoSuffix: "-w.png",
|
||||
navActiveBackground: $darkDarkBlue2,
|
||||
navActiveWeight: 600,
|
||||
navBackground: $darkDarkBlue1,
|
||||
navBackgroundAlt: $darkDarkBlue1,
|
||||
navOrgBackgroundColor: #161c26,
|
||||
navWeight: 400,
|
||||
pwStrengthBackground: $darkBlue2,
|
||||
separator: $darkBlue1,
|
||||
separatorHr: $darkBlue1,
|
||||
|
||||
Reference in New Issue
Block a user