@progress/kendo-theme-material 5.5.1-dev.1 → 5.5.1-dev.2

package/dist/all.css

@@ -18181,6 +18181,45 @@ kendo-label > .k-label {
     -ms-grid-row-align: start;
 }
 
+.k-circular-progressbar {
+    display: inline-block;
+    text-align: left;
+    position: relative;
+}
+
+.k-circular-progressbar-surface {
+    height: 100%;
+}
+
+.k-circular-progressbar-surface > div {
+    width: 100%;
+    height: 100%;
+}
+
+.k-circular-progressbar-surface svg {
+    width: 100%;
+    height: 100%;
+}
+
+.k-circular-progressbar-scale {
+    fill: none;
+}
+
+.k-circular-progressbar-arc {
+    transform-box: fill-box;
+    transform-origin: center center;
+    transform: rotate(-90deg);
+    stroke-linecap: round;
+    fill: none;
+}
+
+.k-circular-progressbar-label {
+    position: absolute;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+}
+
 .k-progressbar {
     border-radius: 0;
     overflow: visible;
@@ -18244,6 +18283,47 @@ kendo-label > .k-label {
     animation: progressbar-secondary-indeterminate-vertical 2s infinite;
 }
 
+@keyframes progressbar-indeterminate-animation {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: 5px 0;
+    }
+}
+
+.k-progressbar {
+    color: rgba(0, 0, 0, 0.87);
+    background-color: #bac0e4;
+}
+
+.k-progressbar .k-state-selected,
+.k-progressbar .k-selected {
+    color: white;
+    background-color: #3f51b5;
+}
+
+.k-progressbar .k-item {
+    border-color: white;
+}
+
+.k-progressbar-indeterminate {
+    color: rgba(0, 0, 0, 0.87);
+    background-color: #bac0e4;
+    background-image: linear-gradient(45deg, #abb1d2 25%, transparent 25%, transparent 50%, #abb1d2 50%, #abb1d2 75%, transparent 75%, transparent);
+    background-size: 5px 5px;
+    animation: progressbar-indeterminate-animation;
+}
+
+.k-circular-progressbar-scale {
+    stroke: #bac0e4;
+}
+
+.k-circular-progressbar-arc {
+    stroke: #3f51b5;
+    transition: stroke .5s ease;
+}
+
 @keyframes progressbar-primary-indeterminate-horizontal {
     0% {
         transform: translateX(0) scaleX(0);
@@ -18314,19 +18394,8 @@ kendo-label > .k-label {
     }
 }
 
-.k-progressbar {
-    color: rgba(0, 0, 0, 0.87);
-    background-color: #bac0e4;
-}
-
-.k-progressbar .k-state-selected,
-.k-progressbar .k-selected {
-    color: white;
-    background-color: #3f51b5;
-}
-
-.k-progressbar .k-item {
-    border-color: white;
+.k-progressbar-indeterminate {
+    background-image: none;
 }
 
 .k-radio {
@@ -19214,6 +19283,8 @@ kendo-label > .k-label {
 }
 
 .k-calendar {
+    inline-size: var(--INTERNAL--kendo-calendar-width, min-content);
+    block-size: var(--INTERNAL--kendo-calendar-height, min-content);
     border-width: 1px;
     border-style: solid;
     box-sizing: border-box;
@@ -19234,14 +19305,8 @@ kendo-label > .k-label {
     border: 0;
 }
 
-.k-calendar .k-link {
-    white-space: normal;
-    position: relative;
-    overflow: hidden;
-}
-
 .k-calendar-table {
-    margin: 0;
+    margin: 0 auto;
     border-width: 0;
     border-color: inherit;
     border-spacing: 0;
@@ -19249,8 +19314,7 @@ kendo-label > .k-label {
     table-layout: fixed;
     text-align: center;
     outline: 0;
-    display: inline-table;
-    vertical-align: top;
+    display: table;
     position: relative;
     z-index: 1;
 }
@@ -19289,9 +19353,28 @@ kendo-label > .k-label {
 
 .k-calendar-td {
     border-radius: 100px;
+    inline-size: var(--INTERNAL--kendo-calendar-cell-size, min-content);
+    block-size: var(--INTERNAL--kendo-calendar-cell-size, min-content);
     border-color: transparent;
 }
 
+.k-calendar .k-calendar-cell-inner, .k-calendar .k-link {
+    border-radius: 100px;
+    padding: 0.5em 0.5em;
+    padding-inline: var(--INTERNAL--kendo-calendar-cell-padding-x, 0.5em);
+    padding-block: var(--INTERNAL--kendo-calendar-cell-padding-y, 0.5em);
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    white-space: normal;
+    position: relative;
+    overflow: hidden;
+}
+
 .k-calendar .k-header {
     padding: 4px 4px;
     border-bottom-width: 0px;
@@ -19344,6 +19427,7 @@ kendo-label > .k-label {
     margin: auto;
     padding: 0 4px;
     width: 252px;
+    inline-size: var(--INTERNAL--kendo-calendar-view-width, 252px);
     min-height: 252px;
     box-sizing: content-box;
     gap: 16px;
@@ -19352,58 +19436,45 @@ kendo-label > .k-label {
     overflow: hidden;
 }
 
-.k-calendar-view .k-link {
-    border-radius: 100px;
-    padding: 0.5em 0.5em;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
 .k-week-number .k-calendar-view {
     width: 288px;
 }
 
+.k-month-calendar .k-calendar-td,
 .k-calendar-monthview .k-calendar-td {
     width: 36px;
     height: 36px;
+    inline-size: var(--INTERNAL--kendo-calendar-cell-size, 36px);
+    block-size: var(--INTERNAL--kendo-calendar-cell-size, 36px);
 }
 
-.k-calendar-monthview .k-link {
-    width: 36px;
-    height: 36px;
-}
-
+.k-year-calendar .k-calendar-td,
 .k-calendar-yearview .k-calendar-td {
-    width: auto;
-    height: auto;
-}
-
-.k-calendar-yearview .k-link {
     width: 63px;
     height: 63px;
+    inline-size: var(--INTERNAL--kendo-calendar-cell-size, 63px);
+    block-size: var(--INTERNAL--kendo-calendar-cell-size, 63px);
 }
 
+.k-decade-calendar .k-calendar-td,
 .k-calendar-decadeview .k-calendar-td {
-    width: auto;
-    height: auto;
-}
-
-.k-calendar-decadeview .k-link {
     width: 63px;
     height: 63px;
+    inline-size: var(--INTERNAL--kendo-calendar-cell-size, 63px);
+    block-size: var(--INTERNAL--kendo-calendar-cell-size, 63px);
 }
 
+.k-century-calendar .k-calendar-td,
 .k-calendar-centuryview .k-calendar-td {
-    width: auto;
-    height: auto;
+    width: 63px;
+    height: 63px;
+    inline-size: var(--INTERNAL--kendo-calendar-cell-size, 63px);
+    block-size: var(--INTERNAL--kendo-calendar-cell-size, 63px);
 }
 
+.k-century-calendar .k-calendar-cell-inner, .k-century-calendar .k-link,
+.k-calendar-centuryview .k-calendar-cell-inner,
 .k-calendar-centuryview .k-link {
-    width: 63px;
-    height: 63px;
     text-align: left;
 }
 
@@ -19441,6 +19512,90 @@ kendo-label > .k-label {
     right: 0;
 }
 
+.k-calendar-sm {
+    --INTERNAL--kendo-calendar-view-width: 256px;
+    --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-sm-cell-padding-x, 0.125rem );
+    --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-sm-cell-padding-y, 0.125rem );
+    font-size: 14px;
+    line-height: 2;
+}
+
+.k-calendar-sm.k-month-calendar,
+.k-calendar-sm .k-calendar-monthview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-sm-month-cell-size, 32px );
+}
+
+.k-calendar-sm.k-year-calendar,
+.k-calendar-sm .k-calendar-yearview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-sm-year-cell-size, 56px );
+}
+
+.k-calendar-sm.k-decade-calendar,
+.k-calendar-sm .k-calendar-decadeview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-sm-decade-cell-size, 56px );
+}
+
+.k-calendar-sm.k-century-calendar,
+.k-calendar-sm .k-calendar-centuryview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-sm-century-cell-size, 56px );
+}
+
+.k-calendar-md {
+    --INTERNAL--kendo-calendar-view-width: 288px;
+    --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-md-cell-padding-x, 4px );
+    --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-md-cell-padding-y, 4px );
+    font-size: 14px;
+    line-height: 2;
+}
+
+.k-calendar-md.k-month-calendar,
+.k-calendar-md .k-calendar-monthview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-md-month-cell-size, 36px );
+}
+
+.k-calendar-md.k-year-calendar,
+.k-calendar-md .k-calendar-yearview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-md-year-cell-size, 63px );
+}
+
+.k-calendar-md.k-decade-calendar,
+.k-calendar-md .k-calendar-decadeview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-md-decade-cell-size, 63px );
+}
+
+.k-calendar-md.k-century-calendar,
+.k-calendar-md .k-calendar-centuryview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-md-century-cell-size, 63px );
+}
+
+.k-calendar-lg {
+    --INTERNAL--kendo-calendar-view-width: 320px;
+    --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-lg-cell-padding-x, 4px );
+    --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-lg-cell-padding-y, 4px );
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+.k-calendar-lg.k-month-calendar,
+.k-calendar-lg .k-calendar-monthview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-lg-month-cell-size, 40px );
+}
+
+.k-calendar-lg.k-year-calendar,
+.k-calendar-lg .k-calendar-yearview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-lg-year-cell-size, 70px );
+}
+
+.k-calendar-lg.k-decade-calendar,
+.k-calendar-lg .k-calendar-decadeview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-lg-decade-cell-size, 70px );
+}
+
+.k-calendar-lg.k-century-calendar,
+.k-calendar-lg .k-calendar-centuryview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-lg-century-cell-size, 70px );
+}
+
 .k-calendar-infinite {
     box-sizing: content-box;
     display: inline-flex;
@@ -19669,7 +19824,7 @@ kendo-label > .k-label {
     color: #e51a5f;
 }
 
-.k-calendar .k-nav-today:hover, .k-calendar .k-nav-today.k-hover, .k-calendar .k-nav-today.k-state-hover, .k-calendar .k-nav-today:focus, .k-calendar .k-nav-today.k-state-focus, .k-calendar .k-nav-today.k-focus {
+.k-calendar .k-nav-today:hover, .k-calendar .k-nav-today.k-hover, .k-calendar .k-nav-today.k-state-hover, .k-calendar .k-nav-today:focus, .k-calendar .k-nav-today.k-focus, .k-calendar .k-nav-today.k-state-focus {
     color: #c2185b;
 }
 
@@ -19698,27 +19853,29 @@ kendo-label > .k-label {
     visibility: hidden;
 }
 
-.k-calendar .k-calendar-td:hover .k-link,
-.k-calendar .k-calendar-td.k-state-hover .k-link,
-.k-calendar .k-calendar-td.k-hover .k-link {
+.k-calendar .k-calendar-td:hover .k-calendar-cell-inner, .k-calendar .k-calendar-td:hover .k-link,
+.k-calendar .k-calendar-td.k-hover .k-calendar-cell-inner,
+.k-calendar .k-calendar-td.k-hover .k-link,
+.k-calendar .k-calendar-td.k-state-hover .k-calendar-cell-inner,
+.k-calendar .k-calendar-td.k-state-hover .k-link {
     border-color: rgba(0, 0, 0, 0.15);
     color: rgba(0, 0, 0, 0.87);
     background-color: rgba(0, 0, 0, 0.04);
 }
 
-.k-calendar .k-calendar-td.k-state-selected .k-link,
-.k-calendar .k-calendar-td.k-selected .k-link {
+.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link,
+.k-calendar .k-calendar-td.k-state-selected .k-calendar-cell-inner,
+.k-calendar .k-calendar-td.k-state-selected .k-link {
     border-color: #3f51b5;
     color: white;
     background-color: #3f51b5;
 }
 
-.k-calendar .k-calendar-td.k-state-selected:hover .k-link,
-.k-calendar .k-calendar-td.k-selected:hover .k-link,
-.k-calendar .k-calendar-td.k-state-selected.k-state-hover .k-link,
+.k-calendar .k-calendar-td.k-selected:hover .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected:hover .k-link,
+.k-calendar .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
 .k-calendar .k-calendar-td.k-selected.k-hover .k-link,
-.k-calendar .k-calendar-td.k-selected:hover .k-link,
-.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
+.k-calendar .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner,
+.k-calendar .k-calendar-td.k-state-selected:hover .k-link {
     color: white;
     background-color: #3c4eae;
 }
@@ -19730,8 +19887,8 @@ kendo-label > .k-label {
 }
 
 .k-calendar .k-calendar-navigation li:hover,
-.k-calendar .k-calendar-navigation li.k-state-hover,
-.k-calendar .k-calendar-navigation li.k-hover {
+.k-calendar .k-calendar-navigation li.k-hover,
+.k-calendar .k-calendar-navigation li.k-state-hover {
     color: #c2185b;
 }
 
@@ -19758,13 +19915,6 @@ kendo-label > .k-label {
 .k-calendar .k-range-start,
 .k-calendar .k-range-end,
 .k-calendar .k-range-mid {
-    background-image: linear-gradient(transparent 1px, rgba(63, 81, 181, 0.25) 1px, rgba(63, 81, 181, 0.25) calc(100% - 1px), transparent calc(100% - 1px));
-}
-
-.k-ie .k-calendar .k-range-start, .k-ie
-.k-calendar .k-range-end, .k-ie
-.k-calendar .k-range-mid {
-    background-image: none;
     background-color: rgba(63, 81, 181, 0.25);
 }
 
@@ -19773,15 +19923,19 @@ kendo-label > .k-label {
     background-color: transparent;
 }
 
-.k-calendar .k-range-start .k-link,
+.k-calendar .k-range-start .k-calendar-cell-inner, .k-calendar .k-range-start .k-link,
+.k-calendar .k-range-end .k-calendar-cell-inner,
 .k-calendar .k-range-end .k-link {
     background-color: #3f51b5;
 }
 
+.k-calendar .k-range-start.k-active .k-calendar-cell-inner, .k-calendar .k-range-start.k-active .k-link,
+.k-calendar .k-range-start.k-state-active .k-calendar-cell-inner,
 .k-calendar .k-range-start.k-state-active .k-link,
-.k-calendar .k-range-start.k-active .k-link,
-.k-calendar .k-range-end.k-state-active .k-link,
-.k-calendar .k-range-end.k-active .k-link {
+.k-calendar .k-range-end.k-active .k-calendar-cell-inner,
+.k-calendar .k-range-end.k-active .k-link,
+.k-calendar .k-range-end.k-state-active .k-calendar-cell-inner,
+.k-calendar .k-range-end.k-state-active .k-link {
     box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.2);
 }
 
@@ -19795,8 +19949,8 @@ kendo-label > .k-label {
     content: "";
     display: block;
     position: absolute;
-    top: 1px;
-    bottom: 1px;
+    top: 0;
+    bottom: 0;
     width: 5px;
 }
 
@@ -20023,6 +20177,63 @@ kendo-label > .k-label {
     top: calc( 9px);
 }
 
+.k-timeselector-sm {
+    font-size: 14px;
+    line-height: 1.4285714286;
+}
+
+.k-timeselector-sm .k-time-highlight,
+.k-timeselector-sm .k-time-list-highlight {
+    height: calc( 20px + 12px);
+}
+
+.k-timeselector-sm .k-time-separator {
+    height: calc( 20px + 12px);
+}
+
+.k-timeselector-sm .k-time-list-item,
+.k-timeselector-sm .k-time-list .k-item {
+    padding: 6px 16px;
+}
+
+.k-timeselector-md {
+    font-size: 14px;
+    line-height: 1.4285714286;
+}
+
+.k-timeselector-md .k-time-highlight,
+.k-timeselector-md .k-time-list-highlight {
+    height: calc( 20px + 16px);
+}
+
+.k-timeselector-md .k-time-separator {
+    height: calc( 20px + 16px);
+}
+
+.k-timeselector-md .k-time-list-item,
+.k-timeselector-md .k-time-list .k-item {
+    padding: 8px 16px;
+}
+
+.k-timeselector-lg {
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+.k-timeselector-lg .k-time-highlight,
+.k-timeselector-lg .k-time-list-highlight {
+    height: calc( 24px + 16px);
+}
+
+.k-timeselector-lg .k-time-separator {
+    height: calc( 24px + 16px);
+}
+
+.k-timeselector-lg .k-time-list-item,
+.k-timeselector-lg .k-time-list .k-item {
+    padding: 8px 16px;
+}
+
 .k-timeselector {
     border-color: rgba(0, 0, 0, 0.12);
     color: rgba(0, 0, 0, 0.87);
@@ -22578,12 +22789,41 @@ kendo-label > .k-label {
     box-sizing: border-box;
 }
 
-.k-actionsheet-header {
+.k-actionsheet-fullscreen {
+    max-height: 100%;
+    height: 100%;
+}
+
+.k-actionsheet-header, .k-actionsheet-titlebar {
     padding: 8px 16px;
     border-width: 0;
     border-style: solid;
     border-color: transparent;
     box-sizing: border-box;
+    flex: none;
+}
+
+.k-actionsheet-titlebar {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+}
+
+.k-actionsheet-title {
+    flex: 1;
+}
+
+.k-actionsheet-actions {
+    flex: none;
+}
+
+.k-actionsheet-content {
+    flex: 1;
+    overflow: auto;
+}
+
+.k-actionsheet-footer {
+    flex: none;
 }
 
 .k-actionsheet-items {
@@ -22673,6 +22913,33 @@ kendo-label > .k-label {
     transform: none;
 }
 
+.k-adaptive-actionsheet {
+    max-width: 100%;
+    width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+}
+
+.k-adaptive-actionsheet .k-calendar {
+    margin-inline: auto;
+    border-width: 0;
+    display: flex;
+}
+
+.k-adaptive-actionsheet .k-timeselector {
+    height: 100%;
+    border-width: 0;
+    overflow: hidden;
+}
+
+.k-adaptive-actionsheet .k-timeselector .k-time-part {
+    display: contents;
+}
+
+.k-adaptive-actionsheet .k-timeselector .k-time-list-wrapper {
+    height: 100%;
+}
+
 .k-actionsheet {
     border-color: rgba(0, 0, 0, 0.12);
     color: rgba(0, 0, 0, 0.87);