mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-24 03:32:51 +02:00
55e5e008c7
Allowing whitespace to wrap solves the issue of long link/button text awkwardly breaking out of controls Widening desktop "pages" prevents some unnecessary wrapping in places like the "Create account" button on the login screen, whose content is slightly wider than it should be (but this is currently masked by the `nowrap`) Closes https://github.com/bitwarden/clients/issues/2620
181 lines
3.1 KiB
SCSS
181 lines
3.1 KiB
SCSS
@import "variables.scss";
|
|
|
|
.btn,
|
|
.vault .footer button,
|
|
.modal-footer button {
|
|
border-radius: $border-radius;
|
|
padding: 7px 15px;
|
|
border: 1px solid #000000;
|
|
font-size: $font-size-base;
|
|
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;
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-submit {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.bwi-spinner {
|
|
position: absolute;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
bottom: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&:disabled:not(.manual),
|
|
&.loading {
|
|
.bwi-spinner {
|
|
display: flex;
|
|
}
|
|
|
|
span {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-btn {
|
|
cursor: pointer;
|
|
padding: 10px 8px;
|
|
background: none;
|
|
border: none;
|
|
|
|
@include themify($themes) {
|
|
color: themed("boxRowButtonColor");
|
|
}
|
|
|
|
&.primary {
|
|
@include themify($themes) {
|
|
color: themed("buttonPrimaryColor");
|
|
}
|
|
}
|
|
|
|
&.danger {
|
|
@include themify($themes) {
|
|
color: themed("buttonDangerColor");
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
@include themify($themes) {
|
|
color: themed("boxRowButtonHoverColor");
|
|
}
|
|
|
|
&.primary {
|
|
@include themify($themes) {
|
|
color: darken(themed("buttonPrimaryColor"), 6%);
|
|
}
|
|
}
|
|
|
|
&.danger {
|
|
@include themify($themes) {
|
|
color: darken(themed("buttonDangerColor"), 6%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
@include themify($themes) {
|
|
color: themed("disabledIconColor");
|
|
}
|
|
|
|
&:hover {
|
|
@include themify($themes) {
|
|
color: themed("disabledIconColor");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
button.no-btn {
|
|
@extend a;
|
|
background: transparent;
|
|
border: none;
|
|
@include themify($themes) {
|
|
color: themed("textColor");
|
|
}
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|