mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 19:26:38 -05:00
Improve the dashboard alert and confirmation modal styles
This commit is contained in:
parent
103ab67b4d
commit
af9c6df636
2 changed files with 33 additions and 46 deletions
31
resources/assets/sass/dashboard.scss
vendored
31
resources/assets/sass/dashboard.scss
vendored
|
@ -999,21 +999,20 @@ form {
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
display: table;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: $grid-gutter-width;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
background-color: fade-out(lighten($c-dashboard-light, 1%), 0.6);
|
background-color: fade-out(lighten($c-dashboard-light, 1%), 0.6);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 250ms;
|
transition: opacity 250ms;
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
position: relative;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
max-width: 500px;
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin: 20px 15px;
|
margin: 20px 15px;
|
||||||
|
@ -1025,19 +1024,23 @@ form {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&#alert-modal {
|
&.alert .card {
|
||||||
.modal-container {
|
|
||||||
.card {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
padding: 15px 75px 15px 20px;
|
padding: 15px 20px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
padding-right: 85px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
|
|
|
@ -21,35 +21,19 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="confirmation-modal" class="modal">
|
<div id="confirmation-modal" class="modal confirmation">
|
||||||
<div class="modal-container">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header"></div>
|
<div class="card-header"></div>
|
||||||
<button type="button" class="cancel-button btn btn-primary">Cancel</button>
|
<button type="button" class="cancel-button btn btn-primary">Cancel</button>
|
||||||
<button type="button" class="confirm-button btn btn-danger">Confirm</button>
|
<button type="button" class="confirm-button btn btn-danger">Confirm</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="alert-modal" class="modal">
|
<div id="alert-modal" class="modal alert">
|
||||||
<div class="modal-container">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">ALERT</div>
|
<div class="card-header">ALERT</div>
|
||||||
<div class="message"></div>
|
<div class="message"></div>
|
||||||
<button type="button" class="accept-button btn btn-primary">OK</button>
|
<button type="button" class="accept-button btn btn-primary">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
Loading…
Reference in a new issue