@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/modal/_modal.scss

@@ -0,0 +1,374 @@
+// 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:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin modal-styles {
+    /* ========================================================================
+       Component: Modal
+     ========================================================================== */
+
+    .#{$prefix}-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);
+    }
+
+    .#{$prefix}-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 map.has-key($mixins, 'hook-modal') {
+            @include meta.apply(map.get($mixins, 'hook-modal'));
+        }
+    }
+
+    /* Phone landscape and bigger */
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-modal-wrap {
+            padding: var(--modal-padding-vertical-s) var(--modal-padding-horizontal-s);
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-modal-wrap {
+            padding-left: var(--modal-padding-horizontal-m);
+            padding-right: var(--modal-padding-horizontal-m);
+        }
+    }
+
+
+    /* Page
+     ========================================================================== */
+
+    /*
+     * Prevent scrollbars
+     */
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-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 map.has-key($mixins, 'hook-modal-container') {
+            @include meta.apply(map.get($mixins, 'hook-modal-container'));
+        }
+    }
+
+    /* Mask
+     ========================================================================== */
+
+    /*
+     * 1. Set position
+     * 2. Mask the background page
+     */
+
+    .#{$prefix}-modal-mask {
+        /* 2 */
+        background: var(--modal-mask-background);
+        height: 100%;
+        inset: 0;
+
+        /* 1 */
+        position: fixed;
+        z-index: var(--modal-z-index);
+        @if map.has-key($mixins, 'hook-modal-mask') {
+            @include meta.apply(map.get($mixins, 'hook-modal-mask'));
+        }
+    }
+
+    /* Centered modifier
+     ========================================================================== */
+
+    .#{$prefix}-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 */
+    .#{$prefix}-modal-full {
+        max-width: 100%;
+        padding: 0;
+        width: 100%;
+    }
+
+    /* 2 */
+    .#{$prefix}-modal-full .#{$prefix}-modal {
+        height: 100%;
+        margin: 0;
+        max-width: 100%;
+        transform: translateY(0);
+        width: 100%;
+        @if map.has-key($mixins, 'hook-modal-full') {
+            @include meta.apply(map.get($mixins, 'hook-modal-full'));
+        }
+    }
+
+
+    /* Sections
+     ========================================================================== */
+
+    .#{$prefix}-modal-body {
+        display: flow-root;
+        padding: var(--modal-body-padding-vertical) var(--modal-body-padding-horizontal);
+        @if map.has-key($mixins, 'hook-modal-body') {
+            @include meta.apply(map.get($mixins, 'hook-modal-body'));
+        }
+    }
+
+    .#{$prefix}-modal-header {
+        background: var(--modal-header-background);
+        display: flow-root;
+        padding: var(--modal-header-padding-vertical) var(--modal-header-padding-horizontal);
+
+        @if map.has-key($mixins, 'hook-modal-header') {
+            @include meta.apply(map.get($mixins, 'hook-modal-header'));
+        }
+    }
+
+    .#{$prefix}-modal-footer {
+        background: var(--modal-footer-background);
+        display: flow-root;
+        padding: var(--modal-footer-padding-vertical) var(--modal-footer-padding-horizontal);
+        @if map.has-key($mixins, 'hook-modal-footer') {
+            @include meta.apply(map.get($mixins, 'hook-modal-footer'));
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-modal-body > :last-child,
+    .#{$prefix}-modal-header > :last-child,
+    .#{$prefix}-modal-footer > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Title
+     ========================================================================== */
+
+    .#{$prefix}-modal-title {
+        font-size: var(--modal-title-font-size);
+        line-height: var(--modal-title-line-height);
+        @if map.has-key($mixins, 'hook-modal-title') {
+            @include meta.apply(map.get($mixins, 'hook-modal-title'));
+        }
+    }
+
+
+    /* Close
+     * Adopts `uk-close`
+     ========================================================================== */
+
+    [class*='#{$prefix}-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 map.has-key($mixins, 'hook-modal-close') {
+            @include meta.apply(map.get($mixins, 'hook-modal-close'));
+        }
+    }
+
+    /*
+     * Remove margin from adjacent element
+     */
+
+    [class*='#{$prefix}-modal-close-']:first-child + * {
+        margin-top: 0;
+    }
+
+    /*
+     * Hover
+     */
+
+    [class*='#{$prefix}-modal-close-']:hover {
+        @if map.has-key($mixins, 'hook-modal-close-hover') {
+            @include meta.apply(map.get($mixins, 'hook-modal-close-hover'));
+        }
+    }
+
+    /*
+     * Default
+     */
+
+    .#{$prefix}-modal-close-default {
+        @if map.has-key($mixins, 'hook-modal-close-default') {
+            @include meta.apply(map.get($mixins, 'hook-modal-close-default'));
+        }
+    }
+
+    .#{$prefix}-modal-close-default:hover {
+        @if map.has-key($mixins, 'hook-modal-close-default-hover') {
+            @include meta.apply(map.get($mixins, 'hook-modal-close-default-hover'));
+        }
+    }
+
+    /*
+     * Outside
+     * 1. Prevent scrollbar on small devices
+     */
+
+    .#{$prefix}-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 map.has-key($mixins, 'hook-modal-close-outside') {
+            @include meta.apply(map.get($mixins, 'hook-modal-close-outside'));
+        }
+    }
+
+    .#{$prefix}-modal-close-outside:hover {
+        color: var(--modal-close-outside-hover-color);
+        @if map.has-key($mixins, 'hook-modal-close-outside-hover') {
+            @include meta.apply(map.get($mixins, 'hook-modal-close-outside-hover'));
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        /* 1 */
+        .#{$prefix}-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
+     */
+
+    .#{$prefix}-modal-close-full {
+        @if map.has-key($mixins, 'hook-modal-close-full') {
+            @include meta.apply(map.get($mixins, 'hook-modal-close-full'));
+        }
+    }
+
+    .#{$prefix}-modal-close-full:hover {
+        @if map.has-key($mixins, 'hook-modal-close-full-hover') {
+            @include meta.apply(map.get($mixins, 'hook-modal-close-full-hover'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-modal-misc') {
+        @include meta.apply(map.get($mixins, 'hook-modal-misc'));
+    }
+
+    @content;
+}
+
+@mixin modal-tokens {
+    --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);
+
+    @content;
+}

package/styles/motion/_index.scss

@@ -0,0 +1,8 @@
+@use 'motion' as *;
+
+$generate-tokens: true !default;
+
+@include motion-styles;
+
+// No tokens for this component
+// :root { @include motion-tokens; }