@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/utility/_utility.scss

@@ -0,0 +1,642 @@
+// Name:            Utility
+// Description:     Utilities collection
+//
+// Component:       `uk-panel-*`
+//                  `uk-clearfix`
+//                  `uk-float-*`
+//                  `uk-overflow-*`
+//                  `uk-resize-*`
+//                  `uk-display-*`
+//                  `uk-inline-*`
+//                  `uk-responsive-*`
+//                  `uk-preserve-width`
+//                  `uk-border-*`
+//                  `uk-box-shadow-*`
+//                  `uk-box-shadow-bottom`
+//                  `uk-dropcap`
+//                  `uk-logo`
+//                  `uk-blend-*`
+//                  `uk-transform-*`
+//                  `uk-transform-origin-*`
+//
+// States:          `uk-disabled`
+//                  `uk-drag`
+//                  `uk-dragover`
+//                  `uk-preserve`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin utility-styles {
+    /* ========================================================================
+       Component: Utility
+     ========================================================================== */
+
+
+    /* Panel
+     ========================================================================== */
+
+    .#{$prefix}-panel {
+        box-sizing: border-box;
+        display: flow-root;
+        position: relative;
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-panel > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /*
+     * Scrollable
+     */
+
+    .#{$prefix}-panel-scrollable {
+        border: var(--panel-scrollable-border-width) solid var(--panel-scrollable-border);
+        height: var(--panel-scrollable-height);
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        padding: var(--panel-scrollable-padding);
+        resize: both;
+        @if map.has-key($mixins, 'hook-panel-scrollable') {
+            @include meta.apply(map.get($mixins, 'hook-panel-scrollable'));
+        }
+    }
+
+
+    /* Clearfix
+     ========================================================================== */
+
+    /*
+     * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
+     * 2. `table` is used again with `::after` because `clear` only works with block elements.
+     * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari
+     */
+
+    /* 1 */
+    .#{$prefix}-clearfix::before {
+        content: '';
+        display: table-cell;
+    }
+
+    /* 2 */
+    .#{$prefix}-clearfix::after {
+        clear: both;
+        content: '';
+        display: table;
+    }
+
+
+    /* Float
+     ========================================================================== */
+
+    /*
+     * 1. Prevent content overflow
+     */
+
+    .#{$prefix}-float-left {
+        float: left;
+    }
+
+    .#{$prefix}-float-right {
+        float: right;
+    }
+
+    /* 1 */
+    [class*='#{$prefix}-float-'] {
+        max-width: 100%;
+    }
+
+
+    /* Overflow
+     ========================================================================== */
+
+    .#{$prefix}-overflow-hidden {
+        overflow: hidden;
+    }
+
+    /*
+     * Enable scrollbars if content is clipped
+     * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518
+     */
+
+    .#{$prefix}-overflow-auto {
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .#{$prefix}-overflow-auto > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Resize
+     ========================================================================== */
+
+    .#{$prefix}-resize {
+        resize: both;
+    }
+
+    .#{$prefix}-resize-vertical {
+        resize: vertical;
+    }
+
+
+    /* Display
+     ========================================================================== */
+
+    .#{$prefix}-display-block {
+        display: block !important;
+    }
+
+    .#{$prefix}-display-inline {
+        display: inline !important;
+    }
+
+    .#{$prefix}-display-inline-block {
+        display: inline-block !important;
+    }
+
+
+    /* Inline
+     ========================================================================== */
+
+    /*
+     * 1. Container fits its content
+     * 2. Create position context
+     * 3. Prevent content overflow
+     * 4. Behave like most inline-block elements
+     * 5. Force new layer without creating a new stacking context
+     *    to fix 1px glitch when combined with overlays and transitions in Webkit
+     * 6. Clip child elements
+     */
+
+    [class*='#{$prefix}-inline'] {
+        /* 5 */
+        -webkit-backface-visibility: hidden;
+
+        /* 1 */
+        display: inline-block;
+
+        /* 3 */
+        max-width: 100%;
+
+        /* 2 */
+        position: relative;
+
+        /* 4 */
+        vertical-align: middle;
+    }
+
+    .#{$prefix}-inline-clip {
+        /* 6 */
+        overflow: hidden;
+    }
+
+
+    /* Responsive objects
+     ========================================================================== */
+
+    /*
+     * Preserve original dimensions
+     * Because `img, `video`, `canvas` and  `audio` are already responsive by default, see Base component
+     */
+
+    .#{$prefix}-preserve-width,
+    .#{$prefix}-preserve-width canvas,
+    .#{$prefix}-preserve-width img,
+    .#{$prefix}-preserve-width svg,
+    .#{$prefix}-preserve-width video {
+        max-width: none;
+    }
+
+    /*
+     * Responsiveness
+     * Corrects `max-width` and `max-height` behavior if padding and border are used
+     */
+
+    .#{$prefix}-responsive-width,
+    .#{$prefix}-responsive-height {
+        box-sizing: border-box;
+    }
+
+    /*
+     * 1. Set a maximum width. `important` needed to override `uk-preserve-width img`
+     * 2. Auto scale the height. Only needed if `height` attribute is present
+     */
+
+    .#{$prefix}-responsive-width {
+        /* 2 */
+        height: auto;
+
+        /* 1 */
+        max-width: 100% !important;
+    }
+
+    /*
+     * 1. Set a maximum height. Only works if the parent element has a fixed height
+     * 2. Auto scale the width. Only needed if `width` attribute is present
+     * 3. Reset max-width, which `img, `video`, `canvas` and  `audio` already have by default
+     */
+
+    .#{$prefix}-responsive-height {
+        /* 1 */
+        max-height: 100%;
+
+        /* 3 */
+        max-width: none;
+
+        /* 2 */
+        width: auto;
+    }
+
+
+    /* Border
+     ========================================================================== */
+
+    .#{$prefix}-border-circle {
+        border-radius: 50%;
+    }
+
+    .#{$prefix}-border-pill {
+        border-radius: 500px;
+    }
+
+    .#{$prefix}-border-rounded {
+        border-radius: var(--border-rounded-border-radius);
+    }
+
+    /*
+     * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
+     */
+
+    .#{$prefix}-inline-clip[class*='#{$prefix}-border-'] {
+        -webkit-transform: translateZ(0);
+    }
+
+
+    /* Box-shadow
+     ========================================================================== */
+
+    .#{$prefix}-box-shadow-small {
+        box-shadow: var(--global-small-box-shadow);
+    }
+
+    .#{$prefix}-box-shadow-medium {
+        box-shadow: var(--global-medium-box-shadow);
+    }
+
+    .#{$prefix}-box-shadow-large {
+        box-shadow: var(--global-large-box-shadow);
+    }
+
+    .#{$prefix}-box-shadow-xlarge {
+        box-shadow: var(--global-xlarge-box-shadow);
+    }
+
+    /*
+     * Hover
+     */
+
+    [class*='#{$prefix}-box-shadow-hover'] {
+        transition: box-shadow var(--box-shadow-duration) var(--ease-in-out);
+    }
+
+    .#{$prefix}-box-shadow-hover-small:hover {
+        box-shadow: var(--global-small-box-shadow);
+    }
+
+    .#{$prefix}-box-shadow-hover-medium:hover {
+        box-shadow: var(--global-medium-box-shadow);
+    }
+
+    .#{$prefix}-box-shadow-hover-large:hover {
+        box-shadow: var(--global-large-box-shadow);
+    }
+
+    .#{$prefix}-box-shadow-hover-xlarge:hover {
+        box-shadow: var(--global-xlarge-box-shadow);
+    }
+
+
+    /* Box-shadow bottom
+     ========================================================================== */
+
+    /*
+     * 1. Set position.
+     * 2. Set style
+     * 3. Fix shadow being clipped in Safari if container is animated
+     */
+
+    @supports (filter: blur(0)) {
+        .#{$prefix}-box-shadow-bottom {
+            display: inline-block;
+            max-width: 100%;
+            position: relative;
+            vertical-align: middle;
+            z-index: 0;
+        }
+
+        .#{$prefix}-box-shadow-bottom::after {
+            background: var(--box-shadow-bottom-background);
+            border-radius: var(--box-shadow-bottom-border-radius);
+            bottom: calc(var(--box-shadow-bottom-height) * -1);
+            content: '';
+            filter: blur(var(--box-shadow-bottom-blur));
+
+            /* 2 */
+            height: var(--box-shadow-bottom-height);
+            left: 0;
+
+            /* 1 */
+            position: absolute;
+            right: 0;
+
+            /* 3 */
+            will-change: filter;
+            z-index: -1;
+            @if map.has-key($mixins, 'hook-box-shadow-bottom') {
+                @include meta.apply(map.get($mixins, 'hook-box-shadow-bottom'));
+            }
+        }
+    }
+
+
+    /* Drop cap
+     ========================================================================== */
+
+    /*
+     * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
+     *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
+     * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
+     *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
+     * 3. Caused by 1.: Edge creates two nested `::first-letter` containers, one for each selector
+     *    This doubles the `font-size` exponential when using the `em` unit.
+     */
+
+    .#{$prefix}-dropcap::first-letter,
+        /* 1 */
+    .#{$prefix}-dropcap > p:first-of-type::first-letter {
+        display: block;
+        float: left;
+        font-size: var(--dropcap-font-size);
+        line-height: 1;
+        margin-right: var(--dropcap-margin-right);
+        @if map.has-key($mixins, 'hook-dropcap') {
+            @include meta.apply(map.get($mixins, 'hook-dropcap'));
+        }
+    }
+
+    /* 2 */
+    @-moz-document url-prefix('') {
+        .#{$prefix}-dropcap::first-letter,
+        .#{$prefix}-dropcap > p:first-of-type::first-letter {
+            margin-top: 1.1%;
+        }
+    }
+
+    /* 3 */
+    @supports (-ms-ime-align: auto) {
+        .#{$prefix}-dropcap > p:first-of-type::first-letter {
+            font-size: 1em;
+        }
+    }
+
+
+    /* Logo
+     ========================================================================== */
+
+    /*
+     * 1. Required for `a`
+     */
+
+    .#{$prefix}-logo {
+        color: var(--logo-color);
+        font-family: var(--logo-font-family), system-ui;
+        font-size: var(--logo-font-size);
+
+        /* 1 */
+        text-decoration: none;
+        @if map.has-key($mixins, 'hook-logo') {
+            @include meta.apply(map.get($mixins, 'hook-logo'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-logo:hover,
+    .#{$prefix}-logo:focus {
+        color: var(--logo-hover-color);
+        outline: none;
+
+        /* 1 */
+        text-decoration: none;
+        @if map.has-key($mixins, 'hook-logo-hover') {
+            @include meta.apply(map.get($mixins, 'hook-logo-hover'));
+        }
+    }
+
+    .#{$prefix}-logo-inverse {
+        display: none;
+    }
+
+
+    /* Disabled State
+     ========================================================================== */
+
+    .#{$prefix}-disabled {
+        pointer-events: none;
+    }
+
+
+    /* Drag State
+     ========================================================================== */
+
+    /*
+     * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons
+     * 2. Fix dragging over iframes
+     */
+
+    .#{$prefix}-drag,
+        /* 1 */
+    .#{$prefix}-drag * {
+        cursor: move;
+    }
+
+    /* 2 */
+    .#{$prefix}-drag iframe {
+        pointer-events: none;
+    }
+
+
+    /* Dragover State
+     ========================================================================== */
+
+    /*
+     * Create a box-shadow when dragging a file over the upload area
+     */
+
+    .#{$prefix}-dragover {
+        box-shadow: var(--dragover-box-shadow);
+    }
+
+
+    /* Blend modes
+     ========================================================================== */
+
+    .#{$prefix}-blend-multiply {
+        mix-blend-mode: multiply;
+    }
+
+    .#{$prefix}-blend-screen {
+        mix-blend-mode: screen;
+    }
+
+    .#{$prefix}-blend-overlay {
+        mix-blend-mode: overlay;
+    }
+
+    .#{$prefix}-blend-darken {
+        mix-blend-mode: darken;
+    }
+
+    .#{$prefix}-blend-lighten {
+        mix-blend-mode: lighten;
+    }
+
+    .#{$prefix}-blend-color-dodge {
+        mix-blend-mode: color-dodge;
+    }
+
+    .#{$prefix}-blend-color-burn {
+        mix-blend-mode: color-burn;
+    }
+
+    .#{$prefix}-blend-hard-light {
+        mix-blend-mode: hard-light;
+    }
+
+    .#{$prefix}-blend-soft-light {
+        mix-blend-mode: soft-light;
+    }
+
+    .#{$prefix}-blend-difference {
+        mix-blend-mode: difference;
+    }
+
+    .#{$prefix}-blend-exclusion {
+        mix-blend-mode: exclusion;
+    }
+
+    .#{$prefix}-blend-hue {
+        mix-blend-mode: hue;
+    }
+
+    .#{$prefix}-blend-saturation {
+        mix-blend-mode: saturation;
+    }
+
+    .#{$prefix}-blend-color {
+        mix-blend-mode: color;
+    }
+
+    .#{$prefix}-blend-luminosity {
+        mix-blend-mode: luminosity;
+    }
+
+
+    /* Transform
+    ========================================================================== */
+
+    .#{$prefix}-transform-center {
+        transform: translate(-50%, -50%);
+    }
+
+
+    /* Transform Origin
+    ========================================================================== */
+
+    .#{$prefix}-transform-origin-top-left {
+        transform-origin: 0 0;
+    }
+
+    .#{$prefix}-transform-origin-top-center {
+        transform-origin: 50% 0;
+    }
+
+    .#{$prefix}-transform-origin-top-right {
+        transform-origin: 100% 0;
+    }
+
+    .#{$prefix}-transform-origin-center-left {
+        transform-origin: 0 50%;
+    }
+
+    .#{$prefix}-transform-origin-center-right {
+        transform-origin: 100% 50%;
+    }
+
+    .#{$prefix}-transform-origin-bottom-left {
+        transform-origin: 0 100%;
+    }
+
+    .#{$prefix}-transform-origin-bottom-center {
+        transform-origin: 50% 100%;
+    }
+
+    .#{$prefix}-transform-origin-bottom-right {
+        transform-origin: 100% 100%;
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-utility-misc') {
+        @include meta.apply(map.get($mixins, 'hook-utility-misc'));
+    }
+
+    @content;
+}
+
+@mixin utility-tokens {
+    --panel-scrollable-height: #{$panel-scrollable-height};
+    --panel-scrollable-padding: #{$panel-scrollable-padding};
+    --panel-scrollable-border-width: var(--global-border-width);
+    --panel-scrollable-border: var(--global-border);
+    --border-rounded-border-radius: #{$border-rounded-border-radius};
+    --box-shadow-duration: #{$box-shadow-duration};
+    --box-shadow-bottom-height: #{$box-shadow-bottom-height};
+    --box-shadow-bottom-border-radius: #{$box-shadow-bottom-border-radius};
+    --box-shadow-bottom-background: #{$box-shadow-bottom-background};
+    --box-shadow-bottom-blur: #{$box-shadow-bottom-blur};
+    --dropcap-margin-right: #{$dropcap-margin-right};
+    --dropcap-font-size: #{$global-line-height * 3 * 1em};
+    --logo-font-size: var(--global-large-font-size);
+    --logo-font-family: var(--global-font-family);
+    --logo-color: var(--global-color);
+    --logo-hover-color: var(--global-color);
+    --dragover-box-shadow: #{$dragover-box-shadow};
+
+    @content;
+}
+
+@mixin utility-inverse-tokens {
+    --inverse-logo-color: var(--inverse-global-color);
+    --inverse-logo-hover-color: var(--inverse-global-color);
+
+    @content;
+}