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

more css changes

Browse Source
This commit is contained in:
DanHillesheim
2022-10-07 13:54:48 -06:00
parent cb7b8313a4
commit cd8cc6363e
5 changed files with 78 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
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; margin: 10px 0 20px;
&.first { &.first {
margin-top: 0; margin-top: 0;
@@ -36,7 +36,7 @@
&:focus-visible, &:focus-visible,
&.active { &.active {
@include themify($themes) { @include themify($themes) {
background-color: themed("boxBackgroundHoverColor"); background-color: themed("backgroundColor");
} }
} }
@@ -52,11 +52,11 @@
} }
.box-content { .box-content {
border-top: 1px solid #000000; // border-top: 1px solid #000000;
border-bottom: 1px solid #000000; // border-bottom: 1px solid #000000;
@include themify($themes) { @include themify($themes) {
background-color: themed("boxBackgroundColor"); background-color: themed("backgroundColor");
border-color: themed("borderColor"); border-color: themed("borderColor");
} }
@@ -91,11 +91,15 @@
&.list { &.list {
.box-content { .box-content {
.box-content-row { .box-content-row {
padding: 3px 10px; padding: 10px;
text-decoration: none; text-decoration: none;
border-radius: 6px;
margin: 10px;
background-color: $background-color;
@include themify($themes) { @include themify($themes) {
color: themed("textColor"); color: themed("textColor");
background-color: themed("boxBackgroundColor");
} }
&.padded { &.padded {
@@ -150,6 +154,8 @@
display: flex; display: flex;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
margin: 10px;
border-radius: 6px;
} }
} }
} }
@@ -191,21 +197,28 @@
padding: 10px 15px; padding: 10px 15px;
position: relative; position: relative;
z-index: 1; z-index: 1;
background-color: $background-color;
&:before { border-radius: 6px;
content: ""; margin: 10px;
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: calc(100% - 10px);
border-bottom: 1px solid #000000;
@include themify($themes) { @include themify($themes) {
border-bottom-color: themed("boxBorderColor"); background-color: themed("boxBackgroundColor");
}
} }
// &:before {
// content: "";
// 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 {
border: none; border: none;
@@ -449,9 +462,11 @@
select { select {
width: 100%; width: 100%;
border: 1px solid #000000; border: 1px solid #000000;
border-radius: $border-radius; border-radius: 6px;
padding: 7px 4px;
@include themify($themes) { @include themify($themes) {
background-color: themed("boxBorderColor");
border-color: themed("inputBorderColor"); border-color: themed("inputBorderColor");
} }
} }

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

@@ -89,8 +89,14 @@
button.box-content-row { button.box-content-row {
display: block; display: block;
width: 100%; // width: 100%;
width: calc(100% - 20px);
text-align: left; text-align: left;
@include themify($themes) {
background-color: themed("boxBackgroundColor");
border-color: none;
}
} }
button { button {

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

@@ -9,10 +9,17 @@ app-sync {
} }
app-generator .generated-block { app-generator .generated-block {
font-size: $font-size-large; font-size: $font-size-xlarge;
font-family: $font-family-monospace; font-family: $font-family-monospace;
margin: 20px; margin: 10px;
padding: 10px;
display: flex; display: flex;
background-color: $box-background-color;
border-radius: 6px;
@include themify($themes) {
background-color: themed("boxBackgroundColor");
}
.generated-wrapper { .generated-wrapper {
text-align: left; text-align: left;
@@ -20,15 +27,28 @@ 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;
border-radius: 6px;
background-color: #e6e9ed;
border: 1px solid;
border-color: #d2d9e6;
@include themify($themes) {
background-color: themed("backgroundColor");
border-color: themed("boxBorderColor");
}
} }
.action-buttons { .action-buttons {
display: flex; display: flex;
flex-direction: column;
align-self: center; align-self: center;
height: 100%;
margin-left: 10px;
button { button {
padding: 5px; padding: 5px;
margin: -5px -5px 5px 5px; margin: 0;
} }
} }
} }

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

@@ -6,6 +6,8 @@ $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-s
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-size-base: 14px; $font-size-base: 14px;
$font-size-large: 18px; $font-size-large: 18px;
$font-size-xlarge: 22px;
$font-size-xxlarge: 28px;
$font-size-small: 12px; $font-size-small: 12px;
$text-color: #000000; $text-color: #000000;
$border-color: #f0f0f0; $border-color: #f0f0f0;

24
apps/desktop/src/scss/box.scss
View File

@@ -120,19 +120,19 @@
z-index: 1; z-index: 1;
text-align: left; text-align: left;
&:before { // &:before {
content: ""; // content: "";
position: absolute; // position: absolute;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
height: 1px; // height: 1px;
width: calc(100% - 10px); // width: calc(100% - 10px);
border-bottom: 1px solid #000000; // border-bottom: 1px solid #000000;
@include themify($themes) { // @include themify($themes) {
border-bottom-color: themed("boxBorderColor"); // border-bottom-color: themed("boxBorderColor");
} // }
} // }
&:first-child, &:first-child,
&:last-child { &:last-child {