1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-10-09 05:57:40 +02:00
bitwarden-browser/src/scss/navigation.scss
Danny Murphy 0c02cfea2f
Dark Theme (#1017)
* Stylesheets

* Theme Configuration

* Options Area

* swal2 style

* Icon styling

* Fix theme not saving

* Update English

* Update messages.json

* dropdown and login logo

* btn-link and totp fix

* Organisation Styling

* Update webauthn-fallback.ts

* Fix contrast issues

* Add Paypal Container and Loading svg file

* Password Generator contrast fix

* Dark Mode Fix buttons and foreground

* Fix button hover

* Fix Styles after rebase

* Add hover on nav dropdown-item

* Disable Theme Preview

* Options Fix for Default Theme Changes

* Updated Colour Scheme

* Toast fix

* Button and Text Styling

* Options Update and Messages Fix

* Added Search Icon and Fixed Callout styling

* Add theme styling to Stripe

* Refactor logic for setting color

* Reorder logic to avoid race condition

* PayPal Loading and Misc Fix

* text-state bug fix

* Badge Colour Fix

* Remove PayPal Tagline

The colour cannot be styled so it's not visible on a dark theme

* Adding the Styling from #1131

* Update to New Design

* Form and Nav restyle

* Modal Opacity and Callout

* Nav Colours

* Missing Borders

* Light theme fix

* Improved border for listgroup

* Change Org Nav Colour

* Save theme to localStorage for persistence

* Undo change to Wired image

* !Important removal and tweaks

* Fix regression with navbar

* Light theme by default

* Refactor to use getEffectiveTheme

* Refactor theme constants to use enum

* Set theme in index.html before app loads

* Use scss selector to set logo image

* Export Sass to TS

* Update jslib

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
2021-09-30 08:06:20 +10:00

110 lines
2.5 KiB
SCSS

.navbar {
padding-left: 0;
padding-right: 0;
@include themify($themes) {
background-color: themed('navBackground') !important;
}
.dropdown-menu {
max-width: 300px;
min-width: 200px;
.dropdown-item-text {
line-height: 1.3;
@include themify($themes) {
color: themed('dropdownTextColor');
}
span, small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.text-muted {
@include themify($themes) {
color: themed('dropdownTextMuted') !important;
}
}
}
}
}
.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%;
}
.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');
color: themed('linkColor');
}
}
&.disabled {
@include themify($themes) {
color: themed('inputDisabledColor');
}
}
}
}
.org-name {
line-height: 1;
span {
display: block;
font-size: $font-size-lg;
@include themify($themes) {
color: themed('headingColor');
}
}
}
}