@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/datepicker/_index.scss

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

package/styles/description-list/_description-list.scss

@@ -0,0 +1,96 @@
+// Name:            Description list
+// Description:     Styles for description lists
+//
+// Component:       `uk-description-list`
+//
+// Modifiers:       `uk-description-list-divider`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin description-list-styles {
+    /* ========================================================================
+       Component: Description list
+     ========================================================================== */
+
+    /*
+     * Term
+     */
+
+    .#{$prefix}-description-list > dt {
+        color: var(--description-list-term-color);
+        @if map.has-key($mixins, 'hook-description-list-term') {
+            @include meta.apply(map.get($mixins, 'hook-description-list-term'));
+        }
+    }
+
+    .#{$prefix}-description-list > dt:nth-child(n+2) {
+        margin-top: var(--description-list-term-margin-top);
+    }
+
+    /*
+     * Description
+     */
+
+    .#{$prefix}-description-list > dd {
+        @if map.has-key($mixins, 'hook-description-list-description') {
+            @include meta.apply(map.get($mixins, 'hook-description-list-description'));
+        }
+    }
+
+
+    /* Style modifier
+     ========================================================================== */
+
+    /*
+     * Line
+     */
+
+    .#{$prefix}-description-list-divider > dt:nth-child(n+2) {
+        border-top: var(--description-list-divider-term-border-width) solid var(--description-list-divider-term-border);
+        margin-top: var(--description-list-divider-term-margin-top);
+        padding-top: var(--description-list-divider-term-margin-top);
+        @if map.has-key($mixins, 'hook-description-list-divider-term') {
+            @include meta.apply(map.get($mixins, 'hook-description-list-divider-term'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-description-list-misc') {
+        @include meta.apply(map.get($mixins, 'hook-description-list-misc'));
+    }
+
+    @content;
+}
+
+@mixin description-list-tokens {
+    --description-list-term-color: var(--global-emphasis-color);
+    --description-list-term-margin-top: var(--global-margin);
+    --description-list-term-font-size: var(--global-small-font-size);
+    --description-list-term-font-weight: #{$description-list-term-font-weight};
+    --description-list-term-text-transform: #{$description-list-term-text-transform};
+    --description-list-divider-term-margin-top: var(--global-margin);
+    --description-list-divider-term-border-width: var(--global-border-width);
+    --description-list-divider-term-border: var(--global-border);
+
+    @content;
+}
+
+@mixin description-list-inverse-tokens {
+    --inverse-description-list-term-color: var(--inverse-global-emphasis-color);
+
+    @content;
+}

package/styles/description-list/_index.scss

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

package/styles/divider/_divider.scss

@@ -0,0 +1,168 @@
+// Name:            Divider
+// Description:     Styles for dividers
+//
+// Component:       `uk-divider-icon`
+//                  `uk-divider-small`
+//                  `uk-divider-vertical`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin divider-styles {
+    /* ========================================================================
+       Component: Divider
+     ========================================================================== */
+
+    /*
+     * 1. Reset default `hr`
+     * 2. Set margin if a `div` is used for semantical reason
+     */
+
+    [class*='#{$prefix}-divider'] {
+        /* 1 */
+        border: none;
+
+        /* 2 */
+        margin-bottom: var(--divider-margin-vertical);
+    }
+
+    /* Add margin if adjacent element */
+    * + [class*='#{$prefix}-divider'] {
+        margin-top: var(--divider-margin-vertical);
+    }
+
+
+    /* Icon
+     ========================================================================== */
+
+    .#{$prefix}-divider-icon {
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        height: var(--divider-icon-height);
+        position: relative;
+        @if map.has-key($mixins, 'svg-fill') {
+            @include meta.apply(map.get($mixins, 'svg-fill'), $internal-divider-icon-image, '#000', $divider-icon-color);
+        }
+        @if map.has-key($mixins, 'hook-divider-icon') {
+            @include meta.apply(map.get($mixins, 'hook-divider-icon'));
+        }
+    }
+
+    .#{$prefix}-divider-icon::before,
+    .#{$prefix}-divider-icon::after {
+        border-bottom: var(--divider-icon-line-border-width) solid var(--divider-icon-line-border);
+        content: '';
+        max-width: calc(50% - (var(--divider-icon-width) / 2));
+        position: absolute;
+        top: var(--divider-icon-line-top);
+        @if map.has-key($mixins, 'hook-divider-icon-line') {
+            @include meta.apply(map.get($mixins, 'hook-divider-icon-line'));
+        }
+    }
+
+    .#{$prefix}-divider-icon::before {
+        right: calc(50% + (var(--divider-icon-width) / 2));
+        width: var(--divider-icon-line-width);
+        @if map.has-key($mixins, 'hook-divider-icon-line-left') {
+            @include meta.apply(map.get($mixins, 'hook-divider-icon-line-left'));
+        }
+    }
+
+    .#{$prefix}-divider-icon::after {
+        left: calc(50% + (var(--divider-icon-width) / 2));
+        width: var(--divider-icon-line-width);
+        @if map.has-key($mixins, 'hook-divider-icon-line-right') {
+            @include meta.apply(map.get($mixins, 'hook-divider-icon-line-right'));
+        }
+    }
+
+
+    /* Small
+     ========================================================================== */
+
+    /*
+     * 1. Fix height because of `inline-block`
+     * 2. Using ::after and inline-block to make `text-align` work
+     */
+
+    /* 1 */
+    .#{$prefix}-divider-small {
+        line-height: 0;
+    }
+
+    /* 2 */
+    .#{$prefix}-divider-small::after {
+        border-top: var(--divider-small-border-width) solid var(--divider-small-border);
+        content: '';
+        display: inline-block;
+        max-width: 100%;
+        vertical-align: top;
+        width: var(--divider-small-width);
+        @if map.has-key($mixins, 'hook-divider-small') {
+            @include meta.apply(map.get($mixins, 'hook-divider-small'));
+        }
+    }
+
+
+    /* Vertical
+     ========================================================================== */
+
+    .#{$prefix}-divider-vertical {
+        border-left: var(--divider-vertical-border-width) solid var(--divider-vertical-border);
+        height: var(--divider-vertical-height);
+        margin-left: auto;
+        margin-right: auto;
+        width: 1px;
+        @if map.has-key($mixins, 'hook-divider-vertical') {
+            @include meta.apply(map.get($mixins, 'hook-divider-vertical'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-divider-misc') {
+        @include meta.apply(map.get($mixins, 'hook-divider-misc'));
+    }
+
+    @content;
+}
+
+@mixin divider-tokens {
+    --divider-margin-vertical: var(--global-margin);
+    --divider-icon-width: #{$divider-icon-width};
+    --divider-icon-height: #{$divider-icon-height};
+    --divider-icon-color: var(--global-border);
+    --divider-icon-line-top: #{$divider-icon-line-top};
+    --divider-icon-line-width: #{$divider-icon-line-width};
+    --divider-icon-line-border-width: var(--global-border-width);
+    --divider-icon-line-border: var(--global-border);
+    --divider-small-width: #{$divider-small-width};
+    --divider-small-border-width: var(--global-border-width);
+    --divider-small-border: var(--global-border);
+    --divider-vertical-height: #{$divider-vertical-height};
+    --divider-vertical-border-width: var(--global-border-width);
+    --divider-vertical-border: var(--global-border);
+
+    @content;
+}
+
+@mixin divider-inverse-tokens {
+    --inverse-divider-icon-color: var(--inverse-global-border);
+    --inverse-divider-icon-line-border: var(--inverse-global-border);
+    --inverse-divider-small-border: var(--inverse-global-border);
+    --inverse-divider-vertical-border: var(--inverse-global-border);
+
+    @content;
+}

package/styles/divider/_index.scss

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

package/styles/dotnav/_dotnav.scss

@@ -0,0 +1,171 @@
+// Name:            Dotnav
+// Description:     Component to create dot navigations
+//
+// Component:       `uk-dotnav`
+//
+// Modifier:        `uk-dotnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin dotnav-styles {
+    /* ========================================================================
+       Component: Dotnav
+     ========================================================================== */
+
+    /*
+     * 1. Allow items to wrap into the next line
+     * 2. Reset list
+     * 3. Gutter
+     */
+
+    .#{$prefix}-dotnav {
+        display: flex;
+
+        /* 1 */
+        flex-wrap: wrap;
+        list-style: none;
+
+        /* 2 */
+        margin: 0 0 0 /* 3 */ calc(var(--dotnav-margin-horizontal) * -1);
+        padding: 0;
+        @if map.has-key($mixins, 'hook-dotnav') {
+            @include meta.apply(map.get($mixins, 'hook-dotnav'));
+        }
+    }
+
+    /*
+     * 1. Space is allocated solely based on content dimensions: 0 0 auto
+     * 2. Gutter
+     */
+
+    .#{$prefix}-dotnav > * {
+        /* 1 */
+        flex: none;
+
+        /* 2 */
+        padding-left: var(--dotnav-margin-horizontal);
+    }
+
+
+    /* Items
+     ========================================================================== */
+
+    /*
+     * Items
+     * 1. Hide text if present
+     */
+
+    .#{$prefix}-dotnav > * > * {
+        background: var(--dotnav-item-background);
+        border-radius: var(--dotnav-item-border-radius);
+        box-sizing: border-box;
+        display: block;
+        height: var(--dotnav-item-height);
+        overflow: hidden;
+
+        /* 1 */
+        text-indent: 100%;
+        white-space: nowrap;
+        width: var(--dotnav-item-width);
+        @if map.has-key($mixins, 'hook-dotnav-item') {
+            @include meta.apply(map.get($mixins, 'hook-dotnav-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-dotnav > * > :hover,
+    .#{$prefix}-dotnav > * > :focus {
+        background-color: var(--dotnav-item-hover-background);
+        outline: none;
+        @if map.has-key($mixins, 'hook-dotnav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-dotnav-item-hover'));
+        }
+    }
+
+    /* OnClick */
+    .#{$prefix}-dotnav > * > :active {
+        background-color: var(--dotnav-item-onclick-background);
+        @if map.has-key($mixins, 'hook-dotnav-item-onclick') {
+            @include meta.apply(map.get($mixins, 'hook-dotnav-item-onclick'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-dotnav > .#{$prefix}-active > * {
+        background-color: var(--dotnav-item-active-background);
+        @if map.has-key($mixins, 'hook-dotnav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-dotnav-item-active'));
+        }
+    }
+
+
+    /* Modifier: 'uk-dotnav-vertical'
+     ========================================================================== */
+
+    /*
+     * 1. Change direction
+     * 2. Gutter
+     */
+
+    .#{$prefix}-dotnav-vertical {
+        /* 1 */
+        flex-direction: column;
+
+        /* 2 */
+        margin-left: 0;
+        margin-top: calc(var(--dotnav-margin-vertical) * -1);
+    }
+
+    /* 2 */
+    // noinspection Stylelint
+    .#{$prefix}-dotnav-vertical > * {
+        padding-left: 0;
+        padding-top: var(--dotnav-margin-vertical);
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-dotnav-misc') {
+        @include meta.apply(map.get($mixins, 'hook-dotnav-misc'));
+    }
+
+    @content;
+}
+
+@mixin dotnav-tokens {
+    --dotnav-margin-horizontal: #{$dotnav-margin-horizontal};
+    --dotnav-margin-vertical: var(--dotnav-margin-horizontal);
+    --dotnav-item-width: #{$dotnav-item-width};
+    --dotnav-item-height: #{$dotnav-item-width};
+    --dotnav-item-border-radius: #{$dotnav-item-border-radius};
+    --dotnav-item-background: #{$dotnav-item-background};
+    --dotnav-item-hover-background: #{$dotnav-item-hover-background};
+    --dotnav-item-onclick-background: #{$dotnav-item-onclick-background};
+    --dotnav-item-active-background: #{$dotnav-item-active-background};
+
+    @content;
+}
+
+@mixin dotnav-inverse-tokens {
+    --inverse-dotnav-item-background: #{$inverse-dotnav-item-background};
+    --inverse-dotnav-item-hover-background: #{$inverse-dotnav-item-hover-background};
+    --inverse-dotnav-item-onclick-background: #{$inverse-dotnav-item-onclick-background};
+    --inverse-dotnav-item-active-background: #{$inverse-dotnav-item-active-background};
+
+    @content;
+}

package/styles/dotnav/_index.scss

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