03ede4ce5e
* 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
33 lines
1.4 KiB
SCSS
33 lines
1.4 KiB
SCSS
// Bootstrap Variable Helpers
|
|
|
|
// Some values in Bootstrap are hardcoded, but it would be
|
|
// useful to use their values in some calculations
|
|
|
|
$bs-button-vertical-border: 2; // _buttons.scss:18
|
|
|
|
$bs-dropdown-item-padding-vertical: 3px; // _dropdowns.scss:67
|
|
$bs-dropdown-item-padding-horizontal: 20px; // _dropdowns.scss:67
|
|
|
|
$bs-modal-margin: 30px; // _modals.scss:138
|
|
$bs-modal-margin-small-screen: 10px; // _modals.scss:47
|
|
$bs-modal-footer-vertical-border: 1; // _modals.scss:106
|
|
|
|
|
|
// Some custom Modal sizes used to create two additional modal sizes: xs & xl
|
|
$modal-xs: $modal-sm/2;
|
|
$modal-xl: 95vw;
|
|
|
|
|
|
// Some Helpful Calculations
|
|
$bs-button-height: ($font-size-base * $line-height-base) + $padding-base-vertical*2 + $bs-button-vertical-border;
|
|
|
|
// The height of a standard modal header with an H3 sized title
|
|
$bs-modal-header-height: $modal-title-padding*2 + ($font-size-h3 * $line-height-base);
|
|
|
|
// The height of a standard modal footer with a single row of buttons
|
|
$bs-modal-footer-height: $modal-inner-padding*2 + $bs-button-height + $bs-modal-footer-vertical-border;
|
|
|
|
// The height of the modal w/o taking its contents into account
|
|
$bs-modal-height: $bs-modal-margin*2 + $bs-modal-header-height + $bs-modal-footer-height;
|
|
$bs-modal-height-small-screen: $bs-modal-margin-small-screen*2 + $bs-modal-header-height + $bs-modal-footer-height;
|