feat(action-sheet): add styles for adaptive behaviour

telerik · Jul 25, 2022 · 356e528 · 356e528
1 parent 00195fe
commit 356e528
Showing 1 changed file with 64 additions and 0 deletions.
diff --git a/packages/default/scss/action-sheet/_layout.scss b/packages/default/scss/action-sheet/_layout.scss
@@ -34,6 +34,10 @@
             box-sizing: border-box;
         }
     }
+    .k-actionsheet-fullscreen {
+        max-height: 100%;
+        height: 100%;
+    }
 
 
     // Actionsheet header
@@ -47,6 +51,35 @@
         font-size: $actionsheet-header-font-size;
         font-family: $actionsheet-header-font-family;
         line-height: $actionsheet-header-line-height;
+        flex: none;
+    }
+
+
+    // Actionsheet titlebar
+    .k-actionsheet-titlebar {
+        @extend .k-actionsheet-header !optional;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+    }
+    .k-actionsheet-title {
+        flex: 1;
+    }
+    .k-actionsheet-actions {
+        flex: none;
+    }
+
+
+    // Actionsheet content
+    .k-actionsheet-content {
+        flex: 1;
+        overflow: auto;
+    }
+
+
+    // Actionsheet footer
+    .k-actionsheet-footer {
+        flex: none;
     }
 
 
@@ -143,4 +176,35 @@
         transform: none;
     }
 
+
+    // Adaptive action sheet
+    .k-adaptive-actionsheet {
+        max-width: 100%;
+        width: 100%;
+
+        // TMP: this should be moved to action sheet
+        display: flex;
+        flex-flow: column nowrap;
+
+        .k-calendar {
+            margin-inline: auto;
+            border-width: 0;
+            display: flex;
+        }
+
+        .k-timeselector {
+            height: 100%;
+            border-width: 0;
+            overflow: hidden;
+
+            .k-time-part {
+                display: contents;
+            }
+
+            .k-time-list-wrapper {
+                height: 100%;
+            }
+        }
+    }
+
 }