Skip to content

Commit

Permalink
fix: replace slash division with k-math-div function
Browse files Browse the repository at this point in the history
  • Loading branch information
joneff committed Dec 16, 2022
1 parent 9361956 commit d1de3b7
Show file tree
Hide file tree
Showing 78 changed files with 170 additions and 164 deletions.
2 changes: 1 addition & 1 deletion packages/bootstrap/scss/expansion-panel/_variables.scss
Expand Up @@ -8,7 +8,7 @@ $expander-border-width: 1px !default;
$expander-header-padding-x: $padding-x-lg !default;
$expander-header-padding-y: $padding-y * 2 !default;

$expander-indicator-margin-x: calc( #{$padding-x / 2} * 1.5 ) !default;
$expander-indicator-margin-x: calc( #{k-math-div( $padding-x, 2 )} * 1.5 ) !default;

$expander-bg: $component-bg !default;
$expander-text: $component-text !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/bootstrap/scss/fab/_variables.scss
Expand Up @@ -5,7 +5,7 @@
$kendo-fab-border-width: 1px !default;
/// Border radius of the FAB.
/// @group floating-action-button
$kendo-fab-border-radius: $kendo-border-radius / 2 !default;
$kendo-fab-border-radius: k-math-div( $kendo-border-radius, 2 ) !default;
/// Font family of the FAB.
/// @group floating-action-button
$kendo-fab-font-family: $font-family !default;
Expand Down
3 changes: 2 additions & 1 deletion packages/bootstrap/scss/forms/_layout.scss
Expand Up @@ -23,7 +23,8 @@
}

.k-field-info {
margin: 0 $padding-x / 2;
margin-block: 0;
margin-inline: k-math-div( $padding-x, 2 );
}
}

Expand Down
6 changes: 3 additions & 3 deletions packages/bootstrap/scss/menu/_variables.scss
Expand Up @@ -117,9 +117,9 @@ $kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg

/// The end margin of the menu item expand icon.
/// @group menu
$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) ) !default;
$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{$kendo-menu-popup-item-padding-x-md / 2}) ) !default;
$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{$kendo-menu-popup-item-padding-x-lg / 2}) ) !default;
$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{k-math-div( $kendo-menu-popup-item-padding-x-sm, 2 )}) ) !default;
$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{k-math-div( $kendo-menu-popup-item-padding-x-md, 2 )}) ) !default;
$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{k-math-div( $kendo-menu-popup-item-padding-x-lg, 2 )}) ) !default;

/// The spacing between the menu items in popup.
/// @group menu
Expand Down
4 changes: 2 additions & 2 deletions packages/bootstrap/scss/orgchart/_variables.scss
Expand Up @@ -25,7 +25,7 @@ $orgchart-node-group-focus-border: $card-focus-border !default;
$orgchart-node-group-focus-shadow: $card-focus-shadow !default;

$orgchart-node-group-title-font-size: $font-size-lg !default;
$orgchart-node-group-title-margin-bottom: $orgchart-spacer / 4 !default;
$orgchart-node-group-title-margin-bottom: k-math-div( $orgchart-spacer, 4 ) !default;
$orgchart-node-group-title-line-height: $line-height-sm !default;

$orgchart-node-group-subtitle-margin-bottom: $orgchart-spacer !default;
Expand All @@ -48,7 +48,7 @@ $orgchart-card-subtitle-font-size: null !default;
$orgchart-card-body-border-width: 2px 0 0 !default;
$orgchart-card-body-border-color: transparent !default;

$orgchart-card-body-vbox-margin-right: $orgchart-spacer / 2 !default;
$orgchart-card-body-vbox-margin-right: k-math-div( $orgchart-spacer, 2 ) !default;
$orgchart-card-body-vbox-min-height: $card-avatar-size !default;

$orgchart-line-size: 1px !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/bootstrap/scss/timeline/_variables.scss
Expand Up @@ -18,7 +18,7 @@ $timeline-track-arrow-disabled-bg: k-true-mix( $kendo-button-bg, $body-bg, 65% )
$timeline-track-arrow-disabled-border: k-true-mix( $kendo-button-border, $body-bg, 65% ) !default;

$timeline-track-size: 6px !default;
$timeline-track-wrap-padding-bottom: $timeline-track-size / 2 !default;
$timeline-track-wrap-padding-bottom: k-math-div( $timeline-track-size, 2 ) !default;
$timeline-track-border-width: 1px !default;
$timeline-track-margin-bottom: $spacer !default;
$timeline-track-bottom-calc: calc((#{$timeline-track-arrow-height} / 2) + #{$timeline-track-wrap-padding-bottom}) !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/classic/scss/breadcrumb/_variables.scss
Expand Up @@ -14,7 +14,7 @@ $breadcrumb-text: $component-text !default;
$breadcrumb-border: $component-border !default;

$breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
$breadcrumb-delimiter-icon-padding-x: $padding-x-lg / 2 !default;
$breadcrumb-delimiter-icon-padding-x: k-math-div( $padding-x-lg, 2 ) !default;
$breadcrumb-delimiter-icon-padding-y: 0px !default;

$breadcrumb-link-padding-x: $padding-x !default;
Expand Down
6 changes: 3 additions & 3 deletions packages/classic/scss/menu/_variables.scss
Expand Up @@ -119,9 +119,9 @@ $kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg

/// The end margin of the menu item expand icon.
/// @group menu
$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) ) !default;
$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{$kendo-menu-popup-item-padding-x-md / 2}) ) !default;
$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{$kendo-menu-popup-item-padding-x-lg / 2}) ) !default;
$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{k-math-div( $kendo-menu-popup-item-padding-x-sm, 2 )}) ) !default;
$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{k-math-div( $kendo-menu-popup-item-padding-x-md, 2 )}) ) !default;
$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{k-math-div( $kendo-menu-popup-item-padding-x-lg, 2 )}) ) !default;

/// The spacing between the menu items in popup.
/// @group menu
Expand Down
4 changes: 2 additions & 2 deletions packages/classic/scss/orgchart/_variables.scss
Expand Up @@ -25,7 +25,7 @@ $orgchart-node-group-focus-border: $card-focus-border !default;
$orgchart-node-group-focus-shadow: $card-focus-shadow !default;

$orgchart-node-group-title-font-size: $font-size-xl !default;
$orgchart-node-group-title-margin-bottom: $orgchart-spacer / 4 !default;
$orgchart-node-group-title-margin-bottom: k-math-div( $orgchart-spacer, 4 ) !default;
$orgchart-node-group-title-line-height: $line-height-sm !default;

$orgchart-node-group-subtitle-margin-bottom: $orgchart-spacer !default;
Expand All @@ -48,7 +48,7 @@ $orgchart-card-subtitle-font-size: null !default;
$orgchart-card-body-border-width: 2px 0 0 !default;
$orgchart-card-body-border-color: transparent !default;

$orgchart-card-body-vbox-margin-right: $orgchart-spacer / 2 !default;
$orgchart-card-body-vbox-margin-right: k-math-div( $orgchart-spacer, 2 ) !default;
$orgchart-card-body-vbox-min-height: $card-avatar-size !default;

$orgchart-line-size: 1px !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/classic/scss/timeline/_variables.scss
Expand Up @@ -18,7 +18,7 @@ $timeline-track-arrow-disabled-bg: k-true-mix( $kendo-button-bg, $body-bg, 65% )
$timeline-track-arrow-disabled-border: k-true-mix( #000000, $body-bg, 4.8% ) !default;

$timeline-track-size: 6px !default;
$timeline-track-wrap-padding-bottom: $timeline-track-size / 2 !default;
$timeline-track-wrap-padding-bottom: k-math-div( $timeline-track-size, 2 ) !default;
$timeline-track-border-width: 1px !default;
$timeline-track-margin-bottom: 16px !default;
$timeline-track-bottom-calc: calc((#{$timeline-track-arrow-height} / 2) + #{$timeline-track-wrap-padding-bottom}) !default;
Expand Down
8 changes: 4 additions & 4 deletions packages/default/scss/_variables.scss
Expand Up @@ -75,8 +75,8 @@ $icon-font-url: null !default;
// Metrics
$padding-x: 8px !default;
$padding-y: 4px !default;
$padding-x-sm: $padding-x / 2 !default;
$padding-y-sm: $padding-y / 2 !default;
$padding-x-sm: k-math-div( $padding-x, 2 ) !default;
$padding-y-sm: k-math-div( $padding-y, 2 ) !default;
$padding-x-lg: $padding-x * 1.5 !default;
$padding-y-lg: $padding-y * 1.5 !default;

Expand Down Expand Up @@ -305,15 +305,15 @@ $disabled-opacity: .6 !default;
// TODO: refactor once we extract drag drop as separate module
$font-size: 14px !default;
$font-family: inherit !default;
$line-height: ( 20 / 14 ) !default;
$line-height: k-math-div( 20, 14 ) !default;


// Drop Hint
$equilateral-index: 1.7320508076 !default;
$equilateral-height: .8660254038 !default;

$drop-hint-arrow-size: 8px !default;
$drop-hint-arrow-spacing: ($drop-hint-arrow-size / 2) !default;
$drop-hint-arrow-spacing: k-math-div( $drop-hint-arrow-size, 2 ) !default;
$drop-hint-line-h-width: 20px !default;
$drop-hint-line-h-height: 1px !default;
$drop-hint-line-v-width: $drop-hint-line-h-height !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/breadcrumb/_variables.scss
Expand Up @@ -14,7 +14,7 @@ $breadcrumb-text: $component-text !default;
$breadcrumb-border: $component-border !default;

$breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
$breadcrumb-delimiter-icon-padding-x: $padding-x-lg / 2 !default;
$breadcrumb-delimiter-icon-padding-x: k-math-div( $padding-x-lg, 2 ) !default;
$breadcrumb-delimiter-icon-padding-y: 0px !default;

$breadcrumb-link-padding-x: $padding-x !default;
Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/calendar/_layout.scss
Expand Up @@ -348,7 +348,7 @@
z-index: 1;
width: 150%;
left: -25%;
box-shadow: 0 0 $calendar-cell-size ($calendar-cell-size / 2) $calendar-bg;
box-shadow: 0 0 $calendar-cell-size k-math-div( $calendar-cell-size, 2 ) $calendar-bg;
}
}

Expand Down Expand Up @@ -387,7 +387,7 @@
width: 200%;
left: -50%;
$shadow-size: 3 * $calendar-navigation-item-height;
box-shadow: 0 0 $shadow-size ($shadow-size / 2) $calendar-navigation-bg;
box-shadow: 0 0 $shadow-size k-math-div( $shadow-size, 2 ) $calendar-navigation-bg;
}

&::before { top: 0; }
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/captcha/_variables.scss
Expand Up @@ -14,6 +14,6 @@ $captcha-image-wrap-gap: $captcha-spacer !default;

$captcha-image-controls-gap: $captcha-spacer !default;

$captcha-validation-message-margin-top: $captcha-spacer / 2 !default;
$captcha-validation-message-margin-top: k-math-div( $captcha-spacer, 2 ) !default;
$captcha-validation-message-font-size: $font-size-sm !default;
$captcha-validation-message-font-style: italic !default;
2 changes: 1 addition & 1 deletion packages/default/scss/chat/_layout.scss
Expand Up @@ -224,7 +224,7 @@
.k-quick-reply {
@include border-radius( 100px );
margin-right: $chat-quick-reply-spacing;
margin-bottom: ($chat-quick-reply-spacing / 2);
margin-bottom: k-math-div( $chat-quick-reply-spacing, 2 );
padding: $chat-quick-reply-padding-y $chat-quick-reply-padding-x;
border-width: 1px;
border-style: solid;
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/coloreditor/_variables.scss
Expand Up @@ -16,7 +16,7 @@ $coloreditor-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;

$coloreditor-header-padding-y: $coloreditor-spacer !default;
$coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
$coloreditor-header-actions-gap: ( $coloreditor-spacer / 1.5 ) !default;
$coloreditor-header-actions-gap: k-math-div( $coloreditor-spacer, 1.5 ) !default;

$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
$coloreditor-color-preview-width: 32px !default;
Expand Down
6 changes: 3 additions & 3 deletions packages/default/scss/colorgradient/_layout.scss
Expand Up @@ -80,7 +80,7 @@
&.k-slider-vertical .k-slider-track {
width: $colorgradient-slider-track-size;
border-radius: $colorgradient-slider-border-radius;
margin-left: -($colorgradient-slider-track-size / 2);
margin-left: - k-math-div( $colorgradient-slider-track-size, 2 );
}

&.k-slider-horizontal {
Expand All @@ -91,7 +91,7 @@
&.k-slider-horizontal .k-slider-track {
height: $colorgradient-slider-track-size;
border-radius: $colorgradient-slider-border-radius;
margin-top: -($colorgradient-slider-track-size / 2);
margin-top: - k-math-div( $colorgradient-slider-track-size, 2 );
}

&.k-alpha-slider .k-slider-track::before {
Expand Down Expand Up @@ -162,7 +162,7 @@
.k-contrast-validation {
display: inline-flex;
align-items: center;
gap: ( $colorgradient-contrast-spacer / 2 );
gap: k-math-div( $colorgradient-contrast-spacer, 2 );

.k-icon {
vertical-align: middle;
Expand Down
10 changes: 5 additions & 5 deletions packages/default/scss/colorgradient/_variables.scss
Expand Up @@ -39,13 +39,13 @@ $colorgradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
$colorgradient-draghandle-focus-shadow: 0 1px 4px black !default;
$colorgradient-draghandle-hover-shadow: $colorgradient-draghandle-focus-shadow !default;

$colorgradient-canvas-draghandle-margin-y: -( $colorgradient-draghandle-height / 2 ) !default;
$colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width / 2 ) !default;
$colorgradient-canvas-draghandle-margin-y: - k-math-div( $colorgradient-draghandle-height, 2 ) !default;
$colorgradient-canvas-draghandle-margin-x: - k-math-div( $colorgradient-draghandle-width, 2 ) !default;

$colorgradient-input-width: 46px !default;
$colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
$colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !default;
$colorgradient-input-gap: k-math-div( $colorgradient-spacer, 1.5 ) !default;
$colorgradient-input-label-gap: k-math-div( $colorgradient-spacer, 3 ) !default;
$colorgradient-input-label-text: $subtle-text !default;

$colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
$colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
$colorgradient-contrast-spacer: k-math-div( $colorgradient-spacer, 1.5 ) !default;
10 changes: 5 additions & 5 deletions packages/default/scss/common/_base.scss
Expand Up @@ -220,7 +220,7 @@
.k-drop-hint-start,
.k-drop-hint-end {
flex-shrink: 0;
border-width: ($drop-hint-arrow-size / 2);
border-width: k-math-div( $drop-hint-arrow-size, 2 );
border-style: solid;
border-color: transparent;
}
Expand All @@ -232,7 +232,7 @@

.k-drop-hint-h {
.k-drop-hint-start {
border-left-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
border-left-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
border-left-color: $drop-hint-bg;
border-right-width: 0;
}
Expand All @@ -243,7 +243,7 @@
}

.k-drop-hint-end {
border-right-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
border-right-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
border-right-color: $drop-hint-bg;
border-left-width: 0;
}
Expand All @@ -253,7 +253,7 @@
flex-direction: column;

.k-drop-hint-start {
border-top-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
border-top-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
border-top-color: $drop-hint-bg;
border-bottom-width: 0;
}
Expand All @@ -264,7 +264,7 @@
}

.k-drop-hint-end {
border-bottom-width: (($drop-hint-arrow-size / 2) * $equilateral-index);
border-bottom-width: ( k-math-div( $drop-hint-arrow-size, 2 ) * $equilateral-index );
border-bottom-color: $drop-hint-bg;
border-top-width: 0;
}
Expand Down
16 changes: 8 additions & 8 deletions packages/default/scss/dataviz/_layout.scss
Expand Up @@ -152,31 +152,31 @@
}

.k-left-handle {
left: -($selection-handle-size / 2);
left: - k-math-div( $selection-handle-size, 2 );
}

.k-right-handle {
right: -($selection-handle-size / 2);
right: - k-math-div( $selection-handle-size, 2 );
}

.k-left-handle div {
margin: -($selection-handle-size) 0 0 (-($selection-handle-size / 1.5));
padding: ($selection-handle-size * 2) (($selection-handle-size / 1.5) * 2) 0 0;
margin: -($selection-handle-size) 0 0 (- k-math-div( $selection-handle-size, 1.5 ));
padding: ($selection-handle-size * 2) (k-math-div( $selection-handle-size, 1.5 ) * 2) 0 0;
}

.k-right-handle div {
margin: -($selection-handle-size) 0 0 (-($selection-handle-size / 1.5));
padding: ($selection-handle-size * 2) 0 0 (($selection-handle-size / 1.5) * 2);
margin: -($selection-handle-size) 0 0 (- k-math-div( $selection-handle-size, 1.5 ));
padding: ($selection-handle-size * 2) 0 0 (k-math-div( $selection-handle-size, 1.5 ) * 2);
}

.k-left-handle.k-handle-active div {
margin-left: -($selection-handle-size * 2);
padding-left: ($selection-handle-size * 2) + ($selection-handle-size / 1.5);
padding-left: ($selection-handle-size * 2) + k-math-div( $selection-handle-size, 1.5 );
}

.k-right-handle.k-handle-active div {
margin-left: -($selection-handle-size * 2);
padding-right: ($selection-handle-size * 2) + ($selection-handle-size / 1.5);
padding-right: ($selection-handle-size * 2) + k-math-div( $selection-handle-size, 1.5 );
}

.k-mask {
Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/editor/_layout.scss
Expand Up @@ -268,8 +268,8 @@
// Insert table
.k-ct-popup {
box-sizing: border-box;
width: $ct-cell-size * 10 - ($ct-cell-size / 2);
padding: $ct-cell-size / 4;
width: $ct-cell-size * 10 - k-math-div( $ct-cell-size, 2 );
padding: k-math-div( $ct-cell-size, 4 );

.k-button {
width: 100%;
Expand Down
6 changes: 3 additions & 3 deletions packages/default/scss/fab/_variables.scss
Expand Up @@ -20,14 +20,14 @@ $kendo-fab-line-height: $line-height !default;
/// Horizontal padding of the FAB.
/// @group floating-action-button
$kendo-fab-padding-x: map-get( $spacing, 4 ) !default;
$kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
$kendo-fab-padding-x-sm: k-math-div( $kendo-fab-padding-x, 2 ) !default;
$kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
$kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;

/// Vertical padding of the FAB.
/// @group floating-action-button
$kendo-fab-padding-y: $kendo-fab-padding-x !default;
$kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
$kendo-fab-padding-y-sm: k-math-div( $kendo-fab-padding-y, 2 ) !default;
$kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
$kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;

Expand All @@ -39,7 +39,7 @@ $kendo-fab-icon-width: 20px !default;
$kendo-fab-icon-height: $kendo-fab-icon-width !default;
/// FAB icon spacing.
/// @group floating-action-button
$kendo-fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
$kendo-fab-icon-spacing: k-math-div( map-get( $spacing, 1 ), 2 ) !default;

/// FAB items horizontal padding.
/// @group floating-action-button
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/filemanager/_layout.scss
Expand Up @@ -105,7 +105,7 @@

// File name
.k-file-name {
margin-top: ($filemanager-spacer / 2);
margin-top: k-math-div( $filemanager-spacer, 2 );
display: block;
text-align: center;
overflow: hidden;
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/forms/_layout.scss
Expand Up @@ -377,7 +377,7 @@
}

> .k-reset > li + li {
margin-top: ($spacer / 2);
margin-top: k-math-div( $spacer, 2 );
}

.k-reset .k-widget {
Expand Down

0 comments on commit d1de3b7

Please sign in to comment.