@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/control/_control.scss

@@ -0,0 +1,364 @@
+// Name:            Control
+// Description:     Component to create form elements
+//
+// Component:       `uk-control`
+//
+// Modifier:        `uk-control-small`
+//                  `uk-control-medium`
+//                  `uk-control-large`
+//                  `uk-control-success`
+//                  `uk-control-warning`
+//                  `uk-control-danger`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin control-styles {
+    /* ========================================================================
+       Component: Control
+     ========================================================================== */
+
+    .#{$prefix}-control {
+        align-items: center;
+        background-color: var(--control-background);
+        border: var(--control-border-width) var(--control-border-style) var(--control-border);
+        border-radius: var(--control-border-radius);
+        box-sizing: border-box;
+        color: var(--control-color);
+        cursor: text;
+        display: flex;
+        font-size: inherit;
+        min-height: var(--control-height);
+        padding-left: var(--control-padding-horizontal);
+        padding-right: var(--control-padding-horizontal);
+        position: relative;
+        transition: all var(--transition-duration);
+        @if map.has-key($mixins, 'hook-control') {
+            @include meta.apply(map.get($mixins, 'hook-control'));
+        }
+    }
+
+    /* Hover state  (unused for disabled state) */
+    .#{$prefix}-control:hover {
+        background-color: var(--control-hover-background);
+        border-color: var(--control-hover-border);
+        color: var(--control-hover-color);
+        @if map.has-key($mixins, 'hook-control-hover') {
+            @include meta.apply(map.get($mixins, 'hook-control-hover'));
+        }
+    }
+
+    /* Focus state  (unused for disabled state) */
+    .#{$prefix}-control:focus,
+    .#{$prefix}-control:focus-within {
+        background-color: var(--control-focus-background);
+        border-color: var(--control-focus-border);
+        color: var(--control-focus-color);
+        outline: none;
+        @if map.has-key($mixins, 'hook-control-focus') {
+            @include meta.apply(map.get($mixins, 'hook-control-focus'));
+        }
+    }
+
+    /* Disabled state */
+    .#{$prefix}-control.#{$prefix}-disabled {
+        background-color: var(--control-disabled-background);
+        border-color: var(--control-disabled-border);
+        color: var(--control-disabled-color);
+        cursor: not-allowed;
+        @if map.has-key($mixins, 'hook-control-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-control-disabled'));
+        }
+    }
+
+
+    /* Size modifier
+     ========================================================================== */
+
+    /*
+     * Small
+     */
+
+    .#{$prefix}-control-small {
+        font-size: var(--control-small-font-size);
+        min-height: var(--control-small-height);
+        padding: 0 var(--control-small-padding-horizontal);
+        @if map.has-key($mixins, 'hook-control-small') {
+            @include meta.apply(map.get($mixins, 'hook-control-small'));
+        }
+    }
+
+    /*
+     * Medium
+     */
+
+    .#{$prefix}-control-medium {
+        font-size: var(--control-medium-font-size);
+        min-height: var(--control-medium-height);
+        padding: 0 var(--control-medium-padding-horizontal);
+        @if map.has-key($mixins, 'hook-control-medium') {
+            @include meta.apply(map.get($mixins, 'hook-control-medium'));
+        }
+    }
+
+    /*
+     * Large
+     */
+
+    .#{$prefix}-control-large {
+        font-size: var(--control-large-font-size);
+        min-height: var(--control-large-height);
+        padding: 0 var(--control-large-padding-horizontal);
+        @if map.has-key($mixins, 'hook-control-large') {
+            @include meta.apply(map.get($mixins, 'hook-control-large'));
+        }
+    }
+
+
+    /* Style modifier
+     ========================================================================== */
+
+    /*
+     * Success
+     */
+
+    .#{$prefix}-control-success,
+    .#{$prefix}-control-success:hover,
+    .#{$prefix}-control-success:focus-within {
+        border-color: var(--control-success-border);
+        color: var(--control-success-color);
+        @if map.has-key($mixins, 'hook-control-success') {
+            @include meta.apply(map.get($mixins, 'hook-control-success'));
+        }
+    }
+
+    /*
+     * Warning
+     */
+
+    .#{$prefix}-control-warning,
+    .#{$prefix}-control-warning:hover,
+    .#{$prefix}-control-warning:focus-within {
+        border-color: var(--control-warning-border);
+        color: var(--control-warning-color);
+        @if map.has-key($mixins, 'hook-control-warning') {
+            @include meta.apply(map.get($mixins, 'hook-control-warning'));
+        }
+    }
+
+    /*
+     * Danger
+     */
+
+    .#{$prefix}-control-danger,
+    .#{$prefix}-control-danger:hover,
+    .#{$prefix}-control-danger:focus-within {
+        border-color: var(--control-danger-border);
+        color: var(--control-danger-color);
+        @if map.has-key($mixins, 'hook-control-danger') {
+            @include meta.apply(map.get($mixins, 'hook-control-danger'));
+        }
+    }
+
+    /*
+     * Blank
+     */
+
+    .#{$prefix}-control-blank,
+    .#{$prefix}-control-blank:hover,
+    .#{$prefix}-control-blank:focus-within {
+        background-color: transparent;
+        border-color: transparent;
+        border-style: var(--control-blank-border-style);
+        @if map.has-key($mixins, 'hook-control-blank') {
+            @include meta.apply(map.get($mixins, 'hook-control-blank'));
+        }
+    }
+
+    .#{$prefix}-control-blank:focus-within {
+        border-color: var(--control-blank-focus-border);
+        @if map.has-key($mixins, 'hook-control-blank-focus') {
+            @include meta.apply(map.get($mixins, 'hook-control-blank-focus'));
+        }
+    }
+
+
+    /* Control input, prefix and suffix
+     ========================================================================== */
+
+    /*
+     * Control input
+     */
+
+    .#{$prefix}-control-input {
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .#{$prefix}-control-input .#{$prefix}-input,
+    .#{$prefix}-control-input .#{$prefix}-input:hover,
+    .#{$prefix}-control-input .#{$prefix}-input:focus,
+    .#{$prefix}-control-input .#{$prefix}-input:disabled {
+        background: none;
+        color: inherit;
+        font-size: inherit;
+        outline: 0 none;
+        padding: 0;
+    }
+
+    .#{$prefix}-control-input .#{$prefix}-input {
+        height: 100%;
+        @if map.has-key($mixins, 'hook-control-input') {
+            @include meta.apply(map.get($mixins, 'hook-control-input'));
+        }
+    }
+
+    .#{$prefix}-control-input,
+    .#{$prefix}-control-prefix,
+    .#{$prefix}-control-suffix,
+    .#{$prefix}-control-clear {
+        align-items: center;
+        display: inline-flex;
+    }
+
+    .#{$prefix}-control-prefix,
+    .#{$prefix}-control-suffix,
+    .#{$prefix}-control-clear {
+        min-width: fit-content;
+        user-select: none;
+    }
+
+    .#{$prefix}-control-prefix {
+        @if map.has-key($mixins, 'hook-control-prefix') {
+            @include meta.apply(map.get($mixins, 'hook-control-prefix'));
+        }
+    }
+
+    .#{$prefix}-control-suffix {
+        @if map.has-key($mixins, 'hook-control-suffix') {
+            @include meta.apply(map.get($mixins, 'hook-control-suffix'));
+        }
+    }
+
+    .#{$prefix}-control-clear {
+        cursor: pointer;
+        font-size: 0.8rem;
+        opacity: 0.8;
+        transition: opacity var(--transition-medium-fast-duration);
+    }
+
+    .#{$prefix}-control-clear:hover { opacity: 0.6 }
+
+
+    /* Right to Left Direction
+     ========================================================================== */
+
+    body:not([dir]) .#{$prefix}-control:not(.#{$prefix}-control-rtl),
+    [dir='ltr'] .#{$prefix}-control:not(.#{$prefix}-control-rtl) {
+        direction: ltr;
+
+        .#{$prefix}-control-prefix {
+            margin-right: var(--control-affix-margin);
+        }
+
+        .#{$prefix}-control-suffix {
+            margin-left: var(--control-affix-margin);
+        }
+    }
+
+    [dir='rtl'] .#{$prefix}-control,
+    .#{$prefix}-control.#{$prefix}-control-rtl {
+        direction: rtl;
+
+        .#{$prefix}-control-prefix {
+            margin-left: var(--control-affix-margin);
+        }
+
+        .#{$prefix}-control-suffix {
+            margin-right: var(--control-affix-margin);
+        }
+    }
+
+    @content;
+}
+
+@mixin control-tokens {
+    --control-height: var(--global-control-height);
+    --control-line-height: var(--control-height);
+    --control-padding-horizontal: #{$control-padding-horizontal};
+    --control-padding-vertical: #{$control-padding-vertical};
+    --control-background: #{$control-background};
+    --control-color: var(--global-color);
+    --control-border: var(--global-border);
+    --control-border-style: var(--global-border-style);
+    --control-border-width: var(--global-border-width);
+    --control-border-radius: #{$control-border-radius};
+    --control-hover-background: #{$control-hover-background};
+    --control-hover-color: var(--global-color);
+    --control-hover-border: #{$control-hover-border};
+    --control-focus-background: #{$control-focus-background};
+    --control-focus-color: var(--global-color);
+    --control-focus-border: var(--global-primary-border);
+    --control-disabled-background: #{$control-disabled-background};
+    --control-disabled-border: var(--control-border);
+    --control-disabled-color: var(--global-color);
+    --control-placeholder-color: var(--global-muted-color);
+    --control-small-height: var(--global-control-small-height);
+    --control-small-padding-horizontal: #{$control-small-padding-horizontal};
+    --control-small-padding-vertical: #{$control-small-padding-vertical};
+    --control-small-line-height: var(--control-small-height);
+    --control-small-font-size: var(--global-small-font-size);
+    --control-medium-height: var(--global-control-medium-height);
+    --control-medium-padding-horizontal: #{$control-medium-padding-horizontal};
+    --control-medium-padding-vertical: #{$control-medium-padding-vertical};
+    --control-medium-line-height: var(--control-medium-height);
+    --control-medium-font-size: var(--global-font-size);
+    --control-large-height: var(--global-control-large-height);
+    --control-large-padding-horizontal: #{$control-large-padding-horizontal};
+    --control-large-padding-vertical: #{$control-large-padding-vertical};
+    --control-large-line-height: var(--control-large-height);
+    --control-large-font-size: var(--global-medium-font-size);
+    --control-success-border: var(--global-success-border);
+    --control-success-color: var(--global-success-color);
+    --control-warning-border: var(--global-warning-border);
+    --control-warning-color: var(--global-warning-color);
+    --control-danger-border: var(--global-danger-border);
+    --control-danger-color: var(--global-danger-color);
+    --control-blank-border-style: #{$control-blank-border-style};
+    --control-blank-focus-border: #{$control-blank-focus-border};
+    --control-affix-margin: var(--global-small-margin);
+    --control-icon-color: var(--global-muted-color);
+    --control-icon-hover-color: var(--global-color);
+
+    @content;
+}
+
+@mixin control-inverse-tokens {
+    --inverse-control-background: #{$inverse-control-background};
+    --inverse-control-border: var(--inverse-global-border);
+    --inverse-control-color: var(--inverse-global-color);
+    --inverse-control-hover-background: #{$inverse-control-hover-background};
+    --inverse-control-hover-border: #{$inverse-control-hover-border};
+    --inverse-control-hover-color: var(--inverse-global-color);
+    --inverse-control-focus-background: #{$inverse-control-focus-background};
+    --inverse-control-focus-border: var(--inverse-control-hover-border);
+    --inverse-control-focus-color: var(--inverse-global-color);
+    --inverse-control-disabled-background: #{$inverse-control-disabled-background};
+    --inverse-control-disabled-border: #{$inverse-control-disabled-border};
+    --inverse-control-disabled-color: var(--inverse-global-color);
+    --inverse-control-placeholder-color: var(--inverse-global-muted-color);
+    --inverse-control-icon-color: var(--inverse-global-muted-color);
+    --inverse-control-icon-hover-color: var(--inverse-global-color);
+
+    @content;
+}

package/styles/control/_index.scss

@@ -0,0 +1,11 @@
+@use 'control' as *;
+
+$generate-tokens: true !default;
+
+@include control-styles;
+
+@if $generate-tokens {
+    :root {
+        @include control-tokens;
+    }
+}

package/styles/cover/_cover.scss

@@ -0,0 +1,99 @@
+// Name:            Cover
+// Description:     Utilities to let embedded content cover their container in a centered position
+//
+// Component:       `uk-cover`
+//
+// Sub-object:      `uk-cover-container`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin cover-styles {
+    /* ========================================================================
+       Component: Cover
+     ========================================================================== */
+
+    /*
+     * Works with iframes and embedded content
+     * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
+     * 2. Reset responsiveness for embedded content
+     * 3. Center object
+     * Note: Percent values on the `top` property only works if this element
+     *       is absolute positioned or if the container has a height
+     */
+
+    /* 1 */
+    [uk-cover]:where(canvas, iframe, svg),
+    [data-uk-cover]:where(canvas, iframe, svg) {
+        --uk-position-translate-x: -50%;
+        --uk-position-translate-y: -50%;
+        left: 50%;
+
+        /* 1 */
+        max-width: none;
+
+        /* 2 */
+        position: absolute;
+        top: 50%;
+        transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
+    }
+
+    iframe[uk-cover],
+    iframe[data-uk-cover] { pointer-events: none; }
+
+    [uk-cover]:where(img, video),
+    [data-uk-cover]:where(img, video) {
+        box-sizing: border-box;
+        height: 100%;
+        left: 0;
+        object-fit: cover;
+        object-position: center;
+
+        /* 3 */
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+
+    /* Container
+     ========================================================================== */
+
+    /*
+     * 1. Parent container which clips resized object
+     * 2. Needed if the child is positioned absolute. See note above
+     */
+
+    .#{$prefix}-cover-container {
+        /* 1 */
+        overflow: hidden;
+
+        /* 2 */
+        position: relative;
+    }
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-cover-misc') {
+        @include meta.apply(map.get($mixins, 'hook-cover-misc'));
+    }
+
+
+    @content;
+}
+
+// No CSS custom properties for this component
+@mixin cover-tokens {
+    @content;
+}

package/styles/cover/_index.scss

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

package/styles/custom-media.scss

@@ -0,0 +1,17 @@
+@use 'variables' as *;
+
+@custom-media --media-breakpoint-2xsmall (width >= #{$breakpoint-2xsmall});
+@custom-media --media-breakpoint-xsmall (width >= #{$breakpoint-xsmall});
+@custom-media --media-breakpoint-small (width >= #{$breakpoint-small});
+@custom-media --media-breakpoint-medium (width >= #{$breakpoint-medium});
+@custom-media --media-breakpoint-large (width >= #{$breakpoint-large});
+@custom-media --media-breakpoint-xlarge (width >= #{$breakpoint-xlarge});
+@custom-media --media-breakpoint-2xlarge (width >= #{$breakpoint-2xlarge});
+@custom-media --media-breakpoint-3xlarge (width >= #{$breakpoint-3xlarge});
+@custom-media --media-breakpoint-2xsmall-max (width < #{$breakpoint-2xsmall-max});
+@custom-media --media-breakpoint-xsmall-max (width < #{$breakpoint-xsmall-max});
+@custom-media --media-breakpoint-small-max (width < #{$breakpoint-small-max});
+@custom-media --media-breakpoint-medium-max (width < #{$breakpoint-medium-max});
+@custom-media --media-breakpoint-large-max (width < #{$breakpoint-large-max});
+@custom-media --media-breakpoint-xlarge-max (width < #{$breakpoint-xlarge-max});
+@custom-media --media-breakpoint-2xlarge-max (width < #{$breakpoint-2xlarge-max});