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

modal adjustments

Browse Source
This commit is contained in:
Kyle Spearrin 2018-01-29 12:14:19 -05:00
parent c50b478a4d
commit 5914240838
7 changed files with 105 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/modal.component.ts
View File

@ -39,6 +39,17 @@ export class ModalComponent implements OnDestroy {
const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
const componentRef = this.container.createComponent<T>(factory);
document.querySelector('.modal-dialog').addEventListener('click', (e: Event) => {
e.stopPropagation();
});
for (const closeElement of document.querySelectorAll('.modal, .modal *[data-dismiss="modal"]')) {
closeElement.addEventListener('click', (event) => {
this.close();
});
}
return componentRef.instance;
}

150
src/app/vault/password-generator.component.html
View File

@ -1,149 +1,15 @@
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Password Generator
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>

6
src/scss/base.scss
View File

@ -45,16 +45,16 @@ textarea {
resize: vertical;
}
div::-webkit-scrollbar {
div:not(.modal)::-webkit-scrollbar {
width: 10px;
height: 10px;
}
div::-webkit-scrollbar-track {
div:not(.modal)::-webkit-scrollbar-track {
background-color: transparent;
}
div::-webkit-scrollbar-thumb {
div:not(.modal)::-webkit-scrollbar-thumb {
background-color: rgba(100,100,100,.2);
border-radius: 10px;
margin-right: 1px;

35
src/scss/buttons.scss Normal file
View File

@ -0,0 +1,35 @@
@import "variables.scss";
.btn, #vault .footer button, .modal-footer button {
background-color: $button-backgound-color;
border-radius: $border-radius;
padding: 7px 15px;
border: 1px solid $button-border-color;
font-size: $font-size-base;
color: $button-color;
&:hover, &:focus {
cursor: pointer;
background-color: darken($button-backgound-color, 1.5%);
border-color: darken($button-border-color, 17%);
}
&:focus {
background-color: darken($button-backgound-color, 6%);
border-color: darken($button-border-color, 25%);
outline: 0;
}
&.primary {
color: $button-color-primary;
}
&.danger {
color: $button-color-danger;
}
&.block {
display: block;
width: 100%;
}
}

63
src/scss/modal.scss
View File

@ -2,9 +2,7 @@
$white: white;
$black: black;
$border-width: 1px;
$line-height-base: 14px;
$gray-200: $gray;
$border-radius-lg: $border-radius;
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
@ -24,13 +22,13 @@ $modal-title-line-height: $line-height-base !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
$modal-content-border-width: 1px !default;
$modal-content-box-shadow-xs: none;
$modal-content-box-shadow-sm-up: none;
$modal-backdrop-bg: $background-color !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: $gray-200 !default;
$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;
@ -42,6 +40,11 @@ $modal-sm: 300px !default;
$modal-transition: transform .3s ease-out !default;
$close-font-size: $font-size-base * 1.5 !default;
$close-font-weight: bold !default;
$close-color: $black !default;
$close-text-shadow: 0 1px 0 $white !default;
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
@ -86,14 +89,6 @@ $modal-transition: transform .3s ease-out !default;
}
}
.modal::-webkit-scrollbar-thumb {
background-color: darken($modal-backdrop-bg, 20%);
&:hover {
background-color: darken($modal-backdrop-bg, 50%);
}
}
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss
// .modal-open - body class for killing the scroll
@ -231,7 +226,7 @@ $modal-transition: transform .3s ease-out !default;
.modal-footer {
display: flex;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
//justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
// Easily place margin between footer elements
@ -280,3 +275,39 @@ $modal-transition: transform .3s ease-out !default;
max-width: $modal-lg;
}
}
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss
.close {
float: right;
font-size: $close-font-size;
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .5;
&:hover, &:focus {
color: $close-color;
text-decoration: none;
opacity: .75;
}
// Opinionated: add "hand" cursor to non-disabled .close elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
}
// stylelint-enable

1
src/scss/styles.scss
View File

@ -3,6 +3,7 @@
@import "vault.scss";
@import "list.scss";
@import "box.scss";
@import "buttons.scss";
@import "misc.scss";
@import "modal.scss";
@import "plugins.scss";

31
src/scss/vault.scss
View File

@ -260,38 +260,7 @@
padding: 0 15px;
button {
background-color: $button-backgound-color;
border-radius: $border-radius;
padding: 7px 15px;
border: 1px solid $button-border-color;
margin-right: 10px;
font-size: $font-size-base;
color: $button-color;
&:hover, &:focus {
cursor: pointer;
background-color: darken($button-backgound-color, 1.5%);
border-color: darken($button-border-color, 17%);
}
&:focus {
background-color: darken($button-backgound-color, 6%);
border-color: darken($button-border-color, 25%);
outline: 0;
}
&.primary {
color: $button-color-primary;
}
&.danger {
color: $button-color-danger;
}
&.block {
display: block;
width: 100%;
}
&.right {
margin-left: auto;