Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-03 08:49:50 +01:00
Code Issues Projects Releases Wiki Activity

Add extra styles for buttons

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