@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/heading.scss

@@ -1,258 +0,0 @@
-// Name:            Heading
-// Description:     Styles for headings
-//
-// Component:       `uk-heading-primary`
-//                  `uk-heading-hero`
-//                  `uk-heading-divider`
-//                  `uk-heading-bullet`
-//                  `uk-heading-line`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Heading
- ========================================================================== */
-
-.uk-heading-small {
-    font-size: var(--heading-small-font-size);
-    line-height: var(--heading-small-line-height);
-    @if meta.mixin-exists('hook-heading-small') {
-        @include hook-heading-small;
-    }
-}
-
-.uk-heading-medium {
-    font-size: var(--heading-medium-font-size);
-    line-height: var(--heading-medium-line-height);
-    @if meta.mixin-exists('hook-heading-medium') {
-        @include hook-heading-medium;
-    }
-}
-
-.uk-heading-large {
-    font-size: var(--heading-large-font-size);
-    line-height: var(--heading-large-line-height);
-    @if meta.mixin-exists('hook-heading-large') {
-        @include hook-heading-large;
-    }
-}
-
-.uk-heading-xlarge {
-    font-size: var(--heading-xlarge-font-size);
-    line-height: var(--heading-xlarge-line-height);
-    @if meta.mixin-exists('hook-heading-xlarge') {
-        @include hook-heading-xlarge;
-    }
-}
-
-.uk-heading-2xlarge {
-    font-size: var(--heading-2xlarge-font-size);
-    line-height: var(--heading-2xlarge-line-height);
-    @if meta.mixin-exists('hook-heading-2xlarge') {
-        @include hook-heading-2xlarge;
-    }
-}
-
-/* Tablet Landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-heading-small {
-        font-size: var(--heading-small-font-size-m);
-    }
-
-    .uk-heading-medium {
-        font-size: var(--heading-medium-font-size-m);
-    }
-
-    .uk-heading-large {
-        font-size: var(--heading-large-font-size-m);
-    }
-
-    .uk-heading-xlarge {
-        font-size: var(--heading-xlarge-font-size-m);
-    }
-
-    .uk-heading-2xlarge {
-        font-size: var(--heading-2xlarge-font-size-m);
-    }
-}
-
-/* Laptop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-heading-medium {
-        font-size: var(--heading-medium-font-size-l);
-    }
-
-    .uk-heading-large {
-        font-size: var(--heading-large-font-size-l);
-    }
-
-    .uk-heading-xlarge {
-        font-size: var(--heading-xlarge-font-size-l);
-    }
-
-    .uk-heading-2xlarge {
-        font-size: var(--heading-2xlarge-font-size-l);
-    }
-}
-
-
-/* Divider
- ========================================================================== */
-
-.uk-heading-divider {
-    border-bottom: var(--heading-divider-border-width) solid var(--heading-divider-border);
-    padding-bottom: var(--heading-divider-padding-bottom);
-    @if meta.mixin-exists('hook-heading-divider') {
-        @include hook-heading-divider;
-    }
-}
-
-
-/* Bullet
- ========================================================================== */
-
-.uk-heading-bullet {
-    position: relative;
-}
-
-/*
- * 1. Using `inline-block` to make it work with text alignment
- * 2. Center vertically
- * 3. Style
- */
-
-.uk-heading-bullet::before {
-    border-left: var(--heading-bullet-border-width) solid var(--heading-bullet-border);
-    content: '';
-
-    /* 1 */
-    display: inline-block;
-
-    /* 3 */
-    height: var(--heading-bullet-height);
-    margin-right: var(--heading-bullet-margin-right);
-
-    /* 2 */
-    position: relative;
-    top: var(--heading-bullet-top);
-    vertical-align: middle;
-    @if meta.mixin-exists('hook-heading-bullet') {
-        @include hook-heading-bullet;
-    }
-}
-
-
-/* Line
- ========================================================================== */
-
-/*
- * Clip the child element
- */
-
-.uk-heading-line {
-    overflow: hidden;
-}
-
-/*
- * Extra markup is needed to make it work with text align
- */
-
-.uk-heading-line > * {
-    display: inline-block;
-    position: relative;
-}
-
-/*
- * 1. Center vertically
- * 2. Make the element as large as possible. It's clipped by the container.
- * 3. Style
- */
-
-.uk-heading-line > ::before,
-.uk-heading-line > ::after {
-    /* 3 */
-    border-bottom: var(--heading-line-border-width) solid var(--heading-line-border);
-    content: '';
-
-    /* 1 */
-    position: absolute;
-    top: calc(var(--heading-line-top) - (var(--heading-line-height) / 2));
-
-    /* 2 */
-    width: var(--heading-line-width);
-    @if meta.mixin-exists('hook-heading-line') {
-        @include hook-heading-line;
-    }
-}
-
-.uk-heading-line > ::before {
-    margin-right: var(--heading-line-margin-horizontal);
-    right: 100%;
-}
-
-.uk-heading-line > ::after {
-    left: 100%;
-    margin-left: var(--heading-line-margin-horizontal);
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-heading-misc') {
-    @include hook-heading-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --heading-medium-font-size-l: #{$heading-medium-font-size-l};
-    --heading-large-font-size-l: #{$heading-large-font-size-l};
-    --heading-xlarge-font-size-l: #{$heading-xlarge-font-size-l};
-    --heading-2xlarge-font-size-l: #{$heading-2xlarge-font-size-l};
-    --heading-small-font-size-m: #{$heading-small-font-size-m};
-    --heading-medium-font-size-m: #{$heading-medium-font-size-m};
-    --heading-large-font-size-m: var(--heading-medium-font-size-l);
-    --heading-xlarge-font-size-m: var(--heading-large-font-size-l);
-    --heading-2xlarge-font-size-m: var(--heading-xlarge-font-size-l);
-    --heading-small-font-size: #{$heading-small-font-size};
-    --heading-medium-font-size: #{$heading-medium-font-size};
-    --heading-large-font-size: #{$heading-large-font-size};
-    --heading-xlarge-font-size: var(--heading-large-font-size-m);
-    --heading-2xlarge-font-size: var(--heading-xlarge-font-size-m);
-    --heading-small-line-height: #{$heading-small-line-height};
-    --heading-medium-line-height: #{$heading-medium-line-height};
-    --heading-large-line-height: #{$heading-large-line-height};
-    --heading-xlarge-line-height: #{$heading-xlarge-line-height};
-    --heading-2xlarge-line-height: #{$heading-2xlarge-line-height};
-    --heading-divider-padding-bottom: #{$heading-divider-padding-bottom};
-    --heading-divider-border-width: #{$heading-divider-border-width};
-    --heading-divider-border: var(--global-border);
-    --heading-bullet-top: #{$heading-bullet-top};
-    --heading-bullet-height: #{$heading-bullet-height};
-    --heading-bullet-margin-right: #{$heading-bullet-margin-right};
-    --heading-bullet-border-width: #{$heading-bullet-border-width};
-    --heading-bullet-border: var(--global-border);
-    --heading-line-top: #{$heading-line-top};
-    --heading-line-height: var(--heading-line-border-width);
-    --heading-line-width: #{$heading-line-width};
-    --heading-line-border-width: #{$heading-line-border-width};
-    --heading-line-border: var(--global-border);
-    --heading-line-margin-horizontal: #{$heading-line-margin-horizontal};
-
-    // Inverse
-    --inverse-heading-divider-border: var(--inverse-global-border);
-    --inverse-heading-bullet-border: var(--inverse-global-border);
-    --inverse-heading-line-border: var(--inverse-global-border);
-}

package/styles/height.scss

@@ -1,73 +0,0 @@
-// Name:            Height
-// Description:     Utilities for heights
-//
-// Component:       `uk-height-*`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Height
- ========================================================================== */
-
-[class*='uk-height'] { box-sizing: border-box; }
-
-/*
- * Only works if parent element has a height set
- */
-
-.uk-height-1-1 { height: 100%; }
-
-/*
- * Useful to create image teasers
- */
-
-.uk-height-viewport { min-height: 100vh; }
-
-/*
- * Pixel
- * Useful for `overflow: auto`
- */
-
-.uk-height-small { height: var(--height-small-height); }
-
-.uk-height-medium { height: var(--height-medium-height); }
-
-.uk-height-large { height: var(--height-large-height); }
-
-.uk-height-xlarge { height: var(--height-large-height); }
-
-.uk-height-max-small { max-height: var(--height-small-height); }
-
-.uk-height-max-medium { max-height: var(--height-medium-height); }
-
-.uk-height-max-large { max-height: var(--height-large-height); }
-
-.uk-height-max-xlarge { max-height: var(--height-xlarge-height); }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-height-misc') {
-    @include hook-height-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --height-small-height: #{$height-small-height};
-    --height-medium-height: #{$height-medium-height};
-    --height-large-height: #{$height-large-height};
-    --height-xlarge-height: #{$height-xlarge-height};
-}

package/styles/icon.scss

@@ -1,267 +0,0 @@
-// Name:            Icon
-// Description:     Component to create icons
-//
-// Component:       `uk-icon`
-//
-// Modifiers:       `uk-icon-image`
-//                  `uk-icon-link`
-//                  `uk-icon-button`
-//
-// States:          `uk-preserve`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Icon
- ========================================================================== */
-
-/*
- * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
- * 1. Remove margins in Chrome, Safari and Opera.
- * 2. Remove borders for `button`.
- * 3. Remove border-radius in Chrome.
- * 4. Address `overflow` set to `hidden` in IE.
- * 5. Correct `font` properties and `color` not being inherited for `button`.
- * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 7. Remove default `button` padding and background color
- * 8. Style
- * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
- * 10. Let the container fit the height of the icon
- */
-
-.uk-icon {
-    background-color: transparent; /* 7 */
-    border: none; /* 2 */
-    border-radius: 0; /* 3 */
-    color: inherit;
-    display: inline-block; /* 8 */
-    fill: currentColor; /* 9 */
-    font: inherit; /* 5 */
-    line-height: 0; /* 10 */
-    margin: 0; /* 1 */
-    overflow: visible; /* 4 */
-    padding: 0; /* 7 */
-    text-transform: none; /* 6 */
-}
-
-/* Required for `button`. */
-button.uk-icon:not(:disabled) {
-    cursor: pointer;
-}
-
-/*
- * Remove the inner border and padding in Firefox.
- */
-
-.uk-icon::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-/*
- * Set the fill and stroke color of all SVG elements to the current text color
- */
-
-.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) {
-    fill: currentColor;
-}
-
-.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) {
-    stroke: currentColor;
-}
-
-/*
- * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
- */
-
-.uk-icon > * {
-    transform: translate(0, 0);
-}
-
-
-/* Image modifier
- ========================================================================== */
-
-/*
- * Display images in icon dimensions
- */
-
-.uk-icon-image {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: var(--icon-image-size);
-    vertical-align: middle;
-    width: var(--icon-image-size);
-}
-
-
-/* Material UI icons modifier
- ========================================================================== */
-
-.uk-icon-material {
-    &:not(.uk-icon-button) {
-        height: var(--icon-size, 1.4rem);
-        min-width: var(--icon-size, 1.4rem);
-        width: var(--icon-size, 1.4rem);
-    }
-
-    i {
-        direction: ltr;
-        display: inline-block;
-
-        // noinspection Stylelint,CssNoGenericFontName
-        font-family: 'Material Icons Outlined';
-
-        /* Support for IE. */
-        font-feature-settings: 'liga';
-        font-size: var(--icon-size, 1.4rem);
-
-        /* Support for all WebKit browsers. */
-        -webkit-font-smoothing: antialiased;
-
-        /* Support for Firefox. */
-        -moz-osx-font-smoothing: grayscale;
-        font-style: normal;
-        font-weight: normal;
-        letter-spacing: normal;
-        line-height: 1;
-        text-decoration: none;
-
-        /* Support for Safari and Chrome. */
-        text-rendering: optimizeLegibility;
-        text-transform: none;
-        vertical-align: middle;
-        white-space: nowrap;
-        word-wrap: normal;
-
-        &.uk-icon-round {
-            // noinspection Stylelint,CssNoGenericFontName
-            font-family: 'Material Icons Round';
-        }
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Link
- */
-
-.uk-icon-link {
-    color: var(--icon-link-color);
-    @if meta.mixin-exists('hook-icon-link') {
-        @include hook-icon-link;
-    }
-}
-
-.uk-icon-link:hover,
-.uk-icon-link:focus {
-    color: var(--icon-link-hover-color);
-    outline: none;
-    text-decoration: none;
-    @if meta.mixin-exists('hook-icon-link-hover') {
-        @include hook-icon-link-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-icon-link:active,
-.uk-active > .uk-icon-link {
-    color: var(--icon-link-active-color);
-    @if meta.mixin-exists('hook-icon-link-active') {
-        @include hook-icon-link-active;
-    }
-}
-
-/*
- * Button
- * 1. Center icon vertically and horizontally
- */
-
-.uk-icon-button {
-    align-items: center; /* 1 */
-    background: var(--icon-button-background);
-    border-radius: var(--icon-button-border-radius);
-    box-sizing: border-box;
-    color: var(--icon-button-color);
-    display: inline-flex; /* 1 */
-    height: var(--icon-button-size);
-    justify-content: center; /* 1 */
-    vertical-align: middle;
-    width: var(--icon-button-size);
-    @if meta.mixin-exists('hook-icon-button') {
-        @include hook-icon-button;
-    }
-}
-
-/* Hover + Focus */
-.uk-icon-button:hover,
-.uk-icon-button:focus {
-    background-color: var(--icon-button-hover-background);
-    color: var(--icon-button-hover-color);
-    outline: none;
-    text-decoration: none;
-    @if meta.mixin-exists('hook-icon-button-hover') {
-        @include hook-icon-button-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-icon-button:active,
-.uk-active > .uk-icon-button {
-    background-color: var(--icon-button-active-background);
-    color: var(--icon-button-active-color);
-    @if meta.mixin-exists('hook-icon-button-active') {
-        @include hook-icon-button-active;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-icon-misc') {
-    @include hook-icon-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --icon-image-size: #{$icon-image-size};
-    --icon-link-color: var(--global-muted-color);
-    --icon-link-hover-color: var(--global-color);
-    --icon-link-active-color: #{$icon-link-active-color};
-    --icon-button-size: #{$icon-button-size};
-    --icon-button-border-radius: #{$icon-button-border-radius};
-    --icon-button-background: var(--global-muted-background);
-    --icon-button-color: var(--global-muted-color);
-    --icon-button-hover-background: #{$icon-button-hover-background};
-    --icon-button-hover-color: var(--global-color);
-    --icon-button-active-background: #{$icon-button-active-background};
-    --icon-button-active-color: var(--global-color);
-
-    // Inverse
-    --inverse-icon-link-color: var(--inverse-global-muted-color);
-    --inverse-icon-link-hover-color: var(--inverse-global-color);
-    --inverse-icon-link-active-color: var(--inverse-global-color);
-    --inverse-icon-button-background: var(--inverse-global-muted-background);
-    --inverse-icon-button-color: var(--inverse-global-muted-color);
-    --inverse-icon-button-hover-background: #{$inverse-icon-button-hover-background};
-    --inverse-icon-button-hover-color: var(--inverse-global-color);
-    --inverse-icon-button-active-background: #{$inverse-icon-button-active-background};
-    --inverse-icon-button-active-color: var(--inverse-global-color);
-}