modal overlay

- update color darken/lighten for custom-switch's
- added .overlay in .modal-dialog/.modal-content
- created demo modal in modals.html
- rebuild css dist files
This commit is contained in:
REJack
2019-06-07 16:48:09 +02:00
parent 7ad0bae031
commit 9ffff7df6f
7 changed files with 125 additions and 71 deletions

View File

@@ -236,16 +236,16 @@ textarea.form-control {
&.custom-switch-off-#{$name} {
& .custom-control-input ~ .custom-control-label::before {
background-color: #{$color};
border-color: darken($color, 10%);
border-color: darken($color, 20%);
}
& .custom-control-input ~ .custom-control-label::after {
background-color: darken($color, 30%);
background-color: darken($color, 25%);
}
}
&.custom-switch-on-#{$name} {
& .custom-control-input:checked ~ .custom-control-label::before {
background-color: #{$color};
border-color: darken($color, 10%);
border-color: darken($color, 20%);
}
& .custom-control-input:checked ~ .custom-control-label::after {
background-color: lighten($color, 30%);
@@ -258,16 +258,16 @@ textarea.form-control {
&.custom-switch-off-#{$name} {
& .custom-control-input ~ .custom-control-label::before {
background-color: #{$color};
border-color: darken($color, 10%);
border-color: darken($color, 20%);
}
& .custom-control-input ~ .custom-control-label::after {
background-color: darken($color, 30%);
background-color: darken($color, 25%);
}
}
&.custom-switch-on-#{$name} {
& .custom-control-input:checked ~ .custom-control-label::before {
background-color: #{$color};
border-color: darken($color, 10%);
border-color: darken($color, 20%);
}
& .custom-control-input:checked ~ .custom-control-label::after {
background-color: lighten($color, 30%);

View File

@@ -363,6 +363,19 @@ a.text-muted:hover {
}
// Modals
.modal-dialog {
.overlay {
display: block;
position: absolute;
z-index: ($zindex-modal + 2);
background: rgba(255, 255, 255, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.modal-content {
&.bg-warning {
.modal-header,