bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-23 03:33:54 +00:00
Code Issues Releases Wiki Activity

Username generator (#1456)

Browse Source 
* username generator implemented

* disable type when coming from add/edit

* restyle buttons to new icon-btn

* update generated-wrapper styles

* only show policy messages for passwords

* make generated-wrapper a standalone style

* Update src/app/vault/password-generator.component.html

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* aria-expanded on show options

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
This commit is contained in:
Kyle Spearrin
2022-03-29 15:01:57 -04:00
committed by GitHub
parent bc21703a2b
commit 9e0cc45704
13 changed files with 612 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/scss/box.scss
View File

@@ -4,15 +4,6 @@
position: relative;
width: 100%;
.settingsTitle {
margin: 0 10px 5px 10px;
display: flex;
@include themify($themes) {
color: themed("headingColor");
}
}
.box-header {
margin: 0 10px 5px 10px;
text-transform: uppercase;
@@ -302,7 +293,7 @@
&.box-content-row-slider {
input[type="range"] {
height: 10px;
width: 110px !important;
width: 220px !important;
}
input[type="number"] {
@@ -364,33 +355,7 @@
margin-left: 5px;
.row-btn {
cursor: pointer;
padding: 10px 8px;
background: none;
border: none;
@include themify($themes) {
color: themed("boxRowButtonColor");
}
&:hover,
&:focus {
@include themify($themes) {
color: themed("boxRowButtonHoverColor");
}
}
&.disabled {
@include themify($themes) {
color: themed("disabledIconColor");
}
&:hover {
@include themify($themes) {
color: themed("disabledIconColor");
}
}
}
@extend .icon-btn;
}
&.no-pad .row-btn {
@@ -485,4 +450,36 @@
min-width: 25px;
}
}
.radio-group {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 5px;
input {
flex-grow: 0;
}
label {
margin: 0 0 0 5px;
flex-grow: 1;
font-size: $font-size-base;
display: block;
width: 100%;
@include themify($themes) {
color: themed("textColor");
}
}
&.align-start {
align-items: start;
margin-top: 10px;
label {
margin-top: -4px;
}
}
}
}

54
src/scss/buttons.scss
View File

@@ -115,3 +115,57 @@
}
}
}
.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");
}
}
}
}

35
src/scss/misc.scss
View File

@@ -1,6 +1,7 @@
@import "variables.scss";
small {
small,
.small {
font-size: $font-size-small;
}
@@ -173,22 +174,44 @@ p.lead {
}
}
.password-block {
.modal-title {
margin: 0 10px 5px 10px;
text-transform: uppercase;
display: flex;
@include themify($themes) {
color: themed("headingColor");
}
}
.generated-block {
font-size: $font-size-large;
font-family: $font-family-monospace;
min-height: 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
.modal-body & {
margin-top: 10px;
margin: 10px;
}
.generated-wrapper {
text-align: left;
width: 100%;
}
.action-buttons {
display: flex;
align-self: center;
button {
margin-left: 10px;
}
}
}
.password-wrapper {
.generated-wrapper {
word-break: break-all;
white-space: pre-wrap;
min-width: 0;