@fkui/design 5.36.0

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

@@ -0,0 +1,97 @@
+@use "../../core/config-variables";
+@use "../../core/size";
+@use "../../core/mixins/circle" as *;
+@use "../../core/utils/functions" as *;
+
+$EXPANDABLE_PARAGRAPH_SELECTOR: ".expandable-paragraph" !default;
+$ICON_WIDTH: var(--f-icon-size-small);
+$ICON_MARGIN: 0.5rem;
+$CONTENT_MARGIN: calc(#{$ICON_WIDTH} + #{$ICON_MARGIN});
+$EXPANDABLE_PARAGRAPH_LINE_HEIGHT: var(--f-line-height-medium);
+
+#{$EXPANDABLE_PARAGRAPH_SELECTOR} {
+    margin: 0 0 densify(var(--f-margin-component-bottom));
+    &__heading {
+        line-height: $EXPANDABLE_PARAGRAPH_LINE_HEIGHT;
+        margin: 0;
+
+        button {
+            border: none;
+            background-color: transparent;
+            cursor: pointer;
+            margin: 0;
+            display: flex;
+            text-align: left;
+            padding: 0;
+            flex-shrink: 0;
+        }
+    }
+
+    &__icon {
+        @include circle($background: var(--f-icon-color-expandable-paragraph), $size: $ICON_WIDTH);
+
+        margin-top: calc((#{$EXPANDABLE_PARAGRAPH_LINE_HEIGHT} * 1em - #{$ICON_WIDTH}) / 2); // Unit "em" intended here, align icon to header
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+        display: flex;
+        color: var(--f-icon-color-white);
+        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_PARAGRAPH_SELECTOR}--open {
+        #{$EXPANDABLE_PARAGRAPH_SELECTOR}__icon {
+            svg:nth-child(2) {
+                transform: rotate(0);
+            }
+        }
+
+        #{$EXPANDABLE_PARAGRAPH_SELECTOR}__container {
+            height: auto;
+        }
+    }
+
+    &#{$EXPANDABLE_PARAGRAPH_SELECTOR}--closed {
+        #{$EXPANDABLE_PARAGRAPH_SELECTOR}__icon {
+            svg:nth-child(2) {
+                transform: rotate(-90deg);
+            }
+        }
+    }
+
+    &__container {
+        height: 0;
+        overflow: hidden;
+        transition: height var(--f-animation-duration-medium) cubic-bezier(0.46, 0.03, 0.52, 0.96);
+    }
+
+    &__content,
+    &__related-information {
+        margin-left: $CONTENT_MARGIN;
+    }
+
+    &__related-information {
+        color: var(--f-text-color-discrete);
+        font-size: 0.875rem;
+    }
+
+    &__content {
+        margin-top: densify(size.$margin-075);
+        margin-bottom: densify(size.$margin-100);
+    }
+
+    &__separator {
+        border-bottom: var(--f-border-width-medium) solid var(--f-border-color-separator);
+        margin: 0 $ICON_MARGIN densify(size.$margin-050) $ICON_MARGIN;
+    }
+
+    &--list {
+        margin-bottom: densify(size.$margin-050);
+        padding-bottom: densify(size.$padding-050);
+        border-bottom: var(--f-border-width-small) solid var(--f-border-color-separator);
+    }
+}

package/src/components/fieldset/_fieldset.scss

@@ -0,0 +1,22 @@
+@use "../../core/config-variables";
+@use "../../core/size";
+@use "../../core/utils/functions" as *;
+
+$FIELDSET_SELECTOR: ".fieldset" !default;
+
+#{$FIELDSET_SELECTOR} {
+    border: 0;
+    margin: 0 0 densify(var(--f-margin-component-bottom));
+    padding: 0;
+    width: var(--f-width-full);
+
+    &__label {
+        padding: 0;
+        margin-bottom: densify(size.$margin-075);
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+    }
+}

package/src/components/file-item/_file-item.scss

@@ -0,0 +1,80 @@
+@use "../anchor/anchor";
+@use "../../core/size";
+
+$FILE_ITEM_SELECTOR: ".file-item" !default;
+$FILE_LIST_ITEM_SELECTOR: ".file-item-list" !default;
+
+#{$FILE_LIST_ITEM_SELECTOR} {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+#{$FILE_ITEM_SELECTOR} {
+    .button--discrete {
+        padding: 0;
+        min-width: auto;
+        text-align: left;
+        margin-right: size.$margin-025;
+    }
+
+    &__row {
+        margin-bottom: size.$margin-125;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        button,
+        a {
+            margin-bottom: 0;
+        }
+    }
+
+    &__file-open {
+        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
+        @extend .anchor;
+        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
+        @extend .anchor--block;
+
+        flex: 0 1 auto;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    &__file-remove {
+        flex: 0 0 auto;
+
+        svg {
+            color: var(--f-icon-color-primary);
+        }
+    }
+
+    &__file-abort {
+        flex: 0 0 auto;
+
+        svg {
+            color: var(--f-icon-color-error);
+        }
+    }
+
+    &__change-info {
+        margin-top: calc(-1 * size.$margin-125);
+    }
+
+    &__file-name {
+        margin-left: size.$margin-025;
+        overflow-wrap: break-word;
+        white-space: normal;
+    }
+
+    &__separator {
+        margin-bottom: size.$margin-125;
+        border: var(--f-border-width-medium) solid var(--f-border-color-separator);
+    }
+
+    &__file-uploading {
+        .progress__meter--inprogress {
+            background: var(--f-background-progress-file-item-ongoing);
+            border: var(--f-border-width-small) solid var(--f-border-color-progress-file-item-ongoing);
+        }
+    }
+}

package/src/components/file-selector/_file-selector.scss

@@ -0,0 +1,28 @@
+@use "../../core/mixins/focus" as *;
+@use "../../core/mixins/sr-only" as *;
+
+$FILE_SELECTOR_SELECTOR: ".file-selector" !default;
+
+#{$FILE_SELECTOR_SELECTOR} {
+    svg {
+        color: var(--f-icon-color-primary);
+    }
+
+    input[type="file"] {
+        @include sr-only;
+
+        &:focus + label {
+            @include focus-indicator;
+        }
+    }
+
+    label {
+        cursor: pointer;
+    }
+
+    input:disabled + label {
+        background-color: transparent;
+        border-color: transparent;
+        cursor: default;
+    }
+}

package/src/components/file-uploader/_file-uploader.scss

@@ -0,0 +1,7 @@
+$FILE_UPLOADER_SELECTOR: ".file-uploader" !default;
+
+#{$FILE_UPLOADER_SELECTOR} {
+    &__message-box {
+        margin-top: 1.25rem;
+    }
+}

package/src/components/form/_all.scss

@@ -0,0 +1,2 @@
+@import "form";
+@import "form-step";

package/src/components/form/_form-step.scss

@@ -0,0 +1,91 @@
+@use "../../core/size";
+@use "../../core/mixins/arrow-creator" as *;
+@use "../../core/mixins/breakpoints" as bp;
+
+$FORM_STEP_SELECTOR: ".form-step" !default;
+
+#{$FORM_STEP_SELECTOR} {
+    background: var(--f-background-form-step);
+    border: var(--f-border-width-medium) solid var(--f-border-color-form-step);
+    border-radius: var(--f-border-radius-small);
+    margin: 0 0 var(--f-margin-component-bottom);
+    margin-bottom: size.$margin-200;
+    padding: size.$padding-200;
+    position: relative;
+    transition:
+        background-color var(--f-animation-duration-medium) ease-in-out,
+        border-color var(--f-animation-duration-medium) ease-in-out;
+
+    @include bp.breakpoint-down(sm) {
+        padding: size.$padding-150 size.$padding-075 size.$padding-200;
+        margin-left: calc(-1 * size.$margin-075);
+        margin-right: calc(-1 * size.$margin-075);
+    }
+
+    &--last-step {
+        margin-bottom: calc(2 * size.$margin-150);
+
+        @include bp.breakpoint-down(sm) {
+            margin-bottom: size.$margin-200;
+        }
+    }
+
+    &__header {
+        margin-bottom: size.$margin-050;
+    }
+
+    &__title {
+        font-size: var(--f-font-size-h2);
+        display: inline;
+
+        @include bp.breakpoint-down(sm) {
+            font-size: var(--f-font-size-xxx-large);
+        }
+    }
+
+    &__check {
+        transition: opacity var(--f-animation-duration-medium) ease-in-out;
+        color: var(--f-icon-color-success);
+        height: var(--f-icon-size-x-large);
+        margin-bottom: calc(-1 * size.$margin-025);
+        margin-left: size.$margin-050;
+        width: var(--f-icon-size-x-large);
+    }
+
+    &__error {
+        color: var(--f-text-color-error);
+    }
+
+    &__arrow {
+        @include arrow-creator(
+            $size: var(--f-icon-size-small),
+            $position: calc(size.$padding-150 + size.$padding-150),
+            $width: var(--f-border-width-medium),
+            $background: var(--f-background-form-step),
+            $border: var(--f-border-color-form-step)
+        );
+
+        @include bp.breakpoint-down(sm) {
+            left: calc(size.$padding-100 + size.$padding-100);
+        }
+    }
+
+    &--complete {
+        background: var(--f-background-success);
+        border-color: var(--f-border-color-success);
+
+        #{$FORM_STEP_SELECTOR}__arrow {
+            @include arrow-creator(
+                $size: var(--f-icon-size-small),
+                $position: calc(size.$padding-150 + size.$padding-150),
+                $width: var(--f-border-width-medium),
+                $background: var(--f-background-success),
+                $border: var(--f-border-color-success)
+            );
+
+            @include bp.breakpoint-down(sm) {
+                left: size.$padding-200;
+            }
+        }
+    }
+}

package/src/components/form/_form.scss

@@ -0,0 +1,8 @@
+@use "../../core/size";
+
+$FORM_SELECTOR: ".form" !default;
+
+#{$FORM_SELECTOR} {
+    padding-top: size.$padding-100;
+    padding-bottom: calc(2 * size.$padding-150);
+}

package/src/components/group/_group.scss

@@ -0,0 +1,8 @@
+.component-group {
+    > .component-group__item:not(:only-child) {
+        margin-bottom: 1rem;
+    }
+    > .component-group__item:last-child:not(:first-child) {
+        margin-bottom: 2rem;
+    }
+}

package/src/components/icon/_icon.scss

@@ -0,0 +1,175 @@
+@use "../../core/size";
+@use "../../core/utils/functions" as *;
+
+$ICON_SELECTOR: ".icon" !default;
+
+@at-root {
+    %icon--base {
+        display: inline-block;
+        height: var(--f-icon-size-small);
+        max-height: 100%;
+        max-width: 100%;
+        pointer-events: none;
+        width: var(--f-icon-size-small);
+    }
+
+    %icon--inset-top-right {
+        display: inline;
+        height: var(--f-icon-size-large);
+        position: absolute;
+        right: size.$margin-075;
+        top: densify(size.$margin-050);
+        transition: opacity var(--f-animation-duration-medium) ease-in-out;
+        width: var(--f-icon-size-large);
+    }
+
+    %icon-stack {
+        @extend %icon--base;
+
+        position: relative;
+
+        #{$ICON_SELECTOR} {
+            position: absolute;
+        }
+    }
+}
+
+#{$ICON_SELECTOR} {
+    @extend %icon--base;
+
+    &--flip-horizontal {
+        transform: scaleX(-1);
+    }
+
+    &--flip-vertical {
+        transform: scaleY(-1);
+    }
+
+    &--rotate-90 {
+        transform: rotate(90deg);
+    }
+
+    &--rotate-180 {
+        transform: rotate(180deg);
+    }
+
+    &--rotate-270 {
+        transform: rotate(270deg);
+    }
+}
+
+#{$ICON_SELECTOR}-stack,
+#{$ICON_SELECTOR} {
+    &--new-window {
+        // anchor icons to top-right and bottom-left
+        .icon {
+            &.f-icon-new-window {
+                width: 55%;
+                height: 55%;
+                top: 0;
+                right: 0;
+            }
+
+            &:not(.f-icon-new-window) {
+                width: 83%;
+                height: 83%;
+                bottom: 0;
+                left: 5%;
+            }
+        }
+    }
+}
+
+#{$ICON_SELECTOR}-stack,
+#{$ICON_SELECTOR}--stack {
+    @extend %icon-stack;
+
+    &--tooltip {
+        .f-icon-circle {
+            color: var(--f-icon-color-info);
+            fill: var(--f-icon-color-info);
+        }
+
+        .f-icon-i {
+            color: var(--f-icon-color-white);
+        }
+    }
+
+    &--info {
+        .f-icon-circle {
+            color: var(--f-icon-color-white);
+            fill: var(--f-icon-color-info);
+        }
+    }
+
+    &--warning {
+        .f-icon-circle {
+            color: var(--f-icon-color-white);
+            fill: var(--f-icon-color-warning);
+        }
+    }
+
+    &--error {
+        .f-icon-triangle {
+            color: var(--f-icon-color-white);
+            fill: var(--f-icon-color-error);
+        }
+    }
+
+    &--success {
+        .f-icon-circle {
+            color: var(--f-icon-color-white);
+            fill: var(--f-icon-color-success);
+        }
+        .f-icon-success {
+            transform: scale(0.6);
+        }
+    }
+
+    &--large {
+        width: 2.5rem;
+        height: 2.5rem;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &--circle,
+    &--circle-bottom {
+        width: 4rem;
+        height: 4rem;
+        border-radius: 100%;
+        overflow: hidden;
+        .f-icon-circle {
+            color: var(--f-icon-color-success-background);
+            fill: var(--f-icon-color-success-background);
+            width: 100%;
+            height: 100%;
+        }
+        .icon:not(.f-icon-circle) {
+            color: var(--f-icon-color-success);
+            position: absolute;
+        }
+    }
+    &--circle {
+        .icon:not(.f-icon-circle) {
+            width: 100 * 0.7%;
+            height: 100 * 0.7%;
+            inset: 0;
+            margin: auto;
+        }
+    }
+
+    &--circle-bottom {
+        .icon:not(.f-icon-circle) {
+            width: 100 * 0.8%;
+            height: 100 * 0.8%;
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            bottom: 0%;
+        }
+    }
+}

package/src/components/indent/_indent.scss

@@ -0,0 +1,11 @@
+@use "../../core/size";
+
+$radio_button_label_offset: 0.1rem;
+$INDENT_SELECTOR: ".indent" !default;
+
+#{$INDENT_SELECTOR} {
+    border-left: var(--f-border-width-medium) solid var(--f-border-color-separator);
+    margin-bottom: size.$margin-100;
+    margin-left: size.$margin-050;
+    padding-left: size.$padding-150;
+}

package/src/components/label/_label.scss

@@ -0,0 +1,47 @@
+@use "../../core/size";
+@use "../icon/icon";
+@use "../../core/utils/functions" as *;
+
+$LABEL_SELECTOR: ".label" !default;
+
+#{$LABEL_SELECTOR} {
+    color: var(--f-text-color-default);
+    display: inline-block;
+    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);
+
+    &__message {
+        display: block;
+        font-weight: var(--f-font-weight-normal);
+        margin-top: var(--f-label-message-margin-top);
+
+        &--error {
+            color: var(--f-text-color-error);
+        }
+    }
+
+    &__icon-wrapper {
+        position: relative;
+    }
+
+    &__icon {
+        @extend %icon--inset-top-right;
+
+        &--left {
+            position: relative;
+            top: densify(3px);
+        }
+    }
+
+    &__description {
+        display: block;
+        font-weight: var(--f-font-weight-normal);
+
+        &--discrete {
+            color: var(--f-text-color-discrete);
+        }
+    }
+}

package/src/components/layout-application-template/_layout-application-template.scss

@@ -0,0 +1,75 @@
+@use "sass:map";
+@use "sass:math";
+@use "../../core/config-variables" as vars;
+@use "../z-index";
+
+$LAYOUT_APPLICATION_SELECTOR: ".layout-application-template" !default;
+$ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;
+
+#{$LAYOUT_APPLICATION_SELECTOR} {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    &__header {
+        z-index: $ZINDEX;
+        position: sticky;
+        align-self: flex-start;
+        top: 0;
+        width: 100%;
+    }
+
+    &__footer {
+        flex-shrink: 0;
+    }
+
+    &__main {
+        flex-grow: 1;
+
+        > .container-fluid {
+            margin: 20px;
+            width: initial;
+            max-width: 1440px;
+        }
+    }
+}
+
+#{$LAYOUT_APPLICATION_SELECTOR}__body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+}
+
+#{$LAYOUT_APPLICATION_SELECTOR}__body > div {
+    height: 100%;
+}
+
+#{$LAYOUT_APPLICATION_SELECTOR}__html {
+    height: 100%;
+}
+
+@each $name in map.keys(vars.$f-breakpoints) {
+    .grid--force {
+        @for $size from 1 through vars.$f-grid-columns {
+            .col.col--#{$name}-#{$size} {
+                width: 100%;
+                max-width: 100%;
+                flex: none;
+            }
+        }
+    }
+
+    .grid--force-#{$name} {
+        @for $size from 1 through vars.$f-grid-columns {
+            .col {
+                &.col--#{$name}-#{$size} {
+                    flex: 0 0 math.percentage(math.div($size, vars.$f-grid-columns));
+                    max-width: math.percentage(math.div($size, vars.$f-grid-columns));
+                }
+                &.col--#{$name}-order-#{$size} {
+                    order: $size;
+                }
+            }
+        }
+    }
+}