feat(scheduler): add scheduler fluent styles

telerik · Aug 10, 2022 · c38b9b6 · c38b9b6
1 parent 45fcfe4
commit c38b9b6
Show file tree

Hide file tree

Showing 8 changed files with 1,645 additions and 3 deletions.
diff --git a/packages/fluent/scss/calendar/_theme.scss b/packages/fluent/scss/calendar/_theme.scss
@@ -166,7 +166,7 @@
     // Scheduler integration
     .k-scheduler .k-calendar .k-other-month {
         @include fill(
-            var( --kendo-calendar-other-month-text, #{$kendo-calendar-other-month-text} )
+            var( --kendo-calendar-other-month-text, #{$kendo-calendar-other-month-text} ),
             transparent
         );
     }

diff --git a/packages/fluent/scss/core/helpers/_index.scss b/packages/fluent/scss/core/helpers/_index.scss
@@ -5,3 +5,4 @@
 @use "reset";
 @use "normalize";
 @use "layout";
+@use "resizing";
diff --git a/packages/fluent/scss/core/helpers/_resizing.scss b/packages/fluent/scss/core/helpers/_resizing.scss
@@ -0,0 +1,120 @@
+// Resize handle
+.k-resize-handle,
+.k-resize-hint {
+    position: absolute;
+    border-color: inherit;
+    z-index: 200;
+}
+.k-resize-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.k-resize-handle::before {
+    content: "";
+    border: 0 solid;
+    border-color: inherit;
+}
+.k-resize-n {
+    width: 100%;
+    height: 6px;
+    flex-direction: row;
+    left: 0;
+    top: -3px;
+    cursor: n-resize;
+}
+.k-resize-s {
+    width: 100%;
+    height: 6px;
+    flex-direction: row;
+    left: 0;
+    bottom: -3px;
+    cursor: s-resize;
+}
+.k-resize-w {
+    width: 6px;
+    height: 100%;
+    flex-direction: column;
+    top: 0;
+    left: -3px;
+    cursor: w-resize;
+}
+.k-resize-e {
+    width: 6px;
+    height: 100%;
+    flex-direction: column;
+    top: 0;
+    right: -3px;
+    cursor: e-resize;
+}
+
+.k-resize-sw,
+.k-resize-se,
+.k-resize-nw,
+.k-resize-ne {
+    width: 5px;
+    height: 5px;
+}
+
+.k-resize-sw {
+    cursor: sw-resize;
+    bottom: 0;
+    left: 0;
+}
+.k-resize-se {
+    cursor: se-resize;
+    bottom: 0;
+    right: 0;
+}
+.k-resize-nw {
+    cursor: nw-resize;
+    top: 0;
+    left: 0;
+}
+.k-resize-ne {
+    cursor: ne-resize;
+    top: 0;
+    right: 0;
+}
+
+.k-vertical-resize {
+    cursor: row-resize;
+}
+.k-horizontal-resize {
+    cursor: col-resize;
+}
+
+
+.k-resize-hint {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .k-resize-hint-handle {
+        width: auto;
+        height: 20px;
+        align-self: stretch;
+    }
+    .k-resize-hint-marker {
+        width: 2px;
+        height: auto;
+        flex: 1 1 auto;
+    }
+}
+.k-resize-hint-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .k-resize-hint-handle {
+        width: 20px;
+        height: auto;
+        align-self: stretch;
+    }
+
+    .k-resize-hint-marker {
+        width: auto;
+        height: 2px;
+        flex: 1 1 auto;
+    }
+}
diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss
@@ -140,7 +140,7 @@
 
 // Scheduling
 // @use "gantt";
-// @use "scheduler";
+@use "scheduler";
 
 
 // Misc
@@ -302,7 +302,7 @@
 
     // Scheduling
     // @include gantt.styles();
-    // @include scheduler.styles();
+    @include scheduler.styles();
 
 
     // Misc