Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-29 12:55:21 +01:00
Code Issues Projects Releases Wiki Activity

[PS-2266][SG-1067] Desktop: restyle generator panel to be panel-like and avoid overflowing (#4480)

Browse Source 
* Port browser styles for generated password from browser to desktop

* Tweak styles

as the overall styles seem to diverge quite a bit from those of the browser extension, so things like the border color etc aren't as nicely defined, and there's already padding happening on the outer container, making the extra padding superfluous

* Wrap generator up as a `.box` / `.box-content` construct

adds the nice consistent box styles, same as the following blocks of content

* Wrap `.box` around both password AND username generated blocks

* Remove panel-like style, add browser extension border style
This commit is contained in:
Patrick H. Lauke 2023-02-17 15:16:40 +00:00 committed by GitHub
parent e206b6b457
commit 6c048d18f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/desktop/src/scss/misc.scss
View File

@ -191,23 +191,34 @@ p.lead {
.generated-block { .generated-block {
font-size: $font-size-large; font-size: $font-size-large;
font-family: $font-family-monospace; font-family: $font-family-monospace;
min-height: 50px; padding: 8px 10px 8px 0;
display: flex; display: flex;
align-items: center; border-radius: $border-radius;
justify-content: center; border: 1px solid;
@include themify($themes) {
background-color: transparent;
border-color: themed("borderColorAlt");
}
.modal-body & { .modal-body & {
margin: 10px; margin-top: 10px;
} }
.generated-wrapper { .generated-wrapper {
text-align: left; text-align: left;
width: 100%; width: 100%;
min-width: 0;
white-space: pre-wrap;
word-break: break-all;
padding: 15px;
} }
.action-buttons { .action-buttons {
display: flex; display: flex;
align-self: center; align-self: center;
height: 100%;
margin-left: 10px;
button { button {
margin-left: 10px; margin-left: 10px;

4
apps/desktop/src/scss/variables.scss
View File

@ -33,6 +33,7 @@ $background-color-alt2: #ededed;
$box-background-color: $background-color; $box-background-color: $background-color;
$box-background-hover-color: $list-item-hover; $box-background-hover-color: $list-item-hover;
$box-border-color: $border-color; $box-border-color: $border-color;
$border-color-alt: #c3c5c7;
$button-border-color: darken($border-color-dark, 12%); $button-border-color: darken($border-color-dark, 12%);
$button-background-color: white; $button-background-color: white;
@ -47,6 +48,7 @@ $themes: (
textColor: $text-color, textColor: $text-color,
borderColor: $border-color-dark, borderColor: $border-color-dark,
backgroundColor: $background-color, backgroundColor: $background-color,
borderColorAlt: $border-color-alt,
backgroundColorAlt: $background-color-alt, backgroundColorAlt: $background-color-alt,
backgroundColorAlt2: $background-color-alt2, backgroundColorAlt2: $background-color-alt2,
scrollbarColor: rgba(100, 100, 100, 0.2), scrollbarColor: rgba(100, 100, 100, 0.2),
@ -103,6 +105,7 @@ $themes: (
textColor: #ffffff, textColor: #ffffff,
borderColor: #2f2f2f, borderColor: #2f2f2f,
backgroundColor: #363636, backgroundColor: #363636,
borderColorAlt: #6e788a,
backgroundColorAlt: #3d3d3d, backgroundColorAlt: #3d3d3d,
backgroundColorAlt2: #222222, backgroundColorAlt2: #222222,
scrollbarColor: #4d4d4d, scrollbarColor: #4d4d4d,
@ -159,6 +162,7 @@ $themes: (
textColor: $nord5, textColor: $nord5,
borderColor: $nord0, borderColor: $nord0,
backgroundColor: $nord2, backgroundColor: $nord2,
borderColorAlt: $nord5,
backgroundColorAlt: $nord1, backgroundColorAlt: $nord1,
backgroundColorAlt2: $nord1, backgroundColorAlt2: $nord1,
scrollbarColor: $nord4, scrollbarColor: $nord4,