@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/heading/_heading.scss

@@ -0,0 +1,265 @@
+// Name:            Heading
+// Description:     Styles for headings
+//
+// Component:       `uk-heading-primary`
+//                  `uk-heading-hero`
+//                  `uk-heading-divider`
+//                  `uk-heading-bullet`
+//                  `uk-heading-line`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin heading-styles {
+    /* ========================================================================
+       Component: Heading
+     ========================================================================== */
+
+    .#{$prefix}-heading-small {
+        font-size: var(--heading-small-font-size);
+        line-height: var(--heading-small-line-height);
+        @if map.has-key($mixins, 'hook-heading-small') {
+            @include meta.apply(map.get($mixins, 'hook-heading-small'));
+        }
+    }
+
+    .#{$prefix}-heading-medium {
+        font-size: var(--heading-medium-font-size);
+        line-height: var(--heading-medium-line-height);
+        @if map.has-key($mixins, 'hook-heading-medium') {
+            @include meta.apply(map.get($mixins, 'hook-heading-medium'));
+        }
+    }
+
+    .#{$prefix}-heading-large {
+        font-size: var(--heading-large-font-size);
+        line-height: var(--heading-large-line-height);
+        @if map.has-key($mixins, 'hook-heading-large') {
+            @include meta.apply(map.get($mixins, 'hook-heading-large'));
+        }
+    }
+
+    .#{$prefix}-heading-xlarge {
+        font-size: var(--heading-xlarge-font-size);
+        line-height: var(--heading-xlarge-line-height);
+        @if map.has-key($mixins, 'hook-heading-xlarge') {
+            @include meta.apply(map.get($mixins, 'hook-heading-xlarge'));
+        }
+    }
+
+    .#{$prefix}-heading-2xlarge {
+        font-size: var(--heading-2xlarge-font-size);
+        line-height: var(--heading-2xlarge-line-height);
+        @if map.has-key($mixins, 'hook-heading-2xlarge') {
+            @include meta.apply(map.get($mixins, 'hook-heading-2xlarge'));
+        }
+    }
+
+    /* Tablet Landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-heading-small {
+            font-size: var(--heading-small-font-size-m);
+        }
+
+        .#{$prefix}-heading-medium {
+            font-size: var(--heading-medium-font-size-m);
+        }
+
+        .#{$prefix}-heading-large {
+            font-size: var(--heading-large-font-size-m);
+        }
+
+        .#{$prefix}-heading-xlarge {
+            font-size: var(--heading-xlarge-font-size-m);
+        }
+
+        .#{$prefix}-heading-2xlarge {
+            font-size: var(--heading-2xlarge-font-size-m);
+        }
+    }
+
+    /* Laptop and bigger */
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-heading-medium {
+            font-size: var(--heading-medium-font-size-l);
+        }
+
+        .#{$prefix}-heading-large {
+            font-size: var(--heading-large-font-size-l);
+        }
+
+        .#{$prefix}-heading-xlarge {
+            font-size: var(--heading-xlarge-font-size-l);
+        }
+
+        .#{$prefix}-heading-2xlarge {
+            font-size: var(--heading-2xlarge-font-size-l);
+        }
+    }
+
+
+    /* Divider
+     ========================================================================== */
+
+    .#{$prefix}-heading-divider {
+        border-bottom: var(--heading-divider-border-width) solid var(--heading-divider-border);
+        padding-bottom: var(--heading-divider-padding-bottom);
+        @if map.has-key($mixins, 'hook-heading-divider') {
+            @include meta.apply(map.get($mixins, 'hook-heading-divider'));
+        }
+    }
+
+
+    /* Bullet
+     ========================================================================== */
+
+    .#{$prefix}-heading-bullet {
+        position: relative;
+    }
+
+    /*
+     * 1. Using `inline-block` to make it work with text alignment
+     * 2. Center vertically
+     * 3. Style
+     */
+
+    .#{$prefix}-heading-bullet::before {
+        border-left: var(--heading-bullet-border-width) solid var(--heading-bullet-border);
+        content: '';
+
+        /* 1 */
+        display: inline-block;
+
+        /* 3 */
+        height: var(--heading-bullet-height);
+        margin-right: var(--heading-bullet-margin-right);
+
+        /* 2 */
+        position: relative;
+        top: var(--heading-bullet-top);
+        vertical-align: middle;
+        @if map.has-key($mixins, 'hook-heading-bullet') {
+            @include meta.apply(map.get($mixins, 'hook-heading-bullet'));
+        }
+    }
+
+
+    /* Line
+     ========================================================================== */
+
+    /*
+     * Clip the child element
+     */
+
+    .#{$prefix}-heading-line {
+        overflow: hidden;
+    }
+
+    /*
+     * Extra markup is needed to make it work with text align
+     */
+
+    .#{$prefix}-heading-line > * {
+        display: inline-block;
+        position: relative;
+    }
+
+    /*
+     * 1. Center vertically
+     * 2. Make the element as large as possible. It's clipped by the container.
+     * 3. Style
+     */
+
+    .#{$prefix}-heading-line > ::before,
+    .#{$prefix}-heading-line > ::after {
+        /* 3 */
+        border-bottom: var(--heading-line-border-width) solid var(--heading-line-border);
+        content: '';
+
+        /* 1 */
+        position: absolute;
+        top: calc(var(--heading-line-top) - (var(--heading-line-height) / 2));
+
+        /* 2 */
+        width: var(--heading-line-width);
+        @if map.has-key($mixins, 'hook-heading-line') {
+            @include meta.apply(map.get($mixins, 'hook-heading-line'));
+        }
+    }
+
+    .#{$prefix}-heading-line > ::before {
+        margin-right: var(--heading-line-margin-horizontal);
+        right: 100%;
+    }
+
+    .#{$prefix}-heading-line > ::after {
+        left: 100%;
+        margin-left: var(--heading-line-margin-horizontal);
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-heading-misc') {
+        @include meta.apply(map.get($mixins, 'hook-heading-misc'));
+    }
+
+    @content;
+}
+
+@mixin heading-tokens {
+    --heading-medium-font-size-l: #{$heading-medium-font-size-l};
+    --heading-large-font-size-l: #{$heading-large-font-size-l};
+    --heading-xlarge-font-size-l: #{$heading-xlarge-font-size-l};
+    --heading-2xlarge-font-size-l: #{$heading-2xlarge-font-size-l};
+    --heading-small-font-size-m: #{$heading-small-font-size-m};
+    --heading-medium-font-size-m: #{$heading-medium-font-size-m};
+    --heading-large-font-size-m: var(--heading-medium-font-size-l);
+    --heading-xlarge-font-size-m: var(--heading-large-font-size-l);
+    --heading-2xlarge-font-size-m: var(--heading-xlarge-font-size-l);
+    --heading-small-font-size: #{$heading-small-font-size};
+    --heading-medium-font-size: #{$heading-medium-font-size};
+    --heading-large-font-size: #{$heading-large-font-size};
+    --heading-xlarge-font-size: var(--heading-large-font-size-m);
+    --heading-2xlarge-font-size: var(--heading-xlarge-font-size-m);
+    --heading-small-line-height: #{$heading-small-line-height};
+    --heading-medium-line-height: #{$heading-medium-line-height};
+    --heading-large-line-height: #{$heading-large-line-height};
+    --heading-xlarge-line-height: #{$heading-xlarge-line-height};
+    --heading-2xlarge-line-height: #{$heading-2xlarge-line-height};
+    --heading-divider-padding-bottom: #{$heading-divider-padding-bottom};
+    --heading-divider-border-width: #{$heading-divider-border-width};
+    --heading-divider-border: var(--global-border);
+    --heading-bullet-top: #{$heading-bullet-top};
+    --heading-bullet-height: #{$heading-bullet-height};
+    --heading-bullet-margin-right: #{$heading-bullet-margin-right};
+    --heading-bullet-border-width: #{$heading-bullet-border-width};
+    --heading-bullet-border: var(--global-border);
+    --heading-line-top: #{$heading-line-top};
+    --heading-line-height: var(--heading-line-border-width);
+    --heading-line-width: #{$heading-line-width};
+    --heading-line-border-width: #{$heading-line-border-width};
+    --heading-line-border: var(--global-border);
+    --heading-line-margin-horizontal: #{$heading-line-margin-horizontal};
+
+    @content;
+}
+
+@mixin heading-inverse-tokens {
+    --inverse-heading-divider-border: var(--inverse-global-border);
+    --inverse-heading-bullet-border: var(--inverse-global-border);
+    --inverse-heading-line-border: var(--inverse-global-border);
+
+    @content;
+}

package/styles/heading/_index.scss

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

package/styles/height/_height.scss

@@ -0,0 +1,77 @@
+// Name:            Height
+// Description:     Utilities for heights
+//
+// Component:       `uk-height-*`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin height-styles {
+    /* ========================================================================
+       Component: Height
+     ========================================================================== */
+
+    [class*='#{$prefix}-height'] { box-sizing: border-box; }
+
+    /*
+     * Only works if parent element has a height set
+     */
+
+    .#{$prefix}-height-1-1 { height: 100%; }
+
+    /*
+     * Useful to create image teasers
+     */
+
+    .#{$prefix}-height-viewport { min-height: 100vh; }
+
+    /*
+     * Pixel
+     * Useful for `overflow: auto`
+     */
+
+    .#{$prefix}-height-small { height: var(--height-small-height); }
+
+    .#{$prefix}-height-medium { height: var(--height-medium-height); }
+
+    .#{$prefix}-height-large { height: var(--height-large-height); }
+
+    .#{$prefix}-height-xlarge { height: var(--height-large-height); }
+
+    .#{$prefix}-height-max-small { max-height: var(--height-small-height); }
+
+    .#{$prefix}-height-max-medium { max-height: var(--height-medium-height); }
+
+    .#{$prefix}-height-max-large { max-height: var(--height-large-height); }
+
+    .#{$prefix}-height-max-xlarge { max-height: var(--height-xlarge-height); }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-height-misc') {
+        @include meta.apply(map.get($mixins, 'hook-height-misc'));
+    }
+
+    @content;
+}
+
+@mixin height-tokens {
+    --height-small-height: #{$height-small-height};
+    --height-medium-height: #{$height-medium-height};
+    --height-large-height: #{$height-large-height};
+    --height-xlarge-height: #{$height-xlarge-height};
+
+    @content;
+}

package/styles/height/_index.scss

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

package/styles/icon/_icon.scss

@@ -0,0 +1,274 @@
+// Name:            Icon
+// Description:     Component to create icons
+//
+// Component:       `uk-icon`
+//
+// Modifiers:       `uk-icon-image`
+//                  `uk-icon-link`
+//                  `uk-icon-button`
+//
+// States:          `uk-preserve`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin icon-styles {
+    /* ========================================================================
+       Component: Icon
+     ========================================================================== */
+
+    /*
+     * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
+     * 1. Remove margins in Chrome, Safari and Opera.
+     * 2. Remove borders for `button`.
+     * 3. Remove border-radius in Chrome.
+     * 4. Address `overflow` set to `hidden` in IE.
+     * 5. Correct `font` properties and `color` not being inherited for `button`.
+     * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
+     * 7. Remove default `button` padding and background color
+     * 8. Style
+     * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
+     * 10. Let the container fit the height of the icon
+     */
+
+    .#{$prefix}-icon {
+        background-color: transparent; /* 7 */
+        border: none; /* 2 */
+        border-radius: 0; /* 3 */
+        color: inherit;
+        display: inline-block; /* 8 */
+        fill: currentColor; /* 9 */
+        font: inherit; /* 5 */
+        line-height: 0; /* 10 */
+        margin: 0; /* 1 */
+        overflow: visible; /* 4 */
+        padding: 0; /* 7 */
+        text-transform: none; /* 6 */
+    }
+
+    /* Required for `button`. */
+    button.#{$prefix}-icon:not(:disabled) {
+        cursor: pointer;
+    }
+
+    /*
+     * Remove the inner border and padding in Firefox.
+     */
+
+    .#{$prefix}-icon::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+
+    /*
+     * Set the fill and stroke color of all SVG elements to the current text color
+     */
+
+    .#{$prefix}-icon:not(.#{$prefix}-preserve) [fill*='#']:not(.#{$prefix}-preserve) {
+        fill: currentColor;
+    }
+
+    .#{$prefix}-icon:not(.#{$prefix}-preserve) [stroke*='#']:not(.#{$prefix}-preserve) {
+        stroke: currentColor;
+    }
+
+    /*
+     * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+     */
+
+    .#{$prefix}-icon > * {
+        transform: translate(0, 0);
+    }
+
+
+    /* Image modifier
+     ========================================================================== */
+
+    /*
+     * Display images in icon dimensions
+     */
+
+    .#{$prefix}-icon-image {
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: var(--icon-image-size);
+        vertical-align: middle;
+        width: var(--icon-image-size);
+    }
+
+
+    /* Material UI icons modifier
+     ========================================================================== */
+
+    .#{$prefix}-icon-material {
+        &:not(.#{$prefix}-icon-button) {
+            height: var(--icon-size, 1.4rem);
+            min-width: var(--icon-size, 1.4rem);
+            width: var(--icon-size, 1.4rem);
+        }
+
+        i {
+            direction: ltr;
+            display: inline-block;
+
+            // noinspection Stylelint,CssNoGenericFontName
+            font-family: 'Material Icons Outlined';
+
+            /* Support for IE. */
+            font-feature-settings: 'liga';
+            font-size: var(--icon-size, 1.4rem);
+
+            /* Support for all WebKit browsers. */
+            -webkit-font-smoothing: antialiased;
+
+            /* Support for Firefox. */
+            -moz-osx-font-smoothing: grayscale;
+            font-style: normal;
+            font-weight: normal;
+            letter-spacing: normal;
+            line-height: 1;
+            text-decoration: none;
+
+            /* Support for Safari and Chrome. */
+            text-rendering: optimizeLegibility;
+            text-transform: none;
+            vertical-align: middle;
+            white-space: nowrap;
+            word-wrap: normal;
+
+            &.#{$prefix}-icon-round {
+                // noinspection Stylelint,CssNoGenericFontName
+                font-family: 'Material Icons Round';
+            }
+        }
+    }
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    /*
+     * Link
+     */
+
+    .#{$prefix}-icon-link {
+        color: var(--icon-link-color);
+        @if map.has-key($mixins, 'hook-icon-link') {
+            @include meta.apply(map.get($mixins, 'hook-icon-link'));
+        }
+    }
+
+    .#{$prefix}-icon-link:hover,
+    .#{$prefix}-icon-link:focus {
+        color: var(--icon-link-hover-color);
+        outline: none;
+        text-decoration: none;
+        @if map.has-key($mixins, 'hook-icon-link-hover') {
+            @include meta.apply(map.get($mixins, 'hook-icon-link-hover'));
+        }
+    }
+
+    /* OnClick + Active */
+    .#{$prefix}-icon-link:active,
+    .#{$prefix}-active > .#{$prefix}-icon-link {
+        color: var(--icon-link-active-color);
+        @if map.has-key($mixins, 'hook-icon-link-active') {
+            @include meta.apply(map.get($mixins, 'hook-icon-link-active'));
+        }
+    }
+
+    /*
+     * Button
+     * 1. Center icon vertically and horizontally
+     */
+
+    .#{$prefix}-icon-button {
+        align-items: center; /* 1 */
+        background: var(--icon-button-background);
+        border-radius: var(--icon-button-border-radius);
+        box-sizing: border-box;
+        color: var(--icon-button-color);
+        display: inline-flex; /* 1 */
+        height: var(--icon-button-size);
+        justify-content: center; /* 1 */
+        vertical-align: middle;
+        width: var(--icon-button-size);
+        @if map.has-key($mixins, 'hook-icon-button') {
+            @include meta.apply(map.get($mixins, 'hook-icon-button'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-icon-button:hover,
+    .#{$prefix}-icon-button:focus {
+        background-color: var(--icon-button-hover-background);
+        color: var(--icon-button-hover-color);
+        outline: none;
+        text-decoration: none;
+        @if map.has-key($mixins, 'hook-icon-button-hover') {
+            @include meta.apply(map.get($mixins, 'hook-icon-button-hover'));
+        }
+    }
+
+    /* OnClick + Active */
+    .#{$prefix}-icon-button:active,
+    .#{$prefix}-active > .#{$prefix}-icon-button {
+        background-color: var(--icon-button-active-background);
+        color: var(--icon-button-active-color);
+        @if map.has-key($mixins, 'hook-icon-button-active') {
+            @include meta.apply(map.get($mixins, 'hook-icon-button-active'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-icon-misc') {
+        @include meta.apply(map.get($mixins, 'hook-icon-misc'));
+    }
+
+    @content;
+}
+
+@mixin icon-tokens {
+    --icon-image-size: #{$icon-image-size};
+    --icon-link-color: var(--global-muted-color);
+    --icon-link-hover-color: var(--global-color);
+    --icon-link-active-color: #{$icon-link-active-color};
+    --icon-button-size: #{$icon-button-size};
+    --icon-button-border-radius: #{$icon-button-border-radius};
+    --icon-button-background: var(--global-muted-background);
+    --icon-button-color: var(--global-muted-color);
+    --icon-button-hover-background: #{$icon-button-hover-background};
+    --icon-button-hover-color: var(--global-color);
+    --icon-button-active-background: #{$icon-button-active-background};
+    --icon-button-active-color: var(--global-color);
+
+    @content;
+}
+
+@mixin icon-inverse-tokens {
+    --inverse-icon-link-color: var(--inverse-global-muted-color);
+    --inverse-icon-link-hover-color: var(--inverse-global-color);
+    --inverse-icon-link-active-color: var(--inverse-global-color);
+    --inverse-icon-button-background: var(--inverse-global-muted-background);
+    --inverse-icon-button-color: var(--inverse-global-muted-color);
+    --inverse-icon-button-hover-background: #{$inverse-icon-button-hover-background};
+    --inverse-icon-button-hover-color: var(--inverse-global-color);
+    --inverse-icon-button-active-background: #{$inverse-icon-button-active-background};
+    --inverse-icon-button-active-color: var(--inverse-global-color);
+
+    @content;
+}

package/styles/icon/_index.scss

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