mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
9.6 KiB
368 lines
9.6 KiB
// 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(){}
|
|
|