diff options
Diffstat (limited to 'scss/uikit/components/modal.scss')
| -rw-r--r-- | scss/uikit/components/modal.scss | 368 |
1 files changed, 0 insertions, 368 deletions
diff --git a/scss/uikit/components/modal.scss b/scss/uikit/components/modal.scss deleted file mode 100644 index 863f008a..00000000 --- a/scss/uikit/components/modal.scss +++ /dev/null @@ -1,368 +0,0 @@ -// 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(){} |