/home2/mshostin/www/assets/scss/black-dashboard/custom/_modal.scss
// Modals
// Design element Dialogs
// --------------------------------------------------
.modal-content {
border: 0;
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
border-bottom: none;
& button {
position: absolute;
right: 27px;
top: 24px;
outline: 0;
padding: 1rem;
margin: -1rem -1rem -1rem auto;
}
.title{
color: $black;
margin-top: 5px;
margin-bottom: 0;
}
.modal-title{
color: $black;
}
i.tim-icons {
font-size: 16px;
}
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
line-height: 1.9;
p{
color: $black;
}
}
// Footer (for actions)
.modal-footer {
border-top: 0;
-webkit-justify-content: space-between; /* Safari 6.1+ */
justify-content: space-between;
button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
&.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
}
}
.modal-body + .modal-footer {
padding-top: 0;
}
}
.modal-backdrop {
background: rgba(0,0,0,0.3);
}
.modal{
&.modal-default{
@include modal-colors($white, $black);
}
&.modal-primary{
@include modal-colors($primary, $white);
}
&.modal-danger{
@include modal-colors($danger, $white);
}
&.modal-warning{
@include modal-colors($warning, $white);
}
&.modal-success{
@include modal-colors($success, $white);
}
&.modal-info{
@include modal-colors($info, $white);
}
.modal-header .close{
color: $danger;
text-shadow: none;
&:hover,
&:focus{
opacity: 1;
}
}
&.modal-black{
.modal-content{
background: linear-gradient(to bottom, $black 0%, $black-states 100%);
color: rgba($white, 0.8);
.modal-header{
.modal-title, .title{
color: rgba($white, 0.9);
}
}
.modal-body{
p{
color: rgba($white, 0.8);
}
}
}
h1, h2, h3, h4, h5, h6, p{
color: $white;
}
}
}
.modal-search{
.modal-dialog{
margin: 20px auto;
max-width: 650px;
input{
border: none;
font-size: 17px;
font-weight: 100;
}
span{
font-size: 35px;
color: $search-gray;
}
}
.modal-content{
.modal-header{
padding: 24px;
}
}
.modal-header .close{
color: $dark-background;
top: 30px !important;
}
.modal-footer{
border-top: 2px solid #f9f9f9;
margin: 0px 25px 20px;
}
}