feat(fab): add fluent styles

packages/default/scss/utils/_position.scss

@@ -25,6 +25,10 @@
     @each $pos in (static, relative, absolute, fixed, sticky) {
         .k-#{$pos},
         .k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
+
+        // sass-lint:disable-block no-important
+        .\!k-#{$pos},
+        .\!k-pos-#{$pos} { position: $pos !important; }
     }
 
     /// @name k-pos-top

packages/fluent/scss/fab/_layout.scss

@@ -0,0 +1,173 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-fab--layout() {
+
+    .k-fab {
+        padding-inline: var( --INTERNAL--kendo-fab-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-fab-padding-y, 0 );
+        border-width: 0;
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+        position: relative;
+        color: inherit;
+        background-color: transparent;
+        font-family: var( --kendo-fab-font-family, #{$kendo-fab-font-family} );
+        font-size:var( --kendo-fab-font-size, #{$kendo-fab-font-size} );
+        line-height: var( --kendo-fab-line-height, #{$kendo-fab-line-height} );
+        text-align: center;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        outline: none;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        &:focus::after,
+        &.k-focus::after {
+            content: "";
+            position: absolute;
+            border: medium none;
+            inset: var( --kendo-fab-focus-offset, #{$kendo-fab-focus-offset} );
+            outline-width: var( --kendo-fab-focus-outline-width, #{$kendo-fab-focus-outline-width} );
+            outline-style: var( --kendo-fab-focus-outline-style, #{$kendo-fab-focus-outline-style} );
+            z-index: 1;
+        }
+
+        // Fix for focused FAB with full roundness
+        &.k-rounded-full {
+            &:focus::after,
+            &.k-focus::after {
+               border-radius: inherit;
+            }
+        }
+    }
+
+    // FAB Icon
+    .k-fab-icon {
+        width: var( --kendo-fab-icon-width, #{$kendo-fab-icon-width} );
+        height: var( --kendo-fab-icon-height, #{$kendo-fab-icon-height} );
+
+        &:not(:only-child) {
+            margin-inline-end: var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} );
+            margin-inline-start: calc( var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} ) * -1 );
+        }
+    }
+
+
+    // Sizes
+    @each $size, $size-props in $kendo-fab-sizes {
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
+
+        .k-fab-#{$size} {
+            --INTERNAL--kendo-fab-padding-x: var( --kendo-fab-#{$size}-padding-x, #{$_padding-x} );
+            --INTERNAL--kendo-fab-padding-y: var( --kendo-fab-#{$size}-padding-y, #{$_padding-y} );
+        }
+    }
+
+    // Shapes
+    .k-fab-square {
+        aspect-ratio: 1;
+    }
+
+
+    // Items
+    .k-fab-items {
+        margin: 0;
+        padding-inline: var( --kendo-fab-items-padding-x, #{$kendo-fab-items-padding-x} );
+        padding-block: var( --kendo-fab-items-padding-y, #{$kendo-fab-items-padding-y} );
+        display: flex;
+    }
+
+    .k-fab-items-bottom {
+        flex-direction: column;
+    }
+    .k-fab-items-bottom .k-fab-item:last-child {
+        margin-bottom: 0;
+    }
+
+    .k-fab-items-top {
+        flex-direction: column-reverse;
+    }
+    .k-fab-items-top .k-fab-item:first-child {
+        margin-bottom: 0;
+    }
+
+    .k-fab-item {
+        list-style-type: none;
+        margin-block-end: var( --kendo-fab-item-offset-y, #{$kendo-fab-item-offset-y} );
+        outline: none;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        cursor: pointer;
+
+        &:focus .k-fab-item-text::after,
+        &:focus .k-fab-item-icon::after,
+        &.k-focus .k-fab-item-text::after,
+        &.k-focus .k-fab-item-icon::after {
+            content: "";
+            position: absolute;
+            border: medium none;
+            inset: var( --kendo-fab-item-focus-offset, #{$kendo-fab-item-focus-offset} );
+            outline-width: var( --kendo-fab-item-focus-outline-width, #{$kendo-fab-item-focus-outline-width} );
+            outline-style: var( --kendo-fab-item-focus-outline-style, #{$kendo-fab-item-focus-outline-style} );
+            z-index: 1;
+        }
+
+        &.k-text-right {
+            flex-direction: row;
+
+            .k-fab-item-text {
+                margin-inline-end: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
+            }
+        }
+
+        &.k-text-left {
+            flex-direction: row-reverse;
+
+            .k-fab-item-text {
+                margin-inline-start: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
+            }
+        }
+    }
+
+    .k-fab-item-text {
+        padding-inline: var( --kendo-fab-item-text-padding-x, #{$kendo-fab-item-text-padding-x} );
+        padding-block: var( --kendo-fab-item-text-padding-y, #{$kendo-fab-item-text-padding-y} );
+        border-width: var( --kendo-fab-item-text-border-width, #{$kendo-fab-item-text-border-width} );
+        border-style: var( --kendo-fab-item-text-border-style, #{$kendo-fab-item-text-border-style} );
+        border-radius: var( --kendo-fab-item-text-border-radius, #{$kendo-fab-item-text-border-radius} );
+        position: relative;
+        font-size: var( --kendo-fab-item-text-font-size, #{$kendo-fab-item-text-font-size} );
+        line-height: var( --kendo-fab-item-text-line-height, #{$kendo-fab-item-text-line-height} );
+    }
+
+    .k-fab-item-icon {
+        width: var( --kendo-fab-item-icon-width, #{$kendo-fab-item-icon-width} );
+        height: var( --kendo-fab-item-icon-height, #{$kendo-fab-item-icon-height} );
+        padding-inline: var( --kendo-fab-item-icon-padding-x, #{$kendo-fab-item-icon-padding-x} );
+        padding-block: var( --kendo-fab-item-icon-padding-y, #{$kendo-fab-item-icon-padding-y} );
+        border-width: var( --kendo-fab-item-icon-border-width, #{$kendo-fab-item-icon-border-width} );
+        border-style: var( --kendo-fab-item-icon-border-style, #{$kendo-fab-item-icon-border-style} );
+        border-radius: var( --kendo-fab-item-border-radius, #{$kendo-fab-item-icon-border-radius} );
+        box-sizing: content-box;
+        outline: none;
+
+        &::after {
+            border-radius: inherit;
+        }
+    }
+
+}

packages/fluent/scss/fab/_theme.scss

@@ -0,0 +1,201 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-fab--theme() {
+
+    .k-fab {
+        --INTERNAL--kendo-fab-text: var( --kendo-fab-text );
+        --INTERNAL--kendo-fab-bg: var( --kendo-fab-bg );
+        --INTERNAL--kendo-fab-border: var( --kendo-fab-border );
+        --INTERNAL--kendo-fab-gradient: var( --kendo-fab-gradient );
+        --INTERNAL--kendo-fab-shadow: var( --kendo-fab-shadow );
+
+        border-color: var( --INTERNAL--kendo-fab-border, initial );
+        color: var( --INTERNAL--kendo-fab-text, inherit );
+        background-color: var( --INTERNAL--kendo-fab-bg, initial );
+        background-image: linear-gradient(
+            var( --INTERNAL--kendo-fab-gradient, transparent, transparent )
+        );
+        box-shadow: var( --INTERNAL--kendo-fab-shadow, none );
+
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-hover-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-hover-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-hover-border );
+        }
+
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-focus-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-focus-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-focus-border );
+        }
+        &:focus::after,
+        &.k-focus::after {
+            outline-color: var( --kendo-fab-focus-outline, initial );
+        }
+
+        &:active,
+        &.k-active {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-active-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-active-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-active-border );
+        }
+
+        &.k-selected {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-selected-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-selected-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-selected-border );
+        }
+
+        &:disabled,
+        &.k-disabled {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-disabled-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-disabled-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-disabled-border );
+        }
+    }
+
+    // Theme colors
+    @each $fill-mode, $theme-colors in $kendo-fab-theme-colors {
+        @each $theme-color, $color-props in $theme-colors {
+            $_text-color: map-get( $color-props, text );
+            $_bg: map-get( $color-props, bg );
+            $_border-color: map-get( $color-props, border );
+
+            $_focus-text: map-get( $color-props, focus-text );
+            $_focus-bg: map-get( $color-props, focus-bg );
+            $_focus-border: map-get( $color-props, focus-border );
+            $_focus-outline: map-get( $color-props, focus-outline );
+
+            $_hover-text: map-get( $color-props, hover-text );
+            $_hover-bg: map-get( $color-props, hover-bg );
+            $_hover-border: map-get( $color-props, hover-border );
+
+            $_active-text: map-get( $color-props, active-text );
+            $_active-bg: map-get( $color-props, active-bg );
+            $_active-border: map-get( $color-props, active-border );
+
+            $_disabled-text: map-get( $color-props, disabled-text );
+            $_disabled-bg: map-get( $color-props, disabled-bg );
+            $_disabled-border: map-get( $color-props, disabled-border );
+
+            .k-fab-#{$fill-mode}-#{$theme-color} {
+                --kendo-fab-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );
+                --kendo-fab-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
+                --kendo-fab-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-border, #{$_border-color} );
+
+                --kendo-fab-hover-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-hover-text, #{$_hover-text} );
+                --kendo-fab-hover-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-hover-bg, #{$_hover-bg} );
+                --kendo-fab-hover-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-hover-border, #{$_hover-border} );
+
+                --kendo-fab-focus-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-focus-text, #{$_focus-text} );
+                --kendo-fab-focus-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-focus-bg, #{$_focus-bg} );
+                --kendo-fab-focus-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-focus-border, #{$_focus-border} );
+                --kendo-fab-focus-outline: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-focus-outline, #{$_focus-outline} );
+
+                --kendo-fab-active-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-active-text, #{$_active-text} );
+                --kendo-fab-active-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-active-bg, #{$_active-bg} );
+                --kendo-fab-active-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-active-border, #{$_active-border} );
+
+                --kendo-fab-selected-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-selected-text, #{$_active-text} );
+                --kendo-fab-selected-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-selected-bg, #{$_active-bg} );
+                --kendo-fab-selected-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-selected-border, #{$_active-border} );
+
+                --kendo-fab-disabled-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-disabled-text, #{$_disabled-text} );
+                --kendo-fab-disabled-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-disabled-bg, #{$_disabled-bg} );
+                --kendo-fab-disabled-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-disabled-border, #{$_disabled-border} );
+            }
+        }
+    }
+
+    // Items
+    .k-fab-item-text,
+    .k-fab-item-icon {
+        --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-text, #{$kendo-fab-item-text} );
+        --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-bg, #{$kendo-fab-item-bg} );
+        --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-border, #{$kendo-fab-item-border} );
+
+        @include fill(
+            var( --INTERNAL--kendo-fab-item-text, inherit ),
+            var( --INTERNAL--kendo-fab-item-bg, transparent ),
+            var( --INTERNAL--kendo-fab-item-border, inherit )
+        );
+    }
+
+    .k-fab-item {
+
+        // Hover
+        &:hover,
+        &.k-hover {
+            .k-fab-item-icon {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-icon-hover-text, #{$kendo-fab-item-hover-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-icon-hover-bg, #{$kendo-fab-item-hover-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-icon-hover-border, #{$kendo-fab-item-hover-border} );
+            }
+
+            .k-fab-item-text {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-hover-text, #{$kendo-fab-item-hover-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-hover-bg, #{$kendo-fab-item-hover-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-hover-border, #{$kendo-fab-item-hover-border} );
+            }
+        }
+
+        // Focus
+        &:focus,
+        &.k-focus {
+            .k-fab-item-icon {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-icon-focus-text, #{$kendo-fab-item-focus-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-icon-focus-bg, #{$kendo-fab-item-focus-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-icon-focus-border, #{$kendo-fab-item-focus-border} );
+            }
+
+            .k-fab-item-text {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-focus-text, #{$kendo-fab-item-focus-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-focus-bg, #{$kendo-fab-item-focus-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-focus-border, #{$kendo-fab-item-focus-border} );
+            }
+        }
+
+        // Active
+        &:active,
+        &.k-active {
+            .k-fab-item-icon {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-icon-active-text, #{$kendo-fab-item-active-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-icon-active-bg, #{$kendo-fab-item-active-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-icon-active-border, #{$kendo-fab-item-active-border} );
+            }
+
+            .k-fab-item-text {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-active-text, #{$kendo-fab-item-active-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-active-bg, #{$kendo-fab-item-active-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-active-border, #{$kendo-fab-item-active-border} );
+            }
+        }
+
+        // Disabled
+        &:disabled,
+        &.k-disabled {
+            background-color: transparent;
+        }
+
+        &:disabled .k-fab-item-icon,
+        &.k-disabled .k-fab-item-icon,
+        &:disabled .k-fab-item-text,
+        &.k-disabled .k-fab-item-text {
+            @include disabled(
+                var( --kendo-disabled-text, inherit ),
+                var( --kendo-disabled-bg, inherit ),
+                var( --kendo-disabled-border, inherit )
+            );
+        }
+
+    }
+
+    // Popup
+    .k-fab-popup {
+        @include box-shadow( none );
+    }
+
+}