@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/comment.scss

@@ -1,191 +0,0 @@
-// 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:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Comment
- ========================================================================== */
-
-.uk-comment {
-    @if meta.mixin-exists('hook-comment') {
-        @include hook-comment;
-    }
-}
-
-
-/* Sections
- ========================================================================== */
-
-.uk-comment-body {
-    display: flow-root;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    @if meta.mixin-exists('hook-comment-body') {
-        @include hook-comment-body;
-    }
-}
-
-.uk-comment-header {
-    display: flow-root;
-    margin-bottom: var(--comment-header-margin-bottom);
-    @if meta.mixin-exists('hook-comment-header') {
-        @include hook-comment-header;
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-comment-body > :last-child,
-.uk-comment-header > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Title
- ========================================================================== */
-
-.uk-comment-title {
-    font-size: var(--comment-title-font-size);
-    line-height: var(--comment-title-line-height);
-    @if meta.mixin-exists('hook-comment-title') {
-        @include hook-comment-title;
-    }
-}
-
-
-/* Meta
- ========================================================================== */
-
-.uk-comment-meta {
-    color: var(--comment-meta-color);
-    font-size: var(--comment-meta-font-size);
-    line-height: var(--comment-meta-line-height);
-    @if meta.mixin-exists('hook-comment-meta') {
-        @include hook-comment-meta;
-    }
-}
-
-
-/* Avatar
- ========================================================================== */
-
-.uk-comment-avatar {
-    @if meta.mixin-exists('hook-comment-avatar') {
-        @include hook-comment-avatar;
-    }
-}
-
-
-/* List
- ========================================================================== */
-
-.uk-comment-list {
-    list-style: none;
-    padding: 0;
-}
-
-/* Adjacent siblings */
-.uk-comment-list > :nth-child(n+2) {
-    margin-top: var(--comment-list-margin-top);
-    @if meta.mixin-exists('hook-comment-list-adjacent') {
-        @include hook-comment-list-adjacent;
-    }
-}
-
-/*
- * Sublists
- * Note: General sibling selector allows reply block between comment and sublist
- */
-
-.uk-comment-list .uk-comment ~ ul {
-    list-style: none;
-    margin: var(--comment-list-margin-top) 0 0 0;
-    padding-left: var(--comment-list-padding-left);
-    @if meta.mixin-exists('hook-comment-list-sub') {
-        @include hook-comment-list-sub;
-    }
-}
-
-/* Tablet and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-comment-list .uk-comment ~ ul {
-        padding-left: var(--comment-list-padding-left-m);
-    }
-}
-
-/* Adjacent siblings */
-.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
-    margin-top: var(--comment-list-margin-top);
-    @if meta.mixin-exists('hook-comment-list-sub-adjacent') {
-        @include hook-comment-list-sub-adjacent;
-    }
-}
-
-
-/* Style modifier
- ========================================================================== */
-
-.uk-comment-primary {
-    @if meta.mixin-exists('hook-comment-primary') {
-        @include hook-comment-primary;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-comment-misc') {
-    @include 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() {}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --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};
-}

package/styles/container.scss

@@ -1,236 +0,0 @@
-// 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:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   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.
- */
-
-.uk-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 (min-width: $breakpoint-small) {
-    .uk-container {
-        padding-left: var(--container-padding-horizontal-s);
-        padding-right: var(--container-padding-horizontal-s);
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-container {
-        padding-left: var(--container-padding-horizontal-m);
-        padding-right: var(--container-padding-horizontal-m);
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-container > :last-child {
-    margin-bottom: 0;
-}
-
-/*
- * Remove padding from nested containers
- */
-
-.uk-container .uk-container:not(.uk-preserve) {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-.uk-container-xsmall {
-    max-width: var(--container-xsmall-max-width);
-}
-
-.uk-container-small {
-    max-width: var(--container-small-max-width);
-}
-
-.uk-container-large {
-    max-width: var(--container-large-max-width);
-}
-
-.uk-container-xlarge {
-    max-width: var(--container-xlarge-max-width);
-}
-
-.uk-container-expand {
-    max-width: none;
-}
-
-
-/* Expand modifier
- ========================================================================== */
-
-/*
- * Expand one side only
- */
-
-.uk-container-expand-left {
-    margin-left: 0;
-}
-
-.uk-container-expand-right {
-    margin-right: 0;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-    .uk-container-expand-left.uk-container-xsmall,
-    .uk-container-expand-right.uk-container-xsmall {
-        max-width: calc(50% + (var(--container-xsmall-max-width) / 2) - var(--container-padding-horizontal-s));
-    }
-
-    .uk-container-expand-left.uk-container-small,
-    .uk-container-expand-right.uk-container-small {
-        max-width: calc(50% + (var(--container-small-max-width) / 2) - var(--container-padding-horizontal-s));
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-container-expand-left,
-    .uk-container-expand-right {
-        max-width: calc(50% + (var(--container-max-width) / 2) - var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-expand-left.uk-container-xsmall,
-    .uk-container-expand-right.uk-container-xsmall {
-        max-width: calc(50% + (var(--container-xsmall-max-width) / 2) - var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-expand-left.uk-container-small,
-    .uk-container-expand-right.uk-container-small {
-        max-width: calc(50% + (var(--container-small-max-width) / 2) - var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-expand-left.uk-container-large,
-    .uk-container-expand-right.uk-container-large {
-        max-width: calc(50% + (var(--container-large-max-width) / 2) - var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-expand-left.uk-container-xlarge,
-    .uk-container-expand-right.uk-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.
- */
-
-.uk-container-item-padding-remove-left,
-.uk-container-item-padding-remove-right {
-    width: calc(100% + var(--container-padding-horizontal));
-}
-
-.uk-container-item-padding-remove-left {
-    margin-left: calc(var(--container-padding-horizontal) * -1);
-}
-
-.uk-container-item-padding-remove-right {
-    margin-right: calc(var(--container-padding-horizontal) * -1);
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-    .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right {
-        width: calc(100% + var(--container-padding-horizontal-s));
-    }
-
-    .uk-container-item-padding-remove-left {
-        margin-left: calc(var(--container-padding-horizontal-s) * -1);
-    }
-
-    .uk-container-item-padding-remove-right {
-        margin-right: calc(var(--container-padding-horizontal-s) * -1);
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right {
-        width: calc(100% + var(--container-padding-horizontal-m));
-    }
-
-    .uk-container-item-padding-remove-left {
-        margin-left: calc(var(--container-padding-horizontal-m) * -1);
-    }
-
-    .uk-container-item-padding-remove-right {
-        margin-right: calc(var(--container-padding-horizontal-m) * -1);
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-container-misc') {
-    @include hook-container-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --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);
-}