mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-10 09:59:48 +01:00
modal adjustments
This commit is contained in:
Kyle Spearrin
parent
c50b478a4d
commit
5914240838
@ -39,6 +39,17 @@ export class ModalComponent implements OnDestroy {
|
|||||||
|
|
||||||
const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
|
const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
|
||||||
const componentRef = this.container.createComponent<T>(factory);
|
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;
|
return componentRef.instance;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,149 +1,15 @@
|
|||||||
<div class="modal fade">
|
<div class="modal fade">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
Password Generator
|
||||||
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||||
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
Some content<br />
|
Some content
|
||||||
Some content<br />
|
</div>
|
||||||
Some content<br />
|
<div class="modal-footer">
|
||||||
Some content<br />
|
<button type="button" data-dismiss="modal">Close</button>
|
||||||
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 />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -45,16 +45,16 @@ textarea {
|
|||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
div::-webkit-scrollbar {
|
div:not(.modal)::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div::-webkit-scrollbar-track {
|
div:not(.modal)::-webkit-scrollbar-track {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
div::-webkit-scrollbar-thumb {
|
div:not(.modal)::-webkit-scrollbar-thumb {
|
||||||
background-color: rgba(100,100,100,.2);
|
background-color: rgba(100,100,100,.2);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-right: 1px;
|
margin-right: 1px;
|
||||||
|
|||||||
35
src/scss/buttons.scss
Normal file
35
src/scss/buttons.scss
Normal 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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2,9 +2,7 @@
|
|||||||
|
|
||||||
$white: white;
|
$white: white;
|
||||||
$black: black;
|
$black: black;
|
||||||
$border-width: 1px;
|
|
||||||
$line-height-base: 14px;
|
$line-height-base: 14px;
|
||||||
$gray-200: $gray;
|
|
||||||
$border-radius-lg: $border-radius;
|
$border-radius-lg: $border-radius;
|
||||||
|
|
||||||
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
|
// 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-bg: $white !default;
|
||||||
$modal-content-border-color: rgba($black, .2) !default;
|
$modal-content-border-color: rgba($black, .2) !default;
|
||||||
$modal-content-border-width: $border-width !default;
|
$modal-content-border-width: 1px !default;
|
||||||
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
|
$modal-content-box-shadow-xs: none;
|
||||||
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
|
$modal-content-box-shadow-sm-up: none;
|
||||||
|
|
||||||
$modal-backdrop-bg: $background-color !default;
|
$modal-backdrop-bg: $black !default;
|
||||||
$modal-backdrop-opacity: .5 !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-footer-border-color: $modal-header-border-color !default;
|
||||||
$modal-header-border-width: $modal-content-border-width !default;
|
$modal-header-border-width: $modal-content-border-width !default;
|
||||||
$modal-footer-border-width: $modal-header-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;
|
$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
|
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
|
||||||
|
|
||||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
@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
|
// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss
|
||||||
|
|
||||||
// .modal-open - body class for killing the scroll
|
// .modal-open - body class for killing the scroll
|
||||||
@ -231,7 +226,7 @@ $modal-transition: transform .3s ease-out !default;
|
|||||||
.modal-footer {
|
.modal-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center; // vertically center
|
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;
|
padding: $modal-inner-padding;
|
||||||
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||||
// Easily place margin between footer elements
|
// Easily place margin between footer elements
|
||||||
@ -280,3 +275,39 @@ $modal-transition: transform .3s ease-out !default;
|
|||||||
max-width: $modal-lg;
|
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
|
||||||
|
|||||||
@ -3,6 +3,7 @@
|
|||||||
@import "vault.scss";
|
@import "vault.scss";
|
||||||
@import "list.scss";
|
@import "list.scss";
|
||||||
@import "box.scss";
|
@import "box.scss";
|
||||||
|
@import "buttons.scss";
|
||||||
@import "misc.scss";
|
@import "misc.scss";
|
||||||
@import "modal.scss";
|
@import "modal.scss";
|
||||||
@import "plugins.scss";
|
@import "plugins.scss";
|
||||||
|
|||||||
@ -260,38 +260,7 @@
|
|||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: $button-backgound-color;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
padding: 7px 15px;
|
|
||||||
border: 1px solid $button-border-color;
|
|
||||||
margin-right: 10px;
|
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 {
|
&.right {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user