@progress/kendo-theme-default 5.1.2-dev.7 → 5.2.1-dev.1

package/dist/all.css

@@ -997,15 +997,17 @@ kendo-sortable {
     text-indent: -4000px;
     text-align: center;
     position: absolute;
+    color: currentColor;
 }
 
 .k-loading-image {
     z-index: 2;
+    color: currentColor;
 }
 
 .k-loading-color {
     background-color: #ffffff;
-    opacity: .3;
+    opacity: 0.3;
 }
 
 .k-i-loading {
@@ -12202,6 +12204,18 @@ kendo-badge-container {
     flex: none;
 }
 
+.k-split-button .k-split-button-arrow.k-button-sm {
+    padding: 2px 2px;
+}
+
+.k-split-button .k-split-button-arrow.k-button-md {
+    padding: 4px 4px;
+}
+
+.k-split-button .k-split-button-arrow.k-button-lg {
+    padding: 6px 6px;
+}
+
 .k-split-button .k-split-button-arrow .k-button-icon {
     min-width: 0;
 }
@@ -13337,6 +13351,38 @@ kendo-badge-container {
     margin: 0;
 }
 
+.k-input:disabled, .k-input[disabled], .k-input.k-disabled,
+.k-picker:disabled,
+.k-picker[disabled],
+.k-picker.k-disabled {
+    outline: none;
+    cursor: default;
+    opacity: 0.6;
+    filter: grayscale(0.1);
+    pointer-events: none;
+    box-shadow: none;
+}
+
+.k-input:disabled [disabled],
+.k-input:disabled .k-disabled,
+.k-input:disabled .k-state-disabled, .k-input[disabled] [disabled],
+.k-input[disabled] .k-disabled,
+.k-input[disabled] .k-state-disabled, .k-input.k-disabled [disabled],
+.k-input.k-disabled .k-disabled,
+.k-input.k-disabled .k-state-disabled,
+.k-picker:disabled [disabled],
+.k-picker:disabled .k-disabled,
+.k-picker:disabled .k-state-disabled,
+.k-picker[disabled] [disabled],
+.k-picker[disabled] .k-disabled,
+.k-picker[disabled] .k-state-disabled,
+.k-picker.k-disabled [disabled],
+.k-picker.k-disabled .k-disabled,
+.k-picker.k-disabled .k-state-disabled {
+    opacity: 1;
+    filter: grayscale(0);
+}
+
 input.k-input {
     padding: 4px 8px;
 }
@@ -13363,7 +13409,7 @@ select.k-picker {
     position: relative;
     z-index: 1;
     overflow: hidden;
-    text-overflow: clip;
+    text-overflow: ellipsis;
     -webkit-appearance: none;
 }
 
@@ -13412,7 +13458,7 @@ textarea.k-input-inner {
 .k-input-value-text {
     flex: 1;
     overflow: hidden;
-    text-overflow: clip;
+    text-overflow: ellipsis;
 }
 
 .k-input-value-text::before {
@@ -18953,6 +18999,10 @@ kendo-label > .k-label {
     width: 46px;
 }
 
+.k-colorgradient-inputs .k-input-inner {
+    text-overflow: clip;
+}
+
 .k-colorgradient-color-contrast > div {
     display: flex;
     flex-flow: row nowrap;
@@ -19717,7 +19767,7 @@ kendo-label > .k-label {
 }
 
 .k-popup-dropdowntree .k-check-all {
-    padding: 8px 8px;
+    padding: 8px 8px 0;
 }
 
 .k-popup-dropdowntree .k-treeview {
@@ -23477,6 +23527,11 @@ kendo-card-footer {
     width: 5em;
 }
 
+.k-pager-sizes .k-input-inner,
+.k-pager-sizes .k-input-value-text {
+    text-overflow: clip;
+}
+
 .k-rtl .k-pager-sizes .k-dropdown-list, .k-rtl .k-pager-sizes .k-dropdown,
 .k-rtl .k-pager-sizes .k-dropdownlist,
 .k-rtl .k-pager-sizes > select,
@@ -23672,6 +23727,7 @@ kendo-card-footer {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex: none;
     position: relative;
     z-index: 1;
     overflow: visible;
@@ -23702,7 +23758,7 @@ kendo-card-footer {
 }
 
 .k-stepper .k-step-label {
-    max-width: calc(min(100%, 10em));
+    max-width: clamp(100%, 10em, 100%);
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
@@ -27642,11 +27698,6 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     min-width: 1.4285714286em;
 }
 
-.k-spreadsheet-toolbar .k-input,
-.k-spreadsheet-toolbar .k-picker {
-    width: 5em;
-}
-
 .k-spreadsheet-toolbar .k-color-picker, .k-spreadsheet-toolbar .k-colorpicker {
     width: min-content;
 }
@@ -30956,6 +31007,11 @@ kendo-editor.k-readonly .k-editor-content.k-state-focused {
     overflow-y: auto;
 }
 
+.k-imageeditor-action-pane .k-input-inner,
+.k-imageeditor-action-pane .k-input-value-text {
+    text-overflow: clip;
+}
+
 .k-imageeditor-crop-overlay {
     width: 100%;
     height: 100%;
@@ -31780,7 +31836,7 @@ kendo-editor.k-readonly .k-editor-content.k-state-focused {
 }
 
 .k-gantt-tooltip-validation::before {
-    content: '';
+    content: "";
     width: 4px;
     height: 100%;
     position: absolute;

package/dist/all.scss

@@ -1327,7 +1327,10 @@ $header-gradient: null !default;
 
 
 // Loading
-
+$loading-bg: $component-bg !default;
+$loading-text: currentColor !default;
+$loading-opacity: .3 !default;
+$zindex-loading: 100 !default;
 
 // Placeholder
 $placeholder-line-width: 100% !default;
@@ -2753,7 +2756,7 @@ $display4-letter-spacing: null !default;
     }
 
     .k-loading-mask {
-        z-index: 100;
+        z-index: $zindex-loading;
 
         &.k-opaque {
             .k-loading-color {
@@ -2765,13 +2768,15 @@ $display4-letter-spacing: null !default;
         text-indent: -4000px;
         text-align: center;
         position: absolute;
+        color: $loading-text;
     }
     .k-loading-image {
         z-index: 2;
+        color: $loading-text;
     }
     .k-loading-color {
-        background-color: $component-bg;
-        opacity: .3;
+        background-color: $loading-bg;
+        opacity: $loading-opacity;
     }
 
     // Loading indicator
@@ -2779,7 +2784,7 @@ $display4-letter-spacing: null !default;
         position: relative;
         background-color: transparent;
         box-sizing: border-box;
-        color: currentColor;
+        color: $loading-text;
 
         &::before,
         &::after {
@@ -7962,8 +7967,19 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+/// Horizontal padding of the arrow button.
+/// @group button
 $kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
+$kendo-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
+$kendo-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;
+
+/// Vertical padding of the arrow button.
+/// @group button
 $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
+$kendo-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
+$kendo-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
 
 /// Theme colors map for the button.
 /// @group button
@@ -8341,6 +8357,18 @@ $kendo-button-transition: color .2s ease-in-out !default;
             aspect-ratio: auto;
             flex: none;
 
+            &.k-button-sm {
+                padding: $kendo-button-arrow-padding-y-sm $kendo-button-arrow-padding-x-sm;
+            }
+
+            &.k-button-md {
+                padding: $kendo-button-arrow-padding-y-md $kendo-button-arrow-padding-x-md;
+            }
+
+            &.k-button-lg {
+                padding: $kendo-button-arrow-padding-y-lg $kendo-button-arrow-padding-x-lg;
+            }
+
             .k-button-icon {
                 min-width: 0;
             }
@@ -8993,8 +9021,20 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         & > * {
             margin: 0;
         }
-    }
 
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include disabled( $disabled-styling );
+
+            [disabled],
+            .k-disabled,
+            .k-state-disabled {
+                opacity: 1;
+                filter: grayscale(0);
+            }
+        }
+    }
 
     // Input
     .k-input {}
@@ -9026,7 +9066,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         position: relative;
         z-index: 1;
         overflow: hidden;
-        text-overflow: clip;
+        text-overflow: ellipsis;
         -webkit-appearance: none;
 
         // Hide clear icon
@@ -9065,7 +9105,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     .k-input-value-text {
         flex: 1;
         overflow: hidden;
-        text-overflow: clip;
+        text-overflow: ellipsis;
     }
     .k-input-value-text::before {
         content: "\200b";
@@ -17522,6 +17562,10 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
         .k-numerictextbox {
             width: $colorgradient-input-width;
         }
+
+        .k-input-inner {
+            text-overflow: clip;
+        }
     }
 
     // Contrast
@@ -19165,7 +19209,7 @@ $dropdowntree-popup-padding-y: map-get( $spacing, 2 ) !default;
         padding: 0;
 
         .k-check-all {
-            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x;
+            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x 0;
         }
 
         .k-treeview {
@@ -24339,6 +24383,11 @@ $pager-dropdown-width: 5em !default;
             width: $pager-dropdown-width;
         }
 
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
+
         .k-rtl &,
         [dir="rtl"] & {
             .k-dropdown-list,
@@ -24759,6 +24808,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
             display: flex;
             align-items: center;
             justify-content: center;
+            flex: none;
             position: relative;
             z-index: 1;
             overflow: visible;
@@ -24792,7 +24842,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
 
         // Step label
         .k-step-label {
-            max-width: calc(min(100%, 10em));
+            max-width: clamp(100%, 10em, 100%);
             display: inline-flex;
             flex-wrap: wrap;
             align-items: center;
@@ -30147,10 +30197,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             min-width: $form-line-height * 1em;
         }
 
-        .k-input,
-        .k-picker {
-            width: 5em;
-        }
         .k-color-picker {
             width: min-content;
         }
@@ -34666,6 +34712,11 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
         box-sizing: border-box;
         flex: none;
         overflow-y: auto;
+
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
     }
 
 
@@ -35672,7 +35723,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         display: block;
 
         &::before {
-            content: '';
+            content: "";
             width: 4px;
             height: 100%;
             position: absolute;

package/lib/swatches/default-blue.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#ff6358",
         "#ffd246",

package/lib/swatches/default-green.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-main-dark.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#000000",
         "#151515",

package/lib/swatches/default-main.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-nordic.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#50686e",

package/lib/swatches/default-orange.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-purple.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-turquoise.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-urban.json

@@ -1,8 +1,9 @@
 {
-    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.1.2-dev.7",
+  "version": "5.2.1-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,8 +44,8 @@
     "dart:watch": "gulp dart:watch",
     "dart:swatches": "gulp dart:swatches",
     "dart:flat": "gulp dart:flat",
-    "prepublishOnly": "echo 'no prebublish for default theme'",
+    "prepublishOnly": "node ../../scripts/themes-prepublish.js",
     "postpublish": "echo 'no postpublish for default theme'"
   },
-  "gitHead": "cedfa864b61e9c7f5e63839f6428eaee5af5c536"
+  "gitHead": "9efb8de6ee8dabce6a0d5362b8978383a8afde67"
 }

package/scss/_variables.scss

@@ -343,7 +343,10 @@ $header-gradient: null !default;
 
 
 // Loading
-
+$loading-bg: $component-bg !default;
+$loading-text: currentColor !default;
+$loading-opacity: .3 !default;
+$zindex-loading: 100 !default;
 
 // Placeholder
 $placeholder-line-width: 100% !default;

package/scss/button/_layout.scss

@@ -220,6 +220,18 @@
             aspect-ratio: auto;
             flex: none;
 
+            &.k-button-sm {
+                padding: $kendo-button-arrow-padding-y-sm $kendo-button-arrow-padding-x-sm;
+            }
+
+            &.k-button-md {
+                padding: $kendo-button-arrow-padding-y-md $kendo-button-arrow-padding-x-md;
+            }
+
+            &.k-button-lg {
+                padding: $kendo-button-arrow-padding-y-lg $kendo-button-arrow-padding-x-lg;
+            }
+
             .k-button-icon {
                 min-width: 0;
             }

package/scss/button/_variables.scss

@@ -48,8 +48,19 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+/// Horizontal padding of the arrow button.
+/// @group button
 $kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
+$kendo-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
+$kendo-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;
+
+/// Vertical padding of the arrow button.
+/// @group button
 $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
+$kendo-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
+$kendo-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
 
 /// Theme colors map for the button.
 /// @group button

package/scss/colorgradient/_layout.scss

@@ -134,6 +134,10 @@
         .k-numerictextbox {
             width: $colorgradient-input-width;
         }
+
+        .k-input-inner {
+            text-overflow: clip;
+        }
     }
 
     // Contrast

package/scss/common/_loading.scss

@@ -21,7 +21,7 @@
     }
 
     .k-loading-mask {
-        z-index: 100;
+        z-index: $zindex-loading;
 
         &.k-opaque {
             .k-loading-color {
@@ -33,13 +33,15 @@
         text-indent: -4000px;
         text-align: center;
         position: absolute;
+        color: $loading-text;
     }
     .k-loading-image {
         z-index: 2;
+        color: $loading-text;
     }
     .k-loading-color {
-        background-color: $component-bg;
-        opacity: .3;
+        background-color: $loading-bg;
+        opacity: $loading-opacity;
     }
 
     // Loading indicator
@@ -47,7 +49,7 @@
         position: relative;
         background-color: transparent;
         box-sizing: border-box;
-        color: currentColor;
+        color: $loading-text;
 
         &::before,
         &::after {

package/scss/dropdowntree/_layout.scss

@@ -8,7 +8,7 @@
         padding: 0;
 
         .k-check-all {
-            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x;
+            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x 0;
         }
 
         .k-treeview {

package/scss/gantt/_layout.scss

@@ -716,7 +716,7 @@
         display: block;
 
         &::before {
-            content: '';
+            content: "";
             width: 4px;
             height: 100%;
             position: absolute;

package/scss/imageeditor/_layout.scss

@@ -65,6 +65,11 @@
         box-sizing: border-box;
         flex: none;
         overflow-y: auto;
+
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
     }
 
 

package/scss/input/_layout.scss

@@ -47,8 +47,20 @@
         & > * {
             margin: 0;
         }
-    }
 
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include disabled( $disabled-styling );
+
+            [disabled],
+            .k-disabled,
+            .k-state-disabled {
+                opacity: 1;
+                filter: grayscale(0);
+            }
+        }
+    }
 
     // Input
     .k-input {}
@@ -80,7 +92,7 @@
         position: relative;
         z-index: 1;
         overflow: hidden;
-        text-overflow: clip;
+        text-overflow: ellipsis;
         -webkit-appearance: none;
 
         // Hide clear icon
@@ -119,7 +131,7 @@
     .k-input-value-text {
         flex: 1;
         overflow: hidden;
-        text-overflow: clip;
+        text-overflow: ellipsis;
     }
     .k-input-value-text::before {
         content: "\200b";

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/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;
         }

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: calc(min(100%, 10em));
+            max-width: clamp(100%, 10em, 100%);
             display: inline-flex;
             flex-wrap: wrap;
             align-items: center;