@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/overlay.scss

@@ -1,107 +0,0 @@
-// Name:            Overlay
-// Description:     Component to create content areas overlaying an image
-//
-// Component:       `uk-overlay`
-//
-// Adopted:         `uk-overlay-icon`
-//
-// Modifier:        `uk-overlay-default`
-//                  `uk-overlay-primary`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Overlay
- ========================================================================== */
-
-.uk-overlay {
-    padding: var(--overlay-padding-vertical) var(--overlay-padding-horizontal);
-    @if meta.mixin-exists('hook-overlay') {
-        @include hook-overlay;
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-overlay > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Icon
- ========================================================================== */
-
-.uk-overlay-icon {
-    @if meta.mixin-exists('hook-overlay-icon') {
-        @include hook-overlay-icon;
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Default
- */
-
-.uk-overlay-default {
-    background: var(--overlay-default-background);
-    @if meta.mixin-exists('hook-overlay-default') {
-        @include hook-overlay-default;
-    }
-}
-
-/*
- * Primary
- */
-
-.uk-overlay-primary {
-    background: var(--overlay-primary-background);
-    @if meta.mixin-exists('hook-overlay-primary') {
-        @include hook-overlay-primary;
-    }
-}
-
-// Color Mode
-@if $overlay-primary-color-mode == light {
-    .uk-overlay-primary {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $overlay-primary-color-mode == dark {
-    .uk-overlay-primary {
-        @extend .uk-dark !optional;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-overlay-misc') {
-    @include hook-overlay-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --overlay-padding-horizontal: var(--global-gutter);
-    --overlay-padding-vertical: var(--global-gutter);
-    --overlay-default-background: #{$overlay-default-background};
-    --overlay-primary-background: #{$overlay-primary-background};
-}

package/styles/padding.scss

@@ -1,89 +0,0 @@
-// Name:            Padding
-// Description:     Utilities for padding
-//
-// Component:       `uk-padding`
-//                  `uk-padding-large`
-//                  `uk-padding-remove-*`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Padding
- ========================================================================== */
-
-.uk-padding { padding: var(--padding); }
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-padding { padding: var(--padding-l); }
-}
-
-
-/* Small
- ========================================================================== */
-
-.uk-padding-small { padding: var(--small-padding); }
-
-
-/* Large
- ========================================================================== */
-
-.uk-padding-large { padding: var(--large-padding); }
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-padding-large { padding: var(--large-padding-l); }
-}
-
-
-/* Remove
- ========================================================================== */
-
-.uk-padding-remove { padding: 0 !important; }
-
-.uk-padding-remove-top { padding-top: 0 !important; }
-
-.uk-padding-remove-bottom { padding-bottom: 0 !important; }
-
-.uk-padding-remove-left { padding-left: 0 !important; }
-
-.uk-padding-remove-right { padding-right: 0 !important; }
-
-.uk-padding-remove-vertical {
-    padding-bottom: 0 !important;
-    padding-top: 0 !important;
-}
-
-.uk-padding-remove-horizontal {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-padding-misc') {
-    @include hook-padding-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --padding: var(--global-gutter);
-    --padding-l: var(--global-medium-gutter);
-    --small-padding: var(--global-small-gutter);
-    --large-padding: var(--global-gutter);
-    --large-padding-l: var(--global-large-gutter);
-}

package/styles/pagination.scss

@@ -1,142 +0,0 @@
-// Name:            Pagination
-// Description:     Component to create a page navigation
-//
-// Component:       `uk-pagination`
-//
-// Adopted:         `uk-pagination-next`
-//                  `uk-pagination-previous`
-//
-// States:          `uk-active`
-//                  `uk-disabled`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Pagination
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Gutter
- * 3. Reset list
- */
-
-.uk-pagination {
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 2 */
-    margin-left: calc(var(--pagination-margin-horizontal) * -1);
-
-    /* 3 */
-    padding: 0;
-    @if meta.mixin-exists('hook-pagination') {
-        @include hook-pagination;
-    }
-}
-
-/*
- * 1. Space is allocated solely based on content dimensions: 0 0 auto
- * 2. Gutter
- * 3. Create position context for dropdowns
- */
-
-.uk-pagination > * {
-    /* 1 */
-    flex: none;
-
-    /* 2 */
-    padding-left: var(--pagination-margin-horizontal);
-
-    /* 3 */
-    position: relative;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * 1. Prevent gap if child element is `inline-block`, e.g. an icon
- * 2. Style
- */
-
-.uk-pagination > * > * {
-    color: var(--pagination-item-color);
-
-    /* 1 */
-    display: block;
-
-    /* 2 */
-    padding: var(--pagination-item-padding-vertical) var(--pagination-item-padding-horizontal);
-    @if meta.mixin-exists('hook-pagination-item') {
-        @include hook-pagination-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-pagination > * > :hover,
-.uk-pagination > * > :focus {
-    color: var(--pagination-item-hover-color);
-    text-decoration: var(--pagination-item-hover-text-decoration);
-    @if meta.mixin-exists('hook-pagination-item-hover') {
-        @include hook-pagination-item-hover;
-    }
-}
-
-/* Active */
-.uk-pagination > .uk-active > * {
-    color: var(--pagination-item-active-color);
-    @if meta.mixin-exists('hook-pagination-item-active') {
-        @include hook-pagination-item-active;
-    }
-}
-
-/* Disabled */
-.uk-pagination > .uk-disabled > * {
-    color: var(--pagination-item-disabled-color);
-    @if meta.mixin-exists('hook-pagination-item-disabled') {
-        @include hook-pagination-item-disabled;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-pagination-misc') {
-    @include hook-pagination-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --pagination-margin-horizontal: #{$pagination-margin-horizontal};
-    --pagination-item-padding-vertical: #{$pagination-item-padding-vertical};
-    --pagination-item-padding-horizontal: #{$pagination-item-padding-horizontal};
-    --pagination-item-color: var(--global-muted-color);
-    --pagination-item-hover-color: var(--global-color);
-    --pagination-item-hover-text-decoration: #{$pagination-item-hover-text-decoration};
-    --pagination-item-active-color: var(--global-color);
-    --pagination-item-disabled-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-pagination-item-color: var(--inverse-global-muted-color);
-    --inverse-pagination-item-hover-color: var(--inverse-global-color);
-    --inverse-pagination-item-active-color: var(--inverse-global-color);
-    --inverse-pagination-item-disabled-color: var(--inverse-global-muted-color);
-}

package/styles/placeholder.scss

@@ -1,56 +0,0 @@
-// Name:            Placeholder
-// Description:     Component to create placeholder boxes
-//
-// Component:       `uk-placeholder`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Placeholder
- ========================================================================== */
-
-.uk-placeholder {
-    background: var(--placeholder-background);
-    margin-bottom: var(--placeholder-margin-vertical);
-    padding: var(--placeholder-padding-vertical) var(--placeholder-padding-horizontal);
-    @if meta.mixin-exists('hook-placeholder') {
-        @include hook-placeholder;
-    }
-}
-
-/* Add margin if adjacent element */
-* + .uk-placeholder { margin-top: var(--placeholder-margin-vertical); }
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-placeholder > :last-child { margin-bottom: 0; }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-placeholder-misc') {
-    @include hook-placeholder-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --placeholder-margin-vertical: var(--global-margin);
-    --placeholder-padding-vertical: var(--global-gutter);
-    --placeholder-padding-horizontal: var(--global-gutter);
-    --placeholder-background: var(--global-muted-background);
-}

package/styles/position.scss

@@ -1,253 +0,0 @@
-// Name:            Position
-// Description:     Utilities to position content
-//
-// Component:       `uk-position-absolute`
-//                  `uk-position-relative`
-//                  `uk-position-z-index`
-//                  `uk-position-top`
-//                  `uk-position-bottom`
-//                  `uk-position-left`
-//                  `uk-position-right`
-//                  `uk-position-top-left`
-//                  `uk-position-top-center`
-//                  `uk-position-top-right`
-//                  `uk-position-bottom-left`
-//                  `uk-position-bottom-center`
-//                  `uk-position-bottom-right`
-//                  `uk-position-center`
-//                  `uk-position-center-left`
-//                  `uk-position-center-right`
-//                  `uk-position-cover`
-//
-// Modifiers:       `uk-position-small`
-//                  `uk-position-medium`
-//                  `uk-position-large`
-//
-// ========================================================================
-
-@use 'sass:meta';
-@use 'sass:string';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Position
- ========================================================================== */
-
-
-/* Directions
- ========================================================================== */
-
-/*
- * 1. Prevent content overflow if `max-width: 100%` is used inside position container.
- */
-
-[class*='uk-position-top'],
-[class*='uk-position-bottom'],
-[class*='uk-position-left'],
-[class*='uk-position-right'],
-[class*='uk-position-center'] {
-    box-sizing: border-box;
-
-    /* 1 */
-    max-width: string.unquote('calc(100% - (var(--uk-position-margin-offset) * 2))');
-    position: absolute !important;
-}
-
-/*
- * Edges
- * Don't use `width: 100%` because it's wrong if the parent has padding.
- */
-
-.uk-position-top {
-    left: 0;
-    right: 0;
-    top: 0;
-}
-
-.uk-position-bottom {
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.uk-position-left {
-    bottom: 0;
-    left: 0;
-    top: 0;
-}
-
-.uk-position-right {
-    bottom: 0;
-    right: 0;
-    top: 0;
-}
-
-/*
- * Corners
- */
-
-.uk-position-top-left {
-    left: 0;
-    top: 0;
-}
-
-.uk-position-top-right {
-    right: 0;
-    top: 0;
-}
-
-.uk-position-bottom-left {
-    bottom: 0;
-    left: 0;
-}
-
-.uk-position-bottom-right {
-    bottom: 0;
-    right: 0;
-}
-
-/*
- * Center
- * 1. Fix text wrapping if content is larger than 50% of the container.
- *    Using `max-content` requires `max-width` of 100% which is set generally.
- */
-
-.uk-position-center {
-    --uk-position-translate-x: -50%;
-    --uk-position-translate-y: -50%;
-    left: string.unquote('calc(50% - var(--uk-position-margin-offset))');
-    top: string.unquote('calc(50% - var(--uk-position-margin-offset))');
-    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
-
-    /* 1 */
-    width: max-content;
-}
-
-/* Vertical */
-[class*='uk-position-center-left'],
-[class*='uk-position-center-right'],
-.uk-position-center-vertical {
-    --uk-position-translate-y: -50%;
-    top: string.unquote('calc(50% - var(--uk-position-margin-offset))');
-    transform: translate(0, var(--uk-position-translate-y));
-}
-
-.uk-position-center-left { left: 0; }
-.uk-position-center-right { right: 0; }
-
-.uk-position-center-vertical {
-    left: 0;
-    right: 0;
-}
-
-.uk-position-center-left-out {
-    right: 100%;
-    width: max-content;
-}
-
-.uk-position-center-right-out {
-    left: 100%;
-    width: max-content;
-}
-
-/* Horizontal */
-.uk-position-top-center,
-.uk-position-bottom-center,
-.uk-position-center-horizontal {
-    --uk-position-translate-x: -50%;
-    left: string.unquote('calc(50% - var(--uk-position-margin-offset))');
-    transform: translate(var(--uk-position-translate-x), 0);
-
-    /* 1 */
-    width: max-content;
-}
-
-.uk-position-top-center { top: 0; }
-.uk-position-bottom-center { bottom: 0; }
-
-.uk-position-center-horizontal {
-    bottom: 0;
-    top: 0;
-}
-
-/*
- * Cover
- */
-
-.uk-position-cover {
-    inset: 0;
-    position: absolute;
-}
-
-
-/* Margin
- ========================================================================== */
-
-.uk-position-small {
-    --uk-position-margin-offset: var(--position-small-margin);
-    margin: var(--position-small-margin);
-}
-
-.uk-position-medium {
-    --uk-position-margin-offset: var(--position-medium-margin);
-    margin: var(--position-medium-margin);
-}
-
-.uk-position-large {
-    --uk-position-margin-offset: var(--position-large-margin);
-    margin: var(--position-large-margin);
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-position-large {
-        --uk-position-margin-offset: var(--position-large-margin-l);
-        margin: var(--position-large-margin-l);
-    }
-}
-
-
-/* Schemes
- ========================================================================== */
-
-.uk-position-relative { position: relative  !important; }
-.uk-position-absolute { position: absolute  !important; }
-.uk-position-fixed { position: fixed  !important; }
-.uk-position-sticky { position: sticky  !important; }
-
-
-/* Layer
- ========================================================================== */
-
-.uk-position-z-index { z-index: 1; }
-.uk-position-z-index-zero { z-index: 0; }
-.uk-position-z-index-negative { z-index: -1; }
-.uk-position-z-index-high { z-index: $global-z-index - 10; } // Higher than dropbar so it is behind
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-position-misc') {
-    @include hook-position-misc;
-}
-
-// @mixin hook-position-misc() {}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --uk-position-margin-offset: 0;
-    --position-small-margin: var(--global-small-gutter);
-    --position-medium-margin: var(--global-gutter);
-    --position-large-margin: var(--global-gutter);
-    --position-large-margin-l: #{$position-large-margin-l};
-}