@react-ui-org/react-ui 0.53.0 → 0.55.0

package/src/components/ScrollView/ScrollView.scss

@@ -1,227 +0,0 @@
-// 1. Scrolling shadows are implemented as pseudo elements. This way we can customise them only
-//    with custom properties.
-//
-// 2. Stack scrolling shadows over viewport content while keeping the content interactive.
-//
-//    - `.scrollingShadows` is positioned absolutely over the `.root`, with auto `z-index` (this is
-//      important!), and with `overflow: hidden` to clip the shadows (ie. its pseudo elements).
-//    - The `.viewport` is in `.root`'s stacking context and remains interactive because its
-//      `z-index` is higher than the auto `z-index` of `.scrollingShadows`.
-//
-// 3. Optional arrows are positioned relative to the `.root` and stacked on top of scrolling
-//    shadows. They can be shifted outside the `ScrollView` area only because `overflow: hidden` is
-//    **not** present at `.root`.
-//
-// 4. Make the `.content`'s bounding rectangle spread beyond the part visible through `.viewport`.
-//
-// 5. Prevent undesired vertical scrolling that may occur with tables inside.
-//
-// 6. Make `ScrollView` adjust to flexible layouts.
-//
-// 7. Hide content overflowing in the other direction because scrollbars would be unreachable under
-//    scrolling shadows.
-
-@use "../../styles/tools/accessibility";
-@use "../../styles/tools/caret";
-@use "../../styles/tools/reset";
-@use "../../styles/tools/scrollbar";
-@use "../../styles/tools/spacing";
-@use "../../styles/tools/transition";
-
-$_arrow-inner-spacing: spacing.of(2);
-$_arrow-outer-spacing: spacing.of(4);
-
-.root {
-    position: relative; // 2.
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-// 1.
-.scrollingShadows {
-    position: absolute; // 2.
-    width: 100%; // 2.
-    height: 100%; // 2.
-    overflow: hidden; // 2.
-    pointer-events: none; // 2.
-
-    &::before,
-    &::after {
-        @include transition.add((visibility, opacity, transform));
-
-        content: "";
-        position: absolute;
-        z-index: 2; // 2.
-        display: block;
-        visibility: hidden;
-        opacity: 0;
-    }
-
-    &::before {
-        background: var(--rui-local-start-shadow-background);
-    }
-
-    &::after {
-        background: var(--rui-local-end-shadow-background);
-    }
-}
-
-.viewport {
-    z-index: 1; // 2.
-    width: 100%;
-    scroll-behavior: smooth;
-}
-
-.arrowPrev,
-.arrowNext {
-    @include reset.button();
-    @include accessibility.min-tap-target();
-    @include transition.add((visibility, opacity, transform));
-
-    position: absolute; // 3.
-    z-index: 3; // 3.
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    visibility: hidden;
-    opacity: 0;
-}
-
-.arrowIcon {
-    @include caret.create();
-}
-
-.isRootVertical {
-    height: 100%;
-    min-height: 0; // 6.
-}
-
-.isRootVertical .viewport {
-    height: 100%;
-    overflow-x: hidden; // 7.
-    overflow-y: auto; // 2.
-}
-
-.isRootVertical .arrowPrev {
-    top: 0;
-    right: 0;
-    left: 0;
-    width: 100%;
-    padding-top: $_arrow-outer-spacing;
-    padding-bottom: $_arrow-inner-spacing;
-    color: var(--rui-local-prev-arrow-color);
-    transform: translateY(var(--rui-local-prev-arrow-initial-offset));
-}
-
-.isRootVertical .arrowPrev .arrowIcon {
-    @include caret.rotate(180);
-}
-
-.isRootVertical .arrowNext {
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding-top: $_arrow-inner-spacing;
-    padding-bottom: $_arrow-outer-spacing;
-    color: var(--rui-local-next-arrow-color);
-    transform: translateY(calc(-1 * var(--rui-local-next-arrow-initial-offset)));
-}
-
-.isRootHorizontal {
-    min-width: 0; // 6.
-}
-
-.isRootHorizontal .arrowPrev {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    padding-right: $_arrow-inner-spacing;
-    padding-left: $_arrow-outer-spacing;
-    transform: translateX(var(--rui-local-prev-arrow-initial-offset));
-}
-
-.isRootHorizontal .arrowPrev .arrowIcon {
-    @include caret.rotate(90);
-}
-
-.isRootHorizontal .arrowNext {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    padding-right: $_arrow-outer-spacing;
-    padding-left: $_arrow-inner-spacing;
-    transform: translateX(calc(-1 * var(--rui-local-next-arrow-initial-offset)));
-}
-
-.isRootHorizontal .arrowNext .arrowIcon {
-    @include caret.rotate(270);
-}
-
-.isRootVertical .scrollingShadows::before,
-.isRootVertical .scrollingShadows::after {
-    right: 0;
-    left: 0;
-    width: auto;
-}
-
-.isRootVertical .scrollingShadows::before {
-    top: 0;
-    height: var(--rui-local-start-shadow-size);
-    transform: translateY(var(--rui-local-start-shadow-initial-offset));
-}
-
-.isRootVertical .scrollingShadows::after {
-    bottom: 0;
-    height: var(--rui-local-end-shadow-size);
-    transform: translateY(calc(-1 * var(--rui-local-end-shadow-initial-offset)));
-}
-
-.isRootHorizontal .viewport {
-    overflow-x: auto; // 2.
-    overflow-y: hidden; // 5., 7.
-}
-
-.isRootHorizontal .content {
-    display: inline-flex; // 4.
-    min-width: 100%;
-    vertical-align: top;
-}
-
-.isRootHorizontal .scrollingShadows::before,
-.isRootHorizontal .scrollingShadows::after {
-    top: 0;
-    bottom: 0;
-    height: auto;
-}
-
-.isRootHorizontal .scrollingShadows::before {
-    left: 0;
-    width: var(--rui-local-start-shadow-size);
-    transform: translateX(var(--rui-local-start-shadow-initial-offset));
-}
-
-.isRootHorizontal .scrollingShadows::after {
-    right: 0;
-    width: var(--rui-local-end-shadow-size);
-    transform: translateX(calc(-1 * var(--rui-local-end-shadow-initial-offset)));
-}
-
-.isRootScrolledAtStart .scrollingShadows::before,
-.isRootScrolledAtStart .arrowPrev {
-    visibility: visible;
-    opacity: 1;
-    transform: translate(0, 0);
-}
-
-.isRootScrolledAtEnd .scrollingShadows::after,
-.isRootScrolledAtEnd .arrowNext {
-    visibility: visible;
-    opacity: 1;
-    transform: translate(0, 0);
-}
-
-.hasRootScrollbarDisabled .viewport {
-    @include scrollbar.hide();
-}

package/src/components/SelectField/SelectField.scss

@@ -1,109 +0,0 @@
-@use "../../styles/tools/form-fields/box-field-elements";
-@use "../../styles/tools/form-fields/box-field-layout";
-@use "../../styles/tools/form-fields/box-field-sizes";
-@use "../../styles/tools/form-fields/foundation";
-@use "../../styles/tools/form-fields/variants";
-@use "../../styles/tools/accessibility";
-
-// Foundation
-.root {
-    @include foundation.root();
-}
-
-.label {
-    @include foundation.label();
-}
-
-.inputContainer {
-    @include box-field-elements.input-container();
-}
-
-.input {
-    @include box-field-elements.input();
-    @include box-field-elements.input-select();
-    @include box-field-elements.input-select-option();
-}
-
-.caret {
-    @include box-field-elements.caret();
-}
-
-.caretIcon {
-    @include box-field-elements.caret-icon();
-}
-
-.bottomLine {
-    @include box-field-elements.bottom-line();
-}
-
-.helpText,
-.validationText {
-    @include foundation.help-text();
-}
-
-.isRootRequired .label {
-    @include foundation.label-required();
-}
-
-// Variants
-.isRootVariantFilled {
-    @include variants.visual(box, $variant: filled, $has-caret: true);
-}
-
-.isRootVariantOutline {
-    @include variants.visual(box, $variant: outline, $has-caret: true);
-}
-
-// States
-.isRootStateInvalid {
-    @include variants.validation(invalid);
-}
-
-.isRootStateValid {
-    @include variants.validation(valid);
-}
-
-.isRootStateWarning {
-    @include variants.validation(warning);
-}
-
-// Invisible label
-.isLabelHidden {
-    @include accessibility.hide-text();
-}
-
-// Layouts
-.isRootLayoutVertical,
-.isRootLayoutHorizontal {
-    @include box-field-layout.vertical();
-}
-
-.isRootLayoutHorizontal {
-    @include box-field-layout.horizontal();
-}
-
-.isRootFullWidth {
-    @include box-field-layout.full-width();
-}
-
-.isRootInFormLayout {
-    @include box-field-layout.in-form-layout();
-}
-
-// Sizes
-.isRootSizeSmall {
-    @include box-field-sizes.size(small);
-}
-
-.isRootSizeMedium {
-    @include box-field-sizes.size(medium);
-}
-
-.isRootSizeLarge {
-    @include box-field-sizes.size(large);
-}
-
-// Groups
-.isRootGrouped {
-    @include box-field-elements.in-group-layout();
-}

package/src/components/Table/Table.scss

@@ -1,28 +0,0 @@
-@use "../../styles/tools/transition";
-@use "settings";
-
-.table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.tableRow,
-.tableHeadRow {
-    @include transition.add((background-color));
-}
-
-.tableRow {
-    background-color: settings.$background-color;
-
-    &:hover {
-        background-color: settings.$hover-background-color;
-    }
-}
-
-.tableHeadRow {
-    background-color: settings.$head-background-color;
-
-    &:hover {
-        background-color: settings.$head-background-color;
-    }
-}

package/src/components/Table/_components/TableCell.scss

@@ -1,26 +0,0 @@
-@use "../settings";
-
-.tableCell,
-.tableHeadCell,
-.isTableCellSortingActive,
-.isTableHeadCellSortingActive {
-    padding: settings.$cell-padding-y settings.$cell-padding-x;
-    text-align: left;
-    border-bottom: settings.$border-width solid settings.$border-color;
-}
-
-.tableHeadCell {
-    font-weight: settings.$head-font-weight;
-    border-bottom-width: 2px;
-}
-
-.tableHeadCellLayout {
-    display: flex;
-    gap: settings.$cell-padding-x;
-    align-items: center;
-}
-
-.isTableCellSortingActive,
-.isTableHeadCellSortingActive {
-    background-color: settings.$sorted-background-color;
-}

package/src/components/Tabs/Tabs.scss

@@ -1,28 +0,0 @@
-// 1. Decorative bottom border.
-
-@use "../../styles/tools/reset";
-@use "theme";
-
-.list {
-    @include reset.list();
-
-    position: relative;
-    display: inline-flex;
-    min-width: 100%;
-    padding-right: theme.$padding-x;
-    padding-left: theme.$padding-x;
-    overflow-y: hidden;
-    white-space: nowrap;
-
-    // 1.
-    &::after {
-        content: "";
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-        height: theme.$border-bottom-width;
-        background-color: theme.$border-bottom-color;
-    }
-}

package/src/components/Tabs/TabsItem.scss

@@ -1,117 +0,0 @@
-// 1. Keep inactive items under Tabs' decorative bottom border and pop active ones above it.
-
-@use "../../styles/tools/breakpoint";
-@use "../../styles/tools/reset";
-@use "../../styles/tools/transition";
-@use "theme";
-
-.root {
-    @include transition.add(transform);
-
-    position: relative; // 1.
-    z-index: 1; // 1.
-    flex: none;
-    padding-top: calc(-1 * #{theme.$item-active-shift-y});
-    margin-bottom: theme.$item-active-shift-y;
-    transform: translateY(0);
-
-    &:hover,
-    &:focus-within {
-        transform: translateY(theme.$item-hover-shift-y);
-    }
-
-    &:not(:last-child) {
-        margin-right: theme.$gap-xs;
-    }
-
-    @include breakpoint.up(sm) {
-        &:not(:last-child) {
-            margin-right: theme.$gap-sm;
-        }
-    }
-
-    @include breakpoint.up(md) {
-        &:not(:last-child) {
-            margin-right: theme.$gap-md;
-        }
-    }
-}
-
-.link {
-    @include reset.link();
-    @include transition.add((color, border-color, background-color, box-shadow));
-
-    display: block;
-    padding: theme.$item-padding-xs;
-    font-weight: theme.$item-font-weight;
-    line-height: 1;
-    text-decoration: none;
-    color: theme.$item-color;
-    border: theme.$item-border-width solid;
-    border-color: theme.$item-border-color;
-    border-top-left-radius: theme.$item-border-radius;
-    border-top-right-radius: theme.$item-border-radius;
-    background-color: theme.$item-background-color;
-    box-shadow: theme.$item-box-shadow;
-
-    &:hover,
-    &:focus {
-        font-weight: theme.$item-hover-font-weight;
-        color: theme.$item-hover-color;
-        border-width: theme.$item-hover-border-width;
-        border-color: theme.$item-hover-border-color;
-        background-color: theme.$item-hover-background-color;
-        box-shadow: theme.$item-hover-box-shadow;
-    }
-
-    @include breakpoint.up(sm) {
-        padding: theme.$item-padding-sm;
-    }
-
-    @include breakpoint.up(md) {
-        padding: theme.$item-padding-md;
-    }
-}
-
-.linkContent {
-    @include transition.add(transform);
-
-    display: flex;
-    align-items: center;
-    transform: translateY(0);
-}
-
-.label:not(:first-child) {
-    margin-left: theme.$item-icon-gap;
-}
-
-.label:not(:last-child) {
-    margin-right: theme.$item-icon-gap;
-}
-
-.isRootActive,
-.isRootActive:hover,
-.isRootActive:focus-within {
-    z-index: 2; // 1.
-    transform: translateY(theme.$item-active-shift-y);
-}
-
-.isRootActive .link {
-    font-weight: theme.$item-active-font-weight;
-    color: theme.$item-active-color;
-    border-width: theme.$item-active-border-width;
-    border-color: theme.$item-active-border-color;
-    background-color: theme.$item-active-background-color;
-    box-shadow: theme.$item-active-box-shadow;
-}
-
-.link:hover .linkContent,
-.link:focus .linkContent {
-    transform: translateY(theme.$item-hover-label-shift-y);
-}
-
-.isRootActive .link .linkContent,
-.isRootActive .link:hover .linkContent,
-.isRootActive .link:focus .linkContent {
-    transform: translateY(theme.$item-active-label-shift-y);
-}

package/src/components/Text/Text.scss

@@ -1,40 +0,0 @@
-// 1. `word-break: break-word` is deprecated in favour of `overflow-wrap: anywhere`, but it's still
-//     required for Safari.
-//     https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere
-//
-// 2. Different approaches are used for single and multiline texts because the latter approach
-//    doesn't always work for single-line texts.
-
-.isRootClampSingleLine {
-    display: block; // 2.
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-// stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix
-.isRootClampMultiLine {
-    display: -webkit-box; // 2.
-    -webkit-line-clamp: var(--rui-custom-lines);
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-// stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix
-
-.isRootHyphensAuto {
-    hyphens: auto;
-}
-
-.isRootHyphensManual {
-    hyphens: manual;
-}
-
-.isRootWordWrappingAnywhere {
-    word-break: break-all;
-}
-
-.isRootWordWrappingLongWords {
-    word-break: break-word; // 1.
-    overflow-wrap: anywhere;
-}

package/src/components/TextArea/TextArea.scss

@@ -1,95 +0,0 @@
-@use "../../styles/tools/form-fields/box-field-elements";
-@use "../../styles/tools/form-fields/box-field-layout";
-@use "../../styles/tools/form-fields/box-field-sizes";
-@use "../../styles/tools/form-fields/foundation";
-@use "../../styles/tools/form-fields/variants";
-@use "../../styles/tools/accessibility";
-
-// Foundation
-.root {
-    @include foundation.root();
-}
-
-.label {
-    @include foundation.label();
-}
-
-.inputContainer {
-    @include box-field-elements.input-container();
-}
-
-.input {
-    @include box-field-elements.input();
-    @include box-field-elements.input-textarea();
-}
-
-.bottomLine {
-    @include box-field-elements.bottom-line();
-}
-
-.helpText,
-.validationText {
-    @include foundation.help-text();
-}
-
-.isRootRequired .label {
-    @include foundation.label-required();
-}
-
-// Visual variants
-.isRootVariantFilled {
-    @include variants.visual(box, $variant: filled);
-}
-
-.isRootVariantOutline {
-    @include variants.visual(box, $variant: outline);
-}
-
-// States
-.isRootStateInvalid {
-    @include variants.validation(invalid);
-}
-
-.isRootStateValid {
-    @include variants.validation(valid);
-}
-
-.isRootStateWarning {
-    @include variants.validation(warning);
-}
-
-// Invisible label
-.isLabelHidden {
-    @include accessibility.hide-text();
-}
-
-// Layouts
-.isRootLayoutVertical,
-.isRootLayoutHorizontal {
-    @include box-field-layout.vertical();
-}
-
-.isRootLayoutHorizontal {
-    @include box-field-layout.horizontal();
-}
-
-.isRootFullWidth {
-    @include box-field-layout.full-width();
-}
-
-.isRootInFormLayout {
-    @include box-field-layout.in-form-layout();
-}
-
-// Sizes
-.isRootSizeSmall {
-    @include box-field-sizes.size(small, $is-multiline: true);
-}
-
-.isRootSizeMedium {
-    @include box-field-sizes.size(medium, $is-multiline: true);
-}
-
-.isRootSizeLarge {
-    @include box-field-sizes.size(large, $is-multiline: true);
-}