kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-22 07:54:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

Improve the dashboard alert and confirmation modal styles

Browse source
This commit is contained in:
Kevin MacMartin 2018-06-18 16:50:50 -04:00
parent 103ab67b4d
commit af9c6df636
2 changed files with 33 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
resources/assets/sass/dashboard.scss vendored
View file

@ -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;

20
resources/views/dashboard/core.blade.php
View file

@ -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