horizon/openstack_dashboard/static/dashboard/scss/components/_modals.scss
Diana Whitten 03ede4ce5e Modals should inherit from the theme
* Fullscreen Modals have been removed
  These weren't working properly anyways, and the styling is very
  unpleasant: https://i.imgur.com/QfvGli7.png

* Added two more modal sizes: xs and xl, and added all modals sizes
  to the theme preview page.  Also updated the theme preview page
  to use fa-close instead of 'x'.

* Cleaned up Spinner css to use modal sizes properly.  Themability
  of spinner to come later.

* Confirmation Modal JavaScript was cleaned up, and contents turned
  into an easier to digest client side template. Themability of
  client side templates show cased in 'material' design.

* 'material' confirmation dialog was altered to show how themes can
  make use of overriding client-side templates.

* Moved the Bootstrap helper variables into its own file.

* Added helper variables for various modal calculations.

Change-Id: I599ad2ffcf3034a24a19bc87e6ebed3eab079f45
2016-06-21 15:54:00 -07:00

37 lines
774 B
SCSS

.modal-body {
overflow-y: auto;
max-height: calc(100vh - #{$bs-modal-height});
// Subtract the help-button width and add the modal inner padding
// because the element is in the place which is applied the modal inner padding.
.step-description {
width: calc(100% - (#{$padding-xs-horizontal} * 2 + #{$font-size-h3}) + #{$modal-inner-padding});
}
@media (max-width: $screen-sm-min) {
max-height: calc(100vh - #{$bs-modal-height-small-screen});
}
textarea {
resize: vertical;
}
& > .nav-pills {
padding-bottom: $padding-base-horizontal;
}
}
// Custom Horizon Modal Sizes
@media (min-width: $screen-sm-min) {
.modal-xs {
width: $modal-xs;
}
}
@media (min-width: $screen-md-min) {
.modal-xl {
width: $modal-xl;
}
}