Skip to content

Commit

Permalink
feat: add Material theme for gantt
Browse files Browse the repository at this point in the history
  • Loading branch information
joneff committed Sep 10, 2018
1 parent b440ad7 commit f38a7ad
Show file tree
Hide file tree
Showing 8 changed files with 382 additions and 18 deletions.
20 changes: 10 additions & 10 deletions packages/default/scss/gantt/_layout.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@include exports("gantt/layout") {

$row-height: #{$line-height-em} + #{2 * $cell-padding};
$row-height: #{$line-height-em} + #{2 * $cell-padding} + #{$grid-cell-horizontal-border-width};

.k-gantt {
position: relative;
Expand All @@ -14,10 +14,10 @@
vertical-align: top;
}
.k-grid-header tr {
height: add-three( $line-height-em, 2 * $cell-padding-y, 1px );
height: add-three( $line-height-em, 2 * $grid-header-padding-y, 1px );
}
.k-grid-content tr {
height: add-two( $line-height-em, 2 * $cell-padding-y );
height: add-three( $line-height-em, 2 * $grid-cell-padding-y, $grid-cell-horizontal-border-width );
}


Expand All @@ -44,6 +44,7 @@
border-width: 0 0 1px;
border-style: solid;
border-color: inherit;
line-height: $toolbar-line-height;

.k-gantt-layout + & {
border-width: 1px 0 0;
Expand Down Expand Up @@ -87,7 +88,7 @@

// View switcher
.k-gantt-views {
@extend %ul-button-group;
@extend %ul-button-group !optional;

.k-current-view { display: none; }
.k-current-view .k-link::after {
Expand All @@ -104,8 +105,8 @@
flex-direction: column;
align-items: stretch;
position: absolute;
right: $padding-x;
top: $padding-x;
top: $toolbar-padding-y;
right: $toolbar-padding-x;
z-index: 1000;

li { display: none; }
Expand All @@ -127,12 +128,10 @@
border-width: 0;
}
.k-grid-header {
// sass-lint:disable no-important
padding: 0 !important;
// sass-lint:enable no-important
padding: 0 !important; // sass-lint:disable-line no-important
}
.k-grid-header tr {
height: add-three( 2 * $line-height-em, 4 * $cell-padding-y, 2px );
height: add-three( 2 * $line-height-em, 4 * $grid-header-padding-y, 2px );
vertical-align: bottom;
}
.k-grid-content {
Expand Down Expand Up @@ -190,6 +189,7 @@

td {
padding: 0;
border-width: 0;
position: relative;
vertical-align: middle;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/grid/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -761,8 +761,8 @@

.k-edit-cell,
.k-grid-edit-row > td {
>.k-textbox,
>.k-widget,
> .k-textbox,
> .k-widget,
> .text-box {
margin-left: $edit-cell-input-space;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/material/scss/all.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@

// Scheduling
@import "calendar";
//@import "gantt";
@import "gantt";
//@import "scheduler";


Expand Down
12 changes: 12 additions & 0 deletions packages/material/scss/gantt.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@import "variables";
@import "mixins";


// Dependencies
@import "common/all";
@import "button";


// Component
@import "gantt/layout";
@import "gantt/theme";
89 changes: 89 additions & 0 deletions packages/material/scss/gantt/_layout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
@import "~@progress/kendo-theme-default/scss/gantt/layout";

@include exports("gantt/layout/material") {

.k-gantt {}


// Header and footer
.k-gantt-toolbar {

.k-button {
@extend .k-button.k-flat;
padding: $toolbar-button-padding-y $toolbar-button-padding-x;
}
}


// View switcher
.k-gantt-views {

li,
li.k-state-hover,
li.k-state-selected {
color: inherit;
background: none;
}
li a {
@extend .k-button.k-flat;
padding: $toolbar-button-padding-y $toolbar-button-padding-x;
display: flex;
align-items: center;
position: relative;
}
li a::before {
@extend .k-button::before;
display: block;
}
li.k-state-selected a::before {
@include opacity( $flat-button-selected-opacity );
}


&.k-state-expanded {
li {
margin: 0;
border-radius: 0;
}
li + li {
margin: 0;
}
.k-current-view ~ li a {
padding-top: $list-item-padding-y;
padding-bottom: $list-item-padding-y;
line-height: 2;
}
}
}


// Treelist
.k-gantt-treelist {}


// Milestone
.k-milestone-wrap {}
.k-task-milestone {}


// Summary
.k-summary-wrap {}
.k-task-summary {}
.k-task-summary-complete {}
.k-task-summary-progress {
height: 15px;
overflow: hidden;
}


// Single task
.k-single-wrap {}
.k-task-single {
border-width: 0;
}
.k-task-template {
padding: $button-padding-y-sm $button-padding-x-sm;
line-height: $button-line-height;
}

}
122 changes: 122 additions & 0 deletions packages/material/scss/gantt/_theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
@include exports("gantt/theme") {

// Theme
.k-gantt {
@include appearance( panel );
}


// Header and footer
.k-gantt-toolbar {
@include appearance( toolbar );
}


// View switcher
.k-gantt-views {

li {}


&.k-state-expanded {
@include appearance( popup );
box-shadow: $popup-shadow;

li {
margin: 0;
border-radius: 0;
}
li + li { margin: 0; }
}
}


// Rows and colls
.k-gantt-rows {}
.k-gantt-columns {}
.k-gantt-columns .k-nonwork-hour {
background-color: rgba( $panel-text, .025 );
}


.k-gantt-dependencies {}
.k-line {
color: mix( $panel-text, $panel-bg );
background-color: mix( $panel-text, $panel-bg );
}
.k-line.k-state-selected {
color: $header-selected-bg;
background-color: $header-selected-bg;
}

.k-task-dot {}
.k-task-dot::before {
background-color: $panel-text;
}
.k-task-dot:hover::before,
.k-task-dot.k-state-hover::before {
border-color: $panel-text;
background-color: $panel-bg;
}


// Milestone
.k-task-milestone {
border-color: $accent;
background-color: $accent;
}
.k-task-milestone.k-state-selected {
border-color: $secondary;
background-color: $secondary;
}


// Summary
.k-task-summary {
color: mix( $accent, $grid-bg, 54 );
}
.k-task-summary-complete {
color: $accent;
}
.k-task-summary.k-state-selected {
color: mix( $secondary, $grid-bg, 54 );

.k-task-summary-complete {
color: $secondary;
}
}
.k-task-summary::before,
.k-task-summary::after,
.k-task-summary-complete::before,
.k-task-summary-complete::after {
display: none;
}


// Tasks
.k-task-single {
@include border-radius( $border-radius );
color: $accent-contrast;
background-color: mix( $accent, $grid-bg, 54 );

.k-task-complete {
background: $accent;
}
}
.k-task-single.k-state-selected {
@include appearance( active-button );
color: $secondary-contrast;
background-color: mix( $secondary, $grid-bg, 54 );

.k-task-complete {
background: $secondary;
}
}
.k-task-single .k-resize-handle {
width: ($spacer-x / 2 );
}
.k-task-single:hover .k-resize-handle {
opacity: 0;
}

}
10 changes: 5 additions & 5 deletions packages/material/scss/grid/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ $grid-sorted-icon-spacing: 4px !default;
$grid-header-menu-icon-spacing: 14px !default;
$grid-group-indicator-border-radius: add-two( $font-size, $button-padding-y) !default;
$grid-group-indicator-gap: 8px !default;
$grid-header-font-size: 12px !default;

@import "~@progress/kendo-theme-default/scss/grid/layout";

@include exports ('grid/layout/material') {
$grid-header-font-size: 12px !default;
$grouping-dropclue-height: add-two( 2 * $font-size, 2 * $padding-y) !default;

$text-field-border-width: 2px;
Expand All @@ -34,14 +34,12 @@ $grid-group-indicator-gap: 8px !default;
}

.k-grid-header {
font-size: $grid-header-font-size;

th {
font-weight: 700;
}

.k-header:not(.k-widget) {
font-size: $grid-header-font-size;
}

.k-grid-filter {
border-radius: 50%;
}
Expand Down Expand Up @@ -107,6 +105,7 @@ $grid-group-indicator-gap: 8px !default;
width: 2px;
}

.k-edit-cell,
.k-grid-edit-row > td {

> .k-textbox,
Expand All @@ -118,6 +117,7 @@ $grid-group-indicator-gap: 8px !default;
margin-right: -$text-field-padding;
}
}
.k-edit-cell,
.k-grid-edit-row {

.k-autocomplete,
Expand Down
Loading

0 comments on commit f38a7ad

Please sign in to comment.