kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-21 23:52:31 -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

43
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 { .card {
display: table-cell; position: relative;
vertical-align: middle; margin: 0px;
text-align: center; max-width: 500px;
.card {
margin: 0px;
}
.btn { .btn {
margin: 20px 15px; margin: 20px 15px;
@ -1025,19 +1024,23 @@ form {
} }
} }
&#alert-modal { &.alert .card {
.modal-container { .message {
.card { min-height: 50px;
position: relative; padding: 15px 20px;
text-align: left;
@include media-breakpoint-up(md) {
padding-right: 85px;
}
}
.btn {
@include media-breakpoint-down(sm) {
margin-top: 0px;
} }
.message { @include media-breakpoint-up(md) {
min-height: 50px;
padding: 15px 75px 15px 20px;
text-align: left;
}
.btn {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0px; right: 0px;

36
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="card">
<div class="container"> <div class="card-header"></div>
<div class="row"> <button type="button" class="cancel-button btn btn-primary">Cancel</button>
<div class="col-12 col-md-6 offset-md-3 col-lg-4 offset-lg-4"> <button type="button" class="confirm-button btn btn-danger">Confirm</button>
<div class="card">
<div class="card-header"></div>
<button type="button" class="cancel-button btn btn-primary">Cancel</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="card">
<div class="container"> <div class="card-header">ALERT</div>
<div class="row"> <div class="message"></div>
<div class="col-12 col-md-6 offset-md-3 col-lg-4 offset-lg-4"> <button type="button" class="accept-button btn btn-primary">OK</button>
<div class="card">
<div class="card-header">ALERT</div>
<div class="message"></div>
<button type="button" class="accept-button btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
@endsection @endsection