mirror of
https://github.com/bitwarden/browser
synced 2025-12-18 09:13:33 +00:00
password generator
This commit is contained in:
@@ -22,6 +22,7 @@ body {
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-family-sans-serif;
|
||||
color: $text-color;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -1,18 +1,7 @@
|
||||
@import "variables.scss";
|
||||
|
||||
.box {
|
||||
min-width: 400px;
|
||||
max-width: 550px;
|
||||
width: 100%;
|
||||
margin: 30px auto 0 auto;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.box-header {
|
||||
margin: 0 10px 5px 10px;
|
||||
@@ -99,17 +88,48 @@
|
||||
}
|
||||
|
||||
&.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label, .row-label {
|
||||
font-size: $font-size-base;
|
||||
color: $text-color;
|
||||
display: inline;
|
||||
width: initial;
|
||||
margin-bottom: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
input.row-label {
|
||||
width: calc(100% - 40px);
|
||||
> span {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
> input {
|
||||
margin: 0 0 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-input {
|
||||
label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.box-content-row-slider {
|
||||
input {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,6 +203,11 @@
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.condensed .box-content-row, .box-content-row.condensed {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
@import "variables.scss";
|
||||
|
||||
.text-primary {
|
||||
color: $brand-primary !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $text-muted !important;
|
||||
}
|
||||
|
||||
.monospaced {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
@@ -69,3 +77,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-block {
|
||||
font-size: $font-size-large;
|
||||
word-break: break-all;
|
||||
font-family: $font-family-monospace;
|
||||
text-align: center;
|
||||
|
||||
.modal-body & {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,14 +13,14 @@ $zindex-modal-backdrop: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
|
||||
// Padding applied to the modal body
|
||||
$modal-inner-padding: 1rem !default;
|
||||
$modal-inner-padding: 10px !default;
|
||||
|
||||
$modal-dialog-margin: .5rem !default;
|
||||
$modal-dialog-margin-y-sm-up: 1.75rem !default;
|
||||
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
$modal-content-bg: $white !default;
|
||||
$modal-content-bg: $background-color-alt !default;
|
||||
$modal-content-border-color: rgba($black, .2) !default;
|
||||
$modal-content-border-width: 1px !default;
|
||||
$modal-content-box-shadow-xs: none;
|
||||
@@ -32,7 +32,7 @@ $modal-header-border-color: $border-color-dark !default;
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
$modal-header-border-width: $modal-content-border-width !default;
|
||||
$modal-footer-border-width: $modal-header-border-width !default;
|
||||
$modal-header-padding: 1rem !default;
|
||||
$modal-header-padding: 12px !default;
|
||||
|
||||
$modal-lg: 800px !default;
|
||||
$modal-md: 500px !default;
|
||||
@@ -194,15 +194,25 @@ $close-text-shadow: 0 1px 0 $white !default;
|
||||
display: flex;
|
||||
align-items: flex-start; // so the close btn always stays on the upper right corner
|
||||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
||||
padding: $modal-header-padding;
|
||||
padding: $modal-header-padding $modal-inner-padding;
|
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||
//@include border-top-radius($border-radius-lg);
|
||||
border-radius: $border-radius-lg;
|
||||
|
||||
.close {
|
||||
padding: $modal-header-padding;
|
||||
padding: $modal-header-padding $modal-inner-padding;
|
||||
// auto on the left force icon to the right even when there is no .modal-title
|
||||
margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
|
||||
margin: (-$modal-header-padding) (-$modal-inner-padding) (-$modal-header-padding) auto;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $font-size-base;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -230,12 +240,17 @@ $close-text-shadow: 0 1px 0 $white !default;
|
||||
padding: $modal-inner-padding;
|
||||
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||
// Easily place margin between footer elements
|
||||
> :not(:first-child) {
|
||||
margin-left: .25rem;
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :not(:last-child) {
|
||||
margin-right: .25rem;
|
||||
.right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -311,3 +326,13 @@ button.close {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// stylelint-enable
|
||||
|
||||
// box
|
||||
|
||||
.modal-content .box {
|
||||
margin-top: 20px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -112,6 +112,19 @@
|
||||
.inner-content {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.box {
|
||||
max-width: 550px;
|
||||
margin: 30px auto 0 auto;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#groupings, #items, #details {
|
||||
@@ -262,13 +275,14 @@
|
||||
button {
|
||||
margin-right: 10px;
|
||||
|
||||
&.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user