@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/breadcrumb/_breadcrumb.scss

@@ -0,0 +1,133 @@
+// Name:            Breadcrumb
+// Description:     Component to create a breadcrumb navigation
+//
+// Component:       `uk-breadcrumb`
+//
+// States:          `uk-disabled`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin breadcrumb-styles {
+    /* ========================================================================
+       Component: Breadcrumb
+     ========================================================================== */
+
+    /*
+     * 1. Reset list
+     * 2. Remove space between elements
+     */
+
+    .#{$prefix}-breadcrumb {
+        list-style: none; /* 2 */
+        padding: 0; /* 1 */
+        @if map.has-key($mixins, 'hook-breadcrumb') {
+            @include meta.apply(map.get($mixins, 'hook-breadcrumb'));
+        }
+    }
+
+    /*
+     * 1. Doesn't generate any box and replaced by child boxes
+     */
+
+    .#{$prefix}-breadcrumb > * { display: contents; }
+
+
+    /* Items
+     ========================================================================== */
+
+    .#{$prefix}-breadcrumb > * > * {
+        color: var(--breadcrumb-item-color);
+        font-size: var(--breadcrumb-item-font-size);
+        @if map.has-key($mixins, 'hook-breadcrumb-item') {
+            @include meta.apply(map.get($mixins, 'hook-breadcrumb-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-breadcrumb > * > :hover,
+    .#{$prefix}-breadcrumb > * > :focus {
+        color: var(--breadcrumb-item-hover-color);
+        text-decoration: var(--breadcrumb-item-hover-text-decoration);
+        @if map.has-key($mixins, 'hook-breadcrumb-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-breadcrumb-item-hover'));
+        }
+    }
+
+    /* Disabled */
+    .#{$prefix}-breadcrumb > .#{$prefix}-disabled > * {
+        @if map.has-key($mixins, 'hook-breadcrumb-item-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-breadcrumb-item-disabled'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-breadcrumb > :last-child > span,
+    .#{$prefix}-breadcrumb > :last-child > a:not([href]) {
+        color: var(--breadcrumb-item-active-color);
+        @if map.has-key($mixins, 'hook-breadcrumb-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-breadcrumb-item-active'));
+        }
+    }
+
+    /*
+     * Divider
+     * `nth-child` makes it also work without JS if it's only one row
+     * 1. Remove space between inline block elements.
+     * 2. Style
+     */
+
+    .#{$prefix}-breadcrumb > :nth-child(n+2):not(.#{$prefix}-first-column)::before {
+        color: var(--breadcrumb-divider-color); /* 2 */
+        content: var(--breadcrumb-divider);
+        display: inline-block;
+        font-size: var(--breadcrumb-divider-font-size); /* 2 */
+        margin: 0 var(--breadcrumb-divider-margin-horizontal) 0 calc(var(--breadcrumb-divider-margin-horizontal) - 4px); /* 1 */
+        @if map.has-key($mixins, 'hook-breadcrumb-divider') {
+            @include meta.apply(map.get($mixins, 'hook-breadcrumb-divider'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-breadcrumb-misc') {
+        @include meta.apply(map.get($mixins, 'hook-breadcrumb-misc'));
+    }
+
+    @content;
+}
+
+@mixin breadcrumb-tokens {
+    --breadcrumb-item-font-size: var(--global-small-font-size);
+    --breadcrumb-item-color: var(--global-muted-color);
+    --breadcrumb-item-hover-color: var(--global-color);
+    --breadcrumb-item-hover-text-decoration: #{$breadcrumb-item-hover-text-decoration};
+    --breadcrumb-item-active-color: var(--global-color);
+    --breadcrumb-divider: #{$breadcrumb-divider};
+    --breadcrumb-divider-margin-horizontal: #{$breadcrumb-divider-margin-horizontal};
+    --breadcrumb-divider-font-size: var(--breadcrumb-item-font-size);
+    --breadcrumb-divider-color: var(--global-muted-color);
+
+    @content;
+}
+
+@mixin breadcrumb-inverse-tokens {
+    --inverse-breadcrumb-item-color: var(--inverse-global-muted-color);
+    --inverse-breadcrumb-item-hover-color: var(--inverse-global-color);
+    --inverse-breadcrumb-item-active-color: var(--inverse-global-color);
+    --inverse-breadcrumb-divider-color: var(--inverse-global-muted-color);
+
+    @content;
+}

package/styles/breadcrumb/_index.scss

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