diff options
Diffstat (limited to 'scss/uikit/components/modal.scss')
| -rw-r--r-- | scss/uikit/components/modal.scss | 368 |
1 files changed, 368 insertions, 0 deletions
diff --git a/scss/uikit/components/modal.scss b/scss/uikit/components/modal.scss new file mode 100644 index 00000000..863f008a --- /dev/null +++ b/scss/uikit/components/modal.scss @@ -0,0 +1,368 @@ +// Name: Modal +// Description: Component to create modal dialogs +// +// Component: `uk-modal` +// +// Sub-objects: `uk-modal-page` +// `uk-modal-dialog` +// `uk-modal-header` +// `uk-modal-body` +// `uk-modal-footer` +// `uk-modal-title` +// `uk-modal-close` +// +// Adopted: `uk-modal-close-default` +// `uk-modal-close-outside` +// `uk-modal-close-full` +// +// Modifiers: `uk-modal-container` +// `uk-modal-full` +// +// States: `uk-open` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$modal-z-index: $global-z-index + 10 !default; +$modal-background: rgba(0,0,0,0.6) !default; + +$modal-padding-horizontal: 15px !default; +$modal-padding-horizontal-s: $global-gutter !default; +$modal-padding-horizontal-m: $global-medium-gutter !default; +$modal-padding-vertical: $modal-padding-horizontal !default; +$modal-padding-vertical-s: 50px !default; + +$modal-dialog-width: 600px !default; +$modal-dialog-background: $global-background !default; + +$modal-container-width: 1200px !default; + +$modal-body-padding-horizontal: $global-gutter !default; +$modal-body-padding-vertical: $global-gutter !default; + +$modal-header-padding-horizontal: $global-gutter !default; +$modal-header-padding-vertical: ($modal-header-padding-horizontal / 2) !default; +$modal-header-background: $global-muted-background !default; + +$modal-footer-padding-horizontal: $global-gutter !default; +$modal-footer-padding-vertical: ($modal-footer-padding-horizontal / 2) !default; +$modal-footer-background: $global-muted-background !default; + +$modal-title-font-size: $global-xlarge-font-size !default; +$modal-title-line-height: 1.3 !default; + +$modal-close-position: $global-small-margin !default; +$modal-close-padding: 5px !default; + +$modal-close-outside-position: 0 !default; +$modal-close-outside-translate: 100% !default; +$modal-close-outside-color: lighten($global-inverse-color, 20%) !default; +$modal-close-outside-hover-color: $global-inverse-color !default; + + +/* ======================================================================== + Component: Modal + ========================================================================== */ + +/* + * 1. Hide by default + * 2. Set position + * 3. Allow scrolling for the modal dialog + * 4. Horizontal padding + * 5. Mask the background page + * 6. Fade-in transition + */ + +.uk-modal { + /* 1 */ + display: none; + /* 2 */ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $modal-z-index; + /* 3 */ + overflow-y: auto; + -webkit-overflow-scrolling: touch; + /* 4 */ + padding: $modal-padding-vertical $modal-padding-horizontal; + /* 5 */ + background: $modal-background; + /* 6 */ + opacity: 0; + transition: opacity 0.15s linear; + @if(mixin-exists(hook-modal)) {@include hook-modal();} +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-modal { padding: $modal-padding-vertical-s $modal-padding-horizontal-s; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-modal { + padding-left: $modal-padding-horizontal-m; + padding-right: $modal-padding-horizontal-m; + } + +} + +/* + * Open + */ + +.uk-modal.uk-open { opacity: 1; } + + +/* Page + ========================================================================== */ + +/* + * Prevent scrollbars + */ + +.uk-modal-page { overflow: hidden; } + + +/* Dialog + ========================================================================== */ + +/* + * 1. Create position context for spinner and close button + * 2. Dimensions + * 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11 + * `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests + * 4. Style + * 5. Slide-in transition + */ + +.uk-modal-dialog { + /* 1 */ + position: relative; + /* 2 */ + box-sizing: border-box; + margin: 0 auto; + width: $modal-dialog-width; + /* 3 */ + max-width: unquote('calc(100% - 0.01px)') !important; + /* 4 */ + background: $modal-dialog-background; + /* 5 */ + opacity: 0; + transform: translateY(-100px); + transition: 0.3s linear; + transition-property: opacity, transform; + @if(mixin-exists(hook-modal-dialog)) {@include hook-modal-dialog();} +} + +/* + * Open + */ + +.uk-open > .uk-modal-dialog { + opacity: 1; + transform: translateY(0); +} + + +/* Size modifier + ========================================================================== */ + +/* + * Container size + * Take the same size as the Container component + */ + +.uk-modal-container .uk-modal-dialog { width: $modal-container-width; } + +/* + * Full size + * 1. Remove padding and background from modal + * 2. Reset all default declarations from modal dialog + */ + +/* 1 */ +.uk-modal-full { + padding: 0; + background: none; +} + +/* 2 */ +.uk-modal-full .uk-modal-dialog { + margin: 0; + width: 100%; + max-width: 100%; + transform: translateY(0); + @if(mixin-exists(hook-modal-full)) {@include hook-modal-full();} +} + + +/* Sections + ========================================================================== */ + +.uk-modal-body { + padding: $modal-body-padding-vertical $modal-body-padding-horizontal; + @if(mixin-exists(hook-modal-body)) {@include hook-modal-body();} +} + +.uk-modal-header { + padding: $modal-header-padding-vertical $modal-header-padding-horizontal; + background: $modal-header-background; + @if(mixin-exists(hook-modal-header)) {@include hook-modal-header();} +} + +.uk-modal-footer { + padding: $modal-footer-padding-vertical $modal-footer-padding-horizontal; + background: $modal-footer-background; + @if(mixin-exists(hook-modal-footer)) {@include hook-modal-footer();} +} + +/* + * Micro clearfix + */ + +.uk-modal-body::before, +.uk-modal-body::after, +.uk-modal-header::before, +.uk-modal-header::after, +.uk-modal-footer::before, +.uk-modal-footer::after { + content: ""; + display: table; +} + +.uk-modal-body::after, +.uk-modal-header::after, +.uk-modal-footer::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-modal-body > :last-child, +.uk-modal-header > :last-child, +.uk-modal-footer > :last-child { margin-bottom: 0; } + + +/* Title + ========================================================================== */ + +.uk-modal-title { + font-size: $modal-title-font-size; + line-height: $modal-title-line-height; + @if(mixin-exists(hook-modal-title)) {@include hook-modal-title();} +} + + +/* Close + * Adopts `uk-close` + ========================================================================== */ + +[class*='uk-modal-close-'] { + position: absolute; + z-index: $modal-z-index; + top: $modal-close-position; + right: $modal-close-position; + padding: $modal-close-padding; + @if(mixin-exists(hook-modal-close)) {@include hook-modal-close();} +} + +/* + * Remove margin from adjacent element + */ + +[class*='uk-modal-close-']:first-child + * { margin-top: 0; } + +/* + * Hover + */ + +[class*='uk-modal-close-']:hover { + @if(mixin-exists(hook-modal-close-hover)) {@include hook-modal-close-hover();} +} + +/* + * Default + */ + +.uk-modal-close-default { + @if(mixin-exists(hook-modal-close-default)) {@include hook-modal-close-default();} +} + +.uk-modal-close-default:hover { + @if(mixin-exists(hook-modal-close-default-hover)) {@include hook-modal-close-default-hover();} +} + +/* + * Outside + * 1. Prevent scrollbar on small devices + */ + +.uk-modal-close-outside { + top: $modal-close-outside-position; + /* 1 */ + right: (-$modal-close-padding); + transform: translate(0, -($modal-close-outside-translate)); + color: $modal-close-outside-color; + @if(mixin-exists(hook-modal-close-outside)) {@include hook-modal-close-outside();} +} + +.uk-modal-close-outside:hover { + color: $modal-close-outside-hover-color; + @if(mixin-exists(hook-modal-close-outside-hover)) {@include hook-modal-close-outside-hover();} +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + /* 1 */ + .uk-modal-close-outside { + right: $modal-close-outside-position; + transform: translate($modal-close-outside-translate, -($modal-close-outside-translate)); + } + +} + +/* + * Full + */ + +.uk-modal-close-full { + @if(mixin-exists(hook-modal-close-full)) {@include hook-modal-close-full();} +} + +.uk-modal-close-full:hover { + @if(mixin-exists(hook-modal-close-full-hover)) {@include hook-modal-close-full-hover();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-modal-misc)) {@include hook-modal-misc();} + +// @mixin hook-modal(){} +// @mixin hook-modal-dialog(){} +// @mixin hook-modal-full(){} +// @mixin hook-modal-header(){} +// @mixin hook-modal-body(){} +// @mixin hook-modal-footer(){} +// @mixin hook-modal-title(){} +// @mixin hook-modal-close(){} +// @mixin hook-modal-close-hover(){} +// @mixin hook-modal-close-default(){} +// @mixin hook-modal-close-default-hover(){} +// @mixin hook-modal-close-outside(){} +// @mixin hook-modal-close-outside-hover(){} +// @mixin hook-modal-close-full(){} +// @mixin hook-modal-close-full-hover(){} +// @mixin hook-modal-misc(){} |