@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/text.scss

@@ -1,425 +0,0 @@
-// Name:            Text
-// Description:     Utilities for text
-//
-// Component:       `uk-text-*`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Text
- ========================================================================== */
-
-
-/* Style modifiers
- ========================================================================== */
-
-.uk-text-lead {
-    color: var(--text-lead-color);
-    font-size: var(--text-lead-font-size);
-    line-height: var(--text-lead-line-height);
-    @if meta.mixin-exists('hook-text-lead') {
-        @include hook-text-lead;
-    }
-}
-
-.uk-text-meta {
-    color: var(--text-meta-color);
-    font-size: var(--text-meta-font-size);
-    line-height: var(--text-meta-line-height);
-    @if meta.mixin-exists('hook-text-meta') {
-        @include hook-text-meta;
-    }
-}
-
-.uk-text-base {
-    color: var(--text-base-color);
-    font-size: var(--text-base-font-size);
-    line-height: var(--text-base-line-height);
-    @if meta.mixin-exists('hook-text-base') {
-        @include hook-text-base;
-    }
-}
-
-
-/* Size modifiers
- ========================================================================== */
-
-.uk-text-xsmall {
-    font-size: var(--text-xsmall-font-size);
-    line-height: var(--text-xsmall-line-height);
-    @if meta.mixin-exists('hook-text-xsmall') {
-        @include hook-text-xsmall;
-    }
-}
-
-.uk-text-small {
-    font-size: var(--text-small-font-size);
-    line-height: var(--text-small-line-height);
-    @if meta.mixin-exists('hook-text-small') {
-        @include hook-text-small;
-    }
-}
-
-.uk-text-large {
-    font-size: var(--text-large-font-size);
-    line-height: var(--text-large-line-height);
-    @if meta.mixin-exists('hook-text-large') {
-        @include hook-text-large;
-    }
-}
-
-.uk-text-default {
-    font-size: var(--global-font-size);
-    line-height: var(--global-line-height);
-}
-
-
-/* Weight modifier
- ========================================================================== */
-
-.uk-text-thin { font-weight: 100; }
-.uk-text-light { font-weight: 300; }
-.uk-text-normal { font-weight: 400; }
-.uk-text-medium { font-weight: 500; }
-.uk-text-semibold { font-weight: 600; }
-.uk-text-bold { font-weight: 700; }
-
-.uk-text-lighter { font-weight: lighter; }
-.uk-text-bolder { font-weight: bolder; }
-
-
-/* Style modifier
- ========================================================================== */
-
-.uk-text-italic { font-style: italic; }
-
-
-/* Transform modifier
- ========================================================================== */
-
-.uk-text-capitalize { text-transform: capitalize !important; }
-.uk-text-uppercase { text-transform: uppercase !important; }
-.uk-text-lowercase { text-transform: lowercase !important; }
-
-
-/* Decoration modifier
- ========================================================================== */
-
-.uk-text-decoration-none { text-decoration: none !important; }
-
-
-/* Color modifiers
- ========================================================================== */
-
-.uk-text-muted { color: var(--text-muted-color) !important; }
-.uk-text-emphasis { color: var(--text-emphasis-color) !important; }
-.uk-text-primary { color: var(--text-primary-color) !important; }
-.uk-text-secondary { color: var(--text-secondary-color) !important; }
-.uk-text-tertiary { color: var(--text-tertiary-color) !important; }
-.uk-text-success { color: var(--text-success-color) !important; }
-.uk-text-warning { color: var(--text-warning-color) !important; }
-.uk-text-danger { color: var(--text-danger-color) !important; }
-
-
-/* Background modifier
- ========================================================================== */
-
-/*
- * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
- *    Default color is set to transparent
- * 2. Container fits the text
- * 3. Fallback color for IE11
- */
-
-.uk-text-background {
-    /* 1 */
-    -webkit-background-clip: text;
-
-    /* 3 */
-    color: var(--text-background-color) !important;
-
-    /* 2 */
-    display: inline-block;
-}
-
-@supports (-webkit-background-clip: text) {
-    .uk-text-background {
-        background-color: var(--text-background-color);
-        color: transparent !important;
-        @if meta.mixin-exists('hook-text-background') {
-            @include hook-text-background;
-        }
-    }
-}
-
-/* Loading modifier
- ========================================================================== */
-
-.uk-text-loading {
-    animation: uk-text-loading 1.65s infinite both linear;
-    -webkit-background-clip: text;
-    background-size: 200% 100%;
-    display: inline-block;
-    position: relative;
-    -webkit-text-fill-color: transparent;
-}
-
-@supports (-webkit-background-clip: text) {
-    .uk-text-loading {
-        background-image: linear-gradient(
-            90deg,
-            var(--text-loading-color) 25%,
-            var(--text-loading-emphasis-color) 50%,
-            var(--text-loading-color) 75%
-        );
-        color: transparent !important;
-
-        @if meta.mixin-exists('hook-text-loading') {
-            @include hook-text-loading;
-        }
-    }
-
-    .uk-text-muted.uk-text-loading,
-    .uk-text-muted .uk-text-loading {
-        background-image: linear-gradient(
-            90deg,
-            var(--text-muted-color) 25%,
-            var(--text-base-color) 50%,
-            var(--text-muted-color) 75%
-        );
-    }
-
-    .uk-text-primary.uk-text-loading,
-    .uk-text-primary .uk-text-loading {
-        --primary-muted-color: color-mix(in sRGB, var(--text-primary-color) 50%, transparent);
-        background-image: linear-gradient(
-            90deg,
-            var(--text-primary-color) 25%,
-            var(--primary-muted-color) 50%,
-            var(--text-primary-color) 75%
-        );
-    }
-
-    .uk-text-secondary.uk-text-loading,
-    .uk-text-secondary .uk-text-loading {
-        --secondary-muted-color: color-mix(in sRGB, var(--text-secondary-color) 50%, transparent);
-        background-image: linear-gradient(
-            90deg,
-            var(--text-secondary-color) 25%,
-            var(--secondary-muted-color) 50%,
-            var(--text-secondary-color) 75%
-        );
-    }
-
-    .uk-text-tertiary.uk-text-loading,
-    .uk-text-tertiary .uk-text-loading {
-        --tertiary-muted-color: color-mix(in sRGB, var(--text-tertiary-color) 50%, transparent);
-        background-image: linear-gradient(
-            90deg,
-            var(--text-tertiary-color) 25%,
-            var(--tertiary-muted-color) 50%,
-            var(--text-tertiary-color) 75%
-        );
-    }
-
-    .uk-text-warning.uk-text-loading,
-    .uk-text-warning .uk-text-loading {
-        --warning-muted-color: color-mix(in sRGB, var(--text-warning-color) 50%, transparent);
-        background-image: linear-gradient(
-            90deg,
-            var(--text-warning-color) 25%,
-            var(--warning-muted-color) 50%,
-            var(--text-warning-color) 75%
-        );
-    }
-
-    .uk-text-danger.uk-text-loading,
-    .uk-text-danger .uk-text-loading {
-        --danger-muted-color: color-mix(in sRGB, var(--text-danger-color) 50%, transparent);
-        background-image: linear-gradient(
-            90deg,
-            var(--text-danger-color) 25%,
-            var(--danger-muted-color) 50%,
-            var(--text-danger-color) 75%
-        );
-    }
-}
-
-@keyframes uk-text-loading {
-    0% {
-        background-position: 200% 0;
-    }
-
-    100% {
-        background-position: -200% 0;
-    }
-}
-
-
-/* Alignment modifiers
- ========================================================================== */
-
-.uk-text-left { text-align: left !important; }
-.uk-text-right { text-align: right !important; }
-.uk-text-center { text-align: center !important; }
-.uk-text-justify { text-align: justify !important; }
-
-/* Phone landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-small) {
-
-    .uk-text-left\@s { text-align: left !important; }
-    .uk-text-right\@s { text-align: right !important; }
-    .uk-text-center\@s { text-align: center !important; }
-
-}
-
-/* Tablet landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-medium) {
-
-    .uk-text-left\@m { text-align: left !important; }
-    .uk-text-right\@m { text-align: right !important; }
-    .uk-text-center\@m { text-align: center !important; }
-
-}
-
-/* Desktop and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-large) {
-
-    .uk-text-left\@l { text-align: left !important; }
-    .uk-text-right\@l { text-align: right !important; }
-    .uk-text-center\@l { text-align: center !important; }
-
-}
-
-/* Large screen and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-xlarge) {
-
-    .uk-text-left\@xl { text-align: left !important; }
-    .uk-text-right\@xl { text-align: right !important; }
-    .uk-text-center\@xl { text-align: center !important; }
-
-}
-
-/*
- * Vertical
- */
-
-.uk-text-top { vertical-align: top !important; }
-.uk-text-middle { vertical-align: middle !important; }
-.uk-text-bottom { vertical-align: bottom !important; }
-.uk-text-baseline { vertical-align: baseline !important; }
-
-
-/* Wrap modifiers
- ========================================================================== */
-
-/*
- * Prevent text from wrapping onto multiple lines
- */
-
-.uk-text-nowrap { white-space: nowrap; }
-
-/*
- * 1. Make sure a max-width is set after which truncation can occur
- * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
- * 3. Fix for table cells
- */
-
-.uk-text-truncate {
-    /* 1 */
-    max-width: 100%;
-
-    /* 2 */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-/* 2 */
-th.uk-text-truncate,
-td.uk-text-truncate { max-width: 0; }
-
-
-/*
- * 1. Wrap long words onto the next line and break them if they are too long to fit
- * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
- * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
- *    Must use `break-all` to support IE11 and Edge
- * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed
- */
-
-.uk-text-break {
-    /* 1 */
-    overflow-wrap: break-word;
-
-    /* 2 */
-    // noinspection Stylelint
-    word-wrap: break-word;
-}
-
-/* 3 */
-th.uk-text-break,
-td.uk-text-break { word-break: break-all; }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-text-misc') {
-    @include hook-text-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --text-base-font-size: var(--global-font-size);
-    --text-base-line-height: var(--global-line-height);
-    --text-base-color: var(--global-color);
-    --text-lead-font-size: var(--global-large-font-size);
-    --text-lead-line-height: #{$text-lead-line-height};
-    --text-lead-color: var(--global-emphasis-color);
-    --text-meta-font-size: var(--global-small-font-size);
-    --text-meta-line-height: #{$text-meta-line-height};
-    --text-meta-color: var(--global-muted-color);
-    --text-xsmall-font-size: var(--global-xsmall-font-size);
-    --text-xsmall-line-height: #{$text-xsmall-line-height};
-    --text-small-font-size: var(--global-small-font-size);
-    --text-small-line-height: #{$text-small-line-height};
-    --text-large-font-size: var(--global-large-font-size);
-    --text-large-line-height: #{$text-large-line-height};
-    --text-muted-color: var(--global-muted-color);
-    --text-emphasis-color: var(--global-emphasis-color);
-    --text-primary-color: var(--global-primary-color);
-    --text-secondary-color: var(--global-secondary-color);
-    --text-tertiary-color: var(--global-tertiary-color);
-    --text-success-color: var(--global-success-color);
-    --text-warning-color: var(--global-warning-color);
-    --text-danger-color: var(--global-danger-color);
-    --text-background-color: var(--global-primary-background);
-    --text-loading-color: var(--global-color);
-    --text-loading-emphasis-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-text-lead-color: var(--inverse-global-color);
-    --inverse-text-meta-color: var(--inverse-global-muted-color);
-    --inverse-text-muted-color: var(--inverse-global-muted-color);
-    --inverse-text-emphasis-color: var(--inverse-global-emphasis-color);
-    --inverse-text-primary-color: var(--inverse-global-primary-background);
-    --inverse-text-secondary-color: var(--inverse-global-primary-background);
-    --inverse-text-tertiary-color: var(--inverse-global-primary-background);
-}

package/styles/textarea.scss

@@ -1,94 +0,0 @@
-// Name:            Textarea
-// Description:     Component to create Textarea element
-//
-// Component:       `uk-control-textarea`
-//
-// Modifier:        `uk-control-small`
-//                  `uk-control-medium`
-//                  `uk-control-large`
-//                  `uk-control-success`
-//                  `uk-control-warning`
-//                  `uk-control-danger`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Textarea
- ========================================================================== */
-
-.uk-control.uk-control-textarea {
-    height: auto;
-    max-width: 100%;
-    padding: 0;
-    @if meta.mixin-exists('hook-textarea-control') {
-        @include hook-textarea-control;
-    }
-}
-
-.uk-control-textarea-show-count::after {
-    background-color: var(--textarea-counter-background);
-    border-radius: var(--textarea-counter-border-radius);
-    bottom: 5px;
-    color: var(--textarea-counter-color);
-    content: attr(data-count);
-    font-size: var(--textarea-counter-font-size);
-    padding: 0 2px 2px;
-    pointer-events: none;
-    position: absolute;
-    right: 5px;
-    white-space: nowrap;
-    @if meta.mixin-exists('hook-textarea-counter') {
-        @include hook-textarea-counter;
-    }
-}
-
-
-/* Textarea element
- ========================================================================== */
-
-// Reset height for `textarea`s
-.uk-control-textarea .uk-textarea {
-    background-color: transparent;
-    box-sizing: border-box;
-    color: var(--textarea-color);
-    height: auto;
-    line-height: normal;
-    max-width: 100%; // prevent textarea resize from coming out of its container
-    min-height: var(--control-height);
-    padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal);
-    resize: none;
-    vertical-align: bottom;
-    @if meta.mixin-exists('hook-textarea') {
-        @include hook-textarea;
-    }
-}
-
-/* Hover + Focus states */
-.uk-control-textarea:hover .uk-textarea,
-.uk-control-textarea:focus-within .uk-textarea {
-    background-color: transparent;
-    color: var(--textarea-color);
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --textarea-color: var(--control-color);
-    --textarea-padding-vertical: calc(var(--control-padding-horizontal) / 2);
-    --textarea-padding-horizontal: var(--control-padding-horizontal);
-    --textarea-counter-background: var(--global-default-background);
-    --textarea-counter-border-radius: var(--control-border-radius);
-    --textarea-counter-color: var(--global-muted-color);
-    --textarea-counter-font-size: #{$textarea-counter-font-size};
-}

package/styles/thumbnav.scss

@@ -1,126 +0,0 @@
-// Name:            Thumbnav
-// Description:     Component to create thumbnail navigations
-//
-// Component:       `uk-thumbnav`
-//
-// Modifier:        `uk-thumbnav-vertical`
-//
-// States:          `uk-active`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Thumbnav
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Reset list
- * 3. Gutter
- */
-
-.uk-thumbnav {
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 2 */
-    margin: 0 0 0 /* 3 */ calc(var(--thumbnav-margin-horizontal) * -1);
-    padding: 0;
-    @if meta.mixin-exists('hook-thumbnav') {
-        @include hook-thumbnav;
-    }
-}
-
-/*
- * Space is allocated based on content dimensions, but shrinks: 0 1 auto
- * 1. Gutter
- */
-
-.uk-thumbnav > * {
-    /* 1 */
-    padding-left: var(--thumbnav-margin-horizontal);
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items
- */
-
-.uk-thumbnav > * > * {
-    display: inline-block;
-    @if meta.mixin-exists('hook-thumbnav-item') {
-        @include hook-thumbnav-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-thumbnav > * > :hover,
-.uk-thumbnav > * > :focus {
-    outline: none;
-    @if meta.mixin-exists('hook-thumbnav-item-hover') {
-        @include hook-thumbnav-item-hover;
-    }
-}
-
-/* Active */
-.uk-thumbnav > .uk-active > * {
-    @if meta.mixin-exists('hook-thumbnav-item-active') {
-        @include hook-thumbnav-item-active;
-    }
-}
-
-
-/* Modifier: 'uk-thumbnav-vertical'
- ========================================================================== */
-
-/*
- * 1. Change direction
- * 2. Gutter
- */
-
-.uk-thumbnav-vertical {
-    /* 1 */
-    flex-direction: column;
-
-    /* 2 */
-    margin-left: 0;
-    margin-top: calc(var(--thumbnav-margin-vertical) * -1);
-}
-
-/* 2 */
-.uk-thumbnav-vertical > * {
-    padding-left: 0;
-    padding-top: var(--thumbnav-margin-vertical);
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-thumbnav-misc') {
-    @include hook-thumbnav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --thumbnav-margin-horizontal: #{$thumbnav-margin-horizontal};
-    --thumbnav-margin-vertical: var(--thumbnav-margin-horizontal);
-}