@progress/kendo-theme-default 5.1.2-dev.6 → 5.2.1-dev.0

package/scss/loader/_variables.scss

@@ -27,7 +27,7 @@ $loader-secondary-bg: #656565 !default;
 $loader-container-panel-border-width: 1px !default;
 $loader-container-panel-border-style: solid !default;
 $loader-container-panel-border-color: $component-border !default;
-$loader-container-panel-border-radius: $border-radius !default;
+$loader-container-panel-border-radius: $kendo-border-radius-md !default;
 $loader-container-panel-bg: $white !default;
 
 $loader-container-padding-sm: map-get( $spacing, 4 ) !default;

package/scss/notification/_variables.scss

@@ -2,7 +2,7 @@
 $notification-padding-x: 8px !default;
 $notification-padding-y: 4px !default;
 $notification-border-width: 1px !default;
-$notification-border-radius: $border-radius !default;
+$notification-border-radius: $kendo-border-radius-md !default;
 
 $notification-shadow: $popup-shadow !default;
 
@@ -20,6 +20,7 @@ $notification-border: $component-border !default;
 @function notification-theme( $colors ) {
     $_theme: ();
 
+    // sass-lint:disable-block indentation
     @each $name, $color in $colors {
         $_theme: map-merge(( $name: (
             color: contrast-wcag( $color ),

package/scss/orgchart/_variables.scss

@@ -16,7 +16,7 @@ $orgchart-node-container-gap: $orgchart-spacer !default;
 $orgchart-node-group-padding-y: $orgchart-spacer !default;
 $orgchart-node-group-padding-x: $orgchart-node-group-padding-y !default;
 $orgchart-node-group-border-width: 1px !default;
-$orgchart-node-group-border-radius: $border-radius !default;
+$orgchart-node-group-border-radius: $kendo-border-radius-md !default;
 $orgchart-node-group-bg: $base-bg !default;
 $orgchart-node-group-text: $base-text !default;
 $orgchart-node-group-border: $base-border !default;

package/scss/pager/_layout.scss

@@ -177,6 +177,11 @@
             width: $pager-dropdown-width;
         }
 
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
+
         .k-rtl &,
         [dir="rtl"] & {
             .k-dropdown-list,

package/scss/pivotgrid/_variables.scss

@@ -80,7 +80,7 @@ $pivotgrid-configurator-button-size: calc( #{$pivotgrid-line-height * 1em} + #{$
 $pivotgrid-calculated-field-padding-x: $pivotgrid-spacer !default;
 $pivotgrid-calculated-field-padding-y: $pivotgrid-spacer !default;
 $pivotgrid-calculated-field-border-width: 1px !default;
-$pivotgrid-calculated-field-border-radius: $border-radius !default;
+$pivotgrid-calculated-field-border-radius: $kendo-border-radius-md !default;
 $pivotgrid-calculated-field-gap: $pivotgrid-spacer !default;
 
 $pivotgrid-calculated-field-bg: $component-bg !default;

package/scss/popup/_layout.scss

@@ -19,7 +19,7 @@
         }
     }
     .k-animation-container {
-        @include border-bottom-radius-only( $border-radius );
+        @include border-bottom-radius-only( $kendo-border-radius-md );
 
         .k-popup {}
     }

package/scss/popup/_theme.scss

@@ -10,7 +10,7 @@
     }
 
     .k-animation-container {
-        @include border-bottom-radius-only( $border-radius );
+        @include border-bottom-radius-only( $kendo-border-radius );
     }
 
 }

package/scss/progressbar/_layout.scss

@@ -2,7 +2,7 @@
 
     // Base
     .k-progressbar {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius );
         --kendo-progressbar-progress: 0;
         border-width: $progressbar-border-width;
         border-style: solid;

package/scss/scheduler/_layout.scss

@@ -393,7 +393,7 @@
     // Appointments
     kendo-scheduler .k-event,
     .k-event {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius );
         min-height: $scheduler-event-min-height;
         box-sizing: border-box;
         border-width: 0;

package/scss/scheduler/_variables.scss

@@ -19,7 +19,7 @@ $scheduler-footer-border: $toolbar-border !default;
 $scheduler-footer-gradient: $toolbar-gradient !default;
 
 $scheduler-event-min-height: 25px !default;
-$scheduler-event-border-radius: $border-radius !default;
+$scheduler-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y}) ) !default;
 
 $scheduler-event-bg: tint( $selected-bg, 2 ) !default;
@@ -86,7 +86,7 @@ $scheduler-tooltip-events-gap: $padding-y !default;
 
 $scheduler-tooltip-event-padding-x: $padding-x !default;
 $scheduler-tooltip-event-padding-y: $padding-y !default;
-$scheduler-tooltip-event-border-radius: $border-radius !default;
+$scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-tooltip-event-gap: $padding-x-sm !default;
 
 $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;

package/scss/skeleton/_variables.scss

@@ -1,6 +1,6 @@
 // Skeleton
 $skeleton-text-transform: scale( 1, .6 ) !default;
-$skeleton-text-border-radius: $border-radius !default;
+$skeleton-text-border-radius: $kendo-border-radius-md !default;
 
 $skeleton-rect-border-radius: 0 !default;
 

package/scss/slider/_theme.scss

@@ -7,7 +7,7 @@
 
         .k-slider-track,
         .k-slider-selection {
-            @include border-radius( $border-radius );
+            @include border-radius( $kendo-border-radius );
         }
 
         .k-slider-track {

package/scss/spreadsheet/_layout.scss

@@ -91,10 +91,6 @@
             min-width: $form-line-height * 1em;
         }
 
-        .k-input,
-        .k-picker {
-            width: 5em;
-        }
         .k-color-picker {
             width: min-content;
         }
@@ -569,7 +565,7 @@
         box-sizing: border-box;
     }
     .k-spreadsheet-filter {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius );
         line-height: 1;
         position: absolute;
         cursor: pointer;

package/scss/spreadsheet/_variables.scss

@@ -15,9 +15,9 @@ $spreadsheet-insert-image-dialog-preview-width: 355px !default;
 $spreadsheet-insert-image-dialog-preview-height: 230px !default;
 $spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
 $spreadsheet-insert-image-dialog-preview-border: $component-border !default;
-$spreadsheet-insert-image-dialog-preview-border-radius: $border-radius !default;
+$spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
 $spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
-$spreadsheet-insert-image-dialog-preview-overlay-border-radius: $border-radius !default;
+$spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
 $spreadsheet-insert-image-dialog-overlay-hovered-text: $component-bg !default;
 
 $spreadsheet-drawing-handle-width: 6px !default;
@@ -27,7 +27,7 @@ $spreadsheet-drawing-handle-border-width: 1px !default;
 $spreadsheet-drawing-handle-outline-color: $primary !default;
 $spreadsheet-drawing-handle-border-color: $selected-bg !default;
 $spreadsheet-drawing-handle-bg: $primary !default;
-$spreadsheet-drawing-handle-border-radius: $border-radius-lg !default;
+$spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
 
 $spreadsheet-drawing-outline-style: solid !default;
 $spreadsheet-drawing-outline-width: 2px !default;

package/scss/stepper/_layout.scss

@@ -68,6 +68,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            flex: none;
             position: relative;
             z-index: 1;
             overflow: visible;
@@ -101,7 +102,7 @@
 
         // Step label
         .k-step-label {
-            max-width: 10em;
+            max-width: clamp(100%, 10em, 100%);
             display: inline-flex;
             flex-wrap: wrap;
             align-items: center;

package/scss/tabstrip/_variables.scss

@@ -33,7 +33,7 @@ $tabstrip-item-padding-y: $nav-item-padding-y !default;
 $tabstrip-item-border-width: 1px !default;
 /// Border radius of tabs
 /// @group tabstrip
-$tabstrip-item-border-radius: $border-radius !default;
+$tabstrip-item-border-radius: $kendo-border-radius-md !default;
 /// Spacing between tabs
 /// @group tabstrip
 $tabstrip-item-gap: $nav-item-margin !default;

package/scss/taskboard/_variables.scss

@@ -26,7 +26,7 @@ $taskboard-columns-container-gap: $taskboard-spacer !default;
 
 $taskboard-column-width: 320px !default;
 $taskboard-column-border-width: 1px !default;
-$taskboard-column-border-radius: $border-radius !default;
+$taskboard-column-border-radius: $kendo-border-radius-md !default;
 $taskboard-column-bg: $base-bg !default;
 $taskboard-column-text: null !default;
 $taskboard-column-border: transparent !default;
@@ -68,7 +68,7 @@ $taskboard-pane-actions-padding-x: $taskboard-spacer !default;
 $taskboard-card-padding-y: $taskboard-spacer !default;
 $taskboard-card-padding-x: $taskboard-card-padding-y !default;
 $taskboard-card-border-width: $card-border-width !default;
-$taskboard-card-border-radius: $border-radius !default;
+$taskboard-card-border-radius: $kendo-border-radius-md !default;
 $taskboard-card-shadow: $card-shadow !default;
 $taskboard-card-bg: $card-bg !default;
 $taskboard-card-text: $card-text !default;

package/scss/tilelayout/_variables.scss

@@ -4,7 +4,7 @@ $tilelayout-card-border-width: $card-border-width !default;
 $tilelayout-card-focus-shadow: $card-focus-shadow !default;
 
 $tilelayout-hint-border-width: 1px !default;
-$tilelayout-hint-border-radius: $border-radius-lg !default;
+$tilelayout-hint-border-radius: $kendo-border-radius-lg !default;
 
 $tilelayout-bg: $base-bg !default;
 

package/scss/timeline/_layout.scss

@@ -32,7 +32,7 @@
             display: inline-block;
             text-align: center;
             padding: $timeline-flag-padding-y $timeline-flag-padding-x;
-            border-radius: $border-radius;
+            border-radius: $kendo-border-radius;
             line-height: $timeline-flag-line-height;
             min-width: $timeline-flag-min-width;
             max-width: $timeline-flag-max-width;
@@ -96,7 +96,7 @@
                 }
 
                 &::-webkit-scrollbar-thumb {
-                    border-radius: $border-radius;
+                    border-radius: $kendo-border-radius;
                 }
             }
         }
@@ -140,7 +140,7 @@
             height: 100%;
             width: $timeline-track-size;
             transform: translateX(-50%);
-            border-radius: $border-radius-lg;
+            border-radius: $kendo-border-radius-lg;
         }
 
         .k-timeline-flag-wrap {

package/scss/tooltip/_variables.scss

@@ -3,7 +3,7 @@ $tooltip-padding-y: $padding-y !default;
 $tooltip-padding-x: $padding-x !default;
 $tooltip-max-width: null !default;
 $tooltip-border-width: 0px !default;
-$tooltip-border-radius: $border-radius !default;
+$tooltip-border-radius: $kendo-border-radius-md !default;
 
 $tooltip-font-family: $font-family !default;
 $tooltip-font-size: $font-size !default;

package/scss/treeview/_variables.scss

@@ -25,7 +25,7 @@ $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
 $kendo-treeview-item-border-width: 0px !default;
 /// Border radius of treeview items.
 /// @group treeview
-$kendo-treeview-item-border-radius: $border-radius !default;
+$kendo-treeview-item-border-radius: $kendo-border-radius-md !default;
 
 
 /// The sizes of the treeview.

package/scss/utils/_border.scss

@@ -41,11 +41,11 @@
     ) !default;
 
     $utils-border-radius: (
-        default: map-get( $spacing, 1 ),
+        default: $kendo-border-radius-md,
         0: 0,
-        sm: ( map-get( $spacing, 1 ) / 4 ),
-        md: ( map-get( $spacing, 1 ) / 2 ),
-        lg: map-get( $spacing, 1 ),
+        sm: $kendo-border-radius-sm,
+        md: $kendo-border-radius-md,
+        lg: $kendo-border-radius-lg,
         full: 9999px
     ) !default;
 

package/scss/utils/_flex.scss

@@ -7,48 +7,48 @@
     /// @name k-d-flex
     /// @description This is equivalent to `display: flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
-    .k-d-flex                        { display: flex; }
-    .\!k-d-flex                      { display: flex !important; } // sass-lint:disable-line no-important class-name-format
+    .k-d-flex                           { display: flex; }
+    .\!k-d-flex                         { display: flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-inline-flex
     /// @description This is equivalent to `display: inline-flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
-    .k-d-inline-flex                 { display: inline-flex; }
-    .\!k-d-inline-flex               { display: inline-flex !important; } // sass-lint:disable-line no-important class-name-format
+    .k-d-inline-flex                    { display: inline-flex; }
+    .\!k-d-inline-flex                  { display: inline-flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-flex-row
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: row`.
     /// @group flex-layout
-    .k-d-flex-row                    { @extend .k-d-flex, .k-flex-row; }
-    .\!k-d-flex-row                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
+    .k-d-flex-row                       { @extend .k-d-flex, .k-flex-row; }
+    .\!k-d-flex-row                     { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-d-flex-col
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: column`.
     /// @group flex-layout
-    .k-d-flex-col                    { @extend .k-d-flex, .k-flex-col; }
-    .\!k-d-flex-col                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
+    .k-d-flex-col                       { @extend .k-d-flex, .k-flex-col; }
+    .\!k-d-flex-col                     { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-flex-row
     /// @description This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
     /// @group flex-layout
-    .k-flex-row                      { flex-direction: row; }
-    .\!k-flex-row                    { flex-direction: row !important; } // sass-lint:disable-line no-important class-name-format
+    .k-flex-row                         { flex-direction: row; }
+    .\!k-flex-row                       { flex-direction: row !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-row-reverse
     /// @description This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
     /// @group flex-layout
-    .k-flex-row-reverse              { flex-direction: row-reverse; }
-    .\!k-flex-row-reverse            { flex-direction: row-reverse !important; } // sass-lint:disable-line no-important class-name-format
+    .k-flex-row-reverse                 { flex-direction: row-reverse; }
+    .\!k-flex-row-reverse               { flex-direction: row-reverse !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col
     /// @description This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
     /// @group flex-layout
-    .k-flex-col                      { flex-direction: column; }
-    .\!k-flex-col                    { flex-direction: column !important; } // sass-lint:disable-line no-important class-name-format
+    .k-flex-col                         { flex-direction: column; }
+    .\!k-flex-col                       { flex-direction: column !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col-reverse
     /// @description This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
     /// @group flex-layout
-    .k-flex-col-reverse              { flex-direction: column-reverse; }
-    .\!k-flex-col-reverse            { flex-direction: column-reverse; } // sass-lint:disable-line no-important class-name-format
+    .k-flex-col-reverse                 { flex-direction: column-reverse; }
+    .\!k-flex-col-reverse               { flex-direction: column-reverse !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Aliases
-    .k-flex-column                   { @extend .k-flex-col; }
-    .k-flex-column-reverse           { @extend .k-flex-col-reverse; }
+    .k-flex-column                      { @extend .k-flex-col; }
+    .k-flex-column-reverse              { @extend .k-flex-col-reverse; }
 
 
     // Flex wrap
@@ -56,15 +56,18 @@
     /// @name k-flex-wrap
     /// @description This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
     /// @group flex-layout
-    .k-flex-wrap                     { flex-wrap: wrap; }
+    .k-flex-wrap                        { flex-wrap: wrap; }
+    .\!k-flex-wrap                      { flex-wrap: wrap !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-nowrap
     /// @description This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line.
     /// @group flex-layout
-    .k-flex-nowrap                   { flex-wrap: nowrap; }
+    .k-flex-nowrap                      { flex-wrap: nowrap; }
+    .\!k-flex-nowrap                    { flex-wrap: nowrap !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-wrap-reverse
     /// @description This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top.
     /// @group flex-layout
-    .k-flex-wrap-reverse             { flex-wrap: wrap-reverse; }
+    .k-flex-wrap-reverse                { flex-wrap: wrap-reverse; }
+    .\!k-flex-wrap-reverse              { flex-wrap: wrap-reverse !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Flex, shrink, grow,
@@ -72,79 +75,115 @@
     /// @name k-flex-initial
     /// @description This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis.
     /// @group flex-layout
-    .k-flex-initial                  { flex: 0 1 auto; }
+    .k-flex-initial                     { flex: 0 1 auto; }
+    .\!k-flex-initial                   { flex: 0 1 auto !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-1
     /// @description This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space. This is similar to `flex: 1 1 auto` execpt it is allowed to shrink beyond its initial size.
     /// @group flex-layout
-    .k-flex-1                        { flex: 1 1 0%; }
+    .k-flex-1                           { flex: 1 1 0%; }
+    .\!k-flex-1                         { flex: 1 1 0% !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-auto
     /// @description This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`.
     /// @group flex-layout
-    .k-flex-auto                     { flex: 1 1 auto; }
+    .k-flex-auto                        { flex: 1 1 auto; }
+    .\!k-flex-auto                      { flex: 1 1 auto !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-none
     /// @description This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible. This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation.
     /// @group flex-layout
-    .k-flex-none                     { flex: none; }
+    .k-flex-none                        { flex: none; }
+    .\!k-flex-none                      { flex: none !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-grow
     /// @description This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
     /// @group flex-layout
-    .k-flex-grow                     { flex-grow: 1; }
+    .k-flex-grow                        { flex-grow: 1; }
+    .\!k-flex-grow                      { flex-grow: 1 !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-grow-0
     /// @description This is equivalent to `flex-grow: 0`. The item will not grow.
     /// @group flex-layout
-    .k-flex-grow-0                   { flex-grow: 0; }
+    .k-flex-grow-0                      { flex-grow: 0; }
+    .\!k-flex-grow-0                    { flex-grow: 0 !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-shrink
     /// @description This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
     /// @group flex-layout
-    .k-flex-shrink                   { flex-shrink: 1; }
+    .k-flex-shrink                      { flex-shrink: 1; }
+    .\!k-flex-shrink                    { flex-shrink: 1 !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-shrink-0
     /// @description This is equivalent to `flex-shrink: 0`. The item will not shrink.
     /// @group flex-layout
-    .k-flex-shrink-0                 { flex-shrink: 0; }
+    .k-flex-shrink-0                    { flex-shrink: 0; }
+    .\!k-flex-shrink-0                  { flex-shrink: 0 !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-basis-auto
     /// @description This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
     /// @group flex-layout
-    .k-flex-basis-auto               { flex-basis: auto; }
+    .k-flex-basis-auto                  { flex-basis: auto; }
+    .\!k-flex-basis-auto                { flex-basis: auto !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-basis-0
     /// @description This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
     /// @group flex-layout
-    .k-flex-basis-0                  { flex-basis: 0%; }
+    .k-flex-basis-0                     { flex-basis: 0%; }
+    .\!k-flex-basis-0                   { flex-basis: 0% !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Flex align
-    .k-align-items-start            { align-items: flex-start; }
-    .k-align-items-end              { align-items: flex-end; }
-    .k-align-items-center           { align-items: center; }
-    .k-align-items-stretch          { align-items: stretch; }
-    .k-align-items-baseline         { align-items: baseline; }
-
-    .k-align-content-start          { align-content: flex-start; }
-    .k-align-content-end            { align-content: flex-end; }
-    .k-align-content-center         { align-content: center; }
-    .k-align-content-stretch        { align-content: stretch; }
-    .k-align-content-baseline       { align-content: baseline; }
-
-    .k-align-self-start             { align-self: flex-start; }
-    .k-align-self-end               { align-self: flex-end; }
-    .k-align-self-center            { align-self: center; }
-    .k-align-self-stretch           { align-self: stretch; }
-    .k-align-self-baseline          { align-self: baseline; }
+    .k-align-items-start                { align-items: flex-start; }
+    .\!k-align-items-start              { align-items: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-items-end                  { align-items: flex-end; }
+    .\!k-align-items-end                { align-items: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-items-center               { align-items: center; }
+    .\!k-align-items-center             { align-items: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-items-stretch              { align-items: stretch; }
+    .\!k-align-items-stretch            { align-items: stretch !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-items-baseline             { align-items: baseline; }
+    .\!k-align-items-baseline           { align-items: baseline !important; } // sass-lint:disable-line no-important class-name-format
+
+    .k-align-content-start              { align-content: flex-start; }
+    .\!k-align-content-start            { align-content: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-content-end                { align-content: flex-end; }
+    .\!k-align-content-end              { align-content: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-content-center             { align-content: center; }
+    .\!k-align-content-center           { align-content: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-content-stretch            { align-content: stretch; }
+    .\!k-align-content-stretch          { align-content: stretch !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-content-baseline           { align-content: baseline; }
+    .\!k-align-content-baseline         { align-content: baseline !important; } // sass-lint:disable-line no-important class-name-format
+
+    .k-align-self-start                 { align-self: flex-start; }
+    .\!k-align-self-start               { align-self: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-self-end                   { align-self: flex-end; }
+    .\!k-align-self-end                 { align-self: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-self-center                { align-self: center; }
+    .\!k-align-self-center              { align-self: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-self-stretch               { align-self: stretch; }
+    .\!k-align-self-stretch             { align-self: stretch !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-self-baseline              { align-self: baseline; }
+    .\!k-align-self-baseline            { align-self: baseline !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Justify content
-    .k-justify-content-start        { justify-content: flex-start; }
-    .k-justify-content-end          { justify-content: flex-end; }
-    .k-justify-content-center       { justify-content: center; }
-    .k-justify-content-between      { justify-content: space-between; }
-    .k-justify-content-around       { justify-content: space-around; }
-    .k-justify-content-evenly       { justify-content: space-evenly; }
-    .k-justify-content-stretch > *  { flex: 1 0 0%; }
+    .k-justify-content-start            { justify-content: flex-start; }
+    .\!k-justify-content-start          { justify-content: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-end              { justify-content: flex-end; }
+    .\!k-justify-content-end            { justify-content: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-center           { justify-content: center; }
+    .\!k-justify-content-center         { justify-content: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-between          { justify-content: space-between; }
+    .\!k-justify-content-between        { justify-content: space-between !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-around           { justify-content: space-around; }
+    .\!k-justify-content-around         { justify-content: space-around !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-evenly           { justify-content: space-evenly; }
+    .\!k-justify-content-evenly         { justify-content: space-evenly !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-stretch > *      { flex: 1 0 0%; }
+    .\!k-justify-content-stretch > *    { flex: 1 0 0% !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Justify items
-    .k-justify-items-start          { justify-items: flex-start; }
-    .k-justify-items-end            { justify-items: flex-end; }
-    .k-justify-items-center         { justify-items: center; }
-    .k-justify-items-stretch        { justify-items: stretch; }
+    .k-justify-items-start              { justify-items: flex-start; }
+    .\!k-justify-items-start            { justify-items: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-items-end                { justify-items: flex-end; }
+    .\!k-justify-items-end              { justify-items: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-items-center             { justify-items: center; }
+    .\!k-justify-items-center           { justify-items: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-items-stretch            { justify-items: stretch; }
+    .\!k-justify-items-stretch          { justify-items: stretch !important; } // sass-lint:disable-line no-important class-name-format
 
 }