@broxus/react-uikit 0.18.0 → 0.19.0

package/dist/esm/styles/vars.scss

@@ -1,126 +0,0 @@
-// Name:            Vars
-// Description:     Define.scss variables via the `var()` CSS function
-//
-// ========================================================================
-
-@import 'variables.scss';
-
-:root, ::after, ::before {
-    // Breakpoints
-    // ========================================================================
-
-    --breakpoint-xsmall: #{$breakpoint-xsmall};
-    --breakpoint-small: #{$breakpoint-small};
-    --breakpoint-medium: #{$breakpoint-medium};
-    --breakpoint-large: #{$breakpoint-large};
-    --breakpoint-xlarge: #{$breakpoint-xlarge};
-    --breakpoint-2xlarge: #{$breakpoint-2xlarge};
-    --breakpoint-3xlarge: #{$breakpoint-3xlarge};
-    --breakpoint-xsmall-max: #{$breakpoint-xsmall-max};
-    --breakpoint-small-max: #{$breakpoint-small-max};
-    --breakpoint-medium-max: #{$breakpoint-medium-max};
-    --breakpoint-large-max: #{$breakpoint-large-max};
-    --breakpoint-xlarge-max: #{$breakpoint-xlarge-max};
-    --breakpoint-2xlarge-max: #{$breakpoint-2xlarge-max};
-
-
-    // Global variables
-    // ========================================================================
-
-    //
-    // Typography
-    //
-    --global-font-family: #{$global-font-family};
-    --global-font-size: #{$global-font-size};
-    --global-font-weight: #{$global-font-weight};
-    --global-bold-font-weight: #{$global-bold-font-weight};
-    --global-line-height: #{$global-line-height};
-    --global-2xlarge-font-size: #{$global-2xlarge-font-size};
-    --global-xlarge-font-size: #{$global-xlarge-font-size};
-    --global-large-font-size: #{$global-large-font-size};
-    --global-medium-font-size: #{$global-medium-font-size};
-    --global-small-font-size: #{$global-small-font-size};
-    --global-xsmall-font-size: #{$global-xsmall-font-size};
-    --global-2xsmall-font-size: #{$global-2xsmall-font-size};
-
-    //
-    // Colors
-    //
-
-    --global-color: #{$global-color};
-    --global-emphasis-color: #{$global-emphasis-color};
-    --global-muted-color: #{$global-muted-color};
-    --global-link-color: #{$global-link-color};
-    --global-link-hover-color: #{$global-link-hover-color};
-    --global-inverse-color: #{$global-inverse-color};
-
-    //
-    // Backgrounds
-    //
-
-    --global-background: #{$global-background};
-    --global-default-background: #{$global-default-background};
-    --global-muted-background: #{$global-muted-background};
-    --global-primary-background: #{$global-primary-background};
-    --global-secondary-background: #{$global-secondary-background};
-    --global-tertiary-background: #{$global-tertiary-background};
-    --global-success-background: #{$global-success-background};
-    --global-warning-background: #{$global-warning-background};
-    --global-danger-background: #{$global-danger-background};
-
-    //
-    // Borders
-    //
-
-    --global-border-width: #{$global-border-width};
-    --global-border-style: #{$global-border-style};
-    --global-border: #{$global-border};
-    --global-muted-border: #{$global-muted-border};
-    --global-primary-border: #{$global-primary-border};
-    --global-secondary-border: #{$global-secondary-border};
-    --global-tertiary-border: #{$global-tertiary-border};
-    --global-border-radius: #{$global-border-radius};
-
-    //
-    // Box-Shadows
-    //
-
-    --global-small-box-shadow: #{$global-small-box-shadow};
-    --global-medium-box-shadow: #{$global-medium-box-shadow};
-    --global-large-box-shadow: #{$global-large-box-shadow};
-    --global-xlarge-box-shadow: #{$global-xlarge-box-shadow};
-
-    //
-    // Spacings
-    //
-
-    --global-margin: #{$global-margin};
-    --global-xsmall-margin: #{$global-xsmall-margin};
-    --global-small-margin: #{$global-small-margin};
-    --global-medium-margin: #{$global-medium-margin};
-    --global-large-margin: #{$global-large-margin};
-    --global-xlarge-margin: #{$global-xlarge-margin};
-    --global-gutter: #{$global-gutter};
-    --global-xsmall-gutter: #{$global-xsmall-gutter};
-    --global-small-gutter: #{$global-small-gutter};
-    --global-medium-gutter: #{$global-medium-gutter};
-    --global-large-gutter: #{$global-large-gutter};
-    --global-xlarge-gutter: #{$global-xlarge-gutter};
-
-    //
-    // Controls
-    //
-
-    --global-control-height: #{$global-control-height};
-    --global-control-xsmall-height: #{$global-control-xsmall-height};
-    --global-control-small-height: #{$global-control-small-height};
-    --global-control-medium-height: #{$global-control-medium-height};
-    --global-control-large-height: #{$global-control-large-height};
-    --global-control-xlarge-height: #{$global-control-xlarge-height};
-
-    //
-    // Z-index
-    //
-
-    --global-z-index: #{$global-z-index};
-}

package/dist/esm/styles/visibility.scss

@@ -1,184 +0,0 @@
-// Name:            Visibility
-// Description:     Utilities to show or hide content on breakpoints, hover or touch
-//
-// Component:       `uk-hidden-*`
-//                  `uk-visible-*`
-//                  `uk-invisible`
-//                  `uk-visible-toggle`
-//                  `uk-hidden-hover`
-//                  `uk-invisible-hover`
-//                  `uk-hidden-touch`
-//                  `uk-hidden-notouch`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Visibility
- ========================================================================== */
-
-/*
- * Hidden
- * `hidden` attribute also set here to make it stronger
- */
-
-[hidden],
-.uk-hidden { display: none !important; }
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-
-    .uk-hidden\@s { display: none !important; }
-
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-
-    .uk-hidden\@m { display: none !important; }
-
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-
-    .uk-hidden\@l { display: none !important; }
-
-}
-
-/* Large screen and bigger */
-@media (min-width: $breakpoint-xlarge) {
-
-    .uk-hidden\@xl { display: none !important; }
-
-}
-
-/*
- * Visible
- */
-
-/* Phone portrait and smaller */
-@media (max-width: $breakpoint-xsmall-max) {
-
-    .uk-visible\@s { display: none !important; }
-
-}
-
-/* Phone landscape and smaller */
-@media (max-width: $breakpoint-small-max) {
-
-    .uk-visible\@m { display: none !important; }
-
-}
-
-/* Tablet landscape and smaller */
-@media (max-width: $breakpoint-medium-max) {
-
-    .uk-visible\@l { display: none !important; }
-
-}
-
-/* Desktop and smaller */
-@media (max-width: $breakpoint-large-max) {
-
-    .uk-visible\@xl { display: none !important; }
-
-}
-
-
-/* Visibility
- ========================================================================== */
-
-.uk-invisible { visibility: hidden !important; }
-
-
-/* Toggle (Hover + Focus)
- ========================================================================== */
-
-/*
- * Hidden
- * 1. The toggle is triggered on touch devices using `:focus` and tabindex
- * 2. The target stays visible if any element within receives focus through keyboard
- *    Doesn't work in Edge, yet.
- * 3. Can't use `display: none` nor `visibility: hidden` because both are not focusable.
- *
- */
-
-/* 1 + 2 */
-.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
-    height: 0 !important;
-    margin: 0 !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-
-    /* 3 */
-    position: absolute !important;
-    width: 0 !important;
-}
-
-/*
- * Invisible
- */
-
-/* 1 + 2 */
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
-    /* 3 */
-    opacity: 0 !important;
-}
-
-/*
- * 1. Prevent tab highlighting on iOS.
- */
-
-.uk-visible-toggle {
-    /* 1 */
-    -webkit-tap-highlight-color: transparent;
-}
-
-/*
- * Remove outline for `tabindex`
- */
-
-.uk-visible-toggle:focus { outline: none; }
-
-
-/* Touch
- ========================================================================== */
-
-/*
- * Hide if primary pointing device has limited accuracy, e.g. a touch screen.
- * Works on mobile browsers: Safari, Chrome and Android browser
- */
-
-@media (pointer: coarse) {
-    .uk-hidden-touch { display: none !important; }
-}
-
-/*
- * Hide if primary pointing device is accurate, e.g. mouse.
- * 1. Fallback for IE11 and Firefox, because `pointer` is not supported
- * 2. Reset if supported
- */
-
-/* 1 */
-.uk-hidden-notouch { display: none !important; }
-
-@media (pointer: coarse) {
-    .uk-hidden-notouch { display: block !important; }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-visibility-misc) {
-    @include hook-visibility-misc();
-}
-
-// @mixin hook-visibility-misc() {}

package/dist/esm/styles/width.scss

@@ -1 +0,0 @@
-@import '../components/Width/index.scss';