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

package/dist/all.css

@@ -11325,6 +11325,7 @@ kendo-sortable {
 
 .k-list-sm {
     font-size: 14px;
+    line-height: 1.4285714286;
 }
 
 .k-list-sm .k-list-group-sticky-header {
@@ -11341,6 +11342,7 @@ kendo-sortable {
 
 .k-list-md {
     font-size: 14px;
+    line-height: 1.4285714286;
 }
 
 .k-list-md .k-list-group-sticky-header {
@@ -17363,6 +17365,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;
+}
+
 @keyframes progressbar-indeterminate-animation {
     from {
         background-position: 0 0;
@@ -17398,6 +17439,15 @@ kendo-label > .k-label {
     animation: progressbar-indeterminate-animation 1s linear infinite;
 }
 
+.k-circular-progressbar-scale {
+    stroke: #ebebeb;
+}
+
+.k-circular-progressbar-arc {
+    stroke: #f35800;
+    transition: stroke .5s ease;
+}
+
 .k-radio {
     border-radius: 50%;
     margin: 0;
@@ -18211,6 +18261,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;
@@ -18231,14 +18283,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;
@@ -18246,8 +18292,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;
 }
@@ -18286,9 +18331,28 @@ kendo-label > .k-label {
 
 .k-calendar-td {
     border-radius: 4px;
+    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: 4px;
+    padding: 4px 4px;
+    padding-inline: var(--INTERNAL--kendo-calendar-cell-padding-x, 4px);
+    padding-block: var(--INTERNAL--kendo-calendar-cell-padding-y, 4px);
+    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: 1px;
@@ -18341,6 +18405,7 @@ kendo-label > .k-label {
     margin: auto;
     padding: 0 4px;
     width: 224px;
+    inline-size: var(--INTERNAL--kendo-calendar-view-width, 224px);
     min-height: 224px;
     box-sizing: content-box;
     gap: 16px;
@@ -18349,58 +18414,45 @@ kendo-label > .k-label {
     overflow: hidden;
 }
 
-.k-calendar-view .k-link {
-    border-radius: 4px;
-    padding: 4px 4px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
 .k-week-number .k-calendar-view {
     width: 256px;
 }
 
+.k-month-calendar .k-calendar-td,
 .k-calendar-monthview .k-calendar-td {
     width: 32px;
     height: 32px;
+    inline-size: var(--INTERNAL--kendo-calendar-cell-size, 32px);
+    block-size: var(--INTERNAL--kendo-calendar-cell-size, 32px);
 }
 
-.k-calendar-monthview .k-link {
-    width: 32px;
-    height: 32px;
-}
-
+.k-year-calendar .k-calendar-td,
 .k-calendar-yearview .k-calendar-td {
-    width: auto;
-    height: auto;
-}
-
-.k-calendar-yearview .k-link {
     width: 56px;
     height: 56px;
+    inline-size: var(--INTERNAL--kendo-calendar-cell-size, 56px);
+    block-size: var(--INTERNAL--kendo-calendar-cell-size, 56px);
 }
 
+.k-decade-calendar .k-calendar-td,
 .k-calendar-decadeview .k-calendar-td {
-    width: auto;
-    height: auto;
-}
-
-.k-calendar-decadeview .k-link {
     width: 56px;
     height: 56px;
+    inline-size: var(--INTERNAL--kendo-calendar-cell-size, 56px);
+    block-size: var(--INTERNAL--kendo-calendar-cell-size, 56px);
 }
 
+.k-century-calendar .k-calendar-td,
 .k-calendar-centuryview .k-calendar-td {
-    width: auto;
-    height: auto;
+    width: 56px;
+    height: 56px;
+    inline-size: var(--INTERNAL--kendo-calendar-cell-size, 56px);
+    block-size: var(--INTERNAL--kendo-calendar-cell-size, 56px);
 }
 
+.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: 56px;
-    height: 56px;
     text-align: left;
 }
 
@@ -18438,6 +18490,90 @@ kendo-label > .k-label {
     right: 0;
 }
 
+.k-calendar-sm {
+    --INTERNAL--kendo-calendar-view-width: 224px;
+    --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-sm-cell-padding-x, 2px );
+    --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-sm-cell-padding-y, 2px );
+    font-size: 14px;
+    line-height: 1.4285714286;
+}
+
+.k-calendar-sm.k-month-calendar,
+.k-calendar-sm .k-calendar-monthview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-sm-month-cell-size, 28px );
+}
+
+.k-calendar-sm.k-year-calendar,
+.k-calendar-sm .k-calendar-yearview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-sm-year-cell-size, 49px );
+}
+
+.k-calendar-sm.k-decade-calendar,
+.k-calendar-sm .k-calendar-decadeview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-sm-decade-cell-size, 49px );
+}
+
+.k-calendar-sm.k-century-calendar,
+.k-calendar-sm .k-calendar-centuryview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-sm-century-cell-size, 49px );
+}
+
+.k-calendar-md {
+    --INTERNAL--kendo-calendar-view-width: 256px;
+    --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: 1.4285714286;
+}
+
+.k-calendar-md.k-month-calendar,
+.k-calendar-md .k-calendar-monthview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-md-month-cell-size, 32px );
+}
+
+.k-calendar-md.k-year-calendar,
+.k-calendar-md .k-calendar-yearview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-md-year-cell-size, 56px );
+}
+
+.k-calendar-md.k-decade-calendar,
+.k-calendar-md .k-calendar-decadeview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-md-decade-cell-size, 56px );
+}
+
+.k-calendar-md.k-century-calendar,
+.k-calendar-md .k-calendar-centuryview {
+    --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-md-century-cell-size, 56px );
+}
+
+.k-calendar-lg {
+    --INTERNAL--kendo-calendar-view-width: 320px;
+    --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-lg-cell-padding-x, 8px );
+    --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-lg-cell-padding-y, 8px );
+    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;
@@ -18647,7 +18783,7 @@ kendo-label > .k-label {
     color: #f35800;
 }
 
-.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: #cc4a00;
 }
 
@@ -18672,45 +18808,49 @@ 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: #bababa;
     color: #272727;
     background-color: #dddddd;
 }
 
-.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: #cc4a00;
     color: white;
     background-color: #f35800;
 }
 
-.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 {
     border-color: #cc4a00;
     color: white;
     background-color: #e05100;
 }
 
-.k-calendar .k-calendar-td.k-state-focused .k-link,
+.k-calendar .k-calendar-td:focus .k-calendar-cell-inner, .k-calendar .k-calendar-td:focus .k-link,
+.k-calendar .k-calendar-td.k-focus .k-calendar-cell-inner,
 .k-calendar .k-calendar-td.k-focus .k-link,
+.k-calendar .k-calendar-td.k-state-focus .k-calendar-cell-inner,
 .k-calendar .k-calendar-td.k-state-focus .k-link,
-.k-calendar .k-calendar-td.k-focus .k-link {
+.k-calendar .k-calendar-td.k-state-focused .k-calendar-cell-inner,
+.k-calendar .k-calendar-td.k-state-focused .k-link {
     box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
 }
 
-.k-calendar .k-calendar-td.k-state-selected.k-state-focused .k-link,
-.k-calendar .k-calendar-td.k-selected.k-focused .k-link,
-.k-calendar .k-calendar-td.k-state-selected.k-state-focus .k-link,
+.k-calendar .k-calendar-td.k-selected:focus .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected:focus .k-link,
+.k-calendar .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
 .k-calendar .k-calendar-td.k-selected.k-focus .k-link,
-.k-calendar .k-calendar-td.k-selected:focus .k-link,
-.k-calendar .k-calendar-td.k-selected.k-focus .k-link {
+.k-calendar .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner,
+.k-calendar .k-calendar-td.k-state-selected.k-state-focus .k-link {
     box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
 }
 
@@ -18721,8 +18861,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: #cc4a00;
 }
 
@@ -18749,13 +18889,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(243, 88, 0, 0.25) 1px, rgba(243, 88, 0, 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(243, 88, 0, 0.25);
 }
 
@@ -18764,15 +18897,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: #f35800;
 }
 
+.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);
 }
 
@@ -18786,8 +18923,8 @@ kendo-label > .k-label {
     content: "";
     display: block;
     position: absolute;
-    top: 1px;
-    bottom: 1px;
+    top: 0;
+    bottom: 0;
     width: 5px;
 }
 
@@ -19000,6 +19137,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 + 4px);
+}
+
+.k-timeselector-sm .k-time-separator {
+    height: calc( 20px + 4px);
+}
+
+.k-timeselector-sm .k-time-list-item,
+.k-timeselector-sm .k-time-list .k-item {
+    padding: 2px 8px;
+}
+
+.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 + 8px);
+}
+
+.k-timeselector-md .k-time-separator {
+    height: calc( 20px + 8px);
+}
+
+.k-timeselector-md .k-time-list-item,
+.k-timeselector-md .k-time-list .k-item {
+    padding: 4px 8px;
+}
+
+.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 12px;
+}
+
 .k-timeselector {
     border-color: #cacaca;
     color: #272727;
@@ -21551,12 +21745,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 {
@@ -21646,6 +21869,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: #cacaca;
     color: #272727;