@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/comment/_comment.scss

@@ -0,0 +1,195 @@
+// Name:            Comment
+// Description:     Component to create nested comments
+//
+// Component:       `uk-comment`
+//
+// Sub-objects:     `uk-comment-body`
+//                  `uk-comment-header`
+//                  `uk-comment-title`
+//                  `uk-comment-meta`
+//                  `uk-comment-avatar`
+//                  `uk-comment-list`
+//
+// Modifier:        `uk-comment-primary`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin comment-styles {
+    /* ========================================================================
+       Component: Comment
+     ========================================================================== */
+
+    .#{$prefix}-comment {
+        @if map.has-key($mixins, 'hook-comment') {
+            @include meta.apply(map.get($mixins, 'hook-comment'));
+        }
+    }
+
+
+    /* Sections
+     ========================================================================== */
+
+    .#{$prefix}-comment-body {
+        display: flow-root;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        @if map.has-key($mixins, 'hook-comment-body') {
+            @include meta.apply(map.get($mixins, 'hook-comment-body'));
+        }
+    }
+
+    .#{$prefix}-comment-header {
+        display: flow-root;
+        margin-bottom: var(--comment-header-margin-bottom);
+        @if map.has-key($mixins, 'hook-comment-header') {
+            @include meta.apply(map.get($mixins, 'hook-comment-header'));
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-comment-body > :last-child,
+    .#{$prefix}-comment-header > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Title
+     ========================================================================== */
+
+    .#{$prefix}-comment-title {
+        font-size: var(--comment-title-font-size);
+        line-height: var(--comment-title-line-height);
+        @if map.has-key($mixins, 'hook-comment-title') {
+            @include meta.apply(map.get($mixins, 'hook-comment-title'));
+        }
+    }
+
+
+    /* Meta
+     ========================================================================== */
+
+    .#{$prefix}-comment-meta {
+        color: var(--comment-meta-color);
+        font-size: var(--comment-meta-font-size);
+        line-height: var(--comment-meta-line-height);
+        @if map.has-key($mixins, 'hook-comment-meta') {
+            @include meta.apply(map.get($mixins, 'hook-comment-meta'));
+        }
+    }
+
+
+    /* Avatar
+     ========================================================================== */
+
+    .#{$prefix}-comment-avatar {
+        @if map.has-key($mixins, 'hook-comment-avatar') {
+            @include meta.apply(map.get($mixins, 'hook-comment-avatar'));
+        }
+    }
+
+
+    /* List
+     ========================================================================== */
+
+    .#{$prefix}-comment-list {
+        list-style: none;
+        padding: 0;
+    }
+
+    /* Adjacent siblings */
+    .#{$prefix}-comment-list > :nth-child(n+2) {
+        margin-top: var(--comment-list-margin-top);
+        @if map.has-key($mixins, 'hook-comment-list-adjacent') {
+            @include meta.apply(map.get($mixins, 'hook-comment-list-adjacent'));
+        }
+    }
+
+    /*
+     * Sublists
+     * Note: General sibling selector allows reply block between comment and sublist
+     */
+
+    .#{$prefix}-comment-list .#{$prefix}-comment ~ ul {
+        list-style: none;
+        margin: var(--comment-list-margin-top) 0 0 0;
+        padding-left: var(--comment-list-padding-left);
+        @if map.has-key($mixins, 'hook-comment-list-sub') {
+            @include meta.apply(map.get($mixins, 'hook-comment-list-sub'));
+        }
+    }
+
+    /* Tablet and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-comment-list .#{$prefix}-comment ~ ul {
+            padding-left: var(--comment-list-padding-left-m);
+        }
+    }
+
+    /* Adjacent siblings */
+    .#{$prefix}-comment-list .#{$prefix}-comment ~ ul > :nth-child(n+2) {
+        margin-top: var(--comment-list-margin-top);
+        @if map.has-key($mixins, 'hook-comment-list-sub-adjacent') {
+            @include meta.apply(map.get($mixins, 'hook-comment-list-sub-adjacent'));
+        }
+    }
+
+
+    /* Style modifier
+     ========================================================================== */
+
+    .#{$prefix}-comment-primary {
+        @if map.has-key($mixins, 'hook-comment-primary') {
+            @include meta.apply(map.get($mixins, 'hook-comment-primary'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-comment-misc') {
+        @include meta.apply(map.get($mixins, 'hook-comment-misc'));
+    }
+
+    // @mixin hook-comment() {}
+    // @mixin hook-comment-body() {}
+    // @mixin hook-comment-header() {}
+    // @mixin hook-comment-title() {}
+    // @mixin hook-comment-meta() {}
+    // @mixin hook-comment-avatar() {}
+    // @mixin hook-comment-list-adjacent() {}
+    // @mixin hook-comment-list-sub() {}
+    // @mixin hook-comment-list-sub-adjacent() {}
+    // @mixin hook-comment-primary() {}
+    // @mixin hook-comment-misc() {}
+
+    @content;
+}
+
+@mixin comment-tokens {
+    --comment-header-margin-bottom: var(--global-margin);
+    --comment-title-font-size: var(--global-medium-font-size);
+    --comment-title-line-height: #{$comment-title-line-height};
+    --comment-meta-font-size: var(--global-small-font-size);
+    --comment-meta-line-height: #{$comment-meta-line-height};
+    --comment-meta-color: var(--global-muted-color);
+    --comment-list-margin-top: var(--global-large-margin);
+    --comment-list-padding-left: #{$comment-list-padding-left};
+    --comment-list-padding-left-m: #{$comment-list-padding-left-m};
+
+    @content;
+}

package/styles/comment/_index.scss

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

package/styles/container/_container.scss

@@ -0,0 +1,240 @@
+// Name:            Container
+// Description:     Component to align and center your site and grid content
+//
+// Component:       `uk-container`
+//
+// Modifier:        `uk-container-xsmall`
+//                  `uk-container-small`
+//                  `uk-container-large`
+//                  `uk-container-xlarge`
+//                  `uk-container-expand`
+//                  `uk-container-expand-left`
+//                  `uk-container-expand-right`
+//                  `uk-container-item-padding-remove-left`
+//                  `uk-container-item-padding-remove-right`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin container-styles {
+    /* ========================================================================
+       Component: Container
+     ========================================================================== */
+
+    /*
+     * 1. Box sizing has to be `content-box` so the max-width is always the same and
+     *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
+     */
+
+    .#{$prefix}-container {
+        /* 1 */
+        box-sizing: content-box;
+        display: flow-root;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: var(--container-max-width);
+        padding-left: var(--container-padding-horizontal);
+        padding-right: var(--container-padding-horizontal);
+    }
+
+    /* Phone landscape and bigger */
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-container {
+            padding-left: var(--container-padding-horizontal-s);
+            padding-right: var(--container-padding-horizontal-s);
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-container {
+            padding-left: var(--container-padding-horizontal-m);
+            padding-right: var(--container-padding-horizontal-m);
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-container > :last-child {
+        margin-bottom: 0;
+    }
+
+    /*
+     * Remove padding from nested containers
+     */
+
+    .#{$prefix}-container .#{$prefix}-container:not(.#{$prefix}-preserve) {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+
+    /* Size modifier
+     ========================================================================== */
+
+    .#{$prefix}-container-xsmall {
+        max-width: var(--container-xsmall-max-width);
+    }
+
+    .#{$prefix}-container-small {
+        max-width: var(--container-small-max-width);
+    }
+
+    .#{$prefix}-container-large {
+        max-width: var(--container-large-max-width);
+    }
+
+    .#{$prefix}-container-xlarge {
+        max-width: var(--container-xlarge-max-width);
+    }
+
+    .#{$prefix}-container-expand {
+        max-width: none;
+    }
+
+
+    /* Expand modifier
+     ========================================================================== */
+
+    /*
+     * Expand one side only
+     */
+
+    .#{$prefix}-container-expand-left {
+        margin-left: 0;
+    }
+
+    .#{$prefix}-container-expand-right {
+        margin-right: 0;
+    }
+
+    /* Phone landscape and bigger */
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-container-expand-left.#{$prefix}-container-xsmall,
+        .#{$prefix}-container-expand-right.#{$prefix}-container-xsmall {
+            max-width: calc(50% + (var(--container-xsmall-max-width) / 2) - var(--container-padding-horizontal-s));
+        }
+
+        .#{$prefix}-container-expand-left.#{$prefix}-container-small,
+        .#{$prefix}-container-expand-right.#{$prefix}-container-small {
+            max-width: calc(50% + (var(--container-small-max-width) / 2) - var(--container-padding-horizontal-s));
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-container-expand-left,
+        .#{$prefix}-container-expand-right {
+            max-width: calc(50% + (var(--container-max-width) / 2) - var(--container-padding-horizontal-m));
+        }
+
+        .#{$prefix}-container-expand-left.#{$prefix}-container-xsmall,
+        .#{$prefix}-container-expand-right.#{$prefix}-container-xsmall {
+            max-width: calc(50% + (var(--container-xsmall-max-width) / 2) - var(--container-padding-horizontal-m));
+        }
+
+        .#{$prefix}-container-expand-left.#{$prefix}-container-small,
+        .#{$prefix}-container-expand-right.#{$prefix}-container-small {
+            max-width: calc(50% + (var(--container-small-max-width) / 2) - var(--container-padding-horizontal-m));
+        }
+
+        .#{$prefix}-container-expand-left.#{$prefix}-container-large,
+        .#{$prefix}-container-expand-right.#{$prefix}-container-large {
+            max-width: calc(50% + (var(--container-large-max-width) / 2) - var(--container-padding-horizontal-m));
+        }
+
+        .#{$prefix}-container-expand-left.#{$prefix}-container-xlarge,
+        .#{$prefix}-container-expand-right.#{$prefix}-container-xlarge {
+            max-width: calc(50% + (var(--container-xlarge-max-width) / 2) - var(--container-padding-horizontal-m));
+        }
+    }
+
+
+    /* Item
+     ========================================================================== */
+
+    /*
+     * Utility classes to reset container padding on the left or right side
+     * Note: It has to be negative margin on the item, because it's specific to the item.
+     */
+
+    .#{$prefix}-container-item-padding-remove-left,
+    .#{$prefix}-container-item-padding-remove-right {
+        width: calc(100% + var(--container-padding-horizontal));
+    }
+
+    .#{$prefix}-container-item-padding-remove-left {
+        margin-left: calc(var(--container-padding-horizontal) * -1);
+    }
+
+    .#{$prefix}-container-item-padding-remove-right {
+        margin-right: calc(var(--container-padding-horizontal) * -1);
+    }
+
+    /* Phone landscape and bigger */
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-container-item-padding-remove-left,
+        .#{$prefix}-container-item-padding-remove-right {
+            width: calc(100% + var(--container-padding-horizontal-s));
+        }
+
+        .#{$prefix}-container-item-padding-remove-left {
+            margin-left: calc(var(--container-padding-horizontal-s) * -1);
+        }
+
+        .#{$prefix}-container-item-padding-remove-right {
+            margin-right: calc(var(--container-padding-horizontal-s) * -1);
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-container-item-padding-remove-left,
+        .#{$prefix}-container-item-padding-remove-right {
+            width: calc(100% + var(--container-padding-horizontal-m));
+        }
+
+        .#{$prefix}-container-item-padding-remove-left {
+            margin-left: calc(var(--container-padding-horizontal-m) * -1);
+        }
+
+        .#{$prefix}-container-item-padding-remove-right {
+            margin-right: calc(var(--container-padding-horizontal-m) * -1);
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-container-misc') {
+        @include meta.apply(map.get($mixins, 'hook-container-misc'));
+    }
+
+    @content;
+}
+
+@mixin container-tokens {
+    --container-max-width: #{$container-max-width};
+    --container-xsmall-max-width: #{$container-xsmall-max-width};
+    --container-small-max-width: #{$container-small-max-width};
+    --container-large-max-width: #{$container-large-max-width};
+    --container-xlarge-max-width: #{$container-xlarge-max-width};
+    --container-padding-horizontal: #{$container-padding-horizontal};
+    --container-padding-horizontal-s: var(--global-gutter);
+    --container-padding-horizontal-m: var(--global-medium-gutter);
+
+    @content;
+}

package/styles/container/_index.scss

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