@broxus/react-uikit 0.1.0

package/dist/cjs/styles/table.scss

@@ -0,0 +1,375 @@
+// 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`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   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%;
+    .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;
+    .hook-table-header-cell;
+}
+
+
+/* Cell
+ ========================================================================== */
+
+.uk-table td {
+    padding: var(--table-cell-padding-vertical);
+    vertical-align: top;
+    .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);
+    .hook-table-footer;
+}
+
+
+/* Caption
+ ========================================================================== */
+
+.uk-table caption {
+    color: var(--table-caption-color);
+    font-size: var(--table-caption-font-size);
+    text-align: left;
+    .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);
+    .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);
+    .hook-table-striped;
+}
+
+/*
+ * Hover
+ */
+
+.uk-table-hover > tr:hover,
+.uk-table-hover tbody tr:hover {
+    background: var(--table-hover-row-background);
+    .hook-table-hover;
+}
+
+
+/* Active state
+ ========================================================================== */
+
+.uk-table > tr.uk-active,
+.uk-table tbody tr.uk-active {
+    background: var(--table-row-active-background);
+    .hook-table-row-active;
+}
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-table-small th,
+.uk-table-small td {
+    padding: var(--table-small-cell-padding-vertical);
+    .hook-table-small;
+}
+
+.uk-table-large th,
+.uk-table-large td {
+    padding: var(--table-large-cell-padding-vertical);
+    .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):not(.uk-table-link),
+    .uk-table-responsive td:not(:first-child):not(.uk-table-link),
+    .uk-table-responsive .uk-table-link:not(:first-child) > a {
+        padding-top: round(@table-cell-padding-vertical / 3) !important;
+    }
+
+    .uk-table-responsive th:not(:last-child):not(.uk-table-link),
+    .uk-table-responsive td:not(:last-child):not(.uk-table-link),
+    .uk-table-responsive .uk-table-link:not(:last-child) > a {
+        padding-bottom: round(@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
+// ========================================================================
+
+.hook-table-misc;
+
+.hook-table() {}
+
+.hook-table-header-cell() {}
+
+.hook-table-cell() {}
+
+.hook-table-footer() {}
+
+.hook-table-caption() {}
+
+.hook-table-row-active() {}
+
+.hook-table-divider() {}
+
+.hook-table-striped() {}
+
+.hook-table-hover() {}
+
+.hook-table-small() {}
+
+.hook-table-large() {}
+
+.hook-table-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse() {
+
+    .uk-table th {
+        color: var(--inverse-table-header-cell-color);
+        .hook-inverse-table-header-cell;
+    }
+
+    .uk-table caption {
+        color: var(--inverse-table-caption-color);
+        .hook-inverse-table-caption;
+    }
+
+    .uk-table > tr.uk-active,
+    .uk-table tbody tr.uk-active {
+        background: var(--inverse-table-row-active-background);
+        .hook-inverse-table-row-active;
+    }
+
+    .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-color: var(--inverse-table-divider-border);
+        .hook-inverse-table-divider;
+    }
+
+    .uk-table-striped > tr:nth-of-type(odd),
+    .uk-table-striped tbody tr:nth-of-type(odd) {
+        background: var(--inverse-table-striped-row-background);
+        .hook-inverse-table-striped;
+    }
+
+    .uk-table-hover > tr:hover,
+    .uk-table-hover tbody tr:hover {
+        background: var(--inverse-table-hover-row-background);
+        .hook-inverse-table-hover;
+    }
+
+}
+
+.hook-inverse-table-header-cell() {}
+
+.hook-inverse-table-caption() {}
+
+.hook-inverse-table-row-active() {}
+
+.hook-inverse-table-divider() {}
+
+.hook-inverse-table-striped() {}
+
+.hook-inverse-table-hover() {}
+
+
+// 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);
+}

package/dist/cjs/styles/text.scss

@@ -0,0 +1,293 @@
+// 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-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-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);
+}