Skip to content

Commit

Permalink
feat(scheduler): add ongoing event styles
Browse files Browse the repository at this point in the history 
#3374
  • Loading branch information
@JoomFX @joneff
JoomFX authored and joneff committed Mar 30, 2022
1 parent 3d741d4 commit 60c6108
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 5 deletions.
2 changes: 2 additions & 0 deletions packages/bootstrap/scss/scheduler/_variables.scss
View file
Expand Up @@ -40,6 +40,8 @@ $scheduler-event-selected-border: null !default;
$scheduler-event-selected-gradient: null !default;
$scheduler-event-selected-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5) !default;

$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;

$scheduler-cell-padding-x: map-get( $spacing, 3 ) !default;
$scheduler-cell-padding-y: map-get( $spacing, 3 ) !default;
$scheduler-cell-height: $line-height-em !default;
Expand Down
2 changes: 2 additions & 0 deletions packages/classic/scss/scheduler/_variables.scss
View file
Expand Up @@ -40,6 +40,8 @@ $scheduler-event-selected-border: null !default;
$scheduler-event-selected-gradient: null !default;
$scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;

$scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
$scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
$scheduler-cell-height: $line-height-em !default;
Expand Down
3 changes: 3 additions & 0 deletions packages/default/scss/scheduler/_theme.scss
View file
Expand Up @@ -128,6 +128,9 @@
.k-event-inverse {
color: contrast-wcag( $scheduler-event-text );
}
.k-event-ongoing {
@include box-shadow( $scheduler-event-ongoing-shadow );
}


// Drag hint
Expand Down
2 changes: 2 additions & 0 deletions packages/default/scss/scheduler/_variables.scss
View file
Expand Up @@ -40,6 +40,8 @@ $scheduler-event-selected-border: null !default;
$scheduler-event-selected-gradient: null !default;
$scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;

$scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
$scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
$scheduler-cell-height: $line-height-em !default;
Expand Down
2 changes: 2 additions & 0 deletions packages/material/scss/scheduler/_variables.scss
View file
Expand Up @@ -40,6 +40,8 @@ $scheduler-event-selected-border: null !default;
$scheduler-event-selected-gradient: null !default;
$scheduler-event-selected-shadow: $box-shadow-depth-3 !default;

$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;

$scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
$scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
$scheduler-cell-height: $line-height * 1rem !default;
Expand Down
10 changes: 5 additions & 5 deletions tests/visual/src/misc/scheduler.html
View file
Expand Up @@ -475,7 +475,7 @@
<span class="k-resize-handle k-resize-n"></span>
<span class="k-resize-handle k-resize-s"></span>
</div>
<div style="top: 111px; height: 34px; width: 166px; left: 2px;" class="k-event">
<div style="top: 111px; height: 34px; width: 166px; left: 2px;" class="k-event k-event-ongoing">
<span class="k-event-actions"></span>
<div>
<div class="k-event-template k-event-time">8:30 AM - 9:00 AM</div>
Expand All @@ -487,7 +487,7 @@
<span class="k-resize-handle k-resize-n"></span>
<span class="k-resize-handle k-resize-s"></span>
</div>
<div style="top: 36px; height: 108px; width: 166px; left: 348px;" class="k-event k-state-hover">
<div style="top: 36px; height: 108px; width: 166px; left: 348px;" class="k-event k-state-hover k-event-ongoing">
<span class="k-event-actions">
<i is="Icon" name="reload"></i>
</span>
Expand All @@ -501,7 +501,7 @@
<span class="k-resize-handle k-resize-n"></span>
<span class="k-resize-handle k-resize-s"></span>
</div>
<div style="top: 110px; height: 71px; width: 166px; left: 520px;" class="k-event k-state-selected">
<div style="top: 110px; height: 71px; width: 166px; left: 520px;" class="k-event k-state-selected k-event-ongoing">
<span class="k-event-actions"></span>
<div>
<div class="k-event-template k-event-time">8:30 AM - 9:30 AM</div>
Expand Down Expand Up @@ -538,7 +538,7 @@
<span class="k-resize-handle k-resize-n"></span>
<span class="k-resize-handle k-resize-s"></span>
</div>
<div style="background-color: rgb(248, 163, 152); border-color: rgb(248, 163, 152); left: 175px; top: 100px; height: 71px; width: 166px;" class="k-event k-event-inverse ">
<div style="background-color: rgb(248, 163, 152); border-color: rgb(248, 163, 152); left: 175px; top: 100px; height: 71px; width: 166px;" class="k-event k-event-inverse k-event-ongoing">
<span class="k-event-actions">
</span>
<div>
Expand All @@ -553,7 +553,7 @@
<span class="k-resize-handle k-resize-n"></span>
<span class="k-resize-handle k-resize-s"></span>
</div>
<div style="top: 110px; height: 71px; width: 166px; left: 708px;" class="k-event">
<div style="top: 110px; height: 71px; width: 166px; left: 708px;" class="k-event k-event-ongoing">
<span class="k-event-actions"></span>
<div>
<div class="k-event-template k-event-time">8:30 AM - 9:30 AM</div>
Expand Down

0 comments on commit 60c6108

Please sign in to comment.