@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/checkbox/_layout.scss

@@ -1,32 +1,12 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *;
 
 @mixin kendo-checkbox--layout() {
 
-    // Checkbox
-    .k-checkbox {
-        margin: 0;
-        padding: 0;
-        width: var( --kendo-checkbox-width, 1em );
-        height: var( --kendo-checkbox-height, 1em );
-        line-height: initial;
-        border-width: var( --kendo-checkbox-border-width, #{$kendo-checkbox-border-width} );
-        border-style: solid;
-        outline: 0;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        display: inline-block;
-        flex: none;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-        -webkit-appearance: none;
-    }
-
+    @include kendo-checkbox--layout-base();
 
-    // Checkbox indicator
     .k-checkbox::before {
         @if $kendo-checkbox-indicator-type == "pseudo" {
             content: "";
@@ -41,26 +21,10 @@
             top: 50%;
             left: 50%;
         }
-
         @if $kendo-checkbox-indicator-type == "glyph" {
-            content: $kendo-checkbox-checked-glyph;
-            width: 1em;
-            height: 1em;
-            font-family: var( --kendo-checkbox-glyph-font-family, #{ $kendo-checkbox-glyph-font-family } );
-            font-size: var( --kendo-checkbox-glyph-size, 1em );
-            line-height: 1;
-            transform: translate(-50%, -50%) scale(0);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
+            font-size: $kendo-checkbox-glyph-size;
         }
-
         @if $kendo-checkbox-indicator-type == "image" {
-            content: "";
-            display: block;
-            width: 100%;
-            height: 100%;
             mask-size: var( --kendo-checkbox-indicator-size, 100% );
             mask-position: center;
             mask-repeat: no-repeat;
@@ -68,13 +32,13 @@
     }
 
 
-    // Hover state
+    // Fluent-specific hover state
     .k-checkbox:hover,
     .k-checkbox.k-hover {
         @if $kendo-checkbox-indicator-type == "image" {
             &::before {
                 background-color: currentColor;
-                mask-image: var( --kendo-checkbox-hover-image, #{ $kendo-checkbox-hover-image } );
+                mask-image: $kendo-checkbox-hover-image;
             }
         }
 
@@ -92,48 +56,32 @@
     }
 
 
-    // Focus state
+    // Fluent-specific focus state
     .k-checkbox:focus,
     .k-checkbox.k-focus {
         outline-offset: $kendo-checkbox-focus-outline-offset;
     }
 
 
-    // Checked state
+    // Fluent-specific checked state (pseudo type only)
     .k-checkbox:checked,
     .k-checkbox.k-checked {
-        @if $kendo-checkbox-indicator-type == "image" {
-            &::before {
-                background-color: currentColor;
-                mask-image: var( --kendo-checkbox-checked-image, #{ $kendo-checkbox-checked-image } );
-            }
-        }
-
         @if $kendo-checkbox-indicator-type == "pseudo" {
             &::before {
                 transform: translate(-50%, -50%) scale(1);
             }
         }
-
-        @if $kendo-checkbox-indicator-type == "glyph" {
-            &::before {
-                transform: translate(-50%, -50%) scale(1);
-            }
-        }
     }
 
 
-    // Indeterminate state
+    // Fluent-specific indeterminate state
     .k-checkbox:indeterminate,
     .k-checkbox.k-indeterminate {
         @if $kendo-checkbox-indicator-type == "image" {
             &::before {
-                background-color: currentColor;
-                mask-image: var( --kendo-checkbox-indeterminate-image, #{ $kendo-checkbox-indeterminate-image } );
                 mask-size: var( --kendo-checkbox-indeterminate-size, 100% );
             }
         }
-
         @if $kendo-checkbox-indicator-type == "pseudo" {
             &::before {
                 width: var( --kendo-checkbox-indeterminate-size, 1em );
@@ -141,32 +89,25 @@
                 transform: translate(-50%, -50%) scale(1);
             }
         }
-
-        @if $kendo-checkbox-indicator-type == "glyph" {
-            &::before {
-                transform: translate(-50%, -50%) scale(1);
-            }
-        }
     }
     .k-checkbox:indeterminate:hover,
     .k-checkbox.k-indeterminate.k-hover {
         @if $kendo-checkbox-indicator-type == "image" {
             &::before {
                 background-color: currentColor;
-                mask-image: var( --kendo-checkbox-hover-indeterminate-image, #{ $kendo-checkbox-hover-indeterminate-image } );
+                mask-image: $kendo-checkbox-hover-indeterminate-image;
             }
-
         }
     }
 
 
-    // Disabled state
+    // Fluent-specific disabled state
     .k-checkbox:checked:disabled,
     .k-checkbox.k-checked.k-disabled {
         @if $kendo-checkbox-indicator-type == "image" {
             &::before {
                 background-color: currentColor;
-                mask-image: var( --kendo-checkbox-disabled-checked-image, #{ $kendo-checkbox-disabled-checked-image } );
+                mask-image: $kendo-checkbox-disabled-checked-image;
             }
         }
     }
@@ -175,151 +116,33 @@
         @if $kendo-checkbox-indicator-type == "image" {
             &::before {
                 background-color: currentColor;
-                mask-image: var( --kendo-checkbox-disabled-indeterminate-image, #{ $kendo-checkbox-disabled-indeterminate-image } );
+                mask-image: $kendo-checkbox-disabled-indeterminate-image;
             }
         }
     }
 
-
-    // Checkbox wrap
-    .k-checkbox-wrap {
-        flex: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        gap: 0;
-        align-items: center;
-        align-self: flex-start;
-        vertical-align: middle;
-        position: relative;
-
-        &::before {
-            content: "\200b";
-            width: 0px;
-            overflow: hidden;
-            flex: none;
-            display: inline-block;
-            vertical-align: top;
-        }
-    }
-
-
-    // Checkbox label
-    .k-checkbox-label {
-        margin: 0;
-        padding: 0;
-        display: inline-flex;
-        align-items: flex-start;
-        gap: var( --kendo-checkbox-label-margin-x, #{ $kendo-checkbox-label-margin-x } );
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-
-        .k-ripple {
-            // Hide ripple temporarily
-            visibility: hidden !important; // stylelint-disable-line declaration-no-important
-        }
-    }
-    .k-checkbox + .k-label,
-    .k-checkbox-wrap + .k-label,
-    .k-checkbox + .k-checkbox-label,
-    .k-checkbox-wrap + .k-checkbox-label {
-        display: inline;
-        margin-inline-start: var( --kendo-checkbox-label-margin-x, #{ $kendo-checkbox-label-margin-x } );
-    }
-
-
-    // Empty label
-    .k-checkbox-label:empty {
-        display: none !important; // stylelint-disable-line declaration-no-important
-    }
-    .k-checkbox-label.k-no-text {
-        min-width: 1px;
-    }
-
-
     // Checkbox list
-    .k-checkbox-list {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: 0;
-        list-style: none;
-    }
     .k-checkbox-item,
     .k-checkbox-list-item {
-        padding-inline: var( --kendo-checkbox-list-item-padding-x, #{ $kendo-checkbox-list-item-padding-x } );
-        padding-block: var( --kendo-checkbox-list-item-padding-y, #{ $kendo-checkbox-list-item-padding-y } );
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-content: center;
         gap: k-spacing(2);
-
-        .k-checkbox-label {
-            margin: 0;
-        }
-    }
-    .k-checkbox-list-horizontal,
-    .k-checkbox-list.k-list-horizontal {
-        display: flex;
-        flex-flow: row wrap;
-        gap: var( --kendo-checkbox-list-spacing, #{ $kendo-checkbox-list-spacing });
     }
 
-
-    // Ripple
+    // Fluent-specific ripple focus override
     .k-ripple-container {
-        .k-checkbox::after {
-            content: "";
-            width: var( --kendo-ripple-size-width, 300% );
-            height: var( --kendo-ripple-size-height, 300% );
-            display: block;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            border-radius: 100%;
-            z-index: -1;
-            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
-            transform: translate(-50%, -50%) scale(0);
-            transform-origin: center center;
-        }
-
         .k-checkbox:focus,
         .k-checkbox.k-focus {
-            box-shadow: none !important; // stylelint-disable-line declaration-no-important
             outline: none !important; // stylelint-disable-line declaration-no-important
         }
-
-        .k-checkbox:disabled::after,
-        .k-checkbox.k-disabled::after {
-            display: none;
-        }
     }
 
-
-    // Checkbox size
+     // Checkbox size
     @each $size, $size-props in $kendo-checkbox-sizes {
-        $_size: map.get( $size-props, size );
-        $_glyph-size: map.get( $size-props, glyph-size );
         $_indicator-size: map.get( $size-props, indicator-size );
         $_indeterminate-size: map.get( $size-props, indeterminate-size );
-        $_ripple-size: map.get( $size-props, ripple-size );
 
         .k-checkbox-#{$size} {
-            --kendo-checkbox-width: #{$_size};
-            --kendo-checkbox-height: #{$_size};
-            --kendo-checkbox-glyph-size: #{$_glyph-size};
             --kendo-checkbox-indicator-size: #{$_indicator-size};
             --kendo-checkbox-indeterminate-size: #{$_indeterminate-size};
         }
-
-        .k-ripple-container {
-            .k-checkbox-#{size}::after {
-                --kendo-ripple-size-width: #{ $_ripple-size };
-                --kendo-ripple-size-height: #{ $_ripple-size };
-            }
-        }
     }
-
 }

package/scss/checkbox/_theme.scss

@@ -1,131 +1,42 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/checkbox/_theme.scss" as *;
 
 @mixin kendo-checkbox--theme() {
 
-    // Checkbox
-    .k-checkbox {
-        @include fill(
-            var( --kendo-checkbox-text, #{$kendo-checkbox-text} ),
-            var( --kendo-checkbox-bg, #{$kendo-checkbox-bg} ),
-            var( --kendo-checkbox-border, #{$kendo-checkbox-border} )
-        );
-    }
-
-
-    // Hover state
-    .k-checkbox:hover,
-    .k-checkbox.k-hover {
-        @include fill(
-            var( --kendo-checkbox-hover-text, #{$kendo-checkbox-hover-text} ),
-            var( --kendo-checkbox-hover-bg, #{$kendo-checkbox-hover-bg} ),
-            var( --kendo-checkbox-hover-border, #{$kendo-checkbox-hover-border} )
-        );
-    }
-
+    @include kendo-checkbox--theme-base();
 
     // Focus state
     .k-checkbox:focus,
     .k-checkbox.k-focus {
-        box-shadow: $kendo-checkbox-focus-shadow;
         outline: $kendo-checkbox-focus-outline;
     }
 
-
-    // Checked state
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
-        @include fill(
-            var( --kendo-checkbox-checked-text, #{$kendo-checkbox-checked-text} ),
-            var( --kendo-checkbox-checked-bg, #{$kendo-checkbox-checked-bg} ),
-            var( --kendo-checkbox-checked-border, #{$kendo-checkbox-checked-border} )
-        );
-    }
-
-
     // Hover checked state
     .k-checkbox:checked:hover,
     .k-checkbox.k-checked.k-hover {
         @include fill(
-            var( --kendo-checkbox-hover-checked-text, #{$kendo-checkbox-hover-checked-text} ),
-            var( --kendo-checkbox-hover-checked-bg, #{$kendo-checkbox-hover-checked-bg} ),
-            var( --kendo-checkbox-hover-checked-border, #{$kendo-checkbox-hover-checked-border} )
-        );
-    }
-
-
-    // Indeterminate state
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate {
-        @include fill(
-            var( --kendo-checkbox-indeterminate-text, #{$kendo-checkbox-indeterminate-text} ),
-            var( --kendo-checkbox-indeterminate-bg, #{$kendo-checkbox-indeterminate-bg} ),
-            var( --kendo-checkbox-indeterminate-border, #{$kendo-checkbox-indeterminate-border} )
+            $kendo-checkbox-hover-checked-text,
+            $kendo-checkbox-hover-checked-bg,
+            $kendo-checkbox-hover-checked-border
         );
     }
 
-
     // Hover indeterminate state
     .k-checkbox:indeterminate:hover,
     .k-checkbox.k-indeterminate.k-hover {
         @include fill(
-            var( --kendo-checkbox-hover-indeterminate-text, #{$kendo-checkbox-hover-indeterminate-text} ),
-            var( --kendo-checkbox-hover-indeterminate-bg, #{$kendo-checkbox-hover-indeterminate-bg} ),
-            var( --kendo-checkbox-hover-indeterminate-border, #{$kendo-checkbox-hover-indeterminate-border} )
-        );
-    }
-
-
-    // Disabled state
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled {
-        @include fill(
-            var( --kendo-checkbox-disabled-text, #{$kendo-checkbox-disabled-text} ),
-            var( --kendo-checkbox-disabled-bg, #{$kendo-checkbox-disabled-bg} ),
-            var( --kendo-checkbox-disabled-border, #{$kendo-checkbox-disabled-border} )
-        );
-    }
-    .k-checkbox:checked:disabled,
-    .k-checkbox.k-checked.k-disabled {
-        @include fill(
-            var( --kendo-checkbox-disabled-checked-text, #{$kendo-checkbox-disabled-checked-text} ),
-            var( --kendo-checkbox-disabled-checked-bg, #{$kendo-checkbox-disabled-checked-bg} ),
-            var( --kendo-checkbox-disabled-checked-border, #{$kendo-checkbox-disabled-checked-border} )
+            $kendo-checkbox-hover-indeterminate-text,
+            $kendo-checkbox-hover-indeterminate-bg,
+            $kendo-checkbox-hover-indeterminate-border
         );
     }
     .k-checkbox:indeterminate:disabled,
     .k-checkbox.k-indeterminate.k-disabled {
         @include fill(
-            var( --kendo-checkbox-disabled-indeterminate-text, #{$kendo-checkbox-disabled-indeterminate-text} ),
-            var( --kendo-checkbox-disabled-indeterminate-bg, #{$kendo-checkbox-disabled-indeterminate-bg} ),
-            var( --kendo-checkbox-disabled-indeterminate-border, #{$kendo-checkbox-disabled-indeterminate-border} )
+            $kendo-checkbox-disabled-indeterminate-text,
+            $kendo-checkbox-disabled-indeterminate-bg,
+            $kendo-checkbox-disabled-indeterminate-border
         );
     }
-
-
-    // Invalid state
-    .k-checkbox.k-invalid,
-    .k-checkbox.ng-invalid.ng-touched,
-    .k-checkbox.ng-invalid.ng-dirty {
-        @include fill( $border: var( --kendo-checkbox-invalid-border, #{ $kendo-checkbox-invalid-border} ) );
-    }
-    .k-checkbox.k-invalid + .k-checkbox-label,
-    .k-checkbox.ng-invalid.ng-touched + .k-checkbox-label,
-    .k-checkbox.ng-invalid.ng-dirty + .k-checkbox-label {
-        @include fill( $color: var( --kendo-checkbox-invalid-text, #{ $kendo-checkbox-invalid-text } ) );
-    }
-
-
-    // Ripple
-    .k-checkbox-wrap .k-ripple-blob {
-        color: var( --kendo-checkbox-ripple-bg, #{ $kendo-checkbox-ripple-bg } );
-        opacity: var( --kendo-checkbox-ripple-opacity, #{ $kendo-checkbox-ripple-opacity } );
-    }
-    .k-ripple-container {
-        .k-checkbox::after {
-            background: var( --kendo-checkbox-ripple-bg, #{ $kendo-checkbox-ripple-bg } );
-            opacity: var( --kendo-checkbox-ripple-opacity, #{ $kendo-checkbox-ripple-opacity } );
-        }
-    }
-
 }