@fkui/design 5.36.0

package/src/components/checkbox/_checkbox.scss

@@ -0,0 +1,111 @@
+@use "../../core/size";
+@use "../../core/mixins/focus" as *;
+@use "../../core/mixins/sr-only" as *;
+@use "../../core/utils/functions" as *;
+
+$checkbox_label_offset: 0.1rem;
+$CHECKBOX_SELECTOR: ".checkbox" !default;
+
+%checkbox-icon-white {
+    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cmVjdCB4PSIzLjQ3NCIgeT0iOS4xOTQiIGZpbGw9IiMzQzU1OTIiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiLz4KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTguMzc2LDE1LjAwNWMtMC40MTYsMC0wLjgzMi0wLjE1OC0xLjE0OS0wLjQ3NWwtMy4yNS0zLjI0M2MtMC42MzUtMC42MzQtMC42MzUtMS42NiwwLTIuMjkzCgljMC42MzUtMC42MzMsMS42NjMtMC42MzMsMi4yOTgsMGwyLjEwMSwyLjA5N2w1LjM1MS01LjM0YzAuNjM1LTAuNjM0LDEuNjYzLTAuNjM0LDIuMjk4LDBjMC42MzUsMC42MzMsMC42MzUsMS42NTksMCwyLjI5MwoJbC02LjUsNi40ODdDOS4yMDcsMTQuODQ3LDguNzkyLDE1LjAwNSw4LjM3NiwxNS4wMDV6Ii8+Cjwvc3ZnPgo=");
+}
+
+#{$CHECKBOX_SELECTOR} {
+    min-height: var(--f-height-medium);
+    margin-bottom: densify(size.$margin-100);
+
+    &:last-child {
+        margin-bottom: 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 {
+        // Set min-width to avoid being too small when little or no text is used.
+        min-width: 4.5rem;
+        display: inline-block;
+        cursor: pointer;
+        font-size: var(--f-font-size-standard);
+        line-height: var(--f-line-height-small);
+        padding-left: size.$padding-175;
+        padding-top: $checkbox_label_offset;
+        padding-bottom: $checkbox_label_offset;
+        position: relative;
+
+        // Safari: required to make label clickable
+        * {
+            pointer-events: none;
+        }
+
+        &::before,
+        &::after {
+            content: "";
+            height: var(--f-icon-size-medium);
+            left: 0;
+            margin: $checkbox_label_offset 0;
+            position: absolute;
+            top: 0;
+            width: var(--f-icon-size-medium);
+        }
+
+        &::before {
+            background: var(--f-background-input);
+            border: var(--f-border-width-medium) solid var(--f-border-color-input);
+            border-radius: var(--f-border-radius-small);
+            cursor: pointer;
+            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);
+        }
+
+        &::after {
+            @extend %checkbox-icon-white;
+
+            background-color: transparent;
+            opacity: 0;
+            transition: opacity ease var(--f-animation-duration-medium);
+        }
+    }
+
+    &.disabled {
+        color: var(--f-text-color-input-disabled);
+
+        #{$CHECKBOX_SELECTOR}__label {
+            cursor: default;
+
+            &::before {
+                border: var(--f-border-width-medium) solid var(--f-text-color-input-disabled);
+                cursor: inherit;
+            }
+        }
+
+        input[type="checkbox"]:checked + label::before {
+            background: var(--f-background-input-selected-disabled);
+        }
+    }
+
+    input[type="checkbox"]:checked + label::before {
+        background-color: var(--f-background-input-selected);
+    }
+
+    input[type="checkbox"]:not(:checked) + #{$CHECKBOX_SELECTOR}__label::before {
+        box-shadow: var(--f-input-shadow-inset);
+    }
+
+    input[type="checkbox"]:checked + #{$CHECKBOX_SELECTOR}__label::after {
+        opacity: 1;
+    }
+
+    input[type="checkbox"]:focus + #{$CHECKBOX_SELECTOR}__label {
+        @include focus-indicator;
+    }
+}

package/src/components/chip/_chip.scss

@@ -0,0 +1,91 @@
+@use "../../core/size";
+@use "../../core/mixins/breakpoints" as bp;
+
+$chip-border-radius: 20px;
+
+@mixin chip($group, $item, $type) {
+    .#{$group}--chip {
+        .#{$group}__label {
+            margin-bottom: size.$margin-025;
+        }
+
+        .#{$group}__content {
+            margin: -0.25rem;
+        }
+
+        .#{$item} {
+            margin: 0;
+            padding: size.$padding-025;
+
+            &.disabled {
+                .#{$item}__label {
+                    background: var(--f-background-button-disabled);
+                    border-color: var(--f-border-color-button-disabled);
+                    color: var(--f-text-color-button-disabled);
+                    cursor: not-allowed;
+                }
+            }
+        }
+
+        .#{$item}__label {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            font-weight: var(--f-font-weight-medium);
+            padding: size.$padding-050 size.$padding-100;
+            border-radius: $chip-border-radius;
+            border: var(--f-border-width-medium) solid var(--f-border-color-input);
+            background-color: var(--f-background-chip);
+            color: var(--f-text-color-chip);
+            justify-content: center;
+            max-width: 400px;
+            user-select: none;
+
+            &::before,
+            &::after {
+                display: none;
+            }
+
+            svg {
+                margin-right: size.$margin-050;
+            }
+        }
+
+        .#{$item}__label:hover {
+            border-color: var(--f-border-color-chip-hover);
+            background-color: var(--f-background-chip-hover);
+            color: var(--f-text-color-chip-hover);
+        }
+
+        input[type="#{$type}"]:checked + .#{$item}__label {
+            background: var(--f-background-chip-active);
+            border-color: var(--f-border-color-chip-active);
+            color: var(--f-text-color-chip-active);
+        }
+
+        input[type="#{$type}"]:focus + label.#{$item}__label {
+            border-radius: $chip-border-radius;
+        }
+    }
+
+    .#{$group}--chip.#{$group}--horizontal {
+        .#{$group}__content {
+            flex-flow: row wrap;
+
+            .#{$item} {
+                margin-bottom: 0;
+            }
+
+            @include bp.breakpoint-down(sm) {
+                flex-flow: row wrap;
+
+                .#{$item} {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+
+@include chip("radio-button-group", "radio-button", "radio");
+@include chip("checkbox-group", "checkbox", "checkbox");

package/src/components/close-button/_close-button.scss

@@ -0,0 +1,16 @@
+.close-button {
+    align-items: center;
+    background: inherit;
+    border: none;
+    color: var(--f-text-color-close-button);
+    cursor: pointer;
+    display: flex;
+    font-weight: 700;
+    gap: 0.5rem;
+    margin: 0.375rem;
+    padding: 0.125rem 0.625rem;
+
+    .icon {
+        min-width: var(--f-icon-size-small);
+    }
+}

package/src/components/contextmenu/_contextmenu.scss

@@ -0,0 +1,54 @@
+@use "../../core/size";
+@use "../../core/mixins/breakpoints";
+@use "../../core/config-variables";
+
+$CONTEXTMENU_SELECTOR: ".contextmenu" !default;
+
+#{$CONTEXTMENU_SELECTOR} {
+    min-width: 260px;
+    background-color: var(--f-background-popupmenu);
+
+    &__list {
+        margin: 0;
+        border: 1px solid var(--f-border-color-popupmenu);
+        padding: size.$padding-050;
+        display: block;
+        list-style-type: none;
+
+        &__item {
+            cursor: pointer;
+            white-space: normal;
+            display: flex;
+            align-items: center;
+            padding: size.$padding-075;
+
+            a,
+            a:visited,
+            a:active {
+                color: var(--f-text-color-popupmenu);
+            }
+
+            &:hover {
+                color: var(--f-text-color-popupmenu-hover);
+                background-color: var(--f-background-popupmenu-vertical-hover);
+            }
+
+            // when desktop, long texts expands popup
+            @include breakpoints.breakpoint-up(md) {
+                white-space: nowrap;
+            }
+        }
+    }
+
+    &__separator {
+        margin: 0.75rem;
+        height: 1px;
+        border: none;
+        border-top: 1px solid var(--f-border-color-separator-contextmenu);
+    }
+
+    &__lefticon {
+        margin-right: 0.75rem;
+        min-width: var(--f-icon-size-small);
+    }
+}

package/src/components/crud-dataset/_crud-dataset.scss

@@ -0,0 +1,18 @@
+$CRUD_DATASET_SELECTOR: ".crud-dataset" !default;
+$crud-dataset-add-button-margin-top: 0.5rem !default;
+$crud-dataset-add-button-margin-left: 2px !default; // to line up with table or list that has 2px border
+
+#{$CRUD_DATASET_SELECTOR} {
+    margin: 0 0 var(--f-margin-component-bottom);
+
+    &__add-button {
+        margin-bottom: 0 !important;
+        margin-top: $crud-dataset-add-button-margin-top !important;
+        margin-left: $crud-dataset-add-button-margin-left;
+    }
+
+    .list,
+    .table {
+        margin-bottom: 0;
+    }
+}

package/src/components/datepicker-field/_datepicker-field.scss

@@ -0,0 +1,76 @@
+@use "../../core/size";
+@use "../../core/config-variables";
+@use "../../core/mixins/breakpoints";
+@use "../../core/utils/functions" as *;
+
+$DATEPICKER_FIELD_SELECTOR: ".datepicker-field" !default;
+$POPUP_SELECTOR: ".popup" !default;
+
+// 40px = popup spacing (20px) * 2
+$popup-spacing: 40px;
+$calendar-width: calc(100vw - #{$popup-spacing});
+
+#{$DATEPICKER_FIELD_SELECTOR} {
+    &__button {
+        background: transparent;
+        border: 0;
+        flex: 0 0 auto;
+        padding: 0;
+        cursor: pointer;
+
+        .icon {
+            color: var(--f-icon-color-primary);
+            min-height: var(--f-icon-size-large);
+            min-width: var(--f-icon-size-large);
+            height: densify(var(--f-icon-size-x-large));
+            width: densify(var(--f-icon-size-x-large));
+            vertical-align: middle;
+        }
+
+        &:disabled .icon {
+            color: var(--f-icon-color-discrete);
+        }
+    }
+
+    &__popup {
+        // 16px = popup spacing (20px) - 4px
+        margin-top: -16px;
+        border-radius: var(--f-border-radius-medium);
+        border: var(--f-border-width-small) solid var(--f-border-color-modal);
+        background-color: var(--f-background-content);
+    }
+
+    &__close {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    &__close > &__close__button {
+        margin: 0;
+        padding: 1rem;
+    }
+}
+
+#{$POPUP_SELECTOR}--overlay #{$DATEPICKER_FIELD_SELECTOR} {
+    &__popup {
+        width: $calendar-width;
+        max-width: 28rem;
+    }
+}
+
+#{$POPUP_SELECTOR}--inline #{$DATEPICKER_FIELD_SELECTOR} {
+    &__popup {
+        width: 100%;
+    }
+    &__table {
+        margin-top: 0;
+    }
+    &__table .calendar-month__cell {
+        padding: 0;
+        border-bottom: unset;
+    }
+    &__table .calendar-month__header-cell {
+        background-color: unset;
+        border: unset;
+    }
+}

package/src/components/dialogue-tree/_dialogue-tree.scss

@@ -0,0 +1,54 @@
+.dialogue-tree {
+    margin: 0 0 var(--f-margin-component-bottom);
+
+    &__list {
+        margin-left: 0;
+        padding-left: 0;
+        list-style-type: none;
+        border-radius: 2px;
+        border: 1px solid var(--f-border-color-dialogue-tree);
+
+        &-item {
+            background-color: var(--f-background-dialogue-tree);
+            border-bottom: 1px solid var(--f-border-color-dialogue-tree);
+            padding: 0.25em;
+            height: 60px;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            &:hover {
+                background-color: var(--f-background-dialogue-tree-hover);
+            }
+
+            button {
+                padding: 0 0.75em;
+                border: 0;
+                width: 100%;
+                height: 100%;
+                background-color: inherit;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                span {
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    font-weight: var(--f-font-weight-medium);
+                    font-size: var(--f-font-size-standard);
+                    color: var(--f-text-color-default);
+                    text-align: left;
+                    cursor: pointer;
+                }
+
+                .icon {
+                    flex-shrink: 0;
+                    margin-left: 1.25rem;
+                }
+            }
+        }
+    }
+}

package/src/components/entrypoint/_entrypoint.scss

@@ -0,0 +1,40 @@
+@use "../button/button";
+@use "../../core/mixins";
+@use "../../core/size";
+
+$ENTRYPOINT_SELECTOR: ".entrypoint" !default;
+
+#{$ENTRYPOINT_SELECTOR} {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
+    @extend .button;
+    @include mixins.make-button-variant($ENTRYPOINT_SELECTOR, button.$button--primary...);
+
+    & {
+        text-align: left;
+        padding: size.$padding-100 calc(size.$padding-200 * 2) size.$padding-100 size.$padding-100;
+        line-height: var(--f-line-height-large);
+        width: 66.667%;
+    }
+
+    @include mixins.breakpoint-down(sm) {
+        min-width: 100%;
+    }
+
+    &--full-width {
+        min-width: 100%;
+    }
+
+    &__icon {
+        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
+        @extend .button__icon--end;
+
+        color: var(--f-icon-color-white);
+        top: 50%;
+        transform: translate(0, -50%);
+    }
+
+    &:hover {
+        // override anchor's underline hover effect
+        padding-bottom: size.$padding-100;
+    }
+}

package/src/components/error-list/_error-list.scss

@@ -0,0 +1,54 @@
+@use "../../core/config-variables";
+@use "../../core/size";
+@use "../../core/utils/functions" as *;
+
+$ERROR_LIST_SELECTOR: ".error-list" !default;
+
+#{$ERROR_LIST_SELECTOR} {
+    color: var(--f-text-color-error);
+    margin: 0 0 densify(var(--f-margin-component-bottom));
+
+    &--list-style-none {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    &--padding-left {
+        padding-left: size.$padding-100;
+    }
+
+    &__list {
+        margin: 0;
+        line-height: max(1.5, densify(2));
+    }
+
+    &__bullet::before {
+        color: var(--f-text-color-error);
+        content: "•";
+        display: inline;
+        font-size: var(--f-font-size-h4);
+        line-height: 0;
+        margin-right: size.$margin-075;
+    }
+
+    &__link {
+        color: var(--f-text-color-error);
+        cursor: pointer;
+        list-style-position: inside;
+        text-decoration: underline;
+
+        a {
+            color: var(--f-text-color-error);
+        }
+    }
+
+    &__icon {
+        max-width: none;
+        position: relative;
+        top: 3px;
+    }
+
+    &--list-item {
+        display: list-item;
+    }
+}

package/src/components/expandable-panel/_expandable-panel.scss

@@ -0,0 +1,113 @@
+@use "../../core/mixins/circle";
+@use "../../core/typography/headings";
+@use "../icon/icon";
+@use "../../core/size";
+@use "../../core/utils/functions" as *;
+
+$EXPANDABLE_PANEL_SELECTOR: ".expandable-panel" !default;
+$EXPANDABLE_PANEL_LINE_HEIGHT: var(--f-line-height-medium);
+$ICON_MARGIN: 0.5rem;
+$ICON_WIDTH: var(--f-icon-size-medium);
+
+#{$EXPANDABLE_PANEL_SELECTOR} {
+    margin-bottom: densify(size.$margin-200);
+
+    &__icon {
+        @include circle.circle($background: var(--f-icon-color-expandable-panel), $size: $ICON_WIDTH);
+
+        margin-top: calc((#{$EXPANDABLE_PANEL_LINE_HEIGHT} * 1em - #{$ICON_WIDTH}) / 2); // Unit "em" intended here, align icon to header
+        display: flex;
+        color: var(--f-background-heading-expandable-panel);
+        padding: 3px; // cross icon size
+        flex-shrink: 0; // needed for IE11
+        margin-right: $ICON_MARGIN;
+        .icon {
+            transition: transform var(--f-animation-duration-long) ease;
+        }
+    }
+
+    &.expandable-panel--expanded {
+        .expandable-panel__icon {
+            svg:nth-child(2) {
+                transform: rotate(0);
+            }
+        }
+
+        .expandable-panel__content {
+            height: auto;
+        }
+
+        .expandable-panel__heading button {
+            border: var(--f-expandable-panel-heading-border-open);
+        }
+    }
+
+    &.expandable-panel--collapsed {
+        .expandable-panel__icon {
+            svg:nth-child(2) {
+                transform: rotate(-90deg);
+            }
+        }
+    }
+
+    &__heading {
+        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
+        @extend .heading--h3;
+
+        margin-bottom: 0 !important;
+
+        button {
+            background-color: var(--f-background-heading-expandable-panel);
+            border: var(--f-expandable-panel-heading-border-close);
+            border-radius: var(--f-expandable-panel-heading-border-radius);
+            color: var(--f-text-color-heading-expandable-panel);
+            cursor: pointer;
+            display: flex;
+            margin: 0;
+            padding: densify(size.$padding-100) size.$padding-100;
+            position: relative;
+            text-align: left;
+            width: 100%;
+
+            &:focus,
+            &:hover {
+                background-color: var(--f-background-heading-expandable-panel-hover);
+            }
+        }
+    }
+
+    &__notification {
+        @include circle.circle(
+            $background: var(--f-icon-color-notice),
+            $border: var(--f-border-width-medium) solid var(--f-icon-color-white),
+            $size: var(--f-icon-size-x-large)
+        );
+
+        display: inline-block;
+        padding: 0.27rem;
+        position: absolute;
+        right: 1.5rem;
+        top: calc(-0.5 * size.$padding-150);
+        line-height: 0;
+
+        svg {
+            color: var(--f-icon-color-white);
+            height: auto;
+            width: auto;
+        }
+    }
+
+    &__content {
+        height: 0;
+        overflow: hidden;
+        transition: height var(--f-animation-duration-medium) ease-in;
+    }
+
+    &__body {
+        background-color: var(--f-background-expandable-panel);
+        border: var(--f-border-width-medium) solid var(--f-border-color-panel);
+        border-top: 0;
+        line-height: inherit;
+        padding: densify(size.$padding-150) size.$padding-150;
+    }
+}