@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/description-list.scss

@@ -1,89 +0,0 @@
-// Name:            Description list
-// Description:     Styles for description lists
-//
-// Component:       `uk-description-list`
-//
-// Modifiers:       `uk-description-list-divider`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Description list
- ========================================================================== */
-
-/*
- * Term
- */
-
-.uk-description-list > dt {
-    color: var(--description-list-term-color);
-    @if meta.mixin-exists('hook-description-list-term') {
-        @include hook-description-list-term;
-    }
-}
-
-.uk-description-list > dt:nth-child(n+2) {
-    margin-top: var(--description-list-term-margin-top);
-}
-
-/*
- * Description
- */
-
-.uk-description-list > dd {
-    @if meta.mixin-exists('hook-description-list-description') {
-        @include hook-description-list-description;
-    }
-}
-
-
-/* Style modifier
- ========================================================================== */
-
-/*
- * Line
- */
-
-.uk-description-list-divider > dt:nth-child(n+2) {
-    border-top: var(--description-list-divider-term-border-width) solid var(--description-list-divider-term-border);
-    margin-top: var(--description-list-divider-term-margin-top);
-    padding-top: var(--description-list-divider-term-margin-top);
-    @if meta.mixin-exists('hook-description-list-divider-term') {
-        @include hook-description-list-divider-term;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-description-list-misc') {
-    @include hook-description-list-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --description-list-term-color: var(--global-emphasis-color);
-    --description-list-term-margin-top: var(--global-margin);
-    --description-list-term-font-size: var(--global-small-font-size);
-    --description-list-term-font-weight: #{$description-list-term-font-weight};
-    --description-list-term-text-transform: #{$description-list-term-text-transform};
-    --description-list-divider-term-margin-top: var(--global-margin);
-    --description-list-divider-term-border-width: var(--global-border-width);
-    --description-list-divider-term-border: var(--global-border);
-
-    // Inverse
-    --inverse-description-list-term-color: var(--inverse-global-emphasis-color);
-}

package/styles/divider.scss

@@ -1,161 +0,0 @@
-// Name:            Divider
-// Description:     Styles for dividers
-//
-// Component:       `uk-divider-icon`
-//                  `uk-divider-small`
-//                  `uk-divider-vertical`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Divider
- ========================================================================== */
-
-/*
- * 1. Reset default `hr`
- * 2. Set margin if a `div` is used for semantical reason
- */
-
-[class*='uk-divider'] {
-    /* 1 */
-    border: none;
-
-    /* 2 */
-    margin-bottom: var(--divider-margin-vertical);
-}
-
-/* Add margin if adjacent element */
-* + [class*='uk-divider'] {
-    margin-top: var(--divider-margin-vertical);
-}
-
-
-/* Icon
- ========================================================================== */
-
-.uk-divider-icon {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    height: var(--divider-icon-height);
-    position: relative;
-    @if meta.mixin-exists('svg-fill') {
-        @include svg-fill($internal-divider-icon-image, '#000', $divider-icon-color);
-    }
-    @if meta.mixin-exists('hook-divider-icon') {
-        @include hook-divider-icon;
-    }
-}
-
-.uk-divider-icon::before,
-.uk-divider-icon::after {
-    border-bottom: var(--divider-icon-line-border-width) solid var(--divider-icon-line-border);
-    content: '';
-    max-width: calc(50% - (var(--divider-icon-width) / 2));
-    position: absolute;
-    top: var(--divider-icon-line-top);
-    @if meta.mixin-exists('hook-divider-icon-line') {
-        @include hook-divider-icon-line;
-    }
-}
-
-.uk-divider-icon::before {
-    right: calc(50% + (var(--divider-icon-width) / 2));
-    width: var(--divider-icon-line-width);
-    @if meta.mixin-exists('hook-divider-icon-line-left') {
-        @include hook-divider-icon-line-left;
-    }
-}
-
-.uk-divider-icon::after {
-    left: calc(50% + (var(--divider-icon-width) / 2));
-    width: var(--divider-icon-line-width);
-    @if meta.mixin-exists('hook-divider-icon-line-right') {
-        @include hook-divider-icon-line-right;
-    }
-}
-
-
-/* Small
- ========================================================================== */
-
-/*
- * 1. Fix height because of `inline-block`
- * 2. Using ::after and inline-block to make `text-align` work
- */
-
-/* 1 */
-.uk-divider-small {
-    line-height: 0;
-}
-
-/* 2 */
-.uk-divider-small::after {
-    border-top: var(--divider-small-border-width) solid var(--divider-small-border);
-    content: '';
-    display: inline-block;
-    max-width: 100%;
-    vertical-align: top;
-    width: var(--divider-small-width);
-    @if meta.mixin-exists('hook-divider-small') {
-        @include hook-divider-small;
-    }
-}
-
-
-/* Vertical
- ========================================================================== */
-
-.uk-divider-vertical {
-    border-left: var(--divider-vertical-border-width) solid var(--divider-vertical-border);
-    height: var(--divider-vertical-height);
-    margin-left: auto;
-    margin-right: auto;
-    width: 1px;
-    @if meta.mixin-exists('hook-divider-vertical') {
-        @include hook-divider-vertical;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-divider-misc') {
-    @include hook-divider-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --divider-margin-vertical: var(--global-margin);
-    --divider-icon-width: #{$divider-icon-width};
-    --divider-icon-height: #{$divider-icon-height};
-    --divider-icon-color: var(--global-border);
-    --divider-icon-line-top: #{$divider-icon-line-top};
-    --divider-icon-line-width: #{$divider-icon-line-width};
-    --divider-icon-line-border-width: var(--global-border-width);
-    --divider-icon-line-border: var(--global-border);
-    --divider-small-width: #{$divider-small-width};
-    --divider-small-border-width: var(--global-border-width);
-    --divider-small-border: var(--global-border);
-    --divider-vertical-height: #{$divider-vertical-height};
-    --divider-vertical-border-width: var(--global-border-width);
-    --divider-vertical-border: var(--global-border);
-
-    // Inverse
-    --inverse-divider-icon-color: var(--inverse-global-border);
-    --inverse-divider-icon-line-border: var(--inverse-global-border);
-    --inverse-divider-small-border: var(--inverse-global-border);
-    --inverse-divider-vertical-border: var(--inverse-global-border);
-}

package/styles/dotnav.scss

@@ -1,164 +0,0 @@
-// Name:            Dotnav
-// Description:     Component to create dot navigations
-//
-// Component:       `uk-dotnav`
-//
-// Modifier:        `uk-dotnav-vertical`
-//
-// States:          `uk-active`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Dotnav
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Reset list
- * 3. Gutter
- */
-
-.uk-dotnav {
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 2 */
-    margin: 0 0 0 /* 3 */ calc(var(--dotnav-margin-horizontal) * -1);
-    padding: 0;
-    @if meta.mixin-exists('hook-dotnav') {
-        @include hook-dotnav;
-    }
-}
-
-/*
- * 1. Space is allocated solely based on content dimensions: 0 0 auto
- * 2. Gutter
- */
-
-.uk-dotnav > * {
-    /* 1 */
-    flex: none;
-
-    /* 2 */
-    padding-left: var(--dotnav-margin-horizontal);
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items
- * 1. Hide text if present
- */
-
-.uk-dotnav > * > * {
-    background: var(--dotnav-item-background);
-    border-radius: var(--dotnav-item-border-radius);
-    box-sizing: border-box;
-    display: block;
-    height: var(--dotnav-item-height);
-    overflow: hidden;
-
-    /* 1 */
-    text-indent: 100%;
-    white-space: nowrap;
-    width: var(--dotnav-item-width);
-    @if meta.mixin-exists('hook-dotnav-item') {
-        @include hook-dotnav-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-dotnav > * > :hover,
-.uk-dotnav > * > :focus {
-    background-color: var(--dotnav-item-hover-background);
-    outline: none;
-    @if meta.mixin-exists('hook-dotnav-item-hover') {
-        @include hook-dotnav-item-hover;
-    }
-}
-
-/* OnClick */
-.uk-dotnav > * > :active {
-    background-color: var(--dotnav-item-onclick-background);
-    @if meta.mixin-exists('hook-dotnav-item-onclick') {
-        @include hook-dotnav-item-onclick;
-    }
-}
-
-/* Active */
-.uk-dotnav > .uk-active > * {
-    background-color: var(--dotnav-item-active-background);
-    @if meta.mixin-exists('hook-dotnav-item-active') {
-        @include hook-dotnav-item-active;
-    }
-}
-
-
-/* Modifier: 'uk-dotnav-vertical'
- ========================================================================== */
-
-/*
- * 1. Change direction
- * 2. Gutter
- */
-
-.uk-dotnav-vertical {
-    /* 1 */
-    flex-direction: column;
-
-    /* 2 */
-    margin-left: 0;
-    margin-top: calc(var(--dotnav-margin-vertical) * -1);
-}
-
-/* 2 */
-// noinspection Stylelint
-.uk-dotnav-vertical > * {
-    padding-left: 0;
-    padding-top: var(--dotnav-margin-vertical);
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-dotnav-misc') {
-    @include hook-dotnav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --dotnav-margin-horizontal: #{$dotnav-margin-horizontal};
-    --dotnav-margin-vertical: var(--dotnav-margin-horizontal);
-    --dotnav-item-width: #{$dotnav-item-width};
-    --dotnav-item-height: #{$dotnav-item-width};
-    --dotnav-item-border-radius: #{$dotnav-item-border-radius};
-    --dotnav-item-background: #{$dotnav-item-background};
-    --dotnav-item-hover-background: #{$dotnav-item-hover-background};
-    --dotnav-item-onclick-background: #{$dotnav-item-onclick-background};
-    --dotnav-item-active-background: #{$dotnav-item-active-background};
-
-    // Inverse
-    --inverse-dotnav-item-background: #{$inverse-dotnav-item-background};
-    --inverse-dotnav-item-hover-background: #{$inverse-dotnav-item-hover-background};
-    --inverse-dotnav-item-onclick-background: #{$inverse-dotnav-item-onclick-background};
-    --inverse-dotnav-item-active-background: #{$inverse-dotnav-item-active-background};
-}