@broxus/react-uikit 0.11.0 → 0.12.1

package/dist/cjs/types.d.ts

@@ -11,6 +11,10 @@ export type BreakpointsConfig<T> = {
     l?: T;
     /** Extra large size: Large screens: 1600px by default */
     xl?: T;
+    /** Wide size: Wide screens: 2560px by default */
+    '2xl'?: T;
+    /** Ultra wide size: Ultra Wide screens: 3440px by default */
+    '3xl'?: T;
 };
 export type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type Direction = 'ltr' | 'rtl';

package/dist/esm/components/ConfigProvider/index.js

@@ -3,6 +3,8 @@ import { error } from '@broxus/js-utils';
 import * as React from 'react';
 export const ConfigContext = React.createContext({
     breakpoints: {
+        '2xl': 2560,
+        '3xl': 3440,
         l: 1200,
         m: 960,
         s: 640,

package/dist/esm/components/Switch/index.scss

@@ -62,8 +62,7 @@
     border-radius: var(--switch-handle-border-radius);
     bottom: 0;
     content: '';
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+    inset-inline: 0 0;
     position: absolute;
     top: 0;
     transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
@@ -79,8 +78,7 @@
     display: block;
     height: 100%;
     overflow: hidden;
-    padding-inline-end: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
-    padding-inline-start: calc(var(--switch-height) + var(--switch-handle-offset));
+    padding-inline: calc(var(--switch-height) + var(--switch-handle-offset)) calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
     transition: padding-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), padding-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
 }
 
@@ -92,13 +90,11 @@
 }
 
 .uk-switch-inner-checked {
-    margin-inline-end: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
-    margin-inline-start: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+    margin-inline: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
 }
 
 .uk-switch-inner-unchecked {
-    margin-inline-end: 0;
-    margin-inline-start: 0;
+    margin-inline: 0 0;
     margin-top: calc(var(--switch-height) * -1);
 }
 
@@ -108,23 +104,19 @@
 
 // Active state
 .uk-switch:not(.uk-switch-disabled):active .uk-switch-handle::before {
-    inset-inline-end: -30%;
-    inset-inline-start: 0;
+    inset-inline: 0 -30%;
 }
 
 .uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-handle::before {
-    inset-inline-end: 0;
-    inset-inline-start: -30%;
+    inset-inline: -30% 0;
 }
 
 .uk-switch:not(.uk-switch-disabled, .uk-switch-checked):active .uk-switch-inner-unchecked {
-    margin-inline-end: calc(var(--switch-handle-offset) * -2);
-    margin-inline-start: calc(var(--switch-handle-offset) * 2);
+    margin-inline: calc(var(--switch-handle-offset) * 2) calc(var(--switch-handle-offset) * -2);
 }
 
 .uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-inner-checked {
-    margin-inline-end: calc(var(--switch-handle-offset) * 2);
-    margin-inline-start: calc(var(--switch-handle-offset) * -2);
+    margin-inline: calc(var(--switch-handle-offset) * -2) calc(var(--switch-handle-offset) * 2);
 }
 
 // Checked state
@@ -164,18 +156,15 @@
 }
 
 .uk-switch-checked .uk-switch-inner {
-    padding-inline-end: calc(var(--switch-height) + var(--switch-handle-offset));
-    padding-inline-start: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
+    padding-inline: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666) calc(var(--switch-height) + var(--switch-handle-offset));
 }
 
 .uk-switch-checked .uk-switch-inner-checked {
-    margin-inline-end: 0;
-    margin-inline-start: 0;
+    margin-inline: 0 0;
 }
 
 .uk-switch-checked .uk-switch-inner-unchecked {
-    margin-inline-end: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
-    margin-inline-start: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
+    margin-inline: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
 }
 
 // Disabled

package/dist/esm/styles/_import.components.scss

@@ -47,7 +47,7 @@
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';
-@import 'tabs';
+@import 'tabs.scss';
 @import 'dotnav.scss';
 
 // @import 'thumbnav.scss';

package/dist/esm/styles/_import.scss

@@ -62,7 +62,7 @@
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';
-@import 'tabs';
+@import 'tabs.scss';
 @import 'dotnav.scss';
 
 // @import 'thumbnav.scss';

package/dist/esm/styles/variables.scss

@@ -21,11 +21,15 @@ $breakpoint-small:                                              640px !default;
 $breakpoint-medium:                                             960px !default;  // Tablet Landscape
 $breakpoint-large:                                              1200px !default; // Desktop
 $breakpoint-xlarge:                                             1600px !default; // Large Screens
+$breakpoint-2xlarge:                                            2560px !default; // Wide Screens
+$breakpoint-3xlarge:                                            3440px !default; // Ultra Wide Screens
 
 $breakpoint-xsmall-max:                                         ($breakpoint-small - 1) !default;
 $breakpoint-small-max:                                          ($breakpoint-medium - 1) !default;
 $breakpoint-medium-max:                                         ($breakpoint-large - 1) !default;
 $breakpoint-large-max:                                          ($breakpoint-xlarge - 1) !default;
+$breakpoint-xlarge-max:                                         ($breakpoint-2xlarge - 1) !default;
+$breakpoint-2xlarge-max:                                        ($breakpoint-3xlarge - 1) !default;
 
 
 // Global variables

package/dist/esm/styles/vars.scss

@@ -14,10 +14,14 @@
     --breakpoint-medium: #{$breakpoint-medium};
     --breakpoint-large: #{$breakpoint-large};
     --breakpoint-xlarge: #{$breakpoint-xlarge};
-    --breakpoint-xsmall-max: #{$breakpoint-small - 1};
-    --breakpoint-small-max: #{$breakpoint-medium - 1};
-    --breakpoint-medium-max: #{$breakpoint-large - 1};
-    --breakpoint-large-max: #{$breakpoint-xlarge - 1};
+    --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