@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/list.scss

@@ -1,281 +0,0 @@
-// Name:            List
-// Description:     Styles for lists
-//
-// Component:       `uk-list`
-//
-// Modifiers:       `uk-list-disc`
-//                  `uk-list-circle`
-//                  `uk-list-square`
-//                  `uk-list-decimal`
-//                  `uk-list-hyphen`
-//                  `uk-list-muted`
-//                  `uk-list-emphasis`
-//                  `uk-list-primary`
-//                  `uk-list-secondary`
-//                  `uk-list-bullet`
-//                  `uk-list-divider`
-//                  `uk-list-striped`
-//                  `uk-list-large`
-//                  `uk-list-collapse`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-@use 'mixin' as *;
-
-
-/* ========================================================================
-   Component: List
- ========================================================================== */
-
-.uk-list {
-    list-style: none;
-    padding: 0;
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-list > * > :last-child {
-    margin-bottom: 0;
-}
-
-/*
- * Style
- */
-
-.uk-list > :nth-child(n+2),
-.uk-list > * > ul {
-    margin-top: var(--list-margin-top);
-}
-
-
-/* Marker modifiers
- * Moving `::marker` inside `::before` to style it differently
- * To style the `::marker` is currently only supported in Firefox and Safari
- ========================================================================== */
-
-.uk-list-disc > *,
-.uk-list-circle > *,
-.uk-list-square > *,
-.uk-list-decimal > *,
-.uk-list-hyphen > * {
-    padding-left: var(--list-padding-left);
-}
-
-/*
- * Type modifiers
- */
-
-.uk-list-decimal {
-    counter-reset: decimal;
-}
-
-.uk-list-decimal > * {
-    counter-increment: decimal;
-}
-
-[class*='uk-list'] > ::before {
-    content: '';
-    display: list-item;
-    height: var(--list-marker-height);
-    left: calc(var(--list-padding-left) * -1);
-    list-style-position: inside;
-    margin-bottom: calc(var(--list-marker-height) * -1);
-    position: relative;
-    text-align: right;
-    width: var(--list-padding-left);
-}
-
-.uk-list-disc > ::before {
-    list-style-type: disc;
-}
-
-.uk-list-circle > ::before {
-    list-style-type: circle;
-}
-
-.uk-list-square > ::before {
-    list-style-type: square;
-}
-
-.uk-list-decimal > ::before {
-    content: counter(decimal, decimal) '\200A.\00A0';
-}
-
-.uk-list-hyphen > ::before {
-    content: '–\00A0\00A0';
-}
-
-/*
- * Color modifiers
- */
-
-.uk-list-muted > ::before {
-    color: var(--list-muted-color) !important;
-}
-
-.uk-list-emphasis > ::before {
-    color: var(--list-emphasis-color) !important;
-}
-
-.uk-list-primary > ::before {
-    color: var(--list-primary-color) !important;
-}
-
-.uk-list-secondary > ::before {
-    color: var(--list-secondary-color) !important;
-}
-
-
-/* Image bullet modifier
- ========================================================================== */
-
-.uk-list-bullet > * {
-    padding-left: var(--list-padding-left);
-}
-
-.uk-list-bullet > ::before {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    content: '';
-    height: var(--list-marker-height);
-    left: calc(var(--list-padding-left) * -1);
-    margin-bottom: calc(var(--list-marker-height) * -1);
-    position: relative;
-    width: var(--list-padding-left);
-    @if meta.mixin-exists('svg-fill') {
-        @include svg-fill($list-bullet-icon-image-path, '#000', $list-bullet-icon-color);
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Divider
- */
-
-.uk-list-divider > :nth-child(n+2) {
-    border-top: var(--list-divider-border-width) solid var(--list-divider-border);
-    margin-top: var(--list-divider-margin-top);
-    padding-top: var(--list-divider-margin-top);
-    @if meta.mixin-exists('hook-list-divider') {
-        @include hook-list-divider;
-    }
-}
-
-/*
- * Striped
- */
-
-.uk-list-striped > * {
-    padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
-    @if meta.mixin-exists('hook-list-striped') {
-        @include hook-list-striped;
-    }
-}
-
-.uk-list-striped > :nth-of-type(odd) {
-    background: var(--list-striped-background);
-}
-
-.uk-list-striped > :nth-child(n+2) {
-    margin-top: 0;
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-.uk-list-large > :nth-child(n+2),
-.uk-list-large > * > ul {
-    margin-top: var(--list-large-margin-top);
-}
-
-.uk-list-collapse > :nth-child(n+2),
-.uk-list-collapse > * > ul {
-    margin-top: 0;
-}
-
-/*
- * Divider
- */
-
-.uk-list-large.uk-list-divider > :nth-child(n+2) {
-    margin-top: var(--list-large-divider-margin-top);
-    padding-top: var(--list-large-divider-margin-top);
-}
-
-.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
-    margin-top: 0;
-    padding-top: 0;
-}
-
-/*
- * Striped
- */
-
-.uk-list-large.uk-list-striped > * {
-    padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal);
-}
-
-.uk-list-collapse.uk-list-striped > * {
-    padding-bottom: 0;
-    padding-top: 0;
-}
-
-.uk-list-large.uk-list-striped > :nth-child(n+2),
-.uk-list-collapse.uk-list-striped > :nth-child(n+2) {
-    margin-top: 0;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-list-misc') {
-    @include hook-list-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --list-margin-top: var(--global-small-margin);
-    --list-padding-left: #{$list-padding-left};
-    --list-marker-height: calc(var(--global-line-height) * 1em);
-    --list-muted-color: var(--global-muted-color);
-    --list-emphasis-color: var(--global-emphasis-color);
-    --list-primary-color: var(--global-primary-background);
-    --list-secondary-color: var(--global-secondary-background);
-    --list-bullet-icon-color: var(--global-color);
-    --list-divider-margin-top: var(--global-small-margin);
-    --list-divider-border-width: var(--global-border-width);
-    --list-divider-border: var(--global-border);
-    --list-striped-padding-vertical: var(--global-small-margin);
-    --list-striped-padding-horizontal: var(--global-small-margin);
-    --list-striped-background: var(--global-muted-background);
-    --list-large-margin-top: var(--global-margin);
-    --list-large-divider-margin-top: var(--global-margin);
-    --list-large-striped-padding-vertical: var(--global-margin);
-    --list-large-striped-padding-horizontal: var(--global-small-margin);
-
-    // Inverse
-    --inverse-list-muted-color: var(--inverse-global-muted-color);
-    --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
-    --inverse-list-primary-color: var(--inverse-global-primary-background);
-    --inverse-list-secondary-color: var(--inverse-global-primary-background);
-    --inverse-list-divider-border: var(--inverse-global-border);
-    --inverse-list-striped-background: var(--inverse-global-muted-background);
-    --inverse-list-bullet-icon-color: var(--inverse-global-color);
-}

package/styles/margin.scss

@@ -1,308 +0,0 @@
-// Name:            Margin
-// Description:     Utilities for margins
-//
-// Component:       `uk-margin-*`
-//                  `uk-margin-small-*`
-//                  `uk-margin-medium-*`
-//                  `uk-margin-large-*`
-//                  `uk-margin-xlarge-*`
-//                  `uk-margin-remove-*`
-//                  `uk-margin-auto-*`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Margin
- ========================================================================== */
-
-/*
- * Default
- */
-
-.uk-margin { margin-bottom: var(--margin); }
-
-* + .uk-margin { margin-top: var(--margin) !important; }
-
-.uk-margin-top { margin-top: var(--margin) !important; }
-
-.uk-margin-bottom { margin-bottom: var(--margin) !important; }
-
-.uk-margin-left { margin-left: var(--margin) !important; }
-
-.uk-margin-right { margin-right: var(--margin) !important; }
-
-
-// Xsmall
-// ========================================================================
-
-.uk-margin-xsmall { margin-bottom: var(--xsmall-margin); }
-
-* + .uk-margin-xsmall { margin-top: var(--xsmall-margin) !important; }
-
-.uk-margin-xsmall-top { margin-top: var(--xsmall-margin) !important; }
-
-.uk-margin-xsmall-bottom { margin-bottom: var(--xsmall-margin) !important; }
-
-.uk-margin-xsmall-left { margin-left: var(--xsmall-margin) !important; }
-
-.uk-margin-xsmall-right { margin-right: var(--xsmall-margin) !important; }
-
-
-/* Small
- ========================================================================== */
-
-.uk-margin-small { margin-bottom: var(--small-margin); }
-
-* + .uk-margin-small { margin-top: var(--small-margin) !important; }
-
-.uk-margin-small-top { margin-top: var(--small-margin) !important; }
-
-.uk-margin-small-bottom { margin-bottom: var(--small-margin) !important; }
-
-.uk-margin-small-left { margin-left: var(--small-margin) !important; }
-
-.uk-margin-small-right { margin-right: var(--small-margin) !important; }
-
-
-/* Medium
- ========================================================================== */
-
-.uk-margin-medium { margin-bottom: var(--medium-margin); }
-
-* + .uk-margin-medium { margin-top: var(--medium-margin) !important; }
-
-.uk-margin-medium-top { margin-top: var(--medium-margin) !important; }
-
-.uk-margin-medium-bottom { margin-bottom: var(--medium-margin) !important; }
-
-.uk-margin-medium-left { margin-left: var(--medium-margin) !important; }
-
-.uk-margin-medium-right { margin-right: var(--medium-margin) !important; }
-
-
-/* Large
- ========================================================================== */
-
-.uk-margin-large { margin-bottom: var(--large-margin); }
-
-* + .uk-margin-large { margin-top: var(--large-margin) !important; }
-
-.uk-margin-large-top { margin-top: var(--large-margin) !important; }
-
-.uk-margin-large-bottom { margin-bottom: var(--large-margin) !important; }
-
-.uk-margin-large-left { margin-left: var(--large-margin) !important; }
-
-.uk-margin-large-right { margin-right: var(--large-margin) !important; }
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-margin-large { margin-bottom: var(--large-margin-l); }
-
-    * + .uk-margin-large { margin-top: var(--large-margin-l) !important; }
-
-    .uk-margin-large-top { margin-top: var(--large-margin-l) !important; }
-
-    .uk-margin-large-bottom { margin-bottom: var(--large-margin-l) !important; }
-
-    .uk-margin-large-left { margin-left: var(--large-margin-l) !important; }
-
-    .uk-margin-large-right { margin-right: var(--large-margin-l) !important; }
-}
-
-
-/* XLarge
- ========================================================================== */
-
-.uk-margin-xlarge { margin-bottom: var(--xlarge-margin); }
-
-* + .uk-margin-xlarge { margin-top: var(--xlarge-margin) !important; }
-
-.uk-margin-xlarge-top { margin-top: var(--xlarge-margin) !important; }
-
-.uk-margin-xlarge-bottom { margin-bottom: var(--xlarge-margin) !important; }
-
-.uk-margin-xlarge-left { margin-left: var(--xlarge-margin) !important; }
-
-.uk-margin-xlarge-right { margin-right: var(--xlarge-margin) !important; }
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-margin-xlarge { margin-bottom: var(--xlarge-margin-l); }
-
-    * + .uk-margin-xlarge { margin-top: var(--xlarge-margin-l) !important; }
-
-    .uk-margin-xlarge-top { margin-top: var(--xlarge-margin-l) !important; }
-
-    .uk-margin-xlarge-bottom { margin-bottom: var(--xlarge-margin-l) !important; }
-
-    .uk-margin-xlarge-left { margin-left: var(--xlarge-margin-l) !important; }
-
-    .uk-margin-xlarge-right { margin-right: var(--xlarge-margin-l) !important; }
-}
-
-
-/* Auto
- ========================================================================== */
-
-.uk-margin-auto {
-    margin-left: auto !important;
-    margin-right: auto !important;
-}
-
-.uk-margin-auto-top { margin-top: auto !important; }
-
-.uk-margin-auto-bottom { margin-bottom: auto !important; }
-
-.uk-margin-auto-left { margin-left: auto !important; }
-
-.uk-margin-auto-right { margin-right: auto !important; }
-
-.uk-margin-auto-vertical {
-    margin-bottom: auto !important;
-    margin-top: auto !important;
-}
-
-/* Phone landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-small) {
-    .uk-margin-auto\@s {
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
-
-    .uk-margin-auto-left\@s { margin-left: auto !important; }
-
-    .uk-margin-auto-right\@s { margin-right: auto !important; }
-}
-
-/* Tablet landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-medium) {
-    .uk-margin-auto\@m {
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
-
-    .uk-margin-auto-left\@m { margin-left: auto !important; }
-
-    .uk-margin-auto-right\@m { margin-right: auto !important; }
-}
-
-/* Desktop and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-large) {
-    .uk-margin-auto\@l {
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
-
-    .uk-margin-auto-left\@l { margin-left: auto !important; }
-
-    .uk-margin-auto-right\@l { margin-right: auto !important; }
-}
-
-/* Large screen and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-xlarge) {
-    .uk-margin-auto\@xl {
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
-
-    .uk-margin-auto-left\@xl { margin-left: auto !important; }
-
-    .uk-margin-auto-right\@xl { margin-right: auto !important; }
-}
-
-
-/* Remove
- ========================================================================== */
-
-.uk-margin-remove { margin: 0 !important; }
-
-.uk-margin-remove-top { margin-top: 0 !important; }
-
-.uk-margin-remove-bottom { margin-bottom: 0 !important; }
-
-.uk-margin-remove-left { margin-left: 0 !important; }
-
-.uk-margin-remove-right { margin-right: 0 !important; }
-
-.uk-margin-remove-vertical {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-}
-
-.uk-margin-remove-adjacent + *,
-.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
-
-.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
-
-/* Phone landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-small) {
-
-    .uk-margin-remove-left\@s { margin-left: 0 !important; }
-
-    .uk-margin-remove-right\@s { margin-right: 0 !important; }
-}
-
-/* Tablet landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-medium) {
-
-    .uk-margin-remove-left\@m { margin-left: 0 !important; }
-
-    .uk-margin-remove-right\@m { margin-right: 0 !important; }
-}
-
-/* Desktop and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-large) {
-
-    .uk-margin-remove-left\@l { margin-left: 0 !important; }
-
-    .uk-margin-remove-right\@l { margin-right: 0 !important; }
-}
-
-/* Large screen and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-xlarge) {
-
-    .uk-margin-remove-left\@xl { margin-left: 0 !important; }
-
-    .uk-margin-remove-right\@xl { margin-right: 0 !important; }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-margin-misc') {
-    @include hook-margin-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --margin: var(--global-margin);
-    --xsmall-margin: var(--global-xsmall-margin);
-    --small-margin: var(--global-small-margin);
-    --medium-margin: var(--global-medium-margin);
-    --large-margin: var(--global-medium-margin);
-    --large-margin-l: var(--global-large-margin);
-    --xlarge-margin: var(--global-large-margin);
-    --xlarge-margin-l: var(--global-xlarge-margin);
-}

package/styles/marker.scss

@@ -1,66 +0,0 @@
-// Name:            Marker
-// Description:     Component to create a marker icon
-//
-// Component:       `uk-marker`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Marker
- ========================================================================== */
-
-/*
- * Addopts `uk-icon`
- */
-
-.uk-marker {
-    background: var(--marker-background);
-    color: var(--marker-color);
-    padding: var(--marker-padding);
-    @if meta.mixin-exists('hook-marker') {
-        @include hook-marker;
-    }
-}
-
-/* Hover + Focus */
-.uk-marker:hover,
-.uk-marker:focus {
-    color: var(--marker-hover-color);
-    outline: none;
-    @if meta.mixin-exists('hook-marker-hover') {
-        @include hook-marker-hover;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-marker-misc') {
-    @include hook-marker-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --marker-padding: #{$marker-padding};
-    --marker-background: var(--global-secondary-background);
-    --marker-color: var(--global-inverse-color);
-    --marker-hover-color: var(--global-inverse-color);
-
-    // Inverse
-    --inverse-marker-background: var(--global-muted-background);
-    --inverse-marker-color: var(--global-color);
-    --inverse-marker-hover-color: var(--global-color);
-}