@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/tile/_tile.scss

@@ -0,0 +1,313 @@
+// Name:            Tile
+// Description:     Component to create tiled boxes
+//
+// Component:       `uk-tile`
+//
+// Modifiers:       `uk-tile-xsmall`
+//                  `uk-tile-small`
+//                  `uk-tile-large`
+//                  `uk-tile-xlarge`
+//                  `uk-tile-default`
+//                  `uk-tile-muted`
+//                  `uk-tile-primary`
+//                  `uk-tile-secondary`
+//
+// States:          `uk-preserve-color`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin tile-styles {
+    /* ========================================================================
+       Component: Tile
+     ========================================================================== */
+
+    .#{$prefix}-tile {
+        box-sizing: border-box;
+        display: flow-root;
+        padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
+        position: relative;
+        @if map.has-key($mixins, 'hook-tile') {
+            @include meta.apply(map.get($mixins, 'hook-tile'));
+        }
+    }
+
+    /* Phone landscape and bigger */
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-tile {
+            padding-left: var(--tile-padding-horizontal-s);
+            padding-right: var(--tile-padding-horizontal-s);
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-tile {
+            padding: var(--tile-padding-vertical-m) var(--tile-padding-horizontal-m);
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-tile > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Size modifiers
+     ========================================================================== */
+
+    /*
+     * XSmall
+     */
+
+    .#{$prefix}-tile-xsmall {
+        padding-bottom: var(--tile-xsmall-padding-vertical);
+        padding-top: var(--tile-xsmall-padding-vertical);
+    }
+
+    /*
+     * Small
+     */
+
+    .#{$prefix}-tile-small {
+        padding-bottom: var(--tile-small-padding-vertical);
+        padding-top: var(--tile-small-padding-vertical);
+    }
+
+    /*
+     * Large
+     */
+
+    .#{$prefix}-tile-large {
+        padding-bottom: var(--tile-large-padding-vertical);
+        padding-top: var(--tile-large-padding-vertical);
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-tile-large {
+            padding-bottom: var(--tile-large-padding-vertical-m);
+            padding-top: var(--tile-large-padding-vertical-m);
+        }
+    }
+
+    /*
+     * XLarge
+     */
+
+    .#{$prefix}-tile-xlarge {
+        padding-bottom: var(--tile-xlarge-padding-vertical);
+        padding-top: var(--tile-xlarge-padding-vertical);
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-tile-xlarge {
+            padding-bottom: var(--tile-xlarge-padding-vertical-m);
+            padding-top: var(--tile-xlarge-padding-vertical-m);
+        }
+    }
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    /*
+     * Default
+     */
+
+    .#{$prefix}-tile-default {
+        --uk-inverse: #{$tile-default-color-mode};
+        background: var(--tile-default-background);
+        @if map.has-key($mixins, 'hook-tile-default') {
+            @include meta.apply(map.get($mixins, 'hook-tile-default'));
+        }
+    }
+
+    .#{$prefix}-tile-default.#{$prefix}-tile-hover:hover {
+        @if map.has-key($mixins, 'hook-tile-default-hover') {
+            @include meta.apply(map.get($mixins, 'hook-tile-default-hover'));
+        }
+    }
+
+    /*
+     * Muted
+     */
+
+    .#{$prefix}-tile-muted {
+        --uk-inverse: #{$tile-muted-color-mode};
+        background: var(--tile-muted-background);
+        @if map.has-key($mixins, 'hook-tile-muted') {
+            @include meta.apply(map.get($mixins, 'hook-tile-muted'));
+        }
+    }
+
+    .#{$prefix}-tile-muted.#{$prefix}-tile-hover:hover {
+        @if map.has-key($mixins, 'hook-tile-muted-hover') {
+            @include meta.apply(map.get($mixins, 'hook-tile-muted-hover'));
+        }
+    }
+
+    /*
+     * Primary
+     */
+
+    .#{$prefix}-tile-primary {
+        --uk-inverse: #{$tile-primary-color-mode};
+        background: var(--tile-primary-background);
+        @if map.has-key($mixins, 'hook-tile-primary') {
+            @include meta.apply(map.get($mixins, 'hook-tile-primary'));
+        }
+    }
+
+    .#{$prefix}-tile-primary.#{$prefix}-tile-hover:hover {
+        @if map.has-key($mixins, 'hook-tile-primary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-tile-primary-hover'));
+        }
+    }
+
+    /*
+     * Secondary
+     */
+
+    .#{$prefix}-tile-secondary {
+        --uk-inverse: #{$tile-secondary-color-mode};
+        background: var(--tile-secondary-background);
+        @if map.has-key($mixins, 'hook-tile-secondary') {
+            @include meta.apply(map.get($mixins, 'hook-tile-secondary'));
+        }
+    }
+
+    .#{$prefix}-tile-secondary.#{$prefix}-tile-hover:hover {
+        @if map.has-key($mixins, 'hook-tile-secondary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-tile-secondary-hover'));
+        }
+    }
+
+    /*
+     * Tertiary
+     */
+
+    .#{$prefix}-tile-tertiary {
+        --uk-inverse: #{$tile-tertiary-color-mode};
+        background: var(--tile-tertiary-background);
+        @if map.has-key($mixins, 'hook-tile-tertiary') {
+            @include meta.apply(map.get($mixins, 'hook-tile-tertiary'));
+        }
+    }
+
+    .#{$prefix}-tile-tertiary.#{$prefix}-tile-hover:hover {
+        @if map.has-key($mixins, 'hook-tile-tertiary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-tile-tertiary-hover'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-tile-misc') {
+        @include meta.apply(map.get($mixins, 'hook-tile-misc'));
+    }
+
+    @content;
+}
+
+@mixin tile-tokens {
+    --tile-padding-horizontal: #{$tile-padding-horizontal};
+    --tile-padding-horizontal-s: var(--global-gutter);
+    --tile-padding-horizontal-m: var(--global-medium-gutter);
+    --tile-padding-vertical: var(--global-medium-margin);
+    --tile-padding-vertical-m: var(--global-large-margin);
+    --tile-xsmall-padding-vertical: var(--global-margin);
+    --tile-small-padding-vertical: var(--global-medium-margin);
+    --tile-large-padding-vertical: var(--global-large-margin);
+    --tile-large-padding-vertical-m: var(--global-xlarge-margin);
+    --tile-xlarge-padding-vertical: var(--global-xlarge-margin);
+    --tile-xlarge-padding-vertical-m: calc(var(--global-large-margin) + var(--global-xlarge-margin));
+    --tile-default-background: var(--global-background);
+    --tile-muted-background: var(--global-muted-background);
+    --tile-primary-background: var(--global-primary-background);
+    --tile-secondary-background: var(--global-secondary-background);
+    --tile-tertiary-background: var(--global-tertiary-background);
+
+    @content;
+}
+
+@mixin tile-inverse-styles {
+    // Color mode
+    @if $tile-default-color-mode == dark {
+        .#{$prefix}-tile-default:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $tile-default-color-mode == light {
+        .#{$prefix}-tile-default:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $tile-muted-color-mode == dark {
+        .#{$prefix}-tile-muted:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $tile-muted-color-mode == light {
+        .#{$prefix}-tile-muted:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $tile-primary-color-mode == dark {
+        .#{$prefix}-tile-primary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $tile-primary-color-mode == light {
+        .#{$prefix}-tile-primary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $tile-secondary-color-mode == dark {
+        .#{$prefix}-tile-secondary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $tile-secondary-color-mode == light {
+        .#{$prefix}-tile-secondary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $tile-tertiary-color-mode == dark {
+        .#{$prefix}-tile-tertiary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $tile-tertiary-color-mode == light {
+        .#{$prefix}-tile-tertiary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @content;
+}

package/styles/tooltip/_index.scss

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

package/styles/tooltip/_tooltip.scss

@@ -0,0 +1,101 @@
+// Name:            Tooltip
+// Description:     Component to create tooltips
+//
+// Component:       `uk-tooltip`
+//
+// Modifiers        `uk-tooltip-top`
+//                  `uk-tooltip-top-left`
+//                  `uk-tooltip-top-right`
+//                  `uk-tooltip-bottom`
+//                  `uk-tooltip-bottom-left`
+//                  `uk-tooltip-bottom-right`
+//                  `uk-tooltip-left`
+//                  `uk-tooltip-right`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin tooltip-styles {
+    /* ========================================================================
+       Component: Tooltip
+     ========================================================================== */
+
+    /*
+     * 1. Hide by default
+     * 2. Position
+     * 3. Remove tooltip from document flow to keep the UIkit container from changing its size when injected into the document initially
+     * 4. Dimensions
+     * 5. Style
+     */
+
+    .#{$prefix}-tooltip {
+        --uk-position-offset: var(--tooltip-margin);
+        --uk-position-viewport-offset: 10;
+
+        /* 5 */
+        background: var(--tooltip-background);
+        border-radius: var(--tooltip-border-radius);
+
+        /* 4 */
+        box-sizing: border-box;
+        color: var(--tooltip-color);
+
+        /* 1 */
+        display: none;
+        font-size: var(--tooltip-font-size);
+        max-width: var(--tooltip-max-width);
+        padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+
+        /* 2 */
+        position: absolute;
+
+        /* 3 */
+        top: 0;
+        z-index: var(--tooltip-z-index);
+        @if map.has-key($mixins, 'hook-tooltip') {
+            @include meta.apply(map.get($mixins, 'hook-tooltip'));
+        }
+    }
+
+    /* Show */
+    .#{$prefix}-tooltip.#{$prefix}-active { display: block; }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-tooltip-misc') {
+        @include meta.apply(map.get($mixins, 'hook-tooltip-misc'));
+    }
+
+
+    // Hooks
+
+    @content;
+}
+
+@mixin tooltip-tokens {
+    --tooltip-z-index: #{$tooltip-z-index};
+    --tooltip-max-width: #{$tooltip-max-width};
+    --tooltip-padding-vertical: #{$tooltip-padding-vertical};
+    --tooltip-padding-horizontal: #{$tooltip-padding-horizontal};
+    --tooltip-background: #{$tooltip-background};
+    --tooltip-border-radius: #{$tooltip-border-radius};
+    --tooltip-color: var(--global-inverse-color);
+    --tooltip-font-size: #{$tooltip-font-size};
+    --tooltip-margin: #{$tooltip-margin};
+
+    @content;
+}

package/styles/totop/_index.scss

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

package/styles/totop/_totop.scss

@@ -0,0 +1,80 @@
+// Name:            Totop
+// Description:     Component to create an icon to scroll back to top
+//
+// Component:       `uk-totop`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin totop-styles {
+    /* ========================================================================
+       Component: Totop
+     ========================================================================== */
+
+    /*
+     * Addopts `uk-icon`
+     */
+
+    .#{$prefix}-totop {
+        color: var(--totop-color);
+        padding: var(--totop-padding);
+        @if map.has-key($mixins, 'hook-totop') {
+            @include meta.apply(map.get($mixins, 'hook-totop'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-totop:hover,
+    .#{$prefix}-totop:focus {
+        color: var(--totop-hover-color);
+        outline: none;
+        @if map.has-key($mixins, 'hook-totop-hover') {
+            @include meta.apply(map.get($mixins, 'hook-totop-hover'));
+        }
+    }
+
+    /* OnClick */
+    .#{$prefix}-totop:active {
+        color: var(--totop-active-color);
+        @if map.has-key($mixins, 'hook-totop-active') {
+            @include meta.apply(map.get($mixins, 'hook-totop-active'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-totop-misc') {
+        @include meta.apply(map.get($mixins, 'hook-totop-misc'));
+    }
+
+    @content;
+}
+
+@mixin totop-tokens {
+    --totop-padding: #{$totop-padding};
+    --totop-color: var(--global-muted-color);
+    --totop-hover-color: var(--global-color);
+    --totop-active-color: var(--global-emphasis-color);
+
+    @content;
+}
+
+@mixin totop-inverse-tokens {
+    --inverse-totop-color: var(--inverse-global-muted-color);
+    --inverse-totop-hover-color: var(--inverse-global-color);
+    --inverse-totop-active-color: var(--inverse-global-emphasis-color);
+
+    @content;
+}

package/styles/transition/_index.scss

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