feat(timeline): widget styles

packages/bootstrap/scss/_variables.scss

@@ -1393,7 +1393,6 @@ $spreadsheet-drawing-outline-width: 2px !default;
 $spreadsheet-drawing-anchor-bg: rgba( $header-selected-bg, .25 ) !default;
 
 
-
 // Filter
 $filter-padding-x: $padding-x !default;
 $filter-padding-y: $padding-y !default;
@@ -1405,6 +1404,67 @@ $filter-field-text: $accent !default;
 $filter-operator-text: rgba($text-color, .6) !default;
 
 
+// Timeline
+
+$timeline-spacing-x: 40px !default;
+$timeline-spacing-y: 40px !default;
+$timeline-items-padding: $padding-x !default;
+
+$timeline-mobile-spacing-x: $padding-x !default;
+$timeline-mobile-spacing-y: $padding-x !default;
+
+$timeline-track-arrow-width: 38px !default;
+$timeline-track-arrow-height: 38px !default;
+
+$timeline-track-arrow-disabled-text: true-mix($button-text, $bg-color, 65%) !default;
+$timeline-track-arrow-disabled-bg: true-mix($button-bg, $bg-color, 65%) !default;
+$timeline-track-arrow-disabled-border: true-mix($button-border, $bg-color, 65%) !default;
+
+$timeline-track-size: 6px !default;
+$timeline-track-border-width: 1px !default;
+$timeline-track-margin-bottom: $spacer !default;
+$timeline-track-start-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
+$timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
+$timeline-track-bg: $button-bg !default;
+$timeline-track-border-color: $timeline-track-bg !default;
+
+$timeline-track-event-offset: 36px !default;
+
+$timeline-flag-padding-x: $button-padding-x !default;
+$timeline-flag-padding-y: $button-padding-y !default;
+$timeline-flag-line-height: $button-line-height !default;
+$timeline-flag-min-width: 80px !default;
+$timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
+$timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
+$timeline-horizontal-flag-min-width: 80px !default;
+$timeline-flag-background: $accent !default;
+$timeline-flag-text: $accent-contrast !default;
+
+$timeline-flag-callout-width: 10px !default;
+$timeline-flag-callout-height: 10px !default;
+
+$timeline-flag-offset-bottom: 4px !default;
+$timeline-flag-margin-bottom-calc: calc(#{$timeline-track-size} + 2 * #{$timeline-track-border-width} + #{$timeline-flag-offset-bottom} + #{$timeline-flag-callout-height}) !default;
+
+$timeline-date-width: 50px !default;
+$timeline-date-margin-bottom: 10px !default;
+
+$timeline-vertical-padding-calc: calc(#{$timeline-spacing-x} + (#{$timeline-flag-min-width} - #{$timeline-track-size}) / 2) !default;
+$timeline-vertical-padding-with-dates-calc: calc(#{$timeline-vertical-padding-calc} + #{$timeline-date-width}) !default;
+$timeline-mobile-vertical-padding-calc: calc(#{$timeline-mobile-spacing-x} + (#{$timeline-flag-min-width} - #{$timeline-track-size}) / 2) !default;
+$timeline-mobile-vertical-padding-with-dates-calc: calc(#{$timeline-mobile-vertical-padding-calc} + #{$timeline-date-width}) !default;
+
+$timeline-circle-width: 16px !default;
+$timeline-circle-height: 16px !default;
+$timeline-circle-color: $accent !default;
+
+$timeline-collapse-arrow-padding-x: $padding-x-sm !default;
+
+$timeline-event-width: 400px !default;
+$timeline-event-height: 600px !default;
+$timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset}- #{$card-border-width})) !default;
+
+
 // Config maps
 $typography-config: () !default;
 // sass-lint:disable indentation

packages/bootstrap/scss/all.scss

@@ -86,6 +86,7 @@
 @import "styling";
 @import "badge";
 @import "card";
+@import "timeline";
 
 
 // Chat

packages/bootstrap/scss/timeline.scss

@@ -0,0 +1,12 @@
+@import "variables";
+@import "mixins";
+
+
+// Dependencies
+@import "common/all";
+@import "card";
+
+
+// Component
+@import "timeline/layout";
+@import "timeline/theme";

packages/bootstrap/scss/timeline/_layout.scss

@@ -0,0 +1,7 @@
+@import "~@progress/kendo-theme-default/scss/timeline/layout";
+
+@include exports( "timeline/layout/bootstrap" ) {
+    .k-timeline-card .k-card-header {
+        padding-top: $card-header-padding-x;
+    }
+}

packages/bootstrap/scss/timeline/_theme.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/timeline/theme";

packages/default/scss/_variables.scss

@@ -1378,7 +1378,6 @@ $spreadsheet-drawing-outline-width: 2px !default;
 $spreadsheet-drawing-anchor-bg: rgba( $header-selected-bg, .25 ) !default;
 
 
-
 // Filter
 $filter-padding-x: $padding-x !default;
 $filter-padding-y: $padding-y !default;
@@ -1390,6 +1389,66 @@ $filter-field-text: $accent !default;
 $filter-operator-text: rgba($text-color, .6) !default;
 
 
+// Timeline
+
+$timeline-spacing-x: 40px !default;
+$timeline-spacing-y: 40px !default;
+$timeline-items-padding: 16px !default;
+
+$timeline-mobile-spacing-x: 16px !default;
+$timeline-mobile-spacing-y: 16px !default;
+
+$timeline-track-arrow-width: 30px !default;
+$timeline-track-arrow-height: 30px !default;
+
+$timeline-track-arrow-disabled-text: true-mix($button-text, $bg-color, 65%) !default;
+$timeline-track-arrow-disabled-bg: true-mix($button-bg, $bg-color, 65%) !default;
+$timeline-track-arrow-disabled-border: true-mix(#000000, $bg-color, 4.8%) !default;
+
+$timeline-track-size: 6px !default;
+$timeline-track-border-width: 1px !default;
+$timeline-track-margin-bottom: 16px !default;
+$timeline-track-start-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
+$timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
+$timeline-track-bg: $button-bg !default;
+$timeline-track-border-color: $button-border !default;
+
+$timeline-track-event-offset: 36px !default;
+
+$timeline-flag-padding-x: $button-padding-x !default;
+$timeline-flag-padding-y: $button-padding-y !default;
+$timeline-flag-line-height: $button-line-height !default;
+$timeline-flag-min-width: 80px !default;
+$timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
+$timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
+$timeline-horizontal-flag-min-width: 60px !default;
+$timeline-flag-background: $accent !default;
+$timeline-flag-text: $accent-contrast !default;
+
+$timeline-flag-callout-width: 10px !default;
+$timeline-flag-callout-height: 10px !default;
+
+$timeline-flag-offset-bottom: 4px !default;
+$timeline-flag-margin-bottom-calc: calc(#{$timeline-track-size} + 2 * #{$timeline-track-border-width} + #{$timeline-flag-offset-bottom} + #{$timeline-flag-callout-height}) !default;
+
+$timeline-date-width: 50px !default;
+$timeline-date-margin-bottom: 8px !default;
+
+$timeline-vertical-padding-calc: calc(#{$timeline-spacing-x} + (#{$timeline-flag-min-width} - #{$timeline-track-size}) / 2) !default;
+$timeline-vertical-padding-with-dates-calc: calc(#{$timeline-vertical-padding-calc} + #{$timeline-date-width}) !default;
+$timeline-mobile-vertical-padding-calc: calc(#{$timeline-mobile-spacing-x} + (#{$timeline-flag-min-width} - #{$timeline-track-size}) / 2) !default;
+$timeline-mobile-vertical-padding-with-dates-calc: calc(#{$timeline-mobile-vertical-padding-calc} + #{$timeline-date-width}) !default;
+
+$timeline-circle-width: 16px !default;
+$timeline-circle-height: 16px !default;
+$timeline-circle-color: $accent !default;
+
+$timeline-collapse-arrow-padding-x: $padding-x !default;
+
+$timeline-event-width: 400px !default;
+$timeline-event-height: 600px !default;
+$timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset}- #{$card-border-width})) !default;
+
 // Config maps
 $typography-config: () !default;
 // sass-lint:disable indentation

packages/default/scss/all.scss

@@ -86,6 +86,7 @@
 @import "styling";
 @import "badge";
 @import "card";
+@import "timeline";
 
 
 // Chat

packages/default/scss/timeline.scss

@@ -0,0 +1,12 @@
+@import "variables";
+@import "mixins";
+
+
+// Dependencies
+@import "common/all";
+@import "card";
+
+
+// Component
+@import "timeline/layout";
+@import "timeline/theme";