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 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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">×</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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
$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
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue