@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/table.scss

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