0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/scss/_modal.scss

133 lines
3.0 KiB
SCSS
Raw Normal View History

// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and shit
2015-04-18 20:38:47 +02:00
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
2014-12-02 23:02:35 +01:00
z-index: $zindex-modal;
display: none;
overflow: hidden;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
2013-10-05 12:55:26 +02:00
outline: 0;
-webkit-overflow-scrolling: touch;
2013-02-08 04:31:12 +01:00
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
transition: transform .3s ease-out;
2015-08-23 10:00:22 +02:00
transform: translate(0, -25%);
2013-02-08 04:31:12 +01:00
}
2014-10-27 06:32:39 +01:00
&.in .modal-dialog { transform: translate(0, 0); }
2013-02-08 04:21:56 +01:00
}
.modal-open .modal {
2014-06-11 04:20:56 +02:00
overflow-x: hidden;
overflow-y: auto;
}
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
width: auto;
margin: $modal-dialog-margin;
}
// Actual modal
.modal-content {
position: relative;
2014-12-02 23:02:35 +01:00
background-color: $modal-content-bg;
background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($border-radius-lg);
@include box-shadow($modal-content-xs-box-shadow);
2012-10-30 05:34:10 +01:00
// Remove focus outline from opened modal
2014-03-10 07:55:29 +01:00
outline: 0;
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
Merge branch 'master' into v4 Conflicts: .gitignore Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/js/bootstrap.js dist/js/bootstrap.min.js docs/_includes/components/navbar.html docs/_includes/components/progress-bars.html docs/_includes/css/grid.html docs/_includes/css/overview.html docs/_includes/customizer-variables.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/disabling-responsiveness.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/license.html docs/_includes/getting-started/third-party-support.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/scrollspy.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/js/transitions.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/assets/js/src/customizer.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/js/bootstrap.js docs/dist/js/bootstrap.min.js docs/migration.html js/affix.js js/alert.js js/button.js js/carousel.js js/collapse.js js/dropdown.js js/modal.js js/popover.js js/scrollspy.js js/tab.js js/tests/unit/affix.js js/tests/unit/button.js js/tests/unit/carousel.js js/tests/unit/modal.js js/tests/unit/tooltip.js js/tests/visual/modal.html js/tooltip.js less/component-animations.less less/jumbotron.less less/mixins/background-variant.less less/mixins/buttons.less less/mixins/responsive-visibility.less less/mixins/text-emphasis.less less/navbar.less less/navs.less less/scaffolding.less less/tooltip.less less/utilities.less less/variables.less package.json scss/_buttons.scss scss/_forms.scss scss/_modal.scss
2015-03-29 09:08:54 +02:00
z-index: $zindex-modal-bg;
2015-03-29 09:13:30 +02:00
background-color: $modal-backdrop-bg;
Merge branch 'master' into v4 Conflicts: .gitignore Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/js/bootstrap.js dist/js/bootstrap.min.js docs/_includes/components/navbar.html docs/_includes/components/progress-bars.html docs/_includes/css/grid.html docs/_includes/css/overview.html docs/_includes/customizer-variables.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/disabling-responsiveness.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/license.html docs/_includes/getting-started/third-party-support.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/scrollspy.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/js/transitions.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/assets/js/src/customizer.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/js/bootstrap.js docs/dist/js/bootstrap.min.js docs/migration.html js/affix.js js/alert.js js/button.js js/carousel.js js/collapse.js js/dropdown.js js/modal.js js/popover.js js/scrollspy.js js/tab.js js/tests/unit/affix.js js/tests/unit/button.js js/tests/unit/carousel.js js/tests/unit/modal.js js/tests/unit/tooltip.js js/tests/visual/modal.html js/tooltip.js less/component-animations.less less/jumbotron.less less/mixins/background-variant.less less/mixins/buttons.less less/mixins/responsive-visibility.less less/mixins/text-emphasis.less less/navbar.less less/navs.less less/scaffolding.less less/tooltip.less less/utilities.less less/variables.less package.json scss/_buttons.scss scss/_forms.scss scss/_modal.scss
2015-03-29 09:08:54 +02:00
// Fade for backdrop
2014-10-27 06:34:08 +01:00
&.fade { opacity: 0; }
2014-12-02 23:02:35 +01:00
&.in { opacity: $modal-backdrop-opacity; }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
2014-12-02 23:02:35 +01:00
padding: $modal-title-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
2015-08-05 07:29:45 +02:00
@include clearfix;
}
// Close icon
.modal-header .close {
margin-top: -2px;
}
// Title text within header
.modal-title {
margin: 0;
2014-12-02 23:02:35 +01:00
line-height: $modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
2014-12-02 23:02:35 +01:00
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
2014-12-02 23:02:35 +01:00
padding: $modal-inner-padding;
text-align: right; // right align buttons
border-top: $modal-footer-border-width solid $modal-footer-border-color;
2014-12-02 23:02:35 +01:00
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
}
2014-03-17 02:38:47 +01:00
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
2013-02-08 04:21:56 +01:00
// Scale up the modal
@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
.modal-dialog {
max-width: $modal-md;
margin: $modal-dialog-sm-up-margin-y auto;
}
2013-02-08 04:31:12 +01:00
.modal-content {
@include box-shadow($modal-content-sm-up-box-shadow);
2013-02-08 04:31:12 +01:00
}
.modal-sm { max-width: $modal-sm; }
}
@include media-breakpoint-up(lg) {
.modal-lg { max-width: $modal-lg; }
}