chore(fluent): work around postcss calc issue

postcss/postcss-calc#104
telerik · Dec 2, 2024 · 91b9863 · 91b9863
1 parent 1bb96a4
commit 91b9863
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 19 deletions.
diff --git a/packages/fluent/scss/chat/_layout.scss b/packages/fluent/scss/chat/_layout.scss
@@ -342,7 +342,6 @@
 
     .k-chat .k-card-deck {
         max-width: calc( 100% + calc( #{ $kendo-chat-message-list-padding-y} * 2 ) ); // prevent overflowing in the parent element
-        max-width: calc( 100% + var( --kendo-chat-message-list-padding-y, calc( #{ $kendo-chat-message-list-padding-y} * 2 ) ) );
         box-sizing: border-box;
         margin-inline: calc( var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } ) * -1 );
         padding-block-start: var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } );

diff --git a/packages/fluent/scss/colorgradient/_layout.scss b/packages/fluent/scss/colorgradient/_layout.scss
@@ -165,9 +165,10 @@
         }
 
         .k-contrast-validation {
+            --INTERNAL--kendo-color-gradient-contrast-spacing: var( --kendo-color-gradient-contrast-spacing,  #{$kendo-color-gradient-contrast-spacing} );
             display: inline-flex;
             align-items: center;
-            gap: calc( var( --kendo-color-gradient-contrast-spacing,  #{$kendo-color-gradient-contrast-spacing} ) / 2 );
+            gap: calc( var( --INTERNAL--kendo-color-gradient-contrast-spacing ) / 2 );
 
             .k-icon {
                 vertical-align: middle;

diff --git a/packages/fluent/scss/forms/_variables.scss b/packages/fluent/scss/forms/_variables.scss
@@ -4,7 +4,7 @@
 
 /// The padding of the inline Form.
 /// @group form
-$kendo-form-spacer: calc( #{k-spacing(2)} * 2 ) !default;
+$kendo-form-spacer: k-spacing(4) !default;
 
 /// The font size of the Form.
 /// @group form

diff --git a/packages/fluent/scss/imageeditor/_layout.scss b/packages/fluent/scss/imageeditor/_layout.scss
@@ -112,14 +112,16 @@
 
         .k-resize-n,
         .k-resize-s {
-            left: calc( 50% - var( --kendo-image-editor-resize-left-offset, #{$kendo-image-editor-resize-left-offset} ) );
+            --INTERNAL--kendo-image-editor-resize-left-offset: var( --kendo-image-editor-resize-left-offset, #{$kendo-image-editor-resize-left-offset} );
+            left: calc( 50% - var( --INTERNAL--kendo-image-editor-resize-left-offset ) );
             width: var( --kendo-image-editor-resize-handle-size, #{$kendo-image-editor-resize-handle-size} );
             height: 0;
         }
 
         .k-resize-w,
         .k-resize-e {
-            top: calc( 50% - var( --kendo-image-editor-resize-top-offset, #{$kendo-image-editor-resize-top-offset} ) );
+            --INTERNAL--kendo-image-editor-resize-top-offset: var( --kendo-image-editor-resize-top-offset, #{$kendo-image-editor-resize-top-offset} );
+            top: calc( 50% - var( --INTERNAL--kendo-image-editor-resize-top-offset ) );
             width: 0;
             height: var( --kendo-image-editor-resize-handle-size, #{$kendo-image-editor-resize-handle-size} );
         }

diff --git a/packages/fluent/scss/loader/_layout.scss b/packages/fluent/scss/loader/_layout.scss
@@ -170,25 +170,34 @@
 
         &.k-loader-sm {
             .k-loader-canvas {
+                --INTERNAL--kendo-loader-canvas-width: var( --kendo-loader-sm-spinner-3-width, #{$kendo-loader-sm-spinner-3-width} );
+                --INTERNAL--kendo-loader-canvas-height: var( --kendo-loader-sm-spinner-3-height, #{$kendo-loader-sm-spinner-3-height} );
+                --INTERNAL--kendo-loader-canvas-size:  var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} );
                 margin: calc( var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} ) / 2 );
-                width: calc( var( --kendo-loader-sm-spinner-3-width, #{$kendo-loader-sm-spinner-3-width} ) - var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} ) );
-                height: calc( var( --kendo-loader-sm-spinner-3-height, #{$kendo-loader-sm-spinner-3-height} ) - var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} ) );
+                width: calc( var( --INTERNAL--kendo-loader-canvas-width ) - var( --INTERNAL--kendo-loader-canvas-size ) );
+                height: calc( var( --INTERNAL--kendo-loader-canvas-height ) - var( --INTERNAL--kendo-loader-canvas-size ) );
             }
         }
 
         &.k-loader-md {
             .k-loader-canvas {
+                --INTERNAL--kendo-loader-canvas-width: var( --kendo-loader-md-spinner-3-width, #{$kendo-loader-md-spinner-3-width} );
+                --INTERNAL--kendo-loader-canvas-height: var( --kendo-loader-md-spinner-3-height, #{$kendo-loader-md-spinner-3-height} );
+                --INTERNAL--kendo-loader-canvas-size:  var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} );
                 margin: calc( var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} ) / 2 );
-                width: calc( var( --kendo-loader-md-spinner-3-width, #{$kendo-loader-md-spinner-3-width} ) - var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} ) );
-                height: calc( var( --kendo-loader-md-spinner-3-height, #{$kendo-loader-md-spinner-3-height} ) - var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} ) );
+                width: calc( var( --INTERNAL--kendo-loader-canvas-width ) - var( --INTERNAL--kendo-loader-canvas-size ) );
+                height: calc( var( --INTERNAL--kendo-loader-canvas-height ) - var( --INTERNAL--kendo-loader-canvas-size ) );
             }
         }
 
         &.k-loader-lg {
             .k-loader-canvas {
+                --INTERNAL--kendo-loader-canvas-width: var( --kendo-loader-lg-spinner-3-width, #{$kendo-loader-lg-spinner-3-width} );
+                --INTERNAL--kendo-loader-canvas-height: var( --kendo-loader-lg-spinner-3-height, #{$kendo-loader-lg-spinner-3-height} );
+                --INTERNAL--kendo-loader-canvas-size:  var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} );
                 margin: calc( var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} ) / 2 );
-                width: calc( var( --kendo-loader-lg-spinner-3-width, #{$kendo-loader-lg-spinner-3-width} ) - var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} ) );
-                height: calc( var( --kendo-loader-lg-spinner-3-height, #{$kendo-loader-lg-spinner-3-height} ) - var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} ) );
+                width: calc( var( --INTERNAL--kendo-loader-canvas-width ) - var( --INTERNAL--kendo-loader-canvas-size ) );
+                height: calc( var( --INTERNAL--kendo-loader-canvas-height ) - var( --INTERNAL--kendo-loader-canvas-size ) );
             }
         }
     }

diff --git a/packages/fluent/scss/panelbar/_layout.scss b/packages/fluent/scss/panelbar/_layout.scss
@@ -123,12 +123,14 @@
             // Hierarchy items
             @for $i from 1 through $kendo-panelbar-item-level-count {
                 &.k-level-#{$i} {
+                    --INTERNAL--kendo-panelbar-link-spacing: calc( #{k-spacing(3)} * #{$i} );
+                    --INTERNAL--kendo-panelbar-item-padding: var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} );
                     .k-link {
-                        padding-inline-start: calc( var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} ) + ( #{k-spacing(3)} * #{$i} ));
+                        padding-inline-start: calc( var( --INTERNAL--kendo-panelbar-item-padding ) + var( --INTERNAL--kendo-panelbar-link-spacing ) );
                     }
 
                     .k-panelbar-item-icon:first-child {
-                        inset-inline-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) + ( #{k-spacing(3)} * #{$i} ));
+                        inset-inline-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) + var( --INTERNAL--kendo-panelbar-link-spacing ) );
                     }
                 }
             }

diff --git a/packages/fluent/scss/panelbar/_variables.scss b/packages/fluent/scss/panelbar/_variables.scss
@@ -37,7 +37,7 @@ $kendo-panelbar-icon-spacing: k-spacing(2) !default;
 
 /// The horizontal start padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-panelbar-header-padding-x-start: calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) ) !default;
 
 /// The horizontal end padding of the PanelBar header.
 /// @group panelbar
@@ -48,7 +48,7 @@ $kendo-panelbar-header-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-panelbar-item-padding-x-start: calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) ) !default;
 
 /// The horizontal end padding of the PanelBar items.
 /// @group panelbar

diff --git a/packages/fluent/scss/timeselector/_layout.scss b/packages/fluent/scss/timeselector/_layout.scss
@@ -69,13 +69,14 @@
     // Time list highlight
     .k-time-highlight,
     .k-time-list-highlight {
+        --INTERNAL--kendo-time-list-title-height: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} );
         width: 100%;
         height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
         border-width: var( --kendo-time-list-highlight-border-width, $kendo-time-list-highlight-border-width );
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
-        top: calc( 50% + var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) / 2);
+        top: calc( 50% + var( --INTERNAL--kendo-time-list-title-height ) / 2);
         left: 0;
         right: 0;
         transform: translateY(-50%);
@@ -109,20 +110,21 @@
         &.k-focus {
             &::before,
             &::after {
+                --INTERNAL--kendo-time-list-title-highlight-height: var( --kendo-time-list-highlight-height, #{$kendo-time-list-highlight-height} );
                 display: block;
                 content: "\200b";
                 position: absolute;
                 width: 100%;
                 left: 0;
                 pointer-events: none;
-                height: calc( 50% - ( var( --kendo-time-list-highlight-height, #{$kendo-time-list-highlight-height} ) / 2) );
+                height: calc( 50% - ( var( --INTERNAL--kendo-time-list-title-highlight-height ) / 2) );
                 box-sizing: border-box;
                 border-width: 0;
                 border-style: solid;
             }
 
             &::before {
-                top: calc( var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) );
+                top: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) ;
             }
 
             &::after {
@@ -195,6 +197,7 @@
 
     // Time separator
     .k-time-separator {
+        --INTERNAL--kendo-time-list-title-height: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} );
         width: 0;
         height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
         align-self: center;
@@ -203,7 +206,7 @@
         align-items: center;
         position: relative;
         z-index: 11;
-        top: calc( var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) / 2);
+        top: calc( var( --INTERNAL--kendo-time-list-title-height ) / 2);
     }