@fkui/design 5.36.0

package/src/components/modal/_modal.scss

@@ -0,0 +1,190 @@
+@use "sass:map";
+@use "../../core/size";
+@use "../z-index";
+@use "../../core/mixins/breakpoints";
+
+$MODAL_SELECTOR: ".modal" !default;
+$modal-sizes: (
+    "small": var(--f-modal-size-small),
+    "medium": var(--f-modal-size-medium),
+    "large": var(--f-modal-size-large),
+    "fullwidth": var(--f-modal-size-fullwidth),
+) !default;
+$modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
+
+// @at-root is used to set these classes globally due to styling scope issue where the component is used out of the styling scope
+@at-root {
+    #{$MODAL_SELECTOR} {
+        &__open {
+            // both of these properties is used to prevent scrolling in the background
+            overflow: hidden;
+            position: fixed;
+            left: 0;
+            right: 0;
+        }
+    }
+}
+
+#{$MODAL_SELECTOR} {
+    &__backdrop {
+        background: var(--f-background-overlay);
+        display: flex;
+        height: 100%;
+        inset: 0;
+        position: fixed;
+        width: 100%;
+        z-index: z-index.$MODAL_BACKDROP_ZINDEX;
+    }
+
+    &__outer-container {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        overflow: auto;
+        width: 100%;
+    }
+
+    &__inner-container {
+        align-items: center;
+        justify-content: center;
+        max-height: 100%;
+        width: 100%;
+    }
+
+    &__shelf {
+        justify-content: flex-end;
+        display: flex;
+        background-color: var(--f-background-modal-shelf);
+        border-top-left-radius: var(--f-border-radius-medium);
+        border-top-right-radius: var(--f-border-radius-medium);
+        margin-bottom: size.$margin-100;
+    }
+
+    &__header {
+        display: flex;
+        font-size: var(--f-font-size-h4);
+        margin-bottom: size.$margin-050;
+        width: 100%;
+
+        #{$MODAL_SELECTOR}__title {
+            font-size: var(--f-modal-title-font-size);
+            margin-bottom: 0;
+            margin-top: 0;
+            color: var(--f-text-color-default);
+        }
+    }
+
+    &__dialog-container {
+        background: transparent;
+        display: flex;
+        margin: auto;
+        width: $modal-width;
+
+        // desktop sizes
+        @include breakpoints.breakpoint-up(md) {
+            max-width: map.get($modal-sizes, "small");
+
+            @each $key, $size in $modal-sizes {
+                &--#{$key} {
+                    max-width: $size;
+                }
+            }
+
+            // @deprecated alias, use --large (to be removed in fkui 4.x)
+            &-large {
+                max-width: map.get($modal-sizes, "large");
+            }
+
+            // @deprecated alias, use --fullwidth (to be removed in fkui 4.x)
+            &-fullscreen {
+                max-width: map.get($modal-sizes, "fullwidth");
+            }
+        }
+
+        // mobile sizes
+        @include breakpoints.breakpoint-down(sm) {
+            &--fullscreen {
+                width: 100%;
+                max-width: none;
+
+                #{$MODAL_SELECTOR}__dialog {
+                    min-height: 100vh;
+                }
+
+                #{$MODAL_SELECTOR}__dialog-inner {
+                    flex: 1 1 auto;
+                    display: flex;
+                    flex-direction: column;
+                }
+
+                #{$MODAL_SELECTOR}__content {
+                    flex: 1 1 auto;
+                }
+            }
+        }
+    }
+
+    &__dialog {
+        background: var(--f-background-content);
+        border-radius: var(--f-border-radius-medium);
+        display: flex;
+        flex-direction: column-reverse;
+        height: auto;
+        margin: auto;
+        width: 100%;
+        position: relative;
+        z-index: z-index.$MODAL_ZINDEX;
+
+        #{$MODAL_SELECTOR}__dialog-inner {
+            height: auto;
+            margin: 0 size.$margin-150 size.$margin-150;
+
+            @include breakpoints.breakpoint-down(sm) {
+                margin: 0 size.$margin-100 size.$margin-100;
+            }
+        }
+
+        #{$MODAL_SELECTOR}__footer {
+            margin-top: size.$margin-200;
+
+            > .button-group {
+                margin-bottom: 0;
+
+                .button-group__item:last-child:not(.button--small, .button--medium) {
+                    margin-bottom: 0;
+                }
+
+                @include breakpoints.breakpoint-up(md) {
+                    .button-group__item {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+
+        /// Upper close button-group
+        > .button-group {
+            margin: 0;
+
+            .button-group__item:last-child {
+                margin: var(--f-modal-close-button-margin);
+                padding: var(--f-modal-close-button-padding);
+            }
+        }
+    }
+
+    &--information {
+        --f-background-modal-shelf: var(--f-border-color-info);
+        --f-text-color-close-button: var(--f-text-color-default-inverted);
+    }
+
+    &--warning {
+        --f-background-modal-shelf: var(--f-border-color-warning);
+    }
+
+    &--error {
+        --f-background-modal-shelf: var(--f-border-color-error);
+        --f-text-color-close-button: var(--f-text-color-default-inverted);
+    }
+}

package/src/components/navbar/_navbar-header.scss

@@ -0,0 +1,77 @@
+@use "../../core/size";
+@use "../../core/config-variables" as config;
+@use "../../core/mixins/breakpoints" as bp;
+
+$navbar-header-separator-width: 2px !default;
+
+.navbar__header {
+    color: var(--f-text-color-pageheader);
+    background-color: var(--f-background-pageheader-standard);
+    padding: size.$padding-025;
+    height: calc(4 * size.$padding-125);
+    display: flex;
+
+    &-logo,
+    &-logo--small {
+        min-width: size.$padding-125;
+        justify-content: flex-start;
+        margin: size.$margin-075 size.$margin-175;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+    }
+
+    &-logo {
+        background-image: url("#{config.$asset-path-images}/fk-logo-primary.svg");
+        flex-grow: 0.3;
+
+        @include bp.breakpoint-down(lg) {
+            background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
+            flex-grow: 0.03;
+            min-width: size.$padding-175;
+        }
+
+        &--small {
+            background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
+            flex-grow: 0.03;
+        }
+    }
+
+    &-logo,
+    &-start,
+    &-end {
+        display: flex;
+        align-items: center;
+    }
+
+    &-start {
+        justify-content: flex-start;
+        flex-grow: 0;
+
+        &::before {
+            content: " ";
+            background-color: var(--f-border-color-separator-pageheader-standard);
+            position: relative;
+            height: 80%;
+            width: $navbar-header-separator-width;
+        }
+    }
+
+    &-end {
+        justify-content: flex-end;
+        flex-grow: 1;
+    }
+
+    &-item {
+        padding: size.$padding-075 size.$padding-175;
+    }
+
+    &-app-name {
+        margin: 0;
+        font-size: var(--f-font-size-h4);
+    }
+
+    &--separator {
+        border-bottom: $navbar-header-separator-width solid var(--f-border-color-separator-pageheader-standard);
+    }
+}

package/src/components/navbar/_navbar-nav.scss

@@ -0,0 +1,30 @@
+@use "../../core/size";
+
+$navbar-item-border-bottom-width: 2px !default;
+
+.navbar__nav {
+    color: var(--f-text-color-navbar);
+    background-color: var(--f-background-navbar);
+    display: flex;
+    align-items: center;
+
+    &-item {
+        height: inherit;
+        padding: 0 size.$padding-200 size.$padding-025;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+            background-color: var(--f-background-navbar-hover);
+            border-bottom: $navbar-item-border-bottom-width solid var(--f-border-color-navbar-hover);
+            color: var(--f-text-color-navbar-active);
+        }
+
+        &--active {
+            border-bottom: $navbar-item-border-bottom-width solid var(--f-border-color-navbar-active);
+            color: var(--f-text-color-navbar-active);
+            font-weight: bold;
+        }
+    }
+}

package/src/components/navbar/_navbar.scss

@@ -0,0 +1,71 @@
+@use "../../core/size";
+@use "../../core/config-variables" as config;
+@use "../../core/mixins/breakpoints" as bp;
+
+@import "navbar-header";
+@import "navbar-nav";
+
+$NAVBAR_SELECTOR: ".navbar" !default;
+
+#{$NAVBAR_SELECTOR} {
+    &--primary {
+        .navbar__header {
+            color: var(--f-text-color-default-inverted);
+            background-color: var(--f-background-pageheader-primary);
+        }
+
+        .navbar__header-app-name {
+            color: var(--f-text-color-default-inverted);
+        }
+
+        .navbar__header-logo {
+            background-image: url("#{config.$asset-path-images}/fk-logo-default.svg");
+
+            @include bp.breakpoint-down(lg) {
+                background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
+                flex-grow: 0.03;
+                min-width: size.$padding-175;
+            }
+        }
+
+        .navbar__header-logo--small {
+            background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
+        }
+
+        .navbar__header-start::before {
+            background-color: var(--f-border-color-separator-pageheader-primary);
+        }
+
+        .navbar__header--separator {
+            border-color: var(--f-border-color-separator-pageheader-primary);
+        }
+    }
+
+    &--secondary {
+        .navbar__header {
+            background-color: var(--f-background-pageheader-secondary);
+        }
+
+        .navbar__header-logo {
+            background-image: url("#{config.$asset-path-images}/fk-logo-primary.svg");
+
+            @include bp.breakpoint-down(lg) {
+                background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
+                flex-grow: 0.03;
+                min-width: size.$padding-175;
+            }
+        }
+
+        .navbar__header-logo--small {
+            background-image: url("#{config.$asset-path-images}/fk-logo-small.svg");
+        }
+
+        .navbar__header-start::before {
+            background-color: var(--f-border-color-separator-pageheader-secondary);
+        }
+
+        .navbar__header--separator {
+            border-color: var(--f-border-color-separator-pageheader-secondary);
+        }
+    }
+}

package/src/components/offline/_offline.scss

@@ -0,0 +1,40 @@
+@use "../../core/size";
+@use "../message-box/message-box";
+@use "../z-index";
+@use "../icon/icon";
+
+$OFFLINE_SELECTOR: ".offline" !default;
+
+// @at-root is used to set these classes globally due to styling scope issue where the component is used out of the styling scope
+@at-root {
+    #{$OFFLINE_SELECTOR} {
+        @include message-box.messagebox-banner-variant($selector: $OFFLINE_SELECTOR);
+
+        & {
+            padding: size.$padding-150;
+        }
+
+        #{$OFFLINE_SELECTOR}__icon {
+            margin-top: 0;
+        }
+
+        // Since @at-root is used also icon classes being used by the component must be redefined,
+        // because they might not exist at the global scope.
+        .icon {
+            @extend %icon--base;
+        }
+
+        .icon-stack {
+            @extend %icon-stack;
+        }
+
+        &__wrapper {
+            position: fixed;
+            position: sticky;
+            z-index: z-index.$OFFLINE_ZINDEX;
+            right: 0;
+            top: 0;
+            left: 0;
+        }
+    }
+}

package/src/components/output-field/_output-field.scss

@@ -0,0 +1,23 @@
+@use "../../core/config-variables";
+@use "../../core/utils/functions" as *;
+
+$OUTPUT_FIELD_SELECTOR: ".output-field" !default;
+
+#{$OUTPUT_FIELD_SELECTOR} {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    line-height: max(1, densify(var(--f-line-height-large)));
+    margin: 0 0 densify(var(--f-margin-component-bottom));
+    position: relative;
+    width: var(--f-width-full);
+
+    &__output {
+        line-height: max(1, densify(var(--f-line-height-large)));
+        font-size: var(--f-font-size-standard);
+        min-height: var(--f-height-medium);
+        position: relative;
+        width: var(--f-width-full);
+        margin-bottom: 0;
+    }
+}

package/src/components/page-header/_page-header.scss

@@ -0,0 +1,96 @@
+@use "../../core/size";
+@use "../../core/mixins/breakpoints";
+@use "../../core/config-variables";
+
+$assets-primary-logo-path: "#{config-variables.$asset-path}/infrastructure/web/assets/images" !default;
+$PAGE_HEADER_SELECTOR: ".page-header" !default;
+$page-header-separator-width: 1px !default;
+$page-header-logo-small-size: 0.8rem;
+$page-header-logo-large-size: 12.39rem;
+$fk-logo-small: "fk-logo-primary-small.svg";
+$fk-logo-large: "fk-logo-primary-large.svg";
+
+#{$PAGE_HEADER_SELECTOR} {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    color: var(--f-text-color-default-inverted);
+    background-color: var(--f-background-pageheader-primary);
+    padding: size.$padding-100 0 size.$padding-100 size.$padding-100;
+    align-items: center;
+    overflow: hidden;
+
+    &__logo {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        align-items: center;
+        box-sizing: border-box;
+        &--small {
+            display: inline-block;
+            background-repeat: no-repeat;
+            background-position: center;
+            padding: $page-header-logo-small-size;
+            background-image: url("#{config-variables.$asset-path-images}/#{$fk-logo-small}");
+        }
+        &--large {
+            display: inline-block;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-color: var(--f-background-pageheader-primary);
+            padding: $page-header-logo-small-size calc($page-header-logo-large-size / 2);
+            background-image: url("#{config-variables.$asset-path-images}/#{$fk-logo-large}");
+        }
+        &--responsive {
+            display: inline-block;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-color: var(--f-background-pageheader-primary);
+            padding: $page-header-logo-small-size calc($page-header-logo-large-size / 2);
+            background-image: url("#{config-variables.$asset-path-images}/#{$fk-logo-large}");
+
+            @include breakpoints.breakpoint-only(sm) {
+                min-width: $page-header-logo-small-size;
+                padding: $page-header-logo-small-size;
+                background-image: url("#{config-variables.$asset-path-images}/#{$fk-logo-small}");
+            }
+        }
+        & > a {
+            display: inline-flex;
+        }
+        &::after {
+            content: " ";
+            background-color: var(--f-border-color-separator-pageheader-primary);
+            height: 1.38rem;
+            padding: calc($page-header-separator-width / 2);
+            margin: 0 size.$padding-100 0.155rem;
+        }
+    }
+
+    &__app-name {
+        padding-top: 0.22rem;
+        margin: 0;
+        font-size: var(--f-font-size-h3);
+        font-weight: var(--f-font-weight-medium);
+        color: var(--f-text-color-default-inverted);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 9rem;
+    }
+
+    &__right {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        flex-grow: 1;
+        white-space: nowrap;
+        padding-top: 0.4rem;
+        font-size: var(--f-font-size-standard);
+
+        &-slot {
+            padding-left: size.$padding-100;
+            padding-right: size.$padding-100;
+        }
+    }
+}

package/src/components/progressbar/_progressbar.scss

@@ -0,0 +1,34 @@
+@use "../../core/size";
+
+$PROGRESS_BAR_SELECTOR: ".progress" !default;
+
+#{$PROGRESS_BAR_SELECTOR} {
+    background-color: var(--f-background-progress);
+    border-radius: var(--f-height-medium);
+    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
+    height: var(--f-height-small);
+    margin-bottom: size.$margin-150;
+    padding: 0;
+
+    &__meter {
+        border-radius: var(--f-height-medium);
+        display: block;
+        float: left;
+        height: var(--f-height-small);
+        margin: calc(-1 * var(--f-border-width-small));
+        transition:
+            width var(--f-animation-duration-medium) ease-out,
+            background-color var(--f-animation-duration-medium) ease-out;
+
+        &--inprogress {
+            background: var(--f-background-progress-ongoing);
+            border: var(--f-border-width-small) solid var(--f-border-color-progress-ongoing);
+        }
+
+        &--finished {
+            background: var(--f-background-progress-finished);
+            border: var(--f-border-width-small) solid var(--f-border-color-progress-finished);
+            width: calc(100% + 2 * var(--f-border-width-small));
+        }
+    }
+}

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

@@ -0,0 +1,2 @@
+@import "radio-button";
+@import "radio-button-group";

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

@@ -0,0 +1,54 @@
+@import ".././list/list";
+
+$RADIO_BUTTON_SELECTOR: ".radio-button" !default;
+$CHECKBOX_SELECTOR: ".checkbox" !default;
+
+%selectable-item {
+    border: $list-border;
+    margin-bottom: 0;
+    width: 100%;
+    cursor: pointer;
+    border-bottom: none;
+    &:last-child {
+        border-bottom: $list-border;
+    }
+
+    input:focus + label {
+        outline: 2px solid var(--f-border-color-grid);
+        outline-offset: -2px;
+    }
+    input + label::after {
+        top: 0.9rem;
+        left: 1rem;
+    }
+    input:checked + label::after {
+        top: 0.9rem;
+        left: 1rem;
+    }
+    &:hover {
+        @extend %list-item-hover;
+    }
+    &:has(input:checked) {
+        @extend %list-item-selected;
+    }
+    label::before {
+        top: 0.9rem;
+        left: 1rem;
+    }
+    label {
+        padding: 1rem;
+        padding-left: 3rem;
+        width: 100%;
+    }
+}
+
+#{$RADIO_BUTTON_SELECTOR,
+$CHECKBOX_SELECTOR} {
+    &__details {
+        display: block;
+    }
+
+    &__width {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,38 @@
+@use "../../core/size";
+@use "../../core/mixins/breakpoints" as bp;
+@import "./radio-button";
+@import "./item";
+
+$RADIO_BUTTON_GROUP_SELECTOR: ".radio-button-group" !default;
+
+#{$RADIO_BUTTON_GROUP_SELECTOR} {
+    &__content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &--horizontal {
+        #{$RADIO_BUTTON_GROUP_SELECTOR}__content {
+            flex-direction: row;
+
+            #{$RADIO_BUTTON_SELECTOR} {
+                margin-bottom: 0;
+            }
+
+            @include bp.breakpoint-down(sm) {
+                flex-direction: column;
+
+                #{$RADIO_BUTTON_SELECTOR} {
+                    margin-bottom: size.$margin-100;
+                }
+            }
+        }
+    }
+    &--border {
+        #{$RADIO_BUTTON_GROUP_SELECTOR}__content {
+            .radio-button {
+                @extend %selectable-item;
+            }
+        }
+    }
+}