@broxus/react-uikit 0.8.1 → 0.9.1

package/dist/cjs/components/Text/index.scss

@@ -0,0 +1,315 @@
+// Name:            Text
+// Description:     Utilities for text
+//
+// Component:       `uk-text-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Text
+ ========================================================================== */
+
+
+/* Style modifiers
+ ========================================================================== */
+
+.uk-text-lead {
+    color: var(--text-lead-color);
+    font-size: var(--text-lead-font-size);
+    line-height: var(--text-lead-line-height);
+    @if mixin-exists(hook-text-lead) {
+        @include hook-text-lead;
+    }
+}
+
+.uk-text-meta {
+    color: var(--text-meta-color);
+    font-size: var(--text-meta-font-size);
+    line-height: var(--text-meta-line-height);
+    @if mixin-exists(hook-text-meta) {
+        @include hook-text-meta;
+    }
+}
+
+.uk-text-base {
+    color: var(--text-base-font-size);
+    font-size: var(--text-base-font-size);
+    line-height: var(--text-base-line-height);
+    @if mixin-exists(hook-text-base) {
+        @include hook-text-base;
+    }
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+.uk-text-xsmall {
+    font-size: var(--text-xsmall-font-size);
+    line-height: var(--text-xsmall-line-height);
+    @if mixin-exists(hook-text-xsmall) {
+        @include hook-text-xsmall;
+    }
+}
+
+.uk-text-small {
+    font-size: var(--text-small-font-size);
+    line-height: var(--text-small-line-height);
+    @if mixin-exists(hook-text-small) {
+        @include hook-text-small;
+    }
+}
+
+.uk-text-large {
+    font-size: var(--text-large-font-size);
+    line-height: var(--text-large-line-height);
+    @if mixin-exists(hook-text-large) {
+        @include hook-text-large;
+    }
+}
+
+.uk-text-default {
+    font-size: var(--global-font-size);
+    line-height: var(--global-line-height);
+}
+
+
+/* Weight modifier
+ ========================================================================== */
+
+.uk-text-thin { font-weight: 100; }
+.uk-text-light { font-weight: 300; }
+.uk-text-normal { font-weight: 400; }
+.uk-text-medium { font-weight: 500; }
+.uk-text-semibold { font-weight: 600; }
+.uk-text-bold { font-weight: 700; }
+
+.uk-text-lighter { font-weight: lighter; }
+.uk-text-bolder { font-weight: bolder; }
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-text-italic { font-style: italic; }
+
+
+/* Transform modifier
+ ========================================================================== */
+
+.uk-text-capitalize { text-transform: capitalize !important; }
+.uk-text-uppercase { text-transform: uppercase !important; }
+.uk-text-lowercase { text-transform: lowercase !important; }
+
+
+/* Decoration modifier
+ ========================================================================== */
+
+.uk-text-decoration-none { text-decoration: none !important; }
+
+
+/* Color modifiers
+ ========================================================================== */
+
+.uk-text-muted { color: var(--text-muted-color) !important; }
+.uk-text-emphasis { color: var(--text-emphasis-color) !important; }
+.uk-text-primary { color: var(--text-primary-color) !important; }
+.uk-text-secondary { color: var(--text-secondary-color) !important; }
+.uk-text-success { color: var(--text-success-color) !important; }
+.uk-text-warning { color: var(--text-warning-color) !important; }
+.uk-text-danger { color: var(--text-danger-color) !important; }
+
+
+/* Background modifier
+ ========================================================================== */
+
+/*
+ * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
+ *    Default color is set to transparent
+ * 2. Container fits the text
+ * 3. Fallback color for IE11
+ */
+
+.uk-text-background {
+    /* 1 */
+    -webkit-background-clip: text;
+
+    /* 3 */
+    color: var(--text-background-color) !important;
+
+    /* 2 */
+    display: inline-block;
+}
+
+@supports (-webkit-background-clip: text) {
+    .uk-text-background {
+        background-color: var(--text-background-color);
+        color: transparent !important;
+        @if mixin-exists(hook-text-background) {
+            @include hook-text-background;
+        }
+    }
+}
+
+
+/* Alignment modifiers
+ ========================================================================== */
+
+.uk-text-left { text-align: left !important; }
+.uk-text-right { text-align: right !important; }
+.uk-text-center { text-align: center !important; }
+.uk-text-justify { text-align: justify !important; }
+
+/* Phone landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-small) {
+
+    .uk-text-left\@s { text-align: left !important; }
+    .uk-text-right\@s { text-align: right !important; }
+    .uk-text-center\@s { text-align: center !important; }
+
+}
+
+/* Tablet landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-medium) {
+
+    .uk-text-left\@m { text-align: left !important; }
+    .uk-text-right\@m { text-align: right !important; }
+    .uk-text-center\@m { text-align: center !important; }
+
+}
+
+/* Desktop and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-large) {
+
+    .uk-text-left\@l { text-align: left !important; }
+    .uk-text-right\@l { text-align: right !important; }
+    .uk-text-center\@l { text-align: center !important; }
+
+}
+
+/* Large screen and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-text-left\@xl { text-align: left !important; }
+    .uk-text-right\@xl { text-align: right !important; }
+    .uk-text-center\@xl { text-align: center !important; }
+
+}
+
+/*
+ * Vertical
+ */
+
+.uk-text-top { vertical-align: top !important; }
+.uk-text-middle { vertical-align: middle !important; }
+.uk-text-bottom { vertical-align: bottom !important; }
+.uk-text-baseline { vertical-align: baseline !important; }
+
+
+/* Wrap modifiers
+ ========================================================================== */
+
+/*
+ * Prevent text from wrapping onto multiple lines
+ */
+
+.uk-text-nowrap { white-space: nowrap; }
+
+/*
+ * 1. Make sure a max-width is set after which truncation can occur
+ * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+ * 3. Fix for table cells
+ */
+
+.uk-text-truncate {
+    /* 1 */
+    max-width: 100%;
+
+    /* 2 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 2 */
+th.uk-text-truncate,
+td.uk-text-truncate { max-width: 0; }
+
+
+/*
+ * 1. Wrap long words onto the next line and break them if they are too long to fit
+ * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
+ * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
+ *    Must use `break-all` to support IE11 and Edge
+ * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed
+ */
+
+.uk-text-break {
+    /* 1 */
+    overflow-wrap: break-word;
+
+    /* 2 */
+    word-wrap: break-word;
+}
+
+/* 3 */
+th.uk-text-break,
+td.uk-text-break { word-break: break-all; }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-text-misc) {
+    @include hook-text-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --text-base-font-size: var(--global-font-size);
+    --text-base-line-height: var(--global-line-height);
+    --text-base-color: var(--global-base-color);
+    --text-lead-font-size: var(--global-large-font-size);
+    --text-lead-line-height: #{$text-lead-line-height};
+    --text-lead-color: var(--global-emphasis-color);
+    --text-meta-font-size: var(--global-small-font-size);
+    --text-meta-line-height: #{$text-meta-line-height};
+    --text-meta-color: var(--global-muted-color);
+    --text-xsmall-font-size: var(--global-xsmall-font-size);
+    --text-xsmall-line-height: #{$text-xsmall-line-height};
+    --text-small-font-size: var(--global-small-font-size);
+    --text-small-line-height: #{$text-small-line-height};
+    --text-large-font-size: var(--global-large-font-size);
+    --text-large-line-height: #{$text-large-line-height};
+    --text-muted-color: var(--global-muted-color);
+    --text-emphasis-color: var(--global-emphasis-color);
+    --text-primary-color: var(--global-primary-background);
+    --text-secondary-color: var(--global-secondary-background);
+    --text-success-color: var(--global-success-background);
+    --text-warning-color: var(--global-warning-background);
+    --text-danger-color: var(--global-danger-background);
+    --text-background-color: var(--global-primary-background);
+
+    // Inverse
+    --inverse-text-lead-color: var(--inverse-global-color);
+    --inverse-text-meta-color: var(--inverse-global-muted-color);
+    --inverse-text-muted-color: var(--inverse-global-muted-color);
+    --inverse-text-emphasis-color: var(--inverse-global-emphasis-color);
+    --inverse-text-primary-color: var(--inverse-global-primary-background);
+    --inverse-text-secondary-color: var(--inverse-global-primary-background);
+    --inverse-text-tertiary-color: var(--inverse-global-primary-background);
+}

package/dist/cjs/styles/mixins.scss

@@ -2095,6 +2095,10 @@
 @mixin hook-inverse-tabs-tab-hover() {}
 @mixin hook-inverse-tabs-tab-active() {}
 @mixin hook-inverse-tabs-tab-disabled() {}
+@mixin hook-inverse-tabs-tab-remove() {}
+@mixin hook-inverse-tabs-tab-remove-hover() {}
+@mixin hook-inverse-tabs-tab-remove-active() {}
+@mixin hook-inverse-tabs-ink-bar() {}
 @mixin hook-inverse-component-tabs() {
     .uk-tabs {
         @if mixin-exists(hook-inverse-tabs) {
@@ -2102,34 +2106,64 @@
         }
     }
 
-    .uk-tabs > * > a {
+    .uk-tabs-tab,
+    .uk-tabs-nav-more,
+    .uk-tabs-nav-add {
         color: var(--inverse-tabs-tab-color);
         @if mixin-exists(hook-inverse-tabs-tab) {
             @include hook-inverse-tabs-tab;
         }
     }
 
-    .uk-tabs > * > a:hover,
-    .uk-tabs > * > a:focus {
+    .uk-tabs-tab:not(.uk-tabs-tab-disabled):hover,
+    .uk-tabs-tab:not(.uk-tabs-tab-disabled):focus,
+    .uk-tabs-nav-add:hover,
+    .uk-tabs-nav-add:focus {
         color: var(--inverse-tabs-tab-hover-color);
         @if mixin-exists(hook-inverse-tabs-tab-hover) {
             @include hook-inverse-tabs-tab-hover;
         }
     }
 
-    .uk-tabs > .uk-active > a {
+    .uk-tabs-tab-active:not(.uk-tabs-tab-disabled) {
         color: var(--inverse-tabs-tab-active-color);
         @if mixin-exists(hook-inverse-tabs-tab-active) {
             @include hook-inverse-tabs-tab-active;
         }
     }
 
-    .uk-tabs > .uk-disabled > a {
+    .uk-tabs-tab-disabled {
         color: var(--inverse-tabs-tab-disabled-color);
         @if mixin-exists(hook-inverse-tabs-tab-disabled) {
             @include hook-inverse-tabs-tab-disabled;
         }
     }
+
+    .uk-tabs-tab-remove {
+        @if mixin-exists(hook-inverse-tabs-tab-remove) {
+            @include hook-inverse-tabs-tab-remove;
+        }
+    }
+
+    .uk-tabs-tab-remove:hover {
+        @if mixin-exists(hook-inverse-tabs-tab-remove-hover) {
+            @include hook-inverse-tabs-tab-remove-hover;
+        }
+    }
+
+    .uk-tabs-tab-remove:focus,
+    .uk-tabs-tab-remove:active {
+        @if mixin-exists(hook-inverse-tabs-tab-remove-active) {
+            @include hook-inverse-tabs-tab-remove-active;
+        }
+    }
+
+    .uk-tabs-ink-bar {
+        background: var(--inverse-tabs-ink-bar-color);
+        @if mixin-exists(hook-inverse-tabs-ink-bar) {
+            @include hook-inverse-tabs-ink-bar;
+        }
+    }
 }
 
 @mixin hook-table() {}

package/dist/cjs/styles/text.scss

@@ -1,303 +1 @@
-// Name:            Text
-// Description:     Utilities for text
-//
-// Component:       `uk-text-*`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Text
- ========================================================================== */
-
-
-/* Style modifiers
- ========================================================================== */
-
-.uk-text-lead {
-    color: var(--text-lead-color);
-    font-size: var(--text-lead-font-size);
-    line-height: var(--text-lead-line-height);
-    @if mixin-exists(hook-text-lead) {
-        @include hook-text-lead;
-    }
-}
-
-.uk-text-meta {
-    color: var(--text-meta-color);
-    font-size: var(--text-meta-font-size);
-    line-height: var(--text-meta-line-height);
-    @if mixin-exists(hook-text-meta) {
-        @include hook-text-meta;
-    }
-}
-
-
-/* Size modifiers
- ========================================================================== */
-
-.uk-text-xsmall {
-    font-size: var(--text-xsmall-font-size);
-    line-height: var(--text-xsmall-line-height);
-    @if mixin-exists(hook-text-xsmall) {
-        @include hook-text-xsmall;
-    }
-}
-
-.uk-text-small {
-    font-size: var(--text-small-font-size);
-    line-height: var(--text-small-line-height);
-    @if mixin-exists(hook-text-small) {
-        @include hook-text-small;
-    }
-}
-
-.uk-text-large {
-    font-size: var(--text-large-font-size);
-    line-height: var(--text-large-line-height);
-    @if mixin-exists(hook-text-large) {
-        @include hook-text-large;
-    }
-}
-
-.uk-text-default {
-    font-size: var(--global-font-size);
-    line-height: var(--global-line-height);
-}
-
-
-/* Weight modifier
- ========================================================================== */
-
-.uk-text-thin { font-weight: 100; }
-.uk-text-light { font-weight: 300; }
-.uk-text-normal { font-weight: 400; }
-.uk-text-medium { font-weight: 500; }
-.uk-text-semibold { font-weight: 600; }
-.uk-text-bold { font-weight: 700; }
-
-.uk-text-lighter { font-weight: lighter; }
-.uk-text-bolder { font-weight: bolder; }
-
-
-/* Style modifier
- ========================================================================== */
-
-.uk-text-italic { font-style: italic; }
-
-
-/* Transform modifier
- ========================================================================== */
-
-.uk-text-capitalize { text-transform: capitalize !important; }
-.uk-text-uppercase { text-transform: uppercase !important; }
-.uk-text-lowercase { text-transform: lowercase !important; }
-
-
-/* Decoration modifier
- ========================================================================== */
-
-.uk-text-decoration-none { text-decoration: none !important; }
-
-
-/* Color modifiers
- ========================================================================== */
-
-.uk-text-muted { color: var(--text-muted-color) !important; }
-.uk-text-emphasis { color: var(--text-emphasis-color) !important; }
-.uk-text-primary { color: var(--text-primary-color) !important; }
-.uk-text-secondary { color: var(--text-secondary-color) !important; }
-.uk-text-success { color: var(--text-success-color) !important; }
-.uk-text-warning { color: var(--text-warning-color) !important; }
-.uk-text-danger { color: var(--text-danger-color) !important; }
-
-
-/* Background modifier
- ========================================================================== */
-
-/*
- * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
- *    Default color is set to transparent
- * 2. Container fits the text
- * 3. Fallback color for IE11
- */
-
-.uk-text-background {
-    /* 1 */
-    -webkit-background-clip: text;
-
-    /* 3 */
-    color: var(--text-background-color) !important;
-
-    /* 2 */
-    display: inline-block;
-}
-
-@supports (-webkit-background-clip: text) {
-    .uk-text-background {
-        background-color: var(--text-background-color);
-        color: transparent !important;
-        @if mixin-exists(hook-text-background) {
-            @include hook-text-background;
-        }
-    }
-}
-
-
-/* Alignment modifiers
- ========================================================================== */
-
-.uk-text-left { text-align: left !important; }
-.uk-text-right { text-align: right !important; }
-.uk-text-center { text-align: center !important; }
-.uk-text-justify { text-align: justify !important; }
-
-/* Phone landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-small) {
-
-    .uk-text-left\@s { text-align: left !important; }
-    .uk-text-right\@s { text-align: right !important; }
-    .uk-text-center\@s { text-align: center !important; }
-
-}
-
-/* Tablet landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-medium) {
-
-    .uk-text-left\@m { text-align: left !important; }
-    .uk-text-right\@m { text-align: right !important; }
-    .uk-text-center\@m { text-align: center !important; }
-
-}
-
-/* Desktop and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-large) {
-
-    .uk-text-left\@l { text-align: left !important; }
-    .uk-text-right\@l { text-align: right !important; }
-    .uk-text-center\@l { text-align: center !important; }
-
-}
-
-/* Large screen and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-xlarge) {
-
-    .uk-text-left\@xl { text-align: left !important; }
-    .uk-text-right\@xl { text-align: right !important; }
-    .uk-text-center\@xl { text-align: center !important; }
-
-}
-
-/*
- * Vertical
- */
-
-.uk-text-top { vertical-align: top !important; }
-.uk-text-middle { vertical-align: middle !important; }
-.uk-text-bottom { vertical-align: bottom !important; }
-.uk-text-baseline { vertical-align: baseline !important; }
-
-
-/* Wrap modifiers
- ========================================================================== */
-
-/*
- * Prevent text from wrapping onto multiple lines
- */
-
-.uk-text-nowrap { white-space: nowrap; }
-
-/*
- * 1. Make sure a max-width is set after which truncation can occur
- * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
- * 3. Fix for table cells
- */
-
-.uk-text-truncate {
-    /* 1 */
-    max-width: 100%;
-
-    /* 2 */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-/* 2 */
-th.uk-text-truncate,
-td.uk-text-truncate { max-width: 0; }
-
-
-/*
- * 1. Wrap long words onto the next line and break them if they are too long to fit
- * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
- * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
- *    Must use `break-all` to support IE11 and Edge
- * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed
- */
-
-.uk-text-break {
-    /* 1 */
-    overflow-wrap: break-word;
-
-    /* 2 */
-    word-wrap: break-word;
-}
-
-/* 3 */
-th.uk-text-break,
-td.uk-text-break { word-break: break-all; }
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-text-misc) {
-    @include hook-text-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --text-lead-font-size: var(--global-large-font-size);
-    --text-lead-line-height: #{$text-lead-line-height};
-    --text-lead-color: var(--global-emphasis-color);
-    --text-meta-font-size: var(--global-small-font-size);
-    --text-meta-line-height: #{$text-meta-line-height};
-    --text-meta-color: var(--global-muted-color);
-    --text-xsmall-font-size: var(--global-xsmall-font-size);
-    --text-xsmall-line-height: #{$text-xsmall-line-height};
-    --text-small-font-size: var(--global-small-font-size);
-    --text-small-line-height: #{$text-small-line-height};
-    --text-large-font-size: var(--global-large-font-size);
-    --text-large-line-height: #{$text-large-line-height};
-    --text-muted-color: var(--global-muted-color);
-    --text-emphasis-color: var(--global-emphasis-color);
-    --text-primary-color: var(--global-primary-background);
-    --text-secondary-color: var(--global-secondary-background);
-    --text-success-color: var(--global-success-background);
-    --text-warning-color: var(--global-warning-background);
-    --text-danger-color: var(--global-danger-background);
-    --text-background-color: var(--global-primary-background);
-
-    // Inverse
-    --inverse-text-lead-color: var(--inverse-global-color);
-    --inverse-text-meta-color: var(--inverse-global-muted-color);
-    --inverse-text-muted-color: var(--inverse-global-muted-color);
-    --inverse-text-emphasis-color: var(--inverse-global-emphasis-color);
-    --inverse-text-primary-color: var(--inverse-global-primary-background);
-    --inverse-text-secondary-color: var(--inverse-global-primary-background);
-    --inverse-text-tertiary-color: var(--inverse-global-primary-background);
-}
+@import '../components/Text/index.scss';