@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/link/_link.scss

@@ -0,0 +1,158 @@
+// Name:            Link
+// Description:     Styles for links
+//
+// Component:       `uk-link-muted`
+//                  `uk-link-text`
+//                  `uk-link-heading`
+//                  `uk-link-reset`
+//
+// Sub-objects:     `uk-link-toggle`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin link-styles {
+    /* ========================================================================
+       Component: Link
+     ========================================================================== */
+
+
+    /* Muted
+     ========================================================================== */
+
+    // noinspection Stylelint
+    a.#{$prefix}-link-muted,
+    .#{$prefix}-link-muted a {
+        color: var(--link-muted-color);
+        @if map.has-key($mixins, 'hook-link-muted') {
+            @include meta.apply(map.get($mixins, 'hook-link-muted'));
+        }
+    }
+
+    a.#{$prefix}-link-muted:hover,
+    .#{$prefix}-link-muted a:hover,
+    .#{$prefix}-link-toggle:hover .#{$prefix}-link-muted,
+    .#{$prefix}-link-toggle:focus .#{$prefix}-link-muted {
+        color: var(--link-muted-hover-color);
+        @if map.has-key($mixins, 'hook-link-muted-hover') {
+            @include meta.apply(map.get($mixins, 'hook-link-muted-hover'));
+        }
+    }
+
+
+    /* Text
+     ========================================================================== */
+
+    // noinspection Stylelint
+    a.#{$prefix}-link-text,
+    .#{$prefix}-link-text a {
+        color: inherit;
+        @if map.has-key($mixins, 'hook-link-text') {
+            @include meta.apply(map.get($mixins, 'hook-link-text'));
+        }
+    }
+
+    a.#{$prefix}-link-text:hover,
+    .#{$prefix}-link-text a:hover,
+    .#{$prefix}-link-toggle:hover .#{$prefix}-link-text,
+    .#{$prefix}-link-toggle:focus .#{$prefix}-link-text {
+        color: var(--link-text-hover-color);
+        @if map.has-key($mixins, 'hook-link-text-hover') {
+            @include meta.apply(map.get($mixins, 'hook-link-text-hover'));
+        }
+    }
+
+
+    /* Heading
+     ========================================================================== */
+
+    // noinspection Stylelint
+    a.#{$prefix}-link-heading,
+    .#{$prefix}-link-heading a {
+        color: inherit;
+        @if map.has-key($mixins, 'hook-link-heading') {
+            @include meta.apply(map.get($mixins, 'hook-link-heading'));
+        }
+    }
+
+    a.#{$prefix}-link-heading:hover,
+    .#{$prefix}-link-heading a:hover,
+    .#{$prefix}-link-toggle:hover .#{$prefix}-link-heading,
+    .#{$prefix}-link-toggle:focus .#{$prefix}-link-heading {
+        color: var(--link-heading-hover-color);
+        text-decoration: var(--link-heading-hover-text-decoration);
+        @if map.has-key($mixins, 'hook-link-heading-hover') {
+            @include meta.apply(map.get($mixins, 'hook-link-heading-hover'));
+        }
+    }
+
+
+    /* Reset
+     ========================================================================== */
+
+    /*
+     * `!important` needed to override inverse component
+     */
+
+    // noinspection Stylelint
+    a.#{$prefix}-link-reset,
+    .#{$prefix}-link-reset a {
+        color: inherit !important;
+        text-decoration: none !important;
+        @if map.has-key($mixins, 'hook-link-reset') {
+            @include meta.apply(map.get($mixins, 'hook-link-reset'));
+        }
+    }
+
+
+    /* Toggle
+     ========================================================================== */
+
+    .#{$prefix}-link-toggle {
+        color: inherit !important;
+        text-decoration: none !important;
+    }
+
+    .#{$prefix}-link-toggle:focus {
+        outline: none;
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-link-misc') {
+        @include meta.apply(map.get($mixins, 'hook-link-misc'));
+    }
+
+    @content;
+}
+
+@mixin link-tokens {
+    --link-muted-color: var(--global-muted-color);
+    --link-muted-hover-color: var(--global-color);
+    --link-text-hover-color: var(--global-muted-color);
+    --link-heading-hover-color: var(--global-primary-background);
+    --link-heading-hover-text-decoration: #{$link-heading-hover-text-decoration};
+
+    @content;
+}
+
+@mixin link-inverse-tokens {
+    --inverse-link-muted-color: var(--inverse-global-muted-color);
+    --inverse-link-muted-hover-color: var(--inverse-global-color);
+    --inverse-link-text-hover-color: var(--inverse-global-muted-color);
+    --inverse-link-heading-hover-color: var(--inverse-global-primary-background);
+
+    @content;
+}

package/styles/list/_index.scss

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

package/styles/list/_list.scss

@@ -0,0 +1,288 @@
+// Name:            List
+// Description:     Styles for lists
+//
+// Component:       `uk-list`
+//
+// Modifiers:       `uk-list-disc`
+//                  `uk-list-circle`
+//                  `uk-list-square`
+//                  `uk-list-decimal`
+//                  `uk-list-hyphen`
+//                  `uk-list-muted`
+//                  `uk-list-emphasis`
+//                  `uk-list-primary`
+//                  `uk-list-secondary`
+//                  `uk-list-bullet`
+//                  `uk-list-divider`
+//                  `uk-list-striped`
+//                  `uk-list-large`
+//                  `uk-list-collapse`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+@use '../utils' as *;
+
+
+@mixin list-styles {
+    /* ========================================================================
+       Component: List
+     ========================================================================== */
+
+    .#{$prefix}-list {
+        list-style: none;
+        padding: 0;
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-list > * > :last-child {
+        margin-bottom: 0;
+    }
+
+    /*
+     * Style
+     */
+
+    .#{$prefix}-list > :nth-child(n+2),
+    .#{$prefix}-list > * > ul {
+        margin-top: var(--list-margin-top);
+    }
+
+
+    /* Marker modifiers
+     * Moving `::marker` inside `::before` to style it differently
+     * To style the `::marker` is currently only supported in Firefox and Safari
+     ========================================================================== */
+
+    .#{$prefix}-list-disc > *,
+    .#{$prefix}-list-circle > *,
+    .#{$prefix}-list-square > *,
+    .#{$prefix}-list-decimal > *,
+    .#{$prefix}-list-hyphen > * {
+        padding-left: var(--list-padding-left);
+    }
+
+    /*
+     * Type modifiers
+     */
+
+    .#{$prefix}-list-decimal {
+        counter-reset: decimal;
+    }
+
+    .#{$prefix}-list-decimal > * {
+        counter-increment: decimal;
+    }
+
+    [class*='#{$prefix}-list'] > ::before {
+        content: '';
+        display: list-item;
+        height: var(--list-marker-height);
+        left: calc(var(--list-padding-left) * -1);
+        list-style-position: inside;
+        margin-bottom: calc(var(--list-marker-height) * -1);
+        position: relative;
+        text-align: right;
+        width: var(--list-padding-left);
+    }
+
+    .#{$prefix}-list-disc > ::before {
+        list-style-type: disc;
+    }
+
+    .#{$prefix}-list-circle > ::before {
+        list-style-type: circle;
+    }
+
+    .#{$prefix}-list-square > ::before {
+        list-style-type: square;
+    }
+
+    .#{$prefix}-list-decimal > ::before {
+        content: counter(decimal, decimal) '\200A.\00A0';
+    }
+
+    .#{$prefix}-list-hyphen > ::before {
+        content: '–\00A0\00A0';
+    }
+
+    /*
+     * Color modifiers
+     */
+
+    .#{$prefix}-list-muted > ::before {
+        color: var(--list-muted-color) !important;
+    }
+
+    .#{$prefix}-list-emphasis > ::before {
+        color: var(--list-emphasis-color) !important;
+    }
+
+    .#{$prefix}-list-primary > ::before {
+        color: var(--list-primary-color) !important;
+    }
+
+    .#{$prefix}-list-secondary > ::before {
+        color: var(--list-secondary-color) !important;
+    }
+
+
+    /* Image bullet modifier
+     ========================================================================== */
+
+    .#{$prefix}-list-bullet > * {
+        padding-left: var(--list-padding-left);
+    }
+
+    .#{$prefix}-list-bullet > ::before {
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        content: '';
+        height: var(--list-marker-height);
+        left: calc(var(--list-padding-left) * -1);
+        margin-bottom: calc(var(--list-marker-height) * -1);
+        position: relative;
+        width: var(--list-padding-left);
+        @if map.has-key($mixins, 'svg-fill') {
+            @include meta.apply(map.get($mixins, 'svg-fill'), $list-bullet-icon-image-path, '#000', $list-bullet-icon-color);
+        }
+    }
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    /*
+     * Divider
+     */
+
+    .#{$prefix}-list-divider > :nth-child(n+2) {
+        border-top: var(--list-divider-border-width) solid var(--list-divider-border);
+        margin-top: var(--list-divider-margin-top);
+        padding-top: var(--list-divider-margin-top);
+        @if map.has-key($mixins, 'hook-list-divider') {
+            @include meta.apply(map.get($mixins, 'hook-list-divider'));
+        }
+    }
+
+    /*
+     * Striped
+     */
+
+    .#{$prefix}-list-striped > * {
+        padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
+        @if map.has-key($mixins, 'hook-list-striped') {
+            @include meta.apply(map.get($mixins, 'hook-list-striped'));
+        }
+    }
+
+    .#{$prefix}-list-striped > :nth-of-type(odd) {
+        background: var(--list-striped-background);
+    }
+
+    .#{$prefix}-list-striped > :nth-child(n+2) {
+        margin-top: 0;
+    }
+
+
+    /* Size modifier
+     ========================================================================== */
+
+    .#{$prefix}-list-large > :nth-child(n+2),
+    .#{$prefix}-list-large > * > ul {
+        margin-top: var(--list-large-margin-top);
+    }
+
+    .#{$prefix}-list-collapse > :nth-child(n+2),
+    .#{$prefix}-list-collapse > * > ul {
+        margin-top: 0;
+    }
+
+    /*
+     * Divider
+     */
+
+    .#{$prefix}-list-large.#{$prefix}-list-divider > :nth-child(n+2) {
+        margin-top: var(--list-large-divider-margin-top);
+        padding-top: var(--list-large-divider-margin-top);
+    }
+
+    .#{$prefix}-list-collapse.#{$prefix}-list-divider > :nth-child(n+2) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    /*
+     * Striped
+     */
+
+    .#{$prefix}-list-large.#{$prefix}-list-striped > * {
+        padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal);
+    }
+
+    .#{$prefix}-list-collapse.#{$prefix}-list-striped > * {
+        padding-bottom: 0;
+        padding-top: 0;
+    }
+
+    .#{$prefix}-list-large.#{$prefix}-list-striped > :nth-child(n+2),
+    .#{$prefix}-list-collapse.#{$prefix}-list-striped > :nth-child(n+2) {
+        margin-top: 0;
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-list-misc') {
+        @include meta.apply(map.get($mixins, 'hook-list-misc'));
+    }
+
+    @content;
+}
+
+@mixin list-tokens {
+    --list-margin-top: var(--global-small-margin);
+    --list-padding-left: #{$list-padding-left};
+    --list-marker-height: calc(var(--global-line-height) * 1em);
+    --list-muted-color: var(--global-muted-color);
+    --list-emphasis-color: var(--global-emphasis-color);
+    --list-primary-color: var(--global-primary-background);
+    --list-secondary-color: var(--global-secondary-background);
+    --list-bullet-icon-color: var(--global-color);
+    --list-divider-margin-top: var(--global-small-margin);
+    --list-divider-border-width: var(--global-border-width);
+    --list-divider-border: var(--global-border);
+    --list-striped-padding-vertical: var(--global-small-margin);
+    --list-striped-padding-horizontal: var(--global-small-margin);
+    --list-striped-background: var(--global-muted-background);
+    --list-large-margin-top: var(--global-margin);
+    --list-large-divider-margin-top: var(--global-margin);
+    --list-large-striped-padding-vertical: var(--global-margin);
+    --list-large-striped-padding-horizontal: var(--global-small-margin);
+
+    @content;
+}
+
+@mixin list-inverse-tokens {
+    --inverse-list-muted-color: var(--inverse-global-muted-color);
+    --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
+    --inverse-list-primary-color: var(--inverse-global-primary-background);
+    --inverse-list-secondary-color: var(--inverse-global-primary-background);
+    --inverse-list-divider-border: var(--inverse-global-border);
+    --inverse-list-striped-background: var(--inverse-global-muted-background);
+    --inverse-list-bullet-icon-color: var(--inverse-global-color);
+
+    @content;
+}

package/styles/margin/_index.scss

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