vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

Add extra styles for buttons 

- to maintain the existing look and feel after switching links to buttons
This commit is contained in:
Patrick H. Lauke 2021-07-31 21:10:37 +01:00
parent d528d72b4d
commit 7e1c491124
1 changed files with 98 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
src/popup/scss/buttons.scss
View File

@ -1,88 +1,98 @@
@import "variables.scss"; @import "variables.scss";
.btn { .btn {
border-radius: $border-radius; border-radius: $border-radius;
padding: 7px 15px; padding: 7px 15px;
border: 1px solid #000000; border: 1px solid #000000;
font-size: $font-size-base; font-size: $font-size-base;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@include themify($themes) { @include themify($themes) {
background-color: themed('buttonBackgroundColor'); background-color: themed('buttonBackgroundColor');
border-color: themed('buttonBorderColor'); border-color: themed('buttonBorderColor');
color: themed('buttonColor'); color: themed('buttonColor');
} }
&.primary { &.primary {
@include themify($themes) { @include themify($themes) {
color: themed('buttonPrimaryColor'); color: themed('buttonPrimaryColor');
} }
} }
&.danger { &.danger {
@include themify($themes) { @include themify($themes) {
color: themed('buttonDangerColor'); color: themed('buttonDangerColor');
} }
} }
&:hover:not([disabled]) { &:hover:not([disabled]) {
cursor: pointer; cursor: pointer;
@include themify($themes) { @include themify($themes) {
background-color: darken(themed('buttonBackgroundColor'), 1.5%); background-color: darken(themed('buttonBackgroundColor'), 1.5%);
border-color: darken(themed('buttonBorderColor'), 17%); border-color: darken(themed('buttonBorderColor'), 17%);
color: darken(themed('buttonColor'), 10%); color: darken(themed('buttonColor'), 10%);
} }
&.primary { &.primary {
@include themify($themes) { @include themify($themes) {
color: darken(themed('buttonPrimaryColor'), 6%); color: darken(themed('buttonPrimaryColor'), 6%);
} }
} }
&.danger { &.danger {
@include themify($themes) { @include themify($themes) {
color: darken(themed('buttonDangerColor'), 6%); color: darken(themed('buttonDangerColor'), 6%);
} }
} }
} }
&:focus:not([disabled]) { &:focus:not([disabled]) {
cursor: pointer; cursor: pointer;
outline: 0; outline: 0;
@include themify($themes) { @include themify($themes) {
background-color: darken(themed('buttonBackgroundColor'), 6%); background-color: darken(themed('buttonBackgroundColor'), 6%);
border-color: darken(themed('buttonBorderColor'), 25%); border-color: darken(themed('buttonBorderColor'), 25%);
} }
} }
&[disabled] { &[disabled] {
opacity: 0.65; opacity: 0.65;
cursor: default !important; cursor: default !important;
} }
&.block { &.block {
display: block; display: block;
width: 100%; width: 100%;
} }
&.link { &.link {
border: none !important; border: none !important;
background: none !important; background: none !important;
&:focus { &:focus {
text-decoration: underline; text-decoration: underline;
} }
} }
} }
.action-buttons { .action-buttons {
.btn { .btn {
&:focus { &:focus {
outline: auto; outline: auto;
} }
} }
} }
button.box-content-row {
display: block;
width: 100%;
background: none;
}
button {
border: none;
}