1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00

password generator

This commit is contained in:
Kyle Spearrin
2018-01-29 16:13:37 -05:00
parent 5914240838
commit ce84e8e428
11 changed files with 276 additions and 54 deletions

View File

@@ -22,6 +22,7 @@ body {
h1, h2, h3, h4, h5, h6 {
font-family: $font-family-sans-serif;
color: $text-color;
margin: 0;
padding: 0;
}

View File

@@ -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 {

View File

@@ -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;
}
}

View File

@@ -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;
}
}

View File

@@ -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;
}
}
}