@fkui/design 5.36.0

package/src/core/_reset.scss

@@ -0,0 +1,60 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+}
+
+article,
+aside,
+dialog,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+    display: block;
+}
+
+select::-ms-expand {
+    display: none;
+}
+
+select:focus::-ms-value {
+    background: none;
+    color: #000;
+    outline: 1px dotted #000;
+}
+
+ul,
+ol {
+    padding-left: 1rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+a {
+    text-decoration: none;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    color: inherit;
+    font: inherit;
+    margin: 0;
+}

package/src/core/_size.scss

@@ -0,0 +1,23 @@
+// Variables that should be used for padding & margins.
+// If no suitable size is found, try to use a factor of the base size.
+$base-025: 0.25rem;
+
+// padding
+$padding-025: $base-025;
+$padding-050: calc(2 * $base-025);
+$padding-075: calc(3 * $base-025);
+$padding-100: calc(4 * $base-025);
+$padding-125: calc(5 * $base-025);
+$padding-150: calc(6 * $base-025);
+$padding-175: calc(7 * $base-025);
+$padding-200: calc(8 * $base-025);
+
+// margin
+$margin-025: $base-025 !default;
+$margin-050: calc(2 * $base-025);
+$margin-075: calc(3 * $base-025);
+$margin-100: calc(4 * $base-025);
+$margin-125: calc(5 * $base-025);
+$margin-150: calc(6 * $base-025);
+$margin-175: calc(7 * $base-025);
+$margin-200: calc(8 * $base-025);

package/src/core/helpers/_all.scss

@@ -0,0 +1,2 @@
+@forward "accessibility/all";
+@forward "helpers";

package/src/core/helpers/_helpers.scss

@@ -0,0 +1,19 @@
+/*
+    For help-classes, it is alright to use `!important` when the intent is to
+    overwrite standard behaviour for components.
+
+    All help-classes shall be prefixed with `h-`.
+*/
+.h {
+    &-no-margin {
+        margin: 0 !important;
+    }
+
+    &-root-size {
+        font-size: 1rem !important;
+    }
+
+    &-display-flex {
+        display: flex;
+    }
+}

package/src/core/helpers/accessibility/_all.scss

@@ -0,0 +1,2 @@
+@forward "screenreader";
+@forward "focus";

package/src/core/helpers/accessibility/_focus.scss

@@ -0,0 +1,24 @@
+@use "../../mixins/focus";
+
+button:focus,
+a:focus,
+a.button:focus,
+img:focus,
+select:focus,
+textarea:focus,
+input[type="submit"]:focus,
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="tel"]:focus,
+input[type="image"]:focus,
+input[type="search"]:focus,
+[tabindex]:focus {
+    @include focus.focus-indicator;
+
+    outline: none;
+}
+
+[tabindex="-1"]:focus {
+    box-shadow: none;
+    outline: none;
+}

package/src/core/helpers/accessibility/_screenreader.scss

@@ -0,0 +1,11 @@
+@use "../../mixins/sr-only";
+
+.sr {
+    &-only {
+        @include sr-only.sr-only;
+    }
+
+    &-separator {
+        display: block !important;
+    }
+}

package/src/core/layout/_all.scss

@@ -0,0 +1,2 @@
+@forward "grid/all";
+@forward "positioning/all";

package/src/core/layout/grid/_all.scss

@@ -0,0 +1 @@
+@forward "grid";

package/src/core/layout/grid/_grid.scss

@@ -0,0 +1,135 @@
+@use "sass:map";
+@use "sass:math";
+@use "../../mixins/breakpoints";
+@use "../../config-variables";
+
+@mixin grid-column-factory($name) {
+    @for $size from 1 through config-variables.$f-grid-columns {
+        &.col--#{$name}-#{$size} {
+            width: 100%;
+        }
+    }
+
+    @include breakpoints.breakpoint-up($name) {
+        @for $size from 1 through config-variables.$f-grid-columns {
+            &.col--#{$name}-#{$size} {
+                flex: 0 0 math.percentage(math.div($size, config-variables.$f-grid-columns));
+                max-width: math.percentage(math.div($size, config-variables.$f-grid-columns));
+            }
+
+            &.col--#{$name}-order-#{$size} {
+                order: $size;
+            }
+        }
+    }
+}
+
+@mixin internal-width-factory($name) {
+    @include breakpoints.breakpoint-up($name) {
+        @for $size from 1 through config-variables.$f-grid-columns {
+            .i-width-#{$name}-#{$size} {
+                width: math.percentage(math.div($size, config-variables.$f-grid-columns));
+            }
+        }
+    }
+}
+
+@mixin container-max-width-factory() {
+    @each $breakpoint, $container-max-width in config-variables.$f-container-max-widths {
+        @include breakpoints.breakpoint-up($breakpoint) {
+            max-width: $container-max-width;
+        }
+    }
+}
+
+.container-fluid {
+    width: 100%;
+    padding-right: config-variables.$f-container-spacing;
+    padding-left: config-variables.$f-container-spacing;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.container {
+    width: 100%;
+    padding-right: config-variables.$f-container-spacing;
+    padding-left: config-variables.$f-container-spacing;
+    margin-right: auto;
+    margin-left: auto;
+    @include container-max-width-factory;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -(math.div(config-variables.$f-gutter-width, 2));
+    margin-left: -(math.div(config-variables.$f-gutter-width, 2));
+
+    &--align-end {
+        justify-content: flex-end;
+    }
+
+    &--align-center {
+        justify-content: center;
+    }
+
+    &--align-justify {
+        justify-content: space-between;
+    }
+
+    &--align-spaced {
+        justify-content: space-around;
+    }
+
+    &--align-middle {
+        align-items: center;
+    }
+
+    &--align-bottom {
+        align-items: flex-end;
+    }
+
+    &--align-top {
+        align-items: flex-start;
+    }
+}
+
+.col {
+    position: relative;
+    min-height: 1px;
+    box-sizing: border-box;
+    padding-right: math.div(config-variables.$f-gutter-width, 2);
+    padding-left: math.div(config-variables.$f-gutter-width, 2);
+    width: auto;
+    max-width: none;
+
+    &--align-bottom {
+        align-self: flex-end;
+    }
+
+    &--align-middle {
+        align-self: center;
+    }
+
+    &--align-stretch {
+        align-self: stretch;
+    }
+
+    &--align-top {
+        align-self: flex-start;
+    }
+
+    @for $size from 1 through config-variables.$f-grid-columns {
+        &.col--order-#{$size} {
+            order: $size;
+        }
+    }
+
+    @each $breakpoint in map.keys(config-variables.$f-breakpoints) {
+        @include grid-column-factory($breakpoint);
+    }
+}
+
+@each $breakpoint in map.keys(config-variables.$f-breakpoints) {
+    @include internal-width-factory($breakpoint);
+}

package/src/core/layout/positioning/_all.scss

@@ -0,0 +1 @@
+@import "positioning";

package/src/core/layout/positioning/_positioning.scss

@@ -0,0 +1,16 @@
+.sticky {
+    /* Double position is specified due to E11-compability.
+    `fixed` is used by IE11.
+    `sticky` is used by other web browsers. */
+
+    // sass-lint:disable-block no-duplicate-properties
+    position: fixed;
+    position: sticky;
+    z-index: 9999;
+
+    &--top {
+        right: 0;
+        top: 0;
+        left: 0;
+    }
+}

package/src/core/mixins/_all.scss

@@ -0,0 +1,9 @@
+@import "anchor";
+@import "arrow-creator";
+@import "breakpoints";
+@import "button";
+@import "button_icon";
+@import "circle";
+@import "sr-only";
+@import "focus";
+@import "label-inline";

package/src/core/mixins/_anchor.scss

@@ -0,0 +1,17 @@
+$anchor-underline-width: 2px !default;
+
+@mixin anchor() {
+    $anchor-underline-offset: 0.25rem;
+
+    color: var(--f-text-color-link);
+    text-decoration: underline;
+    text-decoration-thickness: $anchor-underline-width;
+    text-underline-offset: $anchor-underline-offset;
+    text-decoration-color: var(--f-text-color-link);
+    font-weight: var(--f-font-weight-medium);
+
+    &:hover {
+        color: var(--f-text-color-link-hover);
+        text-decoration-color: var(--f-border-color-link-hover);
+    }
+}

package/src/core/mixins/_arrow-creator.scss

@@ -0,0 +1,51 @@
+// **
+// * Adds an arrow (downpointing triangle) to an element.
+// *
+// * @param $size Diagonal size of the arrow (in px only).
+// * @param $position Vertical position.
+// * @param $width Border width (in px only).
+// * @param $background Triangle background color.
+// * @param $border Triangle border color.
+// * @param $up If arrow should be faced up.
+// *
+@mixin arrow-creator($size, $position, $width: 2px, $background: #fff, $border: #000, $up: false) {
+    $inner-size: calc(#{$size} - #{$width} * 1.4142);
+    $negative-inner-size: calc(-1 * (#{$size} - #{$width} * 1.4142));
+    $outer-size: $size;
+    $negative-outer-size: calc(-1 * #{$size});
+
+    position: absolute;
+    left: $position;
+
+    @if $up {
+        top: 0;
+        transform: rotate(180deg);
+    } @else {
+        top: 100%;
+    }
+
+    &::before,
+    &::after {
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        pointer-events: none;
+        z-index: 1;
+        position: absolute;
+    }
+
+    &::after {
+        border-color: none;
+        border-top-color: $background;
+        border-width: $inner-size;
+        margin-left: $negative-inner-size;
+    }
+
+    &::before {
+        border-color: none;
+        border-top-color: $border;
+        border-width: $outer-size;
+        margin-left: $negative-outer-size;
+    }
+}

package/src/core/mixins/_breakpoints.scss

@@ -0,0 +1,42 @@
+@use "../../core/utils/functions";
+
+@mixin breakpoint-only($key) {
+    $min-value: functions.get-min-for($key);
+    $max-value: functions.get-max-for($key);
+
+    @if $min-value != null and $max-value != null {
+        @media (min-width: $min-value) and (max-width: $max-value) {
+            @content;
+        }
+    } @else if $max-value == null {
+        @include breakpoint-up($key) {
+            @content;
+        }
+    } @else if $min-value == null {
+        @include breakpoint-down($key) {
+            @content;
+        }
+    }
+}
+
+@mixin breakpoint-down($key) {
+    $value: functions.get-max-for($key);
+    @if $value {
+        @media (max-width: $value) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin breakpoint-up($key) {
+    $value: functions.get-min-for($key);
+    @if $value {
+        @media (min-width: $value) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}

package/src/core/mixins/_button.scss

@@ -0,0 +1,78 @@
+@use "focus";
+
+@mixin make-button-variant(
+    $name,
+    $shadow,
+    $shadow-hover,
+    $background-color,
+    $color,
+    $color--hover: $color,
+    $color--focus: $color--hover,
+    $color--disabled: var(--f-text-color-button-disabled),
+    $icon-color: $color,
+    $icon-color--hover: $color--hover,
+    $icon-color--focus: $color--focus,
+    $icon-color--disabled: $color--disabled,
+    $background-color--hover: $background-color,
+    $background-color--focus: $background-color--hover,
+    $background-color--disabled: var(--f-background-button-disabled),
+    $border-color: transparent,
+    $border-color--hover: $border-color,
+    $border-color--focus: $border-color--hover,
+    $border-color--disabled: var(--f-border-color-button-disabled),
+    $border-width: var(--f-border-width-medium),
+    $padding-top,
+    $padding-right,
+    $padding-bottom,
+    $padding-left
+) {
+    background-color: $background-color;
+    border-color: $border-color;
+    border-width: $border-width;
+    box-shadow: $shadow;
+    color: $color;
+    padding: $padding-top $padding-right $padding-bottom $padding-left;
+
+    & > .button__icon {
+        color: $icon-color;
+    }
+
+    &:hover {
+        background-color: $background-color--hover;
+        border-color: $border-color--hover;
+        color: $color--hover;
+        box-shadow: $shadow-hover;
+
+        & > .button__icon {
+            color: $icon-color--hover;
+        }
+    }
+
+    &:active,
+    &:focus {
+        @include focus.focus-indicator;
+
+        background-color: $background-color--focus;
+        border-color: $border-color--focus;
+        color: $color--focus;
+
+        & > .button__icon {
+            color: $icon-color--focus;
+        }
+    }
+
+    &.disabled,
+    &.disabled:hover,
+    &:disabled,
+    &:disabled:hover,
+    &#{$name}--disabled,
+    &#{$name}--disabled:hover {
+        background-color: $background-color--disabled;
+        border-color: $border-color--disabled;
+        color: $color--disabled;
+
+        & > .button__icon {
+            color: $icon-color--disabled;
+        }
+    }
+}

package/src/core/mixins/_button_icon.scss

@@ -0,0 +1,51 @@
+@use "sass:math";
+
+$ikon-width-default: 40px;
+
+// Mixin for positioning, padding and sizing an icon. To set an
+// icon based on width, both image size ratio and width needs to be supplied. The
+// ratio should be supplied as width divided by height. It will set icon height to
+// 40px by default (which would generate a 40x40 px icon, assuming the
+// ratio is 1).
+@mixin text-with-icon(
+    $padding-right: false,
+    $padding-left: false,
+    $icon-height: $ikon-width-default,
+    $icon-width: false,
+    $icon-size-ratio: false,
+    $top: auto,
+    $right: auto,
+    $bottom: auto,
+    $left: auto
+) {
+    position: relative;
+
+    .ikon,
+    .icon {
+        @if $icon-width and $icon-size-ratio {
+            font-size: math.div($icon-width, $icon-size-ratio);
+        } @else {
+            font-size: $icon-height;
+        }
+
+        &[class^="ikon-"],
+        &[class^="icon-"],
+        &[class*=" icon-"],
+        &[class*=" ikon-"] {
+            inset: $top $right $bottom $left;
+            position: absolute;
+        }
+
+        &::before {
+            vertical-align: top;
+        }
+    }
+
+    @if $padding-left {
+        padding-left: $padding-left;
+    }
+
+    @if $padding-right {
+        padding-right: $padding-right;
+    }
+}

package/src/core/mixins/_circle.scss

@@ -0,0 +1,21 @@
+/// Style element as a circle with optional background and border.
+///
+/// @param {color} $background - If given it will be set as the background color.
+/// @param {border} $border - If given it will be set as the border.
+/// @param {length} $size - If given it will set width/height (diagonal, not radius).
+@mixin circle($background: false, $border: false, $size: false) {
+    border-radius: 50%;
+
+    @if $background {
+        background-color: $background;
+    }
+
+    @if $border {
+        border: $border;
+    }
+
+    @if $size {
+        width: $size;
+        height: $size;
+    }
+}

package/src/core/mixins/_focus.scss

@@ -0,0 +1,4 @@
+@mixin focus-indicator() {
+    border-radius: 0;
+    box-shadow: var(--f-focus-box-shadow);
+}

package/src/core/mixins/_label-inline.scss

@@ -0,0 +1,19 @@
+@use "../size";
+@use "../mixins/breakpoints";
+@use "../../core/utils/functions" as *;
+
+$LABEL_SELECTOR: ".label" !default;
+
+@mixin label-inline() {
+    @include breakpoints.breakpoint-up(md) {
+        margin-bottom: densify(size.$margin-075);
+        flex-direction: row;
+        justify-content: flex-start;
+        width: auto;
+        #{$LABEL_SELECTOR} {
+            width: auto;
+            margin-right: size.$margin-100;
+            padding-top: densify(size.$padding-050);
+        }
+    }
+}

package/src/core/mixins/_sr-only.scss

@@ -0,0 +1,11 @@
+// Screen reader only, text will be readable but not visible.
+@mixin sr-only() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}

package/src/core/typography/_all.scss

@@ -0,0 +1 @@
+@use "headings";