bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 16:23:44 +00:00
Code Issues Releases Wiki Activity

feedback updates

Browse Source
This commit is contained in:
DanHillesheim
2022-10-20 16:33:29 -06:00
parent 1259cd0e31
commit 4d4b10f92f
7 changed files with 57 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/popup/components/set-pin.component.html
View File

@@ -7,7 +7,7 @@
</div> </div>
<div class="box"> <div class="box">
<div class="box-content"> <div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow> <div class="box-content-row box-content-row-flex no-hover no-bg" appBoxRow>
<div class="row-main"> <div class="row-main">
<label for="pin">{{ "pin" | i18n }}</label> <label for="pin">{{ "pin" | i18n }}</label>
<input <input

68
apps/browser/src/popup/scss/box.scss
View File

@@ -3,7 +3,7 @@
.box { .box {
position: relative; position: relative;
width: 100%; width: 100%;
margin: 10px 0 20px; margin: 10px 0 20px 0;
&.first { &.first {
margin-top: 0; margin-top: 0;
@@ -20,13 +20,14 @@
} }
.box-header-expandable { .box-header-expandable {
padding: 0 10px; padding: 10px;
margin-bottom: 5px; margin: 10px;
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
width: 100%; width: calc(100% - 20px);
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
border-radius: $border-radius;
@include themify($themes) { @include themify($themes) {
color: themed("headingColor"); color: themed("headingColor");
@@ -36,7 +37,7 @@
&:focus-visible, &:focus-visible,
&.active { &.active {
@include themify($themes) { @include themify($themes) {
background-color: themed("backgroundColor"); background-color: themed("boxBackgroundHoverColor");
} }
} }
@@ -74,7 +75,9 @@
.box-content-row.no-hover { .box-content-row.no-hover {
&:hover, &:hover,
&:focus { &:focus {
background-color: initial !important; @include themify($themes) {
background-color: themed("boxBackgroundColor") !important;
}
} }
} }
} }
@@ -93,9 +96,9 @@
.box-content-row { .box-content-row {
padding: 10px; padding: 10px;
text-decoration: none; text-decoration: none;
border-radius: 6px; border-radius: $border-radius;
margin: 10px; margin: 10px;
background-color: $background-color; // background-color: $background-color;
@include themify($themes) { @include themify($themes) {
color: themed("textColor"); color: themed("textColor");
@@ -107,6 +110,14 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
&.no-hover {
&:hover {
@include themify($themes) {
background-color: themed("boxBackgroundColor") !important;
}
}
}
&:hover, &:hover,
&:focus, &:focus,
&.active { &.active {
@@ -155,7 +166,7 @@
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
margin: 10px; margin: 10px;
border-radius: 6px; border-radius: $border-radius;
} }
} }
} }
@@ -197,27 +208,16 @@
padding: 10px 15px; padding: 10px 15px;
position: relative; position: relative;
z-index: 1; z-index: 1;
background-color: $background-color; border-radius: $border-radius;
border-radius: 6px;
margin: 10px; margin: 10px;
@include themify($themes) { @include themify($themes) {
background-color: themed("boxBackgroundColor"); background-color: themed("boxBackgroundColor");
} }
// &:before { &.no-bg {
// content: ""; background-color: rgba(0, 0, 0, 0) !important;
// position: absolute; }
// right: 0;
// bottom: 0;
// height: 1px;
// width: calc(100% - 10px);
// border-bottom: 1px solid #000000;
// @include themify($themes) {
// border-bottom-color: themed("boxBorderColor");
// }
// }
&:last-child { &:last-child {
&:before { &:before {
@@ -339,7 +339,7 @@
} }
&.box-content-row-multi { &.box-content-row-multi {
width: 100%; width: calc(100% - 20px);
input:not([type="checkbox"]) { input:not([type="checkbox"]) {
width: 100%; width: 100%;
@@ -462,7 +462,7 @@
select { select {
width: 100%; width: 100%;
border: 1px solid #000000; border: 1px solid #000000;
border-radius: 6px; border-radius: $border-radius;
padding: 7px 4px; padding: 7px 4px;
@include themify($themes) { @include themify($themes) {
@@ -720,3 +720,19 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
form {
.box {
.box-content {
.box-content-row {
&.no-hover {
&:hover {
@include themify($themes) {
background-color: rgba(0, 0, 0, 0) !important;
}
}
}
}
}
}
}

1
apps/browser/src/popup/scss/buttons.scss
View File

@@ -89,7 +89,6 @@
button.box-content-row { button.box-content-row {
display: block; display: block;
// width: 100%;
width: calc(100% - 20px); width: calc(100% - 20px);
text-align: left; text-align: left;

2
apps/browser/src/popup/scss/misc.scss
View File

@@ -132,7 +132,7 @@ p.lead {
} }
.img-rounded { .img-rounded {
border-radius: 6px; border-radius: $border-radius;
} }
.sr-only { .sr-only {

19
apps/browser/src/popup/scss/pages.scss
View File

@@ -9,13 +9,13 @@ app-sync {
} }
app-generator .generated-block { app-generator .generated-block {
font-size: $font-size-xlarge; font-size: $font-size-large;
font-family: $font-family-monospace; font-family: $font-family-monospace;
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
display: flex; display: flex;
background-color: $box-background-color; // background-color: $box-background-color;
border-radius: 6px; border-radius: $border-radius;
@include themify($themes) { @include themify($themes) {
background-color: themed("boxBackgroundColor"); background-color: themed("boxBackgroundColor");
@@ -27,8 +27,8 @@ app-generator .generated-block {
min-width: 0; min-width: 0;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;
padding: 15px 30px; padding: 15px;
border-radius: 6px; border-radius: $border-radius;
background-color: #e6e9ed; background-color: #e6e9ed;
border: 1px solid; border: 1px solid;
border-color: #d2d9e6; border-color: #d2d9e6;
@@ -47,14 +47,13 @@ app-generator .generated-block {
margin-left: 10px; margin-left: 10px;
button { button {
padding: 5px; padding: 6px;
margin: 0; margin: 2px;
border-radius: $border-radius;
&:hover { &:hover {
color: $brand-primary;
@include themify($themes) { @include themify($themes) {
color: $icon-hover-color; background-color: darken($icon-hover-color, 50%);
} }
} }
} }

6
apps/browser/src/popup/scss/variables.scss
View File

@@ -15,7 +15,7 @@ $border-color-dark: #ddd;
$list-item-hover: #fbfbfb; $list-item-hover: #fbfbfb;
$list-icon-color: #767679; $list-icon-color: #767679;
$disabled-box-opacity: 1; $disabled-box-opacity: 1;
$border-radius: 3px; $border-radius: 6px;
$line-height-base: 1.42857143; $line-height-base: 1.42857143;
$icon-hover-color: lighten($text-color, 50%); $icon-hover-color: lighten($text-color, 50%);
@@ -220,8 +220,8 @@ $themes: (
backgroundColorAlt: $solarizedDarkBase02, backgroundColorAlt: $solarizedDarkBase02,
scrollbarColor: $solarizedDarkBase0, scrollbarColor: $solarizedDarkBase0,
scrollbarHoverColor: $solarizedDarkBase2, scrollbarHoverColor: $solarizedDarkBase2,
boxBackgroundColor: $solarizedDarkBase03, boxBackgroundColor: $solarizedDarkBase02,
boxBackgroundHoverColor: $solarizedDarkBase02, boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
boxBorderColor: $solarizedDarkBase02, boxBorderColor: $solarizedDarkBase02,
tabBackgroundColor: $solarizedDarkBase02, tabBackgroundColor: $solarizedDarkBase02,
tabBackgroundHoverColor: $solarizedDarkBase01, tabBackgroundHoverColor: $solarizedDarkBase01,

2
apps/browser/src/popup/vault/current-tab.component.html
View File

@@ -41,7 +41,7 @@
{{ "typeLogins" | i18n }} {{ "typeLogins" | i18n }}
<span class="flex-right">{{ loginCiphers.length }}</span> <span class="flex-right">{{ loginCiphers.length }}</span>
</h2> </h2>
<div class="box-content"> <div class="box-content no-hover">
<app-cipher-row <app-cipher-row
*ngFor="let loginCipher of loginCiphers" *ngFor="let loginCipher of loginCiphers"
[cipher]="loginCipher" [cipher]="loginCipher"