@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/background/_background.scss

@@ -0,0 +1,170 @@
+// Name:            Background
+// Description:     Utilities for backgrounds
+//
+// Component:       `uk-background-*`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin background-styles {
+    /* ========================================================================
+       Component: Background
+     ========================================================================== */
+
+    /* Color
+     ========================================================================== */
+
+    .#{$prefix}-background-default { background-color: var(--default-background); }
+    .#{$prefix}-background-muted { background-color: var(--muted-background); }
+    .#{$prefix}-background-primary { background-color: var(--primary-background); }
+    .#{$prefix}-background-secondary { background-color: var(--secondary-background); }
+    .#{$prefix}-background-tertiary { background-color: var(--tertiary-background); }
+
+
+    /* Size
+     ========================================================================== */
+
+    .#{$prefix}-background-cover,
+    .#{$prefix}-background-contain,
+    .#{$prefix}-background-width-1-1,
+    .#{$prefix}-background-height-1-1 {
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+    }
+
+    .#{$prefix}-background-cover { background-size: cover; }
+    .#{$prefix}-background-contain { background-size: contain; }
+    .#{$prefix}-background-width-1-1 { background-size: 100%; }
+    .#{$prefix}-background-height-1-1 { background-size: auto 100%; }
+
+
+    /* Position
+     ========================================================================== */
+
+    .#{$prefix}-background-top-left { background-position: 0 0; }
+    .#{$prefix}-background-top-center { background-position: 50% 0; }
+    .#{$prefix}-background-top-right { background-position: 100% 0; }
+    .#{$prefix}-background-center-left { background-position: 0 50%; }
+    .#{$prefix}-background-center-center { background-position: 50% 50%; }
+    .#{$prefix}-background-center-right { background-position: 100% 50%; }
+    .#{$prefix}-background-bottom-left { background-position: 0 100%; }
+    .#{$prefix}-background-bottom-center { background-position: 50% 100%; }
+    .#{$prefix}-background-bottom-right { background-position: 100% 100%; }
+
+
+    /* Repeat
+     ========================================================================== */
+
+    .#{$prefix}-background-no-repeat { background-repeat: no-repeat; }
+
+
+    /* Attachment
+     ========================================================================== */
+
+    /*
+     * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
+     */
+
+    .#{$prefix}-background-fixed {
+        /* 1 */
+        backface-visibility: hidden;
+        background-attachment: fixed;
+    }
+
+    /*
+     * Exclude touch devices because `fixed` doesn't work on iOS and Android
+     */
+
+    @media (pointer: coarse) {
+        .#{$prefix}-background-fixed {
+            background-attachment: scroll;
+        }
+    }
+
+
+    /* Image
+     ========================================================================== */
+
+    /* Phone portrait and smaller */
+    @media (--media-breakpoint-xsmall-max) {
+        .#{$prefix}-background-image\@s {
+            background-image: none !important;
+        }
+
+    }
+
+    /* Phone landscape and smaller */
+    @media (--media-breakpoint-small-max) {
+        .#{$prefix}-background-image\@m {
+            background-image: none !important;
+        }
+
+    }
+
+    /* Tablet landscape and smaller */
+    @media (--media-breakpoint-medium-max) {
+        .#{$prefix}-background-image\@l {
+            background-image: none !important;
+        }
+
+    }
+
+    /* Desktop and smaller */
+    @media (--media-breakpoint-large-max) {
+        .#{$prefix}-background-image\@xl {
+            background-image: none !important;
+        }
+
+    }
+
+
+    /* Blend modes
+     ========================================================================== */
+
+    .#{$prefix}-background-blend-multiply { background-blend-mode: multiply; }
+    .#{$prefix}-background-blend-screen { background-blend-mode: screen; }
+    .#{$prefix}-background-blend-overlay { background-blend-mode: overlay; }
+    .#{$prefix}-background-blend-darken { background-blend-mode: darken; }
+    .#{$prefix}-background-blend-lighten { background-blend-mode: lighten; }
+    .#{$prefix}-background-blend-color-dodge { background-blend-mode: color-dodge; }
+    .#{$prefix}-background-blend-color-burn { background-blend-mode: color-burn; }
+    .#{$prefix}-background-blend-hard-light { background-blend-mode: hard-light; }
+    .#{$prefix}-background-blend-soft-light { background-blend-mode: soft-light; }
+    .#{$prefix}-background-blend-difference { background-blend-mode: difference; }
+    .#{$prefix}-background-blend-exclusion { background-blend-mode: exclusion; }
+    .#{$prefix}-background-blend-hue { background-blend-mode: hue; }
+    .#{$prefix}-background-blend-saturation { background-blend-mode: saturation; }
+    .#{$prefix}-background-blend-color { background-blend-mode: color; }
+    .#{$prefix}-background-blend-luminosity { background-blend-mode: luminosity; }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-background-misc') {
+        @include meta.apply(map.get($mixins, 'hook-background-misc'));
+    }
+
+    @content;
+}
+
+@mixin background-tokens {
+    --default-background: var(--global-default-background);
+    --muted-background: var(--global-muted-background);
+    --primary-background: var(--global-primary-background);
+    --secondary-background: var(--global-secondary-background);
+    --tertiary-background: var(--global-tertiary-background);
+
+    @content;
+}

package/styles/background/_index.scss

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

package/styles/badge/_badge.scss

@@ -0,0 +1,92 @@
+// Name:            Badge
+// Description:     Component to create notification badges
+//
+// Component:       `uk-badge`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin badge-styles {
+    /* ========================================================================
+       Component: Badge
+     ========================================================================== */
+
+    /*
+     * 1. Style
+     * 2. Center child vertically and horizontally
+     */
+
+    .#{$prefix}-badge {
+        align-items: center; /* 2 */
+        background: var(--badge-background); /* 1 */
+        border-radius: var(--badge-border-radius);
+        box-sizing: border-box;
+        color: var(--badge-color); /* 1 */
+        display: inline-flex; /* 2 */
+        font-size: var(--badge-font-size); /* 1 */
+        height: var(--badge-size);
+        justify-content: center; /* 2 */
+        line-height: 0;
+        min-width: var(--badge-size);
+        padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
+        vertical-align: middle;
+        @if map.has-key($mixins, 'hook-badge') {
+            @include meta.apply(map.get($mixins, 'hook-badge'));
+        }
+    }
+
+    /*
+     * Required for `a`
+     */
+
+    .#{$prefix}-badge:hover,
+    .#{$prefix}-badge:focus {
+        color: var(--badge-hover-color);
+        outline: none;
+        text-decoration: none;
+        @if map.has-key($mixins, 'hook-badge-hover') {
+            @include meta.apply(map.get($mixins, 'hook-badge-hover'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-badge-misc') {
+        @include meta.apply(map.get($mixins, 'hook-badge-misc'));
+    }
+
+    @content;
+}
+
+@mixin badge-tokens {
+    --badge-size: #{$badge-size};
+    --badge-padding-vertical: #{$badge-padding-vertical};
+    --badge-padding-horizontal: #{$badge-padding-horizontal};
+    --badge-border-radius: #{$badge-border-radius};
+    --badge-background: var(--global-primary-background);
+    --badge-color: var(--global-inverse-color);
+    --badge-font-size: var(--global-small-font-size);
+    --badge-hover-color: var(--global-inverse-color);
+
+    @content;
+}
+
+@mixin badge-inverse-tokens {
+    --inverse-badge-background: var(--inverse-global-primary-background);
+    --inverse-badge-color: var(--inverse-global-inverse-color);
+    --inverse-badge-hover-color: var(--inverse-global-inverse-color);
+
+    @content;
+}

package/styles/badge/_index.scss

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