@fkui/design 5.36.0

package/src/components/layout-navigation/_layout-navigation.scss

@@ -0,0 +1,124 @@
+@use "../z-index";
+
+$LAYOUT_NAVIGATION_SELECTOR: ".layout-navigation" !default;
+$ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;
+
+// parameters
+$layout-navigation-scroll-width: 6px !default;
+$layout-navigation-border-width: 4px !default;
+$layout-navigation-inner-margin: 20px !default;
+$layout-navigation-content-padding: 4px !default;
+$layout-navigation-dot-diameter: 4px !default;
+$layout-navigation-dot-spacing: 4px !default;
+
+// Colors
+$palette-color-fk-black-5: #f4f4f4 !default;
+$palette-color-fk-black-50: #8d8e91 !default;
+$palette-color-bluebell-15: #e5e5f5 !default;
+$background-navigation: #{$palette-color-fk-black-5};
+$border-hover-navigation: #{$palette-color-bluebell-15};
+$border-dots-navigation: #{$palette-color-fk-black-50};
+$scrollbar-navigation: #{$palette-color-fk-black-50};
+
+#{$LAYOUT_NAVIGATION_SELECTOR} {
+    min-height: 100%;
+    width: 100%;
+
+    &__primary {
+        flex: auto;
+
+        > .container-fluid {
+            width: initial;
+            max-width: 1440px;
+            padding: 1.5rem;
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
+    &__navigation {
+        background-color: #{$background-navigation};
+        display: flex;
+        position: fixed;
+        z-index: $ZINDEX;
+        left: 0;
+        bottom: 0;
+    }
+
+    &__navigation .button.button--tertiary:hover {
+        background-color: var(--f-background-sidepanel-button-tertiary-hover);
+    }
+
+    &__navigation__border {
+        width: #{$layout-navigation-border-width};
+        background-color: #{$background-navigation};
+        cursor: w-resize;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        &__dot {
+            background-color: #{$border-dots-navigation};
+            width: #{$layout-navigation-dot-diameter};
+            height: #{$layout-navigation-dot-diameter};
+            border-radius: 2px;
+            margin-top: #{$layout-navigation-dot-spacing};
+        }
+    }
+
+    &__navigation__border:hover {
+        background-color: #{$border-hover-navigation};
+    }
+
+    &__navigation__inner {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        margin-right: #{$layout-navigation-inner-margin - $layout-navigation-content-padding - $layout-navigation-border-width};
+        word-wrap: break-word;
+        padding: 1rem;
+
+        &__title {
+            display: flex;
+            align-items: center;
+            padding: #{$layout-navigation-content-padding};
+        }
+
+        &__title h3 {
+            flex: auto;
+            margin: 0;
+            min-width: 40%;
+        }
+
+        &__title button {
+            margin: 0;
+            position: absolute;
+            right: 0.5rem;
+        }
+
+        &__content {
+            flex-grow: 1;
+            overflow-y: auto;
+            padding: #{$layout-navigation-content-padding};
+
+            &::-webkit-scrollbar {
+                width: #{$layout-navigation-scroll-width};
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background: #{$scrollbar-navigation};
+                border: 1px solid #{$scrollbar-navigation};
+                box-sizing: border-box;
+                border-radius: 33px;
+            }
+        }
+
+        &--minimized {
+            margin-left: -0.6rem;
+            margin-right: -0.8rem;
+            padding: 0;
+        }
+    }
+}

package/src/components/layout-secondary/_layout-secondary.scss

@@ -0,0 +1,129 @@
+@use "../z-index";
+
+$LAYOUT_SECONDARY_SELECTOR: ".layout-secondary" !default;
+$ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;
+
+// parameters
+$layout-secondary-scroll-width: 6px !default;
+$layout-secondary-border-width: 5px !default;
+$layout-secondary-inner-margin: 20px !default;
+$layout-secondary-content-padding: 4px !default;
+$layout-secondary-dot-diameter: 4px !default;
+$layout-secondary-dot-spacing: 4px !default;
+
+// Colors
+$palette-color-fk-black-5: #f4f4f4 !default;
+$palette-color-fk-black-50: #8d8e91 !default;
+$palette-color-bluebell-15: #e5e5f5 !default;
+$background-secondary: #{$palette-color-fk-black-5};
+$border-hover-secondary: #{$palette-color-bluebell-15};
+$border-dots-secondary: #{$palette-color-fk-black-50};
+$scrollbar-secondary: #{$palette-color-fk-black-50};
+
+#{$LAYOUT_SECONDARY_SELECTOR} {
+    width: 100%;
+    min-height: 100%;
+
+    &__primary {
+        flex: auto;
+
+        > .container-fluid {
+            width: initial;
+            max-width: 1440px;
+            padding: 1.5rem;
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
+    &__secondary {
+        background-color: #{$background-secondary};
+        position: fixed;
+        display: flex;
+        right: 0;
+        bottom: 0;
+        z-index: $ZINDEX;
+
+        .button.button--tertiary:hover {
+            background-color: var(--f-background-sidepanel-button-tertiary-hover);
+        }
+
+        &__border {
+            width: #{$layout-secondary-border-width};
+            background-color: #{$background-secondary};
+            cursor: w-resize;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+
+            &__dot {
+                background-color: #{$border-dots-secondary};
+                width: #{$layout-secondary-dot-diameter};
+                height: #{$layout-secondary-dot-diameter};
+                border-radius: 2px;
+                margin-top: #{$layout-secondary-dot-spacing};
+            }
+        }
+
+        &__border:hover {
+            background-color: #{$border-hover-secondary};
+        }
+
+        &__inner {
+            position: relative;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            word-wrap: break-word;
+            margin: #{$layout-secondary-inner-margin - $layout-secondary-content-padding};
+            margin-left: #{$layout-secondary-inner-margin - $layout-secondary-content-padding - $layout-secondary-border-width};
+
+            &__title {
+                display: flex;
+                align-items: center;
+                padding: #{$layout-secondary-content-padding};
+            }
+
+            &__title h3 {
+                flex: auto;
+                margin: 0;
+                min-width: 40%;
+            }
+
+            &__close.button {
+                position: absolute;
+                top: 0;
+                right: 0;
+                margin-bottom: 0;
+            }
+
+            &__content {
+                flex-grow: 1;
+                overflow-y: auto;
+                padding: #{$layout-secondary-content-padding};
+
+                &::-webkit-scrollbar {
+                    width: #{$layout-secondary-scroll-width};
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background: #{$scrollbar-secondary};
+                    border: 1px solid #{$scrollbar-secondary};
+                    box-sizing: border-box;
+                    border-radius: 33px;
+                }
+            }
+        }
+    }
+
+    @media (width <=1280px) {
+        &__secondary {
+            /* stylelint-disable-next-line color-function-notation, alpha-value-notation -- technical debt */
+            box-shadow:
+                4px 0 2px rgb(0, 0, 0, 0.5),
+                -4px 0 2px rgb(0, 0, 0, 0.5);
+        }
+    }
+}

package/src/components/list/_list.scss

@@ -0,0 +1,117 @@
+@use "../../core/config-variables";
+@use "../../core/size";
+@use "../../core/utils/functions" as *;
+
+$LIST_SELECTOR: ".list" !default;
+
+// list item specific variables
+$list-border: var(--f-border-width-medium) solid var(--f-border-color-grid);
+$list-padding: size.$padding-075;
+$list-margin: 0 0 densify(var(--f-margin-component-bottom));
+$list-input-margin-top: 0.1rem;
+$list-input-min-width: size.$padding-175;
+$list-input-height: size.$padding-175;
+$list-selectpane-padding: calc(var(--f-list-item-itempane-padding) - 0.2rem);
+
+%list-item {
+    display: flex;
+    border: $list-border;
+    background: var(--f-background-grid-default);
+}
+
+%list-item-hover {
+    background: var(--f-background-grid-hover);
+}
+
+%list-item-selected {
+    background: var(--f-background-grid-selected);
+}
+
+%list-item-active {
+    background: var(--f-background-grid-active);
+}
+
+#{$LIST_SELECTOR} {
+    margin: $list-margin;
+    padding-left: 0;
+
+    &__item:not(:last-child) {
+        border-bottom: none;
+    }
+
+    &__item {
+        @extend %list-item;
+
+        &--hover {
+            @extend %list-item-hover;
+        }
+
+        &--selected {
+            @extend %list-item-selected;
+        }
+
+        &--active {
+            @extend %list-item-active;
+        }
+
+        &__itempane {
+            width: 100%;
+            padding: densify(var(--f-list-item-itempane-padding)) var(--f-list-item-itempane-padding);
+            color: inherit;
+
+            --f-margin-component-bottom: 0.5rem;
+
+            .button {
+                margin-bottom: 0;
+            }
+
+            ul {
+                list-style-type: disc;
+
+                ul {
+                    list-style-type: circle;
+                }
+            }
+        }
+
+        &__selectpane {
+            padding: densify($list-selectpane-padding) 0 densify($list-selectpane-padding) $list-selectpane-padding;
+
+            &__input {
+                margin-top: $list-input-margin-top;
+
+                .checkbox__label,
+                .radio-button__label {
+                    min-width: $list-input-min-width;
+                    height: $list-input-height;
+                    padding: 0;
+                }
+                .checkbox__label::after,
+                .checkbox__label::before,
+                .radio-button__label::after,
+                .radio-button__label::before {
+                    top: densify(0.2rem);
+                    left: 0.2rem;
+                }
+            }
+        }
+    }
+
+    &--hover {
+        #{$LIST_SELECTOR}__item:focus-within,
+        #{$LIST_SELECTOR}__item:hover {
+            cursor: pointer;
+            @extend %list-item-hover;
+
+            &#{$LIST_SELECTOR}__item {
+                &--active {
+                    @extend %list-item-active;
+                }
+
+                &--selected {
+                    @extend %list-item-selected;
+                }
+            }
+        }
+    }
+}

package/src/components/loader/_loader.scss

@@ -0,0 +1,179 @@
+@use "../../core/size";
+@use "../z-index";
+
+$LOADER_SELECTOR: ".loader" !default;
+
+@keyframes bouncedelay {
+    0%,
+    80%,
+    100% {
+        transform: scale(0);
+    }
+
+    40% {
+        transform: scale(1);
+    }
+}
+
+@keyframes spinner-delay {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+#{$LOADER_SELECTOR} {
+    div[tabindex] {
+        outline: none;
+    }
+
+    &__wrapper {
+        height: var(--f-loader-size);
+        margin: var(--f-loader-margin);
+        position: relative;
+        width: var(--f-loader-size);
+    }
+    &--delay {
+        animation: spinner-delay var(--f-animation-duration-short) forwards;
+        animation-delay: 1s;
+        opacity: 0;
+    }
+
+    &__spinner {
+        height: 100%;
+        position: absolute;
+        width: 100%;
+    }
+
+    &__circle {
+        animation: bouncedelay 1.2s infinite ease-in-out; // prevent first frame from flickering when animation starts
+        animation-fill-mode: both;
+        background-color: var(--f-icon-color-loader);
+        border-radius: 100%;
+        height: size.$padding-100;
+        position: absolute;
+        width: size.$padding-100;
+    }
+
+    &__wait-text {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        white-space: pre-wrap;
+    }
+
+    &--overlay {
+        #{$LOADER_SELECTOR}__backdrop {
+            align-items: center;
+            background: var(--f-background-overlay);
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            justify-content: center;
+            left: 0;
+            position: fixed;
+            top: 0;
+            width: 100%;
+            z-index: z-index.$LOADER_OVERLAY_ZINDEX;
+        }
+
+        #{$LOADER_SELECTOR}__wait-text {
+            color: var(--f-text-color-default-inverted);
+        }
+
+        #{$LOADER_SELECTOR}__circle {
+            background-color: var(--f-icon-color-white);
+        }
+    }
+
+    .loader__spinner-1 {
+        &-circle2 {
+            animation-delay: -0.9s;
+        }
+
+        &-circle3 {
+            animation-delay: -0.6s;
+        }
+
+        &-circle4 {
+            animation-delay: -0.3s;
+        }
+    }
+
+    .loader__spinner-2 {
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        transform: rotateZ(45deg);
+
+        &-circle1 {
+            animation-delay: -1.1s;
+        }
+
+        &-circle2 {
+            animation-delay: -0.8s;
+        }
+
+        &-circle3 {
+            animation-delay: -0.5s;
+        }
+
+        &-circle4 {
+            animation-delay: -0.2s;
+        }
+    }
+
+    .loader__spinner-3 {
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        transform: rotateZ(90deg);
+
+        &-circle1 {
+            animation-delay: -1s;
+        }
+
+        &-circle2 {
+            animation-delay: -0.7s;
+        }
+
+        &-circle3 {
+            animation-delay: -0.4s;
+        }
+
+        &-circle4 {
+            animation-delay: -0.1s;
+        }
+    }
+
+    &__circle--1 {
+        left: 0;
+        top: 0;
+    }
+
+    &__circle--2 {
+        right: 0;
+        top: 0;
+    }
+
+    &__circle--3 {
+        bottom: 0;
+        right: 0;
+    }
+
+    &__circle--4 {
+        bottom: 0;
+        left: 0;
+    }
+
+    &__delay {
+        &__spinner {
+            animation: spinner-delay var(--f-animation-duration-short) forwards;
+            animation-delay: 1s;
+            opacity: 0;
+        }
+    }
+}

package/src/components/message-box/_message-box.scss

@@ -0,0 +1,121 @@
+@use "../../core/size";
+@use "../../core/mixins/breakpoints";
+@use "../../core/utils/functions" as *;
+
+$MESSAGE_BOX_SELECTOR: ".message-box" !default;
+
+@mixin make-box-variant($MESSAGE_BOX_SELECTOR, $background-color, $border-color, $short-layout: false) {
+    border: var(--f-border-width-medium) solid;
+    border-color: $border-color;
+    background-color: $background-color;
+    border-radius: var(--f-border-radius-small);
+
+    @if $short-layout {
+        border-left: size.$padding-100 solid $border-color;
+
+        #{$MESSAGE_BOX_SELECTOR} {
+            &__icon {
+                font-size: 0; // ignore any whitespaces in template affecting height
+
+                .icon {
+                    height: var(--f-icon-size-large);
+                    width: var(--f-icon-size-large);
+                    &-stack {
+                        height: var(--f-icon-size-large);
+                        width: var(--f-icon-size-large);
+                    }
+                    &__exclamation {
+                        transform: translateY(-0.05rem);
+                    }
+                    &__banner {
+                        fill: var(--f-icon-color-error);
+                        color: white;
+                    }
+                }
+            }
+            &__icon__banner {
+                margin-top: 0;
+            }
+        }
+    } @else {
+        border-top: size.$padding-100 solid $border-color;
+    }
+
+    .iflex__item > p {
+        margin-bottom: 0;
+    }
+}
+
+@mixin messagebox-banner-variant($selector) {
+    width: var(--f-width-full);
+    box-shadow: var(--f-box-modal-shadow);
+    border-collapse: separate;
+    padding: densify(size.$padding-100) size.$padding-100;
+
+    @include make-box-variant($selector, var(--f-background-error), var(--f-border-color-error));
+
+    .iflex__item > p {
+        margin-bottom: 0;
+    }
+}
+
+#{$MESSAGE_BOX_SELECTOR} {
+    padding: densify(size.$padding-150) size.$padding-150;
+    margin: size.$margin-050 0 densify(size.$margin-200) 0;
+
+    &__heading {
+        font-size: var(--f-font-size-h3);
+        font-weight: var(--f-font-weight-medium);
+        color: var(--f-text-color-default);
+        line-height: var(--f-line-height-medium);
+        align-items: flex-start;
+        margin-bottom: densify(size.$margin-050);
+        margin-top: 0;
+
+        @include breakpoints.breakpoint-only(sm) {
+            font-size: var(--f-font-size-large);
+        }
+    }
+
+    &--info {
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-info), var(--f-border-color-info));
+    }
+
+    &--info-short {
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-info), var(--f-border-color-info), $short-layout: true);
+    }
+
+    &--error {
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-error), var(--f-border-color-error));
+    }
+
+    &--error-short {
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-error), var(--f-border-color-error), $short-layout: true);
+    }
+
+    &--warning {
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-warning), var(--f-border-color-warning));
+    }
+
+    &--warning-short {
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-warning), var(--f-border-color-warning), $short-layout: true);
+    }
+
+    &--success {
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-success), var(--f-border-color-success));
+    }
+
+    &--success-short {
+        @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-success), var(--f-border-color-success), $short-layout: true);
+    }
+
+    &--banner {
+        @include messagebox-banner-variant($MESSAGE_BOX_SELECTOR);
+    }
+
+    @include breakpoints.breakpoint-down(sm) {
+        margin-bottom: densify(size.$margin-150);
+        margin-top: densify(size.$margin-150);
+        padding: densify(size.$padding-100) size.$padding-100;
+    }
+}