@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/table/_table.scss

@@ -0,0 +1,337 @@
+// Name:            Table
+// Description:     Styles for tables
+//
+// Component:       `uk-table`
+//
+// Modifiers:       `uk-table-middle`
+//                  `uk-table-divider`
+//                  `uk-table-striped`
+//                  `uk-table-hover`
+//                  `uk-table-small`
+//                  `uk-table-justify`
+//                  `uk-table-shrink`
+//                  `uk-table-expand`
+//                  `uk-table-link`
+//                  `uk-table-responsive`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin table-styles {
+    /* ========================================================================
+       Component: Table
+     ========================================================================== */
+
+    /*
+     * 1. Remove most spacing between table cells.
+     * 2. Behave like a block element
+     * 3. Style
+     */
+
+    .#{$prefix}-table {
+        /* 1 */
+        border-collapse: collapse;
+        border-spacing: 0;
+
+        /* 3 */
+        margin-bottom: var(--table-margin-vertical);
+
+        /* 2 */
+        width: 100%;
+        @if map.has-key($mixins, 'hook-table') {
+            @include meta.apply(map.get($mixins, 'hook-table'));
+        }
+    }
+
+    /* Add margin if adjacent element */
+    * + .#{$prefix}-table {
+        margin-top: var(--table-margin-vertical);
+    }
+
+    /* Header cell
+     ========================================================================== */
+
+    /*
+     * 1. Style
+     */
+
+    .#{$prefix}-table th {
+        color: var(--table-header-cell-color);
+
+        /* 1 */
+        font-size: var(--table-header-cell-font-size);
+        font-weight: var(--table-header-cell-font-weight);
+        padding: var(--table-cell-padding-vertical);
+        text-align: left;
+        vertical-align: bottom;
+        @if map.has-key($mixins, 'hook-table-header-cell') {
+            @include meta.apply(map.get($mixins, 'hook-table-header-cell'));
+        }
+    }
+
+    /* Cell
+     ========================================================================== */
+
+    .#{$prefix}-table td {
+        padding: var(--table-cell-padding-vertical);
+        vertical-align: top;
+        @if map.has-key($mixins, 'hook-table-cell') {
+            @include meta.apply(map.get($mixins, 'hook-table-cell'));
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-table td > :last-child {
+        margin-bottom: 0;
+    }
+
+    /* Footer
+     ========================================================================== */
+
+    .#{$prefix}-table tfoot {
+        font-size: var(--table-footer-font-size);
+        @if map.has-key($mixins, 'hook-table-footer') {
+            @include meta.apply(map.get($mixins, 'hook-table-footer'));
+        }
+    }
+
+    /* Caption
+     ========================================================================== */
+
+    .#{$prefix}-table caption {
+        color: var(--table-caption-color);
+        font-size: var(--table-caption-font-size);
+        text-align: left;
+        @if map.has-key($mixins, 'hook-table-caption') {
+            @include meta.apply(map.get($mixins, 'hook-table-caption'));
+        }
+    }
+
+    /* Alignment modifier
+     ========================================================================== */
+
+    .#{$prefix}-table-middle,
+    .#{$prefix}-table-middle td {
+        vertical-align: middle !important;
+    }
+
+    /* Style modifiers
+     ========================================================================== */
+
+    /*
+     * Divider
+     */
+
+    .#{$prefix}-table-divider > tr:not(:first-child),
+    .#{$prefix}-table-divider > :not(:first-child) > tr,
+    .#{$prefix}-table-divider > :first-child > tr:not(:first-child) {
+        border-top: var(--table-divider-border-width);
+        @if map.has-key($mixins, 'hook-table-divider') {
+            @include meta.apply(map.get($mixins, 'hook-table-divider'));
+        }
+    }
+
+    /*
+     * Striped
+     */
+
+    .#{$prefix}-table-striped > tr:nth-of-type(odd),
+    .#{$prefix}-table-striped tbody tr:nth-of-type(odd) {
+        background: var(--table-striped-row-background);
+        @if map.has-key($mixins, 'hook-table-striped') {
+            @include meta.apply(map.get($mixins, 'hook-table-striped'));
+        }
+    }
+
+    /*
+     * Hover
+     */
+
+    .#{$prefix}-table-hover > tr:hover,
+    .#{$prefix}-table-hover tbody tr:hover {
+        background: var(--table-hover-row-background);
+        @if map.has-key($mixins, 'hook-table-hover') {
+            @include meta.apply(map.get($mixins, 'hook-table-hover'));
+        }
+    }
+
+    /* Active state
+     ========================================================================== */
+
+    .#{$prefix}-table > tr.#{$prefix}-active,
+    .#{$prefix}-table tbody tr.#{$prefix}-active {
+        background: var(--table-row-active-background);
+        @if map.has-key($mixins, 'hook-table-row-active') {
+            @include meta.apply(map.get($mixins, 'hook-table-row-active'));
+        }
+    }
+
+    /* Size modifier
+     ========================================================================== */
+
+    .#{$prefix}-table-small th,
+    .#{$prefix}-table-small td {
+        padding: var(--table-small-cell-padding-vertical);
+        @if map.has-key($mixins, 'hook-table-small') {
+            @include meta.apply(map.get($mixins, 'hook-table-small'));
+        }
+    }
+
+    .#{$prefix}-table-large th,
+    .#{$prefix}-table-large td {
+        padding: var(--table-large-cell-padding-vertical);
+        @if map.has-key($mixins, 'hook-table-large') {
+            @include meta.apply(map.get($mixins, 'hook-table-large'));
+        }
+    }
+
+    /* Justify modifier
+     ========================================================================== */
+
+    .#{$prefix}-table-justify th:first-child,
+    .#{$prefix}-table-justify td:first-child {
+        padding-left: 0;
+    }
+
+    .#{$prefix}-table-justify th:last-child,
+    .#{$prefix}-table-justify td:last-child {
+        padding-right: 0;
+    }
+
+    /* Cell size modifier
+     ========================================================================== */
+
+    .#{$prefix}-table-shrink {
+        width: 1px;
+    }
+
+    .#{$prefix}-table-expand {
+        min-width: var(--table-expand-min-width);
+    }
+
+    /* Cell link modifier
+     ========================================================================== */
+
+    /*
+     * Does not work with `uk-table-justify` at the moment
+     */
+
+    .#{$prefix}-table-link {
+        padding: 0 !important;
+    }
+
+    .#{$prefix}-table-link > a {
+        display: block;
+        padding: var(--table-cell-padding-vertical);
+    }
+
+    .#{$prefix}-table-small .#{$prefix}-table-link > a {
+        padding: var(--table-small-cell-padding-vertical);
+    }
+
+    /* Responsive table
+     ========================================================================== */
+
+
+    /* Phone landscape and smaller */
+    @media (--media-breakpoint-small-max) {
+        .#{$prefix}-table-responsive,
+        .#{$prefix}-table-responsive tbody,
+        .#{$prefix}-table-responsive th,
+        .#{$prefix}-table-responsive td,
+        .#{$prefix}-table-responsive tr {
+            display: block;
+        }
+
+        .#{$prefix}-table-responsive thead {
+            display: none;
+        }
+
+        .#{$prefix}-table-responsive th,
+        .#{$prefix}-table-responsive td {
+            max-width: none !important;
+            min-width: 0 !important;
+            overflow: visible !important;
+            white-space: normal !important;
+            width: auto !important;
+        }
+
+        .#{$prefix}-table-responsive th:not(:first-child, .#{$prefix}-table-link),
+        .#{$prefix}-table-responsive td:not(:first-child, .#{$prefix}-table-link),
+        .#{$prefix}-table-responsive .#{$prefix}-table-link:not(:first-child) > a {
+            padding-top: math.round(math.div($table-cell-padding-vertical, 3)) !important;
+        }
+
+        .#{$prefix}-table-responsive th:not(:last-child, .#{$prefix}-table-link),
+        .#{$prefix}-table-responsive td:not(:last-child, .#{$prefix}-table-link),
+        .#{$prefix}-table-responsive .#{$prefix}-table-link:not(:last-child) > a {
+            padding-bottom: math.round(math.div($table-cell-padding-vertical, 3)) !important;
+        }
+
+        .#{$prefix}-table-justify.#{$prefix}-table-responsive th,
+        .#{$prefix}-table-justify.#{$prefix}-table-responsive td {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-table-misc') {
+        @include meta.apply(map.get($mixins, 'hook-table-misc'));
+    }
+
+    @content;
+}
+
+@mixin table-tokens {
+    --table-margin-vertical: var(--global-margin);
+    --table-cell-padding-vertical: #{$table-cell-padding-vertical};
+    --table-cell-padding-horizontal: #{$table-cell-padding-horizontal};
+    --table-header-cell-font-size: var(--global-font-size);
+    --table-header-cell-font-weight: #{$table-header-cell-font-weight};
+    --table-header-cell-color: var(--global-color);
+    --table-footer-font-size: var(--global-small-font-size);
+    --table-caption-font-size: var(--global-small-font-size);
+    --table-caption-color: var(--global-muted-color);
+    --table-row-active-background: #{$table-row-active-background};
+    --table-divider-border-width: var(--global-border-width);
+    --table-divider-border: var(--global-border);
+    --table-striped-row-background: var(--global-muted-background);
+    --table-hover-row-background: var(--table-row-active-background);
+    --table-small-cell-padding-vertical: #{$table-small-cell-padding-vertical};
+    --table-small-cell-padding-horizontal: #{$table-small-cell-padding-horizontal};
+    --table-large-cell-padding-vertical: #{$table-large-cell-padding-vertical};
+    --table-large-cell-padding-horizontal: #{$table-large-cell-padding-horizontal};
+    --table-expand-min-width: #{$table-expand-min-width};
+
+    @content;
+}
+
+@mixin table-inverse-tokens {
+    --inverse-table-header-cell-color: var(--inverse-global-color);
+    --inverse-table-caption-color: var(--inverse-global-muted-color);
+    --inverse-table-row-active-background: #{$inverse-table-row-active-background};
+    --inverse-table-divider-border: var(--inverse-global-border);
+    --inverse-table-striped-row-background: var(--inverse-global-muted-background);
+    --inverse-table-hover-row-background: var(--inverse-table-row-active-background);
+
+    @content;
+}

package/styles/tabs/_index.scss

@@ -0,0 +1,11 @@
+@use 'tabs' as *;
+
+$generate-tokens: true !default;
+
+@include tabs-styles;
+
+@if $generate-tokens {
+    :root {
+        @include tabs-tokens;
+    }
+}