@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/modal.scss

@@ -1,370 +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`
-//
-// ========================================================================
-
-@use 'sass:meta';
-@use 'sass:string';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Modal
- ========================================================================== */
-
-.uk-modal-wrap {
-    inset: 0;
-    outline: 0 none;
-    -webkit-overflow-scrolling: touch;
-    overflow-y: auto;
-    padding: var(--modal-padding-vertical) var(--modal-padding-horizontal);
-    position: fixed;
-    z-index: var(--modal-z-index);
-}
-
-.uk-modal {
-    box-sizing: border-box;
-    height: 100%;
-    margin: 0 auto;
-    max-width: 100%;
-    pointer-events: none;
-    width: var(--modal-width);
-    z-index: var(--modal-z-index);
-    @if meta.mixin-exists('hook-modal') {
-        @include hook-modal;
-    }
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-    .uk-modal-wrap {
-        padding: var(--modal-padding-vertical-s) var(--modal-padding-horizontal-s);
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-modal-wrap {
-        padding-left: var(--modal-padding-horizontal-m);
-        padding-right: var(--modal-padding-horizontal-m);
-    }
-}
-
-
-/* Page
- ========================================================================== */
-
-/*
- * Prevent scrollbars
- */
-
-.uk-modal-page {
-    overflow: clip;
-}
-
-
-/* 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-container {
-    /* 4 */
-    background: var(--modal-background);
-
-    /* 2 */
-    box-sizing: border-box;
-    max-width: calc(100% - 0.01px);
-    pointer-events: auto;
-    position: relative;
-    width: 100%;
-    @if meta.mixin-exists('hook-modal-container') {
-        @include hook-modal-container;
-    }
-}
-
-/* Mask
- ========================================================================== */
-
-/*
- * 1. Set position
- * 2. Mask the background page
- */
-
-.uk-modal-mask {
-    /* 2 */
-    background: var(--modal-mask-background);
-    height: 100%;
-    inset: 0;
-
-    /* 1 */
-    position: fixed;
-    z-index: var(--modal-z-index);
-    @if meta.mixin-exists('hook-modal-mask') {
-        @include hook-modal-mask;
-    }
-}
-
-/* Centered modifier
- ========================================================================== */
-
-.uk-modal-centered {
-    align-items: center;
-    display: flex;
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-/*
- * Full size
- * 1. Remove padding and background from modal
- * 2. Reset all default declarations from modal dialog
- */
-
-/* 1 */
-.uk-modal-full {
-    max-width: 100%;
-    padding: 0;
-    width: 100%;
-}
-
-/* 2 */
-.uk-modal-full .uk-modal {
-    height: 100%;
-    margin: 0;
-    max-width: 100%;
-    transform: translateY(0);
-    width: 100%;
-    @if meta.mixin-exists('hook-modal-full') {
-        @include hook-modal-full;
-    }
-}
-
-
-/* Sections
- ========================================================================== */
-
-.uk-modal-body {
-    display: flow-root;
-    padding: var(--modal-body-padding-vertical) var(--modal-body-padding-horizontal);
-    @if meta.mixin-exists('hook-modal-body') {
-        @include hook-modal-body;
-    }
-}
-
-.uk-modal-header {
-    background: var(--modal-header-background);
-    display: flow-root;
-    padding: var(--modal-header-padding-vertical) var(--modal-header-padding-horizontal);
-
-    @if meta.mixin-exists('hook-modal-header') {
-        @include hook-modal-header;
-    }
-}
-
-.uk-modal-footer {
-    background: var(--modal-footer-background);
-    display: flow-root;
-    padding: var(--modal-footer-padding-vertical) var(--modal-footer-padding-horizontal);
-    @if meta.mixin-exists('hook-modal-footer') {
-        @include hook-modal-footer;
-    }
-}
-
-/*
- * 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: var(--modal-title-font-size);
-    line-height: var(--modal-title-line-height);
-    @if meta.mixin-exists('hook-modal-title') {
-        @include hook-modal-title;
-    }
-}
-
-
-/* Close
- * Adopts `uk-close`
- ========================================================================== */
-
-[class*='uk-modal-close-'] {
-    --icon-size: 24px;
-
-    box-sizing: content-box;
-    cursor: pointer;
-    padding: var(--modal-close-padding);
-    position: absolute;
-    right: var(--modal-close-position);
-    top: var(--modal-close-position);
-    z-index: var(--modal-z-index);
-    @if meta.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 meta.mixin-exists('hook-modal-close-hover') {
-        @include hook-modal-close-hover;
-    }
-}
-
-/*
- * Default
- */
-
-.uk-modal-close-default {
-    @if meta.mixin-exists('hook-modal-close-default') {
-        @include hook-modal-close-default;
-    }
-}
-
-.uk-modal-close-default:hover {
-    @if meta.mixin-exists('hook-modal-close-default-hover') {
-        @include hook-modal-close-default-hover;
-    }
-}
-
-/*
- * Outside
- * 1. Prevent scrollbar on small devices
- */
-
-.uk-modal-close-outside {
-    color: var(--modal-close-outside-color);
-
-    /* 1 */
-    right: calc(var(--modal-close-padding) * -1);
-    top: var(--modal-close-outside-position);
-    transform: translate(0, string.unquote('calc(var(--modal-close-outside-translate) * -1)'));
-    @if meta.mixin-exists('hook-modal-close-outside') {
-        @include hook-modal-close-outside;
-    }
-}
-
-.uk-modal-close-outside:hover {
-    color: var(--modal-close-outside-hover-color);
-    @if meta.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: var(--modal-close-outside-position);
-        transform: translate(var(--modal-close-outside-translate), string.unquote('calc(var(--modal-close-outside-translate) * -1)'));
-    }
-}
-
-/*
- * Full
- */
-
-.uk-modal-close-full {
-    @if meta.mixin-exists('hook-modal-close-full') {
-        @include hook-modal-close-full;
-    }
-}
-
-.uk-modal-close-full:hover {
-    @if meta.mixin-exists('hook-modal-close-full-hover') {
-        @include hook-modal-close-full-hover;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-modal-misc') {
-    @include hook-modal-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --modal-z-index: calc(var(--global-z-index) + 10);
-    --modal-mask-background: #{$modal-mask-background};
-    --modal-background: var(--global-background);
-    --modal-padding-horizontal: #{$modal-padding-horizontal};
-    --modal-padding-horizontal-s: var(--global-gutter);
-    --modal-padding-horizontal-m: var(--global-medium-gutter);
-    --modal-padding-vertical: var(--modal-padding-horizontal);
-    --modal-padding-vertical-s: #{$modal-padding-vertical-s};
-    --modal-width: #{$modal-width};
-    --modal-body-padding-horizontal: var(--global-gutter);
-    --modal-body-padding-vertical: var(--global-gutter);
-    --modal-header-background: var(--global-muted-background);
-    --modal-header-padding-horizontal: var(--global-gutter);
-    --modal-header-padding-vertical: calc(var(--modal-header-padding-horizontal) / 2);
-    --modal-footer-background: var(--global-muted-background);
-    --modal-footer-padding-horizontal: var(--global-gutter);
-    --modal-footer-padding-vertical: calc(var(--modal-header-padding-horizontal) / 2);
-    --modal-title-font-size: var(--global-xlarge-font-size);
-    --modal-title-line-height: #{$modal-title-line-height};
-    --modal-close-position: var(--global-small-margin);
-    --modal-close-padding: #{$modal-close-padding};
-    --modal-close-outside-position: #{$modal-close-outside-position};
-    --modal-close-outside-translate: #{$modal-close-outside-translate};
-    --modal-close-outside-color: #{$modal-close-outside-color};
-    --modal-close-outside-hover-color: var(--global-inverse-color);
-}