modal review completed

This commit is contained in:
Kevin Ross 2015-12-21 16:06:40 -06:00
parent f0b833721e
commit d67a10e117
3 changed files with 30 additions and 30 deletions

View File

@ -1,47 +1,27 @@
//
// Modals // Modals
// Material Design element Dialogs // https://www.google.com/design/spec/components/dialogs.html#dialogs-specs
// --------------------------------------------------
.modal-content { .modal-content {
@include shadow-z-5(); @include shadow-z-5();
border: 0; border: 0;
border-radius: $border-radius; border-radius: $border-radius;
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header { .modal-header {
padding: 24px 24px 0; padding: 24px 24px 0;
border-bottom: 0; border-bottom: 0;
} }
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body { .modal-body {
padding: 24px 24px 16px; padding: 20px 24px 24px;
} }
// Footer (for actions)
.modal-footer { .modal-footer {
padding: 7px; padding: 8px 8px 8px 24px;
border-top: 0; border-top: 0;
button { .btn {
width: auto;
padding-right: 16px;
padding-left: 16px;
margin: 0; margin: 0;
&.pull-left {
position: relative;
left: -5px;
padding-right: 5px;
padding-left: 5px;
}
} }
button + button {
margin-bottom: 16px;
}
}
.modal-body + .modal-footer {
padding-top: 0;
}
}
.modal-backdrop { .btn + .btn {
background: rgba($black, 0.3); margin-left: 8px;
}
}
} }

View File

@ -28,6 +28,7 @@ $enable-flex: true;
@import "variables/bootstrap/nav"; @import "variables/bootstrap/nav";
@import "variables/bootstrap/state"; @import "variables/bootstrap/state";
@import "variables/bootstrap/type"; @import "variables/bootstrap/type";
@import "variables/bootstrap/modals";
// import their vars after customization for use below // import their vars after customization for use below

View File

@ -0,0 +1,19 @@
// Modals
// Padding applied to the modal body
//$modal-inner-padding: 15px !default;
//
//$modal-title-padding: 15px !default;
//$modal-title-line-height: $line-height !default;
//
//$modal-content-bg: #fff !default;
//$modal-content-border-color: rgba(0,0,0,.2) !default;
//
//$modal-backdrop-bg: #000 !default;
$modal-backdrop-opacity: .26 !default; // .5
//$modal-header-border-color: #e5e5e5 !default;
//$modal-footer-border-color: $modal-header-border-color !default;
//
//$modal-lg: 900px !default;
//$modal-md: 600px !default;
//$modal-sm: 300px !default;