@broxus/react-uikit 0.17.4 → 0.19.0

package/dist/cjs/components/Progress/index.scss

@@ -1,125 +0,0 @@
-// Name:            Progress
-// Description:     Component to create progress bars
-//
-// Component:       `uk-progress`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Progress
- ========================================================================== */
-
-/*
- * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- * 2. Remove default style
- * 3. Behave like a block element
- * 4. Remove borders in Firefox and Edge
- * 5. Set background color for progress container in Firefox, IE11 and Edge
- * 6. Style
- */
-
-.uk-progress {
-    /* 2 */
-    appearance: none;
-
-    /* 5 */
-    background-color: var(--progress-background);
-
-    /* 4 */
-    border: 0;
-
-    /* 3 */
-    display: block;
-    height: var(--progress-height);
-
-    /* 6 */
-    margin-bottom: var(--progress-margin-vertical);
-
-    /* 1 */
-    vertical-align: baseline;
-    width: 100%;
-    @if mixin-exists(hook-progress) {
-        @include hook-progress;
-    }
-}
-
-/* Add margin if adjacent element */
-* + .uk-progress { margin-top: var(--progress-margin-vertical); }
-
-/*
- * Remove animated circles for indeterminate state in IE11 and Edge
- */
-
-.uk-progress:indeterminate { color: transparent; }
-
-/*
- * Progress container
- * 2. Remove progress bar for indeterminate state in Firefox
- */
-
-.uk-progress::-webkit-progress-bar {
-    background-color: var(--progress-background);
-    @if mixin-exists(hook-progress) {
-        @include hook-progress;
-    }
-}
-
-/* 2 */
-.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
-
-/*
- * Progress bar
- * 1. Remove right border in IE11 and Edge
- */
-
-.uk-progress::-webkit-progress-value {
-    background-color: var(--progress-bar-background);
-    transition: width 0.6s ease;
-    @if mixin-exists(hook-progress-bar) {
-        @include hook-progress-bar;
-    }
-}
-
-.uk-progress::-moz-progress-bar {
-    background-color: var(--progress-bar-background);
-    @if mixin-exists(hook-progress-bar) {
-        @include hook-progress-bar;
-    }
-}
-
-.uk-progress::-ms-fill {
-    background-color: var(--progress-bar-background);
-
-    /* 1 */
-    border: 0;
-    transition: width 0.6s ease;
-    @if mixin-exists(hook-progress-bar) {
-        @include hook-progress-bar;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-progress-misc) {
-    @include hook-progress-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --progress-height: #{$progress-height};
-    --progress-margin-vertical: var(--global-margin);
-    --progress-background: var(--global-muted-background);
-    --progress-bar-background: var(--global-primary-background);
-}

package/dist/cjs/components/Section/index.scss

@@ -1,283 +0,0 @@
-// Name:            Section
-// Description:     Component to create horizontal layout section
-//
-// Component:       `uk-section`
-//
-// Modifiers:       `uk-section-xsmall`
-//                  `uk-section-small`
-//                  `uk-section-large`
-//                  `uk-section-xlarge`
-//                  `uk-section-default`
-//                  `uk-section-muted`
-//                  `uk-section-primary`
-//                  `uk-section-secondary`
-//                  `uk-section-tertiary`
-//                  `uk-section-overlap`
-//
-// States:          `uk-preserve-color`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Section
- ========================================================================== */
-
-/*
- * 1. Make it work with `100vh` and height in general
- */
-
-.uk-section {
-    box-sizing: border-box; /* 1 */
-    display: flow-root;
-    padding-bottom: var(--section-padding-vertical);
-    padding-top: var(--section-padding-vertical);
-    @if mixin-exists(hook-section) {
-        @include hook-section;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-section {
-        padding-bottom: var(--section-padding-vertical-m);
-        padding-top: var(--section-padding-vertical-m);
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-section > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Size modifiers
- ========================================================================== */
-
-/*
- * XSmall
- */
-
-.uk-section-xsmall {
-    padding-bottom: var(--section-xsmall-padding-vertical);
-    padding-top: var(--section-xsmall-padding-vertical);
-}
-
-/*
- * Small
- */
-
-.uk-section-small {
-    padding-bottom: var(--section-small-padding-vertical);
-    padding-top: var(--section-small-padding-vertical);
-}
-
-/*
- * Large
- */
-
-.uk-section-large {
-    padding-bottom: var(--section-large-padding-vertical);
-    padding-top: var(--section-large-padding-vertical);
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-section-large {
-        padding-bottom: var(--section-large-padding-vertical-m);
-        padding-top: var(--section-large-padding-vertical-m);
-    }
-}
-
-/*
- * XLarge
- */
-
-.uk-section-xlarge {
-    padding-bottom: var(--section-xlarge-padding-vertical);
-    padding-top: var(--section-xlarge-padding-vertical);
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-section-xlarge {
-        padding-bottom: var(--section-xlarge-padding-vertical-m);
-        padding-top: var(--section-xlarge-padding-vertical-m);
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Default
- */
-
-.uk-section-default {
-    --uk-inverse: #{$section-default-color-mode};
-    background: var(--section-default-background);
-    @if mixin-exists(hook-section-default) {
-        @include hook-section-default;
-    }
-}
-
-@if $section-default-color-mode == light {
-    .uk-section-default:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-default-color-mode == dark {
-    .uk-section-default:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Muted
- */
-
-.uk-section-muted {
-    --uk-inverse: #{$section-muted-color-mode};
-    background: var(--section-muted-background);
-    @if mixin-exists(hook-section-muted) {
-        @include hook-section-muted;
-    }
-}
-
-@if $section-muted-color-mode == light {
-    .uk-section-muted:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-muted-color-mode == dark {
-    .uk-section-muted:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Primary
- */
-
-.uk-section-primary {
-    --uk-inverse: #{$section-primary-color-mode};
-    background: var(--section-primary-background);
-    @if mixin-exists(hook-section-primary) {
-        @include hook-section-primary;
-    }
-}
-
-@if $section-primary-color-mode == light {
-    .uk-section-primary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-primary-color-mode == dark {
-    .uk-section-primary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Secondary
- */
-
-.uk-section-secondary {
-    --uk-inverse: #{$section-secondary-color-mode};
-    background: var(--section-secondary-background);
-    @if mixin-exists(hook-section-secondary) {
-        @include hook-section-secondary;
-    }
-}
-
-@if $section-secondary-color-mode == light {
-    .uk-section-secondary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-secondary-color-mode == dark {
-    .uk-section-secondary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Tertiary
- */
-
-.uk-section-tertiary {
-    --uk-inverse: #{$section-tertiary-color-mode};
-    background: var(--section-tertiary-background);
-    @if mixin-exists(hook-section-tertiary) {
-        @include hook-section-tertiary;
-    }
-}
-
-@if $section-tertiary-color-mode == light {
-    .uk-section-tertiary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-tertiary-color-mode == dark {
-    .uk-section-tertiary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-
-/* Overlap modifier
- ========================================================================== */
-
-/*
- * Reserved modifier to make a section overlap another section with an border image
- * Implemented by the theme
- */
-
-.uk-section-overlap {
-    @if mixin-exists(hook-section-overlap) {
-        @include hook-section-overlap;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-section-misc) {
-    @include hook-section-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --section-padding-vertical: var(--global-medium-margin);
-    --section-padding-vertical-m: var(--global-large-margin);
-    --section-xsmall-padding-vertical: var(--global-margin);
-    --section-small-padding-vertical: var(--global-medium-margin);
-    --section-large-padding-vertical: var(--global-large-margin);
-    --section-large-padding-vertical-m: var(--global-xlarge-margin);
-    --section-xlarge-padding-vertical: var(--global-xlarge-margin);
-    --section-xlarge-padding-vertical-m: calc(var(--global-large-margin) + var(--global-xlarge-margin));
-    --section-default-background: var(--global-background);
-    --section-muted-background: var(--global-muted-background);
-    --section-primary-background: var(--global-primary-background);
-    --section-secondary-background: var(--global-secondary-background);
-    --section-tertiary-background: var(--global-tertiary-background);
-}

package/dist/cjs/components/Subnav/index.scss

@@ -1,258 +0,0 @@
-// Name:            Subnav
-// Description:     Component to create a sub navigation
-//
-// Component:       `uk-subnav`
-//
-// Modifiers:       `uk-subnav-divider`
-//                  `uk-subnav-pill`
-//
-// States:          `uk-active`
-//                  `uk-first-column`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Subnav
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Center items vertically if they have a different height
- * 3. Gutter
- * 4. Reset list
- */
-
-.uk-subnav {
-    /* 2 */
-    align-items: center;
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 3 */
-    margin-left: calc(var(--subnav-margin-horizontal) * -1);
-
-    /* 4 */
-    padding: 0;
-    @if mixin-exists(hook-subnav) {
-        @include hook-subnav;
-    }
-}
-
-/*
- * 1. Space is allocated solely based on content dimensions: 0 0 auto
- * 2. Gutter
- * 3. Create position context for dropdowns
- */
-
-.uk-subnav > * {
-    /* 1 */
-    flex: none;
-
-    /* 2 */
-    padding-left: var(--subnav-margin-horizontal);
-
-    /* 3 */
-    position: relative;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items must target `a` elements to exclude other elements (e.g. dropdowns)
- * Using `:first-child` instead of `a` to support `span` elements for text
- * 1. Center content vertically, e.g. an icon
- * 2. Imitate white space gap when using flexbox
- * 3. Style
- */
-
-.uk-subnav > * > :first-child {
-    align-items: center;
-
-    /* 3 */
-    color: var(--subnav-item-color);
-
-    /* 2 */
-    column-gap: 0.25em;
-
-    /* 1 */
-    display: flex;
-    @if mixin-exists(hook-subnav-item) {
-        @include hook-subnav-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav > * > a:hover,
-.uk-subnav > * > a:focus {
-    color: var(--subnav-item-hover-color);
-    outline: none;
-    text-decoration: var(--subnav-item-hover-text-decoration);
-    @if mixin-exists(hook-subnav-item-hover) {
-        @include hook-subnav-item-hover;
-    }
-}
-
-/* Active */
-.uk-subnav > .uk-active > a {
-    color: var(--subnav-item-active-color);
-    @if mixin-exists(hook-subnav-item-active) {
-        @include hook-subnav-item-active;
-    }
-}
-
-
-/* Divider modifier
- ========================================================================== */
-
-/*
- * Set gutter
- */
-
-.uk-subnav-divider {
-    margin-left: calc((var(--subnav-divider-margin-horizontal) * 2 + var(--subnav-divider-border-width)) * -1);
-}
-
-/*
- * Align items and divider vertically
- */
-
-.uk-subnav-divider > * {
-    align-items: center;
-    display: flex;
-}
-
-/*
- * Divider
- * 1. `nth-child` makes it also work without JS if it's only one row
- */
-
-.uk-subnav-divider > ::before {
-    border-left: var(--subnav-divider-border-width) solid transparent;
-    content: '';
-    height: var(--subnav-divider-border-height);
-    margin-left: calc(var(--subnav-divider-margin-horizontal) - var(subnav-margin-horizontal));
-    margin-right: var(--subnav-divider-margin-horizontal);
-}
-
-/* 1 */
-.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
-    border-left-color: var(--subnav-divider-border);
-    @if mixin-exists(hook-subnav-divider) {
-        @include hook-subnav-divider;
-    }
-}
-
-
-/* Pill modifier
- ========================================================================== */
-
-.uk-subnav-pill > * > :first-child {
-    background: var(--subnav-pill-item-background);
-    color: var(--subnav-pill-item-color);
-    padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
-    @if mixin-exists(hook-subnav-pill-item) {
-        @include hook-subnav-pill-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav-pill > * > a:hover,
-.uk-subnav-pill > * > a:focus {
-    background-color: var(--subnav-pill-item-hover-background);
-    color: var(--subnav-pill-item-hover-color);
-    @if mixin-exists(hook-subnav-pill-item-hover) {
-        @include hook-subnav-pill-item-hover;
-    }
-}
-
-/* OnClick */
-.uk-subnav-pill > * > a:active {
-    background-color: var(--subnav-pill-item-onclick-background);
-    color: var(--subnav-pill-item-onclick-color);
-    @if mixin-exists(hook-subnav-pill-item-onclick) {
-        @include hook-subnav-pill-item-onclick;
-    }
-}
-
-/* Active */
-.uk-subnav-pill > .uk-active > a {
-    background-color: var(--subnav-pill-item-active-background);
-    color: var(--subnav-pill-item-active-color);
-    @if mixin-exists(hook-subnav-pill-item-active) {
-        @include hook-subnav-pill-item-active;
-    }
-}
-
-
-/* Disabled
- * The same for all style modifiers
- ========================================================================== */
-
-.uk-subnav > .uk-disabled > a {
-    color: var(--subnav-item-disabled-color);
-    @if mixin-exists(hook-subnav-item-disabled) {
-        @include hook-subnav-item-disabled;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-subnav-misc) {
-    @include hook-subnav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --subnav-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-item-color: var(--global-muted-color);
-    --subnav-item-hover-color: var(--global-color);
-    --subnav-item-hover-text-decoration: #{$subnav-item-hover-text-decoration};
-    --subnav-item-active-color: var(--global-emphasis-color);
-    --subnav-divider-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-divider-border-height: #{$subnav-divider-border-height};
-    --subnav-divider-border-width: var(--global-border-width);
-    --subnav-divider-border: var(--global-border);
-    --subnav-pill-item-padding-vertical: #{$subnav-pill-item-padding-vertical};
-    --subnav-pill-item-padding-horizontal: #{$subnav-pill-item-padding-horizontal};
-    --subnav-pill-item-background: #{$subnav-pill-item-background};
-    --subnav-pill-item-color: #{$subnav-item-color};
-    --subnav-pill-item-hover-background: var(--global-muted-background);
-    --subnav-pill-item-hover-color: var(--global-color);
-    --subnav-pill-item-onclick-background: #{$subnav-pill-item-hover-background};
-    --subnav-pill-item-onclick-color: #{$subnav-pill-item-hover-color};
-    --subnav-pill-item-active-background: var(--global-primary-background);
-    --subnav-pill-item-active-color: var(--global-inverse-color);
-    --subnav-item-disabled-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-subnav-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-subnav-divider-border: var(--inverse-global-border);
-    --inverse-subnav-pill-item-background: #{$inverse-subnav-pill-item-background};
-    --inverse-subnav-pill-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-pill-item-hover-background: var(--inverse-global-muted-background);
-    --inverse-subnav-pill-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-pill-item-onclick-background: #{$inverse-subnav-pill-item-hover-background};
-    --inverse-subnav-pill-item-onclick-color: #{$inverse-subnav-pill-item-hover-color};
-    --inverse-subnav-pill-item-active-background: var(--inverse-global-primary-background);
-    --inverse-subnav-pill-item-active-color: var(--inverse-global-inverse-color);
-    --inverse-subnav-item-disabled-color: var(--inverse-global-muted-color);
-}