Skip to content
Permalink
Browse files

fix(scheduler): improve scheduler event styles

  • Loading branch information...
TeyaVes authored and joneff committed Jan 17, 2019
1 parent 0cf6a8b commit a37e948ef7f77d1f5909156f32112150d0a4d815
@@ -1165,10 +1165,19 @@ $switch-off-handle-hovered-gradient: null !default;
// Editor
$editor-overlay-background: #000 !default;

// Scheduler
$scheduler-event-border-radius: $border-radius !default;

$scheduler-event-bg: $selected-bg !default;
$scheduler-event-text: $selected-text !default;

$scheduler-event-selected-box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5) !default;

$scheduler-cell-height: $line-height-em;
$scheduler-datecolumn-width: 12em;
$scheduler-timecolumn-width: 11em;


// Config maps
$typography-config: () !default;
// sass-lint:disable indentation
@@ -91,8 +91,20 @@

// Appointments
.k-event {
@include appearance( selected-node );
@include border-radius( $border-radius );
background-color: $scheduler-event-bg;
color: $scheduler-event-text;

.k-event-template {
padding: $padding-y-sm $padding-x-sm;
}

.k-event-actions {
right: $padding-x-sm;
}

&.k-state-selected {
box-shadow: $scheduler-event-selected-box-shadow;
}
}
.k-event-inverse {
color: $panel-text;
@@ -1151,10 +1151,23 @@ $switch-off-handle-hovered-gradient: null !default;
// Editor
$editor-overlay-background: #000 !default;

// Scheduler
$scheduler-event-border-radius: $border-radius !default;

$scheduler-event-border: $accent !default;
$scheduler-event-bg: $selected-bg !default;
$scheduler-event-text: $selected-text !default;

$scheduler-event-selected-box-shadow: null !default;

$scheduler-cell-height: $line-height-em;
$scheduler-datecolumn-width: 12em;
$scheduler-timecolumn-width: 11em;

$modal-header-border-color: #cccccc;
$modal-inner-padding: 1em;


// Config maps
$typography-config: () !default;
// sass-lint:disable indentation
@@ -1,7 +1,4 @@
// TODO: modal variables
$modal-inner-padding: 1em;
$scheduler-event-border-radius: 2px;

@include exports("scheduler/layout") {

// Layout
@@ -346,18 +343,34 @@ $scheduler-event-border-radius: 2px;
@include border-radius();
min-height: $line-height-em;
box-sizing: border-box;
border-width: 1px;
border-width: 0;
border-style: solid;
border-radius: $scheduler-event-border-radius;
text-align: left;
cursor: default;
position: absolute;
overflow: hidden;
padding-right: $padding-x;

&::before {
content: '';
position: absolute;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}

> div {
position: relative;
z-index: 2;
}

// Template
.k-event-template {
padding: $padding-y-sm $padding-x-sm;
padding: $padding-y $padding-x;
// TODO: incompatible units
// padding-right: $padding-x-sm + $spacer;
}
@@ -374,9 +387,15 @@ $scheduler-event-border-radius: 2px;
white-space: nowrap;
position: absolute;
top: $padding-y-sm;
right: $padding-y-sm;
right: $padding-x;
opacity: .5;
visibility: hidden;
z-index: 2;

&:hover,
&.k-state-hover {
opacity: 1;
}

a { color: inherit; }
}
@@ -385,8 +404,10 @@ $scheduler-event-border-radius: 2px;
// Indicators
.k-event-actions:first-child {
margin: $padding-y-sm .4ex 0 $padding-x-sm;
top: 0;
right: 0;
float: left;
position: static;
position: relative;
opacity: 1;
visibility: visible;
}
@@ -428,7 +449,8 @@ $scheduler-event-border-radius: 2px;


// Hover
&:hover {
&:hover,
&.k-state-hover {
.k-event-actions,
.k-resize-handle {
visibility: visible;
@@ -1,10 +1,3 @@
// TODO: modal header variables
$modal-header-border-color: #cccccc;

$scheduler-event-bg: #848484 !default;
$scheduler-event-text: #fff !default;


@include exports("scheduler/theme") {

// Appearance
@@ -117,13 +110,27 @@ $scheduler-event-text: #fff !default;


// Events
.k-scheduler .k-event,
.k-event {
background-color: $scheduler-event-bg;
color: $scheduler-event-text;

&::before {
display: block;
left: 3px;
opacity: 0.35;
background-color: $scheduler-event-text;
}

&.k-state-selected {
box-shadow: $scheduler-event-selected-box-shadow;

&::before {
display: none;
}
}
}
.k-event.k-state-selected {
@include appearance( selected-node );
}

.k-event-inverse {
color: $panel-text;
}
@@ -1236,10 +1236,19 @@ $switch-off-handle-hovered-gradient: null !default;
// Editor
$editor-overlay-background: #000 !default;

// Scheduler
$scheduler-event-border-radius: $border-radius !default;

$scheduler-event-bg: $primary !default;
$scheduler-event-text: $primary-contrast !default;

$scheduler-event-selected-box-shadow: $box-shadow-depth-3 !default;

$scheduler-cell-height: $line-height * 1rem;
$scheduler-datecolumn-width: 12rem;
$scheduler-timecolumn-width: 11rem;


// Config maps
$typography-config: () !default;
// sass-lint:disable indentation
@@ -89,11 +89,15 @@
.k-event {
.k-event-delete {
border-radius: 50%;
display: inline-block;
font-size: $font-size-sm;
line-height: normal;

.k-icon {
font-size: $font-size-sm;
padding: add-two($font-size, -$font-size-sm);
box-sizing: content-box;
vertical-align: unset;
}
}

@@ -117,12 +121,10 @@
}
.k-resize-e::before {
width: $handle-size;
align-self: flex-start;
border-radius: 0 $handle-half-size $handle-half-size 0;
}
.k-resize-w::before {
width: $handle-size;
align-self: flex-end;
border-radius: $handle-half-size 0 0 $handle-half-size;
}
}
@@ -1,6 +1,3 @@
$scheduler-event-bg: $primary !default;
$scheduler-event-text: $primary-contrast !default;

@include exports("scheduler/theme/material") {

// Appearance
@@ -45,18 +42,35 @@ $scheduler-event-text: $primary-contrast !default;
background-color: $scheduler-event-bg;
color: $scheduler-event-text;

.k-event-actions .k-link {
color: $scheduler-event-bg;
background-color: $scheduler-event-text;
.k-event-template {
padding: $padding-y-sm $padding-x-sm;
}

.k-event-actions {
right: $padding-x-sm;

.k-link {
color: $scheduler-event-bg;
background-color: $scheduler-event-text;
}
}

.k-resize-handle::before {
// TODO: $scheduler-content-area-bg
background-color: $primary-contrast;
}
}
.k-event.k-state-selected {
@include appearance( selected-node );

&.k-state-selected {
box-shadow: $scheduler-event-selected-box-shadow;

&::before {
display: block;
background-color: currentColor;
opacity: 0.12;
}
}


}
.k-event-inverse {
color: $panel-text;
@@ -535,13 +535,30 @@
<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">
<div style="top: 36px; height: 108px; width: 166px; left: 348px;" class="k-event k-state-hover">
<span class="k-event-actions">
<span class="k-icon k-i-reload"></span>
</span>
<div>
<div class="k-event-template k-event-time">7:30 AM - 9:00 AM</div>
<div class="k-event-template">Recurring event</div>
<div class="k-event-template">Hovered Recurring event</div>
</div>
<span class="k-event-actions">
<a class="k-link k-event-delete">
<span class="k-icon k-i-close"></span>
</a>
</span>
<span class="k-event-top-actions"></span>
<span class="k-event-bottom-actions"></span>
<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: 175px;" class="k-event k-state-selected">
<span class="k-event-actions">
</span>
<div>
<div class="k-event-template k-event-time">8:30 AM - 9:30 AM</div>
<div class="k-event-template">Selected event</div>
</div>
<span class="k-event-actions">
<a class="k-link k-event-delete">

0 comments on commit a37e948

Please sign in to comment.
You can’t perform that action at this time.