@fkui/design 5.36.0

package/src/components/radio-button/_radio-button.scss

@@ -0,0 +1,106 @@
+@use "../../core/size";
+@use "../../core/mixins/focus" as *;
+@use "../../core/mixins/sr-only" as *;
+@use "../../core/utils/functions" as *;
+
+$radio_button_label_offset: 0.1rem;
+$RADIO_BUTTON_SELECTOR: ".radio-button" !default;
+
+#{$RADIO_BUTTON_SELECTOR} {
+    min-height: var(--f-height-medium);
+    margin-bottom: densify(size.$margin-100);
+    margin-right: size.$margin-150;
+
+    &:last-child {
+        margin-bottom: 0;
+        margin-right: 0;
+    }
+
+    &__input {
+        @include sr-only;
+
+        // Set height so that IE11 will scroll element into view when navigating (tab, arrow).
+        // Use 4 times the height of radio-button to ensure it is inside the view.
+        // This height will not be visible.
+        min-height: calc(4 * var(--f-height-medium));
+    }
+
+    &__label {
+        min-width: 4.5rem; // set to avoid being too small when limited or no text is used
+        cursor: pointer;
+        display: inline-block;
+        font-size: var(--f-font-size-standard);
+        line-height: var(--f-line-height-small);
+        padding-left: size.$padding-175;
+        padding-top: $radio_button_label_offset;
+        padding-bottom: $radio_button_label_offset;
+        position: relative;
+
+        // Safari: required to make label clickable
+        * {
+            pointer-events: none;
+        }
+
+        &::before,
+        &::after {
+            border-radius: 50%;
+            content: "";
+            height: var(--f-icon-size-medium);
+            left: 0;
+            margin: $radio_button_label_offset 0;
+            position: absolute;
+            top: 0;
+            cursor: pointer;
+            width: var(--f-icon-size-medium);
+            border: var(--f-border-width-medium) solid var(--f-border-color-input);
+            display: block;
+            transition:
+                background-color ease var(--f-animation-duration-medium),
+                border-color ease var(--f-animation-duration-medium),
+                opacity ease var(--f-animation-duration-medium);
+        }
+
+        // Outer ring of the custom radio input
+        &::before {
+            background: var(--f-background-input);
+            box-shadow: inset 0 0 0 var(--f-border-width-medium) var(--f-border-color-input-inner);
+        }
+
+        // Inner ring of the custom radio input
+        &::after {
+            background: var(--f-background-input-selected);
+            box-shadow: inset 0 0 0 var(--f-border-width-medium) var(--f-border-color-input-inner-selected);
+            opacity: 0;
+        }
+    }
+
+    &.disabled {
+        color: var(--f-text-color-input-disabled);
+
+        #{$RADIO_BUTTON_SELECTOR}__label {
+            &::before,
+            &::after {
+                border: var(--f-border-width-medium) solid var(--f-text-color-input-disabled);
+                box-shadow: inset 0 0 0 var(--f-border-width-medium) var(--f-border-color-input-inner-disabled);
+            }
+
+            &::after {
+                background: var(--f-background-input-selected-disabled);
+            }
+        }
+    }
+
+    // Hide inner ring by default
+    input[type="radio"] + label::after {
+        opacity: 0;
+    }
+
+    // Show inner ring when checked
+    input[type="radio"]:checked + label::after {
+        opacity: 1;
+    }
+
+    input[type="radio"]:focus + label {
+        @include focus-indicator;
+    }
+}

package/src/components/select-field/_select-field.scss

@@ -0,0 +1,88 @@
+@use "../../core";
+@use "../icon/icon";
+@use "../../core/size";
+@use "../../core/utils/functions" as *;
+
+$SELECT_FIELD_SELECTOR: ".select-field" !default;
+
+#{$SELECT_FIELD_SELECTOR} {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    margin: 0 0 densify(var(--f-margin-component-bottom));
+    position: relative;
+    width: var(--f-width-full);
+
+    &--inline {
+        @include core.label-inline;
+    }
+
+    &--table {
+        margin-bottom: 0;
+    }
+
+    &--table-error {
+        #{$SELECT_FIELD_SELECTOR}__select {
+            padding-right: calc(var(--f-icon-size-large) + 2.25rem);
+        }
+    }
+
+    &__select {
+        appearance: none;
+        background-color: var(--f-background-input);
+        box-shadow: var(--f-input-shadow-inset);
+        border-radius: var(--f-border-radius-medium);
+        border: var(--f-border-width-medium) solid var(--f-border-color-input);
+        color: var(--f-text-color-default);
+        cursor: pointer;
+        min-height: densify(var(--f-height-large));
+        padding: var(--padding-input-fields);
+        width: var(--f-width-full);
+
+        &:hover {
+            background-color: var(--f-background-input-hover);
+        }
+
+        &:focus {
+            background-color: var(--f-background-input);
+        }
+
+        &:disabled {
+            border-color: var(--f-border-color-input-disabled);
+            color: var(--f-text-color-input-disabled);
+            background-color: var(--f-background-input-disabled);
+            opacity: 1;
+        }
+    }
+
+    &__select:disabled + &__icon {
+        color: var(--f-text-color-button-disabled);
+    }
+
+    &__icon-wrapper {
+        position: relative;
+    }
+
+    &__icon {
+        @extend %icon--inset-top-right;
+
+        color: var(--f-icon-color-primary);
+    }
+
+    &__error-popup-icon {
+        color: var(--f-text-color-error);
+        display: inline;
+        position: absolute;
+        right: calc(var(--f-icon-size-large) + 0.75rem);
+        top: size.$margin-050;
+        height: var(--f-icon-size-large);
+        width: var(--f-icon-size-large);
+        overflow: hidden;
+        text-align: center;
+    }
+    &--error {
+        #{$SELECT_FIELD_SELECTOR}__select {
+            border-color: var(--f-border-color-error);
+        }
+    }
+}

package/src/components/sort-filter-dataset/_sort-filter-dataset.scss

@@ -0,0 +1,70 @@
+@use "../../core";
+@use "../../core/size";
+
+$SORT_FILTER_DATASET_SELECTOR: ".sort-filter-dataset" !default;
+
+// Selectfield
+$sortfilter-field-margin-bottom: 0.85rem !default;
+
+// Selectfield label
+$sortfilter-field-label-margin-right: size.$margin-100 !default;
+$sortfilter-field-label-padding-top: size.$padding-050 !default;
+
+// Header
+$sortfilter-header-font-size: var(--f-font-size-h2) !default;
+$sortfilter-header-padding-top: size.$padding-025 !default;
+
+#{$SORT_FILTER_DATASET_SELECTOR} {
+    &__sort {
+        min-width: 80px;
+    }
+
+    &__search {
+        position: relative;
+
+        input {
+            padding-left: 2.1rem;
+            padding-right: 2.1rem;
+
+            @include core.breakpoint-up(md) {
+                width: 160px;
+            }
+        }
+
+        &__magnify-icon {
+            position: absolute;
+            left: size.$margin-175;
+            height: var(--f-height-large);
+
+            /* same as textfield */
+            z-index: 1;
+
+            /* In front of input field */
+            width: 1.2rem;
+            color: var(--f-icon-color-sort-filter-dataset-search);
+
+            @include core.breakpoint-down(sm) {
+                top: size.$margin-150;
+                left: size.$margin-075;
+            }
+        }
+
+        &__close-icon.button--discrete {
+            position: absolute;
+            top: calc(-1 * size.$margin-075);
+            right: 0;
+            color: var(--f-icon-color-sort-filter-dataset-close);
+            cursor: pointer;
+            padding: 1rem;
+
+            @include core.breakpoint-down(sm) {
+                top: size.$margin-100;
+            }
+        }
+
+        &__close-icon.button--discrete:hover {
+            box-shadow: none;
+            background-color: transparent;
+        }
+    }
+}

package/src/components/static-panel/_static-panel.scss

@@ -0,0 +1,31 @@
+@use "../../core/size";
+
+$STATIC_PANEL_SELECTOR: ".static-panel" !default;
+
+#{$STATIC_PANEL_SELECTOR} {
+    margin-bottom: 2.5rem;
+
+    &__heading {
+        background: var(--f-background-heading-static-panel);
+        border: var(--f-static-panel-heading-border);
+        border-bottom: 0;
+        font-size: var(--f-font-size-h3);
+        line-height: 2rem;
+        margin-bottom: 0;
+        padding: size.$padding-025 size.$padding-100;
+    }
+
+    &__content {
+        border-top: 0;
+        border: var(--f-border-width-medium) solid var(--f-border-color-panel);
+        padding: size.$padding-175 size.$padding-150;
+    }
+
+    &__icon {
+        height: var(--f-icon-size-x-large);
+        margin-right: size.$margin-025;
+        position: relative;
+        top: size.$margin-050;
+        width: var(--f-icon-size-x-large);
+    }
+}

package/src/components/table/_table.scss

@@ -0,0 +1,415 @@
+@use "../../core/size";
+@use "../../core/utils/functions" as *;
+
+$TABLE_SELECTOR: ".table" !default;
+
+// General variables
+$table-font-size: var(--f-font-size-standard) !default;
+$table-focus-size: 2px !default;
+$table-margin: 0 0 densify(var(--f-margin-component-bottom)) !default;
+
+// Caption
+$table-caption-background: transparent !default;
+$table-caption-foreground: var(--f-text-color-default) !default;
+
+// Header
+$table-header-background: var(--f-background-grid-header) !default;
+$table-header-foreground: var(--f-text-color-default) !default;
+$table-header-separator: 1px solid var(--f-border-color-grid) !default;
+$table-header-padding: densify(size.$padding-025) size.$padding-050 !default;
+$table-header-border: 2px solid var(--f-border-color-grid-header) !default;
+$table-header-font-weight: var(--f-font-weight-medium) !default;
+
+// Column description
+$table-description-foreground: var(--f-text-color-discrete) !default;
+$table-description-background: transparent !default;
+$table-description-font-weight: var(--f-font-weight-normal) !default;
+
+// Rows
+$table-row-background: var(--f-background-grid-default) !default;
+$table-row-background-alt: var(--f-background-grid-striped) !default;
+$table-row-foreground: var(--f-text-color-default) !default;
+$table-row-separator: 1px solid var(--f-border-color-grid) !default;
+$table-row-font-weight: var(--f-font-weight-normal) !default;
+$table-row-line-height: densify(1.5rem) !default;
+
+// Input fields in table cells
+$table-input-margin-top: densify(size.$margin-025);
+$table-input-min-width: size.$padding-175;
+$table-input-height: size.$padding-175;
+$table-input-offset-vertical: densify(0.15rem);
+$table-input-offset-horizontal: 0.25rem;
+
+%table-monospace {
+    // IE11
+    font-feature-settings: tnum 1;
+
+    // others
+    font-variant-numeric: tabular-nums;
+}
+
+%table-row-normal {
+    background: $table-row-background;
+    color: $table-row-foreground;
+}
+
+%table-row-striped {
+    background: $table-row-background-alt;
+    color: $table-row-foreground;
+}
+
+%table-row-hover {
+    background: var(--f-background-grid-hover);
+    color: $table-row-foreground;
+    outline: 1px solid var(--f-border-color-grid-hover);
+}
+
+%table-row-focus-within {
+    background: var(--f-background-grid-focus-inner);
+    color: $table-row-foreground;
+}
+
+%table-row-focus {
+    background: var(--f-background-grid-hover);
+    color: $table-row-foreground;
+    outline: $table-focus-size solid var(--f-color-focus);
+
+    // override shadow set by [tabindex]
+    box-shadow: none;
+}
+
+%table-row-selected {
+    background: var(--f-background-grid-selected);
+    color: $table-row-foreground;
+}
+
+%table-row-active {
+    background: var(--f-background-grid-active);
+    color: $table-row-foreground;
+}
+
+%table-row-expanded-border {
+    border-bottom-color: var(--f-border-color-grid-expanded);
+}
+
+%table-row-expandable {
+    cursor: pointer;
+}
+
+%table-row-collapsed {
+    visibility: collapse;
+}
+
+#{$TABLE_SELECTOR} {
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: $table-font-size;
+    margin: $table-margin;
+    width: 100%;
+
+    // preoccupy the space needed for focus border so the size is not affected
+    // while focus is active
+    border: $table-focus-size solid transparent;
+
+    &:focus {
+        // border color is used instead of dual-color shadow because when
+        // combined with scroll the edges are cut by overflow of the container
+        // element, especially on the right side.
+        border-color: var(--f-color-focus);
+
+        // override shadow set by [tabindex]
+        box-shadow: none;
+    }
+
+    caption {
+        background: $table-caption-background;
+        color: $table-caption-foreground;
+        font-size: var(--f-font-size-standard);
+        font-weight: var(--f-font-weight-medium);
+        line-height: var(--f-line-height-large);
+        margin-bottom: densify(size.$margin-025);
+        width: var(--f-width-full);
+        text-align: left;
+    }
+
+    thead {
+        th {
+            background: $table-header-background;
+            border-bottom: $table-header-border;
+            border-right: $table-header-separator;
+            color: $table-header-foreground;
+            font-weight: $table-header-font-weight;
+            line-height: var(--f-line-height-large);
+            padding: $table-header-padding;
+            vertical-align: top;
+
+            &:last-child {
+                border-right: none;
+            }
+
+            #{$TABLE_SELECTOR}__column__header__icon {
+                color: var(--f-icon-color-table-header);
+                height: var(--f-icon-size-x-small);
+                width: var(--f-icon-size-x-small);
+                min-width: var(--f-icon-size-x-small);
+
+                &--discrete {
+                    color: var(--f-icon-color-table-header-discrete);
+                }
+            }
+        }
+    }
+
+    tbody {
+        #{$TABLE_SELECTOR}__row {
+            @extend %table-row-normal;
+
+            &--normal {
+                @extend %table-row-normal;
+            }
+
+            &--striped {
+                @extend %table-row-striped;
+            }
+
+            &--hover {
+                @extend %table-row-hover;
+            }
+
+            &--expandable {
+                @extend %table-row-expandable;
+            }
+
+            &--expanded-border {
+                td,
+                th {
+                    @extend %table-row-expanded-border;
+                }
+            }
+
+            &:focus-within,
+            &--focus-within {
+                @extend %table-row-focus-within;
+
+                // these have higher priority
+                &#{$TABLE_SELECTOR}__row {
+                    &--selected {
+                        @extend %table-row-selected;
+                    }
+
+                    &--active {
+                        @extend %table-row-active;
+                    }
+                }
+            }
+
+            &:focus,
+            &--focus {
+                @extend %table-row-focus;
+
+                // these have higher priority
+                &#{$TABLE_SELECTOR}__row {
+                    &--selected {
+                        @extend %table-row-selected;
+                    }
+
+                    &--active {
+                        @extend %table-row-active;
+                    }
+                }
+            }
+
+            &--selected {
+                @extend %table-row-selected;
+            }
+
+            &--active {
+                @extend %table-row-active;
+            }
+        }
+
+        #{$TABLE_SELECTOR}__expandable-row {
+            @extend %table-row-normal;
+
+            &--collapsed {
+                visibility: collapse;
+            }
+        }
+
+        td,
+        th {
+            padding: densify(var(--f-table-body-row-padding)) var(--f-table-body-row-padding);
+            border-bottom: $table-row-separator;
+            white-space: nowrap;
+        }
+
+        td {
+            line-height: $table-row-line-height;
+            font-weight: $table-row-font-weight;
+        }
+
+        th {
+            border-right: $table-header-separator;
+            font-weight: $table-header-font-weight;
+            line-height: $table-row-line-height;
+        }
+
+        #{$TABLE_SELECTOR}__column {
+            // apply monospace font only on tbody rows, not thead
+            &--numeric,
+            &--date {
+                @extend %table-monospace;
+            }
+
+            &--selectable {
+                padding: densify(0.2rem) 0.2rem;
+            }
+
+            &--indented {
+                padding-left: size.$padding-150;
+            }
+
+            // remove margin and reduce padding on buttons
+            &--action .button--discrete {
+                border-radius: var(--f-button-discrete-table-column-action-border-radius);
+                margin: var(--f-button-discrete-table-column-action-margin);
+                /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */
+                padding-top: densify(var(--f-button-discrete-table-column-action-padding-top));
+                padding-right: var(--f-button-discrete-table-column-action-padding-right);
+                padding-bottom: densify(var(--f-button-discrete-table-column-action-padding-bottom));
+                padding-left: var(--f-button-discrete-table-column-action-padding-left);
+                /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+                min-width: 24px;
+            }
+
+            &--action .button__icon {
+                margin: var(--f-button-discrete-table-column-action-icon-margin);
+            }
+        }
+    }
+
+    &__column {
+        &--text {
+            text-align: left;
+        }
+
+        &--numeric {
+            text-align: right;
+        }
+
+        &--date {
+            text-align: left;
+        }
+
+        &--action {
+            text-align: center;
+        }
+
+        &--shrink {
+            width: 1px;
+            white-space: nowrap;
+        }
+
+        &--sortable {
+            cursor: pointer;
+        }
+
+        &__description {
+            display: block;
+            background: $table-description-background;
+            color: $table-description-foreground;
+            font-weight: $table-description-font-weight;
+        }
+    }
+
+    &--striped tbody {
+        #{$TABLE_SELECTOR}__row:nth-child(even) {
+            @extend %table-row-striped;
+
+            // these have higher priority
+            &#{$TABLE_SELECTOR}__row {
+                &--selected {
+                    @extend %table-row-selected;
+                }
+
+                &--active {
+                    @extend %table-row-active;
+                }
+            }
+        }
+    }
+
+    &--hover tbody {
+        #{$TABLE_SELECTOR}__row:hover {
+            @extend %table-row-hover;
+
+            // these have higher priority
+            &#{$TABLE_SELECTOR}__row {
+                &--selected {
+                    @extend %table-row-selected;
+                }
+
+                &--active {
+                    @extend %table-row-active;
+                }
+            }
+        }
+    }
+
+    &--selectable #{$TABLE_SELECTOR}__row {
+        td:hover,
+        th:hover {
+            cursor: pointer;
+        }
+    }
+
+    &__scroll {
+        // move margin from <table> to the wrapper div
+        margin: $table-margin;
+
+        #{$TABLE_SELECTOR} {
+            margin: 0;
+        }
+
+        &--horizontal {
+            overflow-x: auto;
+        }
+
+        &--vertical {
+            overflow-y: auto;
+        }
+    }
+
+    &__input {
+        margin-top: $table-input-margin-top;
+
+        .checkbox__label,
+        .radio-button__label {
+            min-width: $table-input-min-width;
+            min-height: $table-input-height;
+            padding: 0;
+        }
+
+        .checkbox__label::after,
+        .checkbox__label::before,
+        .radio-button__label::after,
+        .radio-button__label::before {
+            top: $table-input-offset-vertical;
+            left: $table-input-offset-horizontal;
+        }
+    }
+
+    &__expand-icon {
+        color: var(--f-icon-color-primary);
+        background: transparent;
+        border: 0;
+        flex: 0 0 auto;
+        padding: 0;
+        pointer-events: none;
+        width: 1.5rem;
+        height: 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}