@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/overlay/_overlay.scss

@@ -0,0 +1,115 @@
+// Name:            Overlay
+// Description:     Component to create content areas overlaying an image
+//
+// Component:       `uk-overlay`
+//
+// Adopted:         `uk-overlay-icon`
+//
+// Modifier:        `uk-overlay-default`
+//                  `uk-overlay-primary`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin overlay-styles {
+    /* ========================================================================
+       Component: Overlay
+     ========================================================================== */
+
+    .#{$prefix}-overlay {
+        padding: var(--overlay-padding-vertical) var(--overlay-padding-horizontal);
+        @if map.has-key($mixins, 'hook-overlay') {
+            @include meta.apply(map.get($mixins, 'hook-overlay'));
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-overlay > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Icon
+     ========================================================================== */
+
+    .#{$prefix}-overlay-icon {
+        @if map.has-key($mixins, 'hook-overlay-icon') {
+            @include meta.apply(map.get($mixins, 'hook-overlay-icon'));
+        }
+    }
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    /*
+     * Default
+     */
+
+    .#{$prefix}-overlay-default {
+        background: var(--overlay-default-background);
+        @if map.has-key($mixins, 'hook-overlay-default') {
+            @include meta.apply(map.get($mixins, 'hook-overlay-default'));
+        }
+    }
+
+    /*
+     * Primary
+     */
+
+    .#{$prefix}-overlay-primary {
+        background: var(--overlay-primary-background);
+        @if map.has-key($mixins, 'hook-overlay-primary') {
+            @include meta.apply(map.get($mixins, 'hook-overlay-primary'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-overlay-misc') {
+        @include meta.apply(map.get($mixins, 'hook-overlay-misc'));
+    }
+
+    @content;
+}
+
+@mixin overlay-tokens {
+    --overlay-padding-horizontal: var(--global-gutter);
+    --overlay-padding-vertical: var(--global-gutter);
+    --overlay-default-background: #{$overlay-default-background};
+    --overlay-primary-background: #{$overlay-primary-background};
+
+    @content;
+}
+
+@mixin overlay-inverse-styles {
+    // Color mode
+    @if $overlay-primary-color-mode == dark {
+        .#{$prefix}-overlay-primary {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $overlay-primary-color-mode == light {
+        .#{$prefix}-overlay-primary {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @content;
+}

package/styles/padding/_index.scss

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

package/styles/padding/_padding.scss

@@ -0,0 +1,93 @@
+// Name:            Padding
+// Description:     Utilities for padding
+//
+// Component:       `uk-padding`
+//                  `uk-padding-large`
+//                  `uk-padding-remove-*`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin padding-styles {
+    /* ========================================================================
+       Component: Padding
+     ========================================================================== */
+
+    .#{$prefix}-padding { padding: var(--padding); }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-padding { padding: var(--padding-l); }
+    }
+
+
+    /* Small
+     ========================================================================== */
+
+    .#{$prefix}-padding-small { padding: var(--small-padding); }
+
+
+    /* Large
+     ========================================================================== */
+
+    .#{$prefix}-padding-large { padding: var(--large-padding); }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-padding-large { padding: var(--large-padding-l); }
+    }
+
+
+    /* Remove
+     ========================================================================== */
+
+    .#{$prefix}-padding-remove { padding: 0 !important; }
+
+    .#{$prefix}-padding-remove-top { padding-top: 0 !important; }
+
+    .#{$prefix}-padding-remove-bottom { padding-bottom: 0 !important; }
+
+    .#{$prefix}-padding-remove-left { padding-left: 0 !important; }
+
+    .#{$prefix}-padding-remove-right { padding-right: 0 !important; }
+
+    .#{$prefix}-padding-remove-vertical {
+        padding-bottom: 0 !important;
+        padding-top: 0 !important;
+    }
+
+    .#{$prefix}-padding-remove-horizontal {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-padding-misc') {
+        @include meta.apply(map.get($mixins, 'hook-padding-misc'));
+    }
+
+    @content;
+}
+
+@mixin padding-tokens {
+    --padding: var(--global-gutter);
+    --padding-l: var(--global-medium-gutter);
+    --small-padding: var(--global-small-gutter);
+    --large-padding: var(--global-gutter);
+    --large-padding-l: var(--global-large-gutter);
+
+    @content;
+}

package/styles/pagination/_index.scss

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

package/styles/pagination/_pagination.scss

@@ -0,0 +1,149 @@
+// Name:            Pagination
+// Description:     Component to create a page navigation
+//
+// Component:       `uk-pagination`
+//
+// Adopted:         `uk-pagination-next`
+//                  `uk-pagination-previous`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin pagination-styles {
+    /* ========================================================================
+       Component: Pagination
+     ========================================================================== */
+
+    /*
+     * 1. Allow items to wrap into the next line
+     * 2. Gutter
+     * 3. Reset list
+     */
+
+    .#{$prefix}-pagination {
+        display: flex;
+
+        /* 1 */
+        flex-wrap: wrap;
+        list-style: none;
+
+        /* 2 */
+        margin-left: calc(var(--pagination-margin-horizontal) * -1);
+
+        /* 3 */
+        padding: 0;
+        @if map.has-key($mixins, 'hook-pagination') {
+            @include meta.apply(map.get($mixins, 'hook-pagination'));
+        }
+    }
+
+    /*
+     * 1. Space is allocated solely based on content dimensions: 0 0 auto
+     * 2. Gutter
+     * 3. Create position context for dropdowns
+     */
+
+    .#{$prefix}-pagination > * {
+        /* 1 */
+        flex: none;
+
+        /* 2 */
+        padding-left: var(--pagination-margin-horizontal);
+
+        /* 3 */
+        position: relative;
+    }
+
+
+    /* Items
+     ========================================================================== */
+
+    /*
+     * 1. Prevent gap if child element is `inline-block`, e.g. an icon
+     * 2. Style
+     */
+
+    .#{$prefix}-pagination > * > * {
+        color: var(--pagination-item-color);
+
+        /* 1 */
+        display: block;
+
+        /* 2 */
+        padding: var(--pagination-item-padding-vertical) var(--pagination-item-padding-horizontal);
+        @if map.has-key($mixins, 'hook-pagination-item') {
+            @include meta.apply(map.get($mixins, 'hook-pagination-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-pagination > * > :hover,
+    .#{$prefix}-pagination > * > :focus {
+        color: var(--pagination-item-hover-color);
+        text-decoration: var(--pagination-item-hover-text-decoration);
+        @if map.has-key($mixins, 'hook-pagination-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-pagination-item-hover'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-pagination > .#{$prefix}-active > * {
+        color: var(--pagination-item-active-color);
+        @if map.has-key($mixins, 'hook-pagination-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-pagination-item-active'));
+        }
+    }
+
+    /* Disabled */
+    .#{$prefix}-pagination > .#{$prefix}-disabled > * {
+        color: var(--pagination-item-disabled-color);
+        @if map.has-key($mixins, 'hook-pagination-item-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-pagination-item-disabled'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-pagination-misc') {
+        @include meta.apply(map.get($mixins, 'hook-pagination-misc'));
+    }
+
+    @content;
+}
+
+@mixin pagination-tokens {
+    --pagination-margin-horizontal: #{$pagination-margin-horizontal};
+    --pagination-item-padding-vertical: #{$pagination-item-padding-vertical};
+    --pagination-item-padding-horizontal: #{$pagination-item-padding-horizontal};
+    --pagination-item-color: var(--global-muted-color);
+    --pagination-item-hover-color: var(--global-color);
+    --pagination-item-hover-text-decoration: #{$pagination-item-hover-text-decoration};
+    --pagination-item-active-color: var(--global-color);
+    --pagination-item-disabled-color: var(--global-muted-color);
+
+    @content;
+}
+
+@mixin pagination-inverse-tokens {
+    --inverse-pagination-item-color: var(--inverse-global-muted-color);
+    --inverse-pagination-item-hover-color: var(--inverse-global-color);
+    --inverse-pagination-item-active-color: var(--inverse-global-color);
+    --inverse-pagination-item-disabled-color: var(--inverse-global-muted-color);
+
+    @content;
+}

package/styles/placeholder/_index.scss

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

package/styles/placeholder/_placeholder.scss

@@ -0,0 +1,60 @@
+// Name:            Placeholder
+// Description:     Component to create placeholder boxes
+//
+// Component:       `uk-placeholder`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin placeholder-styles {
+    /* ========================================================================
+       Component: Placeholder
+     ========================================================================== */
+
+    .#{$prefix}-placeholder {
+        background: var(--placeholder-background);
+        margin-bottom: var(--placeholder-margin-vertical);
+        padding: var(--placeholder-padding-vertical) var(--placeholder-padding-horizontal);
+        @if map.has-key($mixins, 'hook-placeholder') {
+            @include meta.apply(map.get($mixins, 'hook-placeholder'));
+        }
+    }
+
+    /* Add margin if adjacent element */
+    * + .#{$prefix}-placeholder { margin-top: var(--placeholder-margin-vertical); }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-placeholder > :last-child { margin-bottom: 0; }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-placeholder-misc') {
+        @include meta.apply(map.get($mixins, 'hook-placeholder-misc'));
+    }
+
+    @content;
+}
+
+@mixin placeholder-tokens {
+    --placeholder-margin-vertical: var(--global-margin);
+    --placeholder-padding-vertical: var(--global-gutter);
+    --placeholder-padding-horizontal: var(--global-gutter);
+    --placeholder-background: var(--global-muted-background);
+
+    @content;
+}

package/styles/position/_index.scss

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