Skip to content

Commit

Permalink
feat(spreadsheet): implement styles for new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@Juveniel
Juveniel committed Aug 31, 2023
1 parent 069cb34 commit 72cc8ac
Show file tree
Hide file tree
Showing 13 changed files with 771 additions and 885 deletions.
10 changes: 9 additions & 1 deletion packages/bootstrap/scss/spreadsheet/_layout.scss
View file
Expand Up @@ -4,7 +4,11 @@

@include kendo-spreadsheet--layout-base();

// Filter menu
.k-spreadsheet-menu {
padding-inline: $navbar-padding-y;
}

// Filter menu - Delete once new rendering is adopted R3 23
.k-spreadsheet-filter-menu {
> .k-menu,
> .k-menu:not(.k-context-menu) {
Expand All @@ -15,4 +19,8 @@
}
}

.k-spreadsheet-filter {
padding: k-map-get( $kendo-spacing, 1 );
}

}
236 changes: 1 addition & 235 deletions packages/bootstrap/scss/spreadsheet/_theme.scss
View file
Expand Up @@ -2,239 +2,5 @@


@mixin kendo-spreadsheet--theme() {

// Spreadsheet
.k-spreadsheet {
@include fill(
$kendo-spreadsheet-text,
$kendo-spreadsheet-bg,
$kendo-spreadsheet-border
);
}


// Row / column headers
.k-spreadsheet-top-corner,
.k-spreadsheet-row-header,
.k-spreadsheet-column-header {
@include fill(
$kendo-component-header-text,
$kendo-component-header-bg,
$kendo-component-header-border,
$kendo-component-header-gradient
);
}


// Formula bar
.k-spreadsheet-formula-list {}
.k-syntax-ref { color: #ff8822; }
.k-syntax-num { color: #0099ff; }
.k-syntax-str { color: #38b714; }
.k-syntax-error { color: red; }
.k-syntax-bool { color: #a9169c; }
.k-syntax-paren-match { background-color: #caf200; }


// Cell editor
.k-spreadsheet-cell-editor {
color: $kendo-component-text;
background-color: $kendo-component-bg;
}


// Cells
.k-spreadsheet-merged-cell {
background-color: $kendo-component-bg;
}


// Selection
.k-spreadsheet .k-selection-full,
.k-spreadsheet .k-selection-partial {
background-color: rgba( $kendo-selected-bg, .25 );
}
.k-spreadsheet-selection {
border-color: $kendo-selected-bg;
background-color: rgba( $kendo-selected-bg, .25 );
box-shadow: inset 0 0 0 1px $kendo-selected-bg;
}

.k-spreadsheet .k-single-selection::after {
border-color: $kendo-component-bg;
background-color: $kendo-selected-bg;
}
.k-spreadsheet-active-cell {
box-shadow: inset 0 0 0 1px $kendo-selected-bg;
background-color: $kendo-component-bg;

&.k-right {
box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset -1px 0 0 1px $kendo-selected-bg;
}

&.k-bottom {
box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset 0 -1px 0 1px $kendo-selected-bg;
}

&.k-bottom.k-right {
box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset -1px -1px 0 1px $kendo-selected-bg;
}
}

.k-spreadsheet .k-auto-fill {
border-color: $kendo-selected-bg;
background-color: rgba( $kendo-selected-bg, .25 );
box-shadow: inset 0 0 0 1px $kendo-selected-bg;
}
.k-spreadsheet .k-auto-fill-punch {
background-color: rgba( $kendo-component-bg, .5 );
}


// Resize handle
.k-spreadsheet .k-resize-handle,
.k-spreadsheet .k-resize-hint-handle,
.k-spreadsheet .k-resize-hint-marker {
background-color: $kendo-color-primary;
}

// Comments
.k-spreadsheet-has-comment::after {
border-color: $kendo-color-primary $kendo-color-primary transparent transparent;
}

// Validation
.k-dirty {
border-color: $kendo-color-error transparent transparent $kendo-color-error;
}


// Filter button
.k-spreadsheet .k-filter-range {
border-color: $kendo-color-primary;
}
.k-spreadsheet-filter {
@include fill(
$kendo-button-text,
$kendo-button-bg,
$kendo-button-border,
$kendo-button-gradient
);
box-shadow: inset 0 0 0 1px $kendo-button-border;

&.k-active {
@include fill(
$kendo-button-active-text,
$kendo-button-active-bg,
$kendo-button-active-border,
$kendo-button-active-gradient
);
}

&:hover {
@include fill(
$kendo-button-hover-text,
$kendo-button-hover-bg,
$kendo-button-hover-border,
$kendo-button-hover-gradient
);
}
}


// Filter menu
.k-spreadsheet-filter-menu {

> .k-menu,
> .k-menu:not(.k-context-menu) {
.k-item {
&.k-hover {
@include fill(
$kendo-list-item-hover-text,
$kendo-list-item-hover-bg
);
}
}
}

.k-spreadsheet-value-treeview-wrapper {
@include fill(
$kendo-component-text,
$kendo-component-bg,
$kendo-component-border
);
}
}


.k-spreadsheet-insert-image-dialog {
border-color: $kendo-spreadsheet-insert-image-dialog-preview-border;

.k-spreadsheet-has-image {
&:hover,
&.k-hover {
box-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow;
}

&:hover div,
&.k-hover div {
color: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text;
}
}
}

.k-spreadsheet-drawing {
&.k-spreadsheet-active-drawing {
outline-color: $kendo-spreadsheet-drawing-handle-outline-color;
}

.k-spreadsheet-drawing-handle {
border-color: $kendo-spreadsheet-drawing-handle-border-color;
background-color: $kendo-spreadsheet-drawing-handle-bg;
}
}

.k-spreadsheet-drawing-anchor-cell {
background: $kendo-spreadsheet-drawing-anchor-bg;
}


.k-spreadsheet-popup {

// Buttons
.k-button {}

.k-button:hover,
.k-button.k-hover {
@include fill(
$kendo-list-item-hover-text,
$kendo-list-item-hover-bg
);
}
.k-button:active,
.k-button.k-active,
.k-button.k-selected {
@include fill(
$kendo-list-item-selected-text,
$kendo-list-item-selected-bg
);
}
}


// RTL
.k-rtl .k-spreadsheet,
.k-spreadsheet[dir="rtl"],
[dir="rtl"] .k-spreadsheet {

.k-spreadsheet-has-comment::after {
border-color: $kendo-color-primary transparent transparent $kendo-color-primary;
}

.k-dirty {
border-color: $kendo-color-error $kendo-color-error transparent transparent;
}

}

@include kendo-spreadsheet--theme-base();
}
66 changes: 66 additions & 0 deletions packages/bootstrap/scss/spreadsheet/_variables.scss
View file
Expand Up @@ -11,6 +11,72 @@ $kendo-spreadsheet-bg: $kendo-component-bg !default;
$kendo-spreadsheet-text: $kendo-component-text !default;
$kendo-spreadsheet-border: $kendo-component-border !default;

$kendo-spreadsheet-header-bg: $kendo-component-header-bg !default;
$kendo-spreadsheet-header-text: $kendo-component-header-text !default;
$kendo-spreadsheet-header-border: $kendo-component-header-border !default;
$kendo-spreadsheet-header-gradient: $kendo-component-header-gradient !default;

$kendo-spreadsheet-table-header-bg: $kendo-spreadsheet-header-bg !default;
$kendo-spreadsheet-table-header-text: $kendo-spreadsheet-header-text !default;
$kendo-spreadsheet-table-header-border: $kendo-spreadsheet-header-border !default;
$kendo-spreadsheet-table-header-gradient: $kendo-spreadsheet-header-gradient !default;

$kendo-spreadsheet-action-bar-border-width: 1px !default;
$kendo-spreadsheet-action-bar-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
$kendo-spreadsheet-action-bar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
$kendo-spreadsheet-action-bar-font-size: $kendo-spreadsheet-font-size !default;
$kendo-spreadsheet-action-bar-font-family: Arial, Verdana, sans-serif !default;
$kendo-spreadsheet-action-bar-spacing: k-map-get( $kendo-spacing, 2 ) !default;

$kendo-spreadsheet-formula-bar-gap: k-map-get( $kendo-spacing, 2 ) !default;

$kendo-spreadsheet-formula-input-padding-x: $kendo-input-padding-x !default;
$kendo-spreadsheet-formula-input-padding-y: $kendo-input-padding-y !default;
$kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;

$kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default;
$kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;

$kendo-spreadsheet-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;
$kendo-spreadsheet-selection-text: null !default;
$kendo-spreadsheet-selection-border: $kendo-selected-bg !default;
$kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-selected-bg !default;

$kendo-spreadsheet-single-selection-bg: $kendo-selected-bg !default;
$kendo-spreadsheet-single-selection-text: null !default;
$kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;

$kendo-spreadsheet-partial-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;

$kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-bg !default;
$kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !default;

$kendo-spreadsheet-auto-fill-bg: rgba( $kendo-selected-bg, .25 ) !default;
$kendo-spreadsheet-auto-fill-text: null !default;
$kendo-spreadsheet-auto-fill-border: $kendo-selected-bg !default;
$kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
$kendo-spreadsheet-auto-fill-punch-bg: rgba( $kendo-spreadsheet-bg, .5 ) !default;

$kendo-spreadsheet-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
$kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-y !default;

$kendo-spreadsheet-cell-editor-line-height: 20px !default;
$kendo-spreadsheet-cell-editor-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
$kendo-spreadsheet-cell-editor-padding-y: 0px !default;
$kendo-spreadsheet-cell-editor-bg: $kendo-spreadsheet-bg !default;
$kendo-spreadsheet-cell-editor-text: $kendo-spreadsheet-text !default;
$kendo-spreadsheet-cell-editor-border: null !default;

$kendo-spreadsheet-resize-handle-bg: $kendo-color-primary !default;

$kendo-spreadsheet-cell-comment-border: $kendo-color-primary !default;

$kendo-spreadsheet-cell-dirty-border: $kendo-color-error !default;

$kendo-spreadsheet-sheets-bar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
$kendo-spreadsheet-sheets-bar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
$kendo-spreadsheet-sheets-bar-border-width: 1px !default;

$kendo-spreadsheet-insert-image-dialog-border-style: dashed !default;
$kendo-spreadsheet-insert-image-dialog-border-width: 2px !default;
$kendo-spreadsheet-insert-image-dialog-text-margin-bottom: 30px !default;
Expand Down

0 comments on commit 72cc8ac

Please sign in to comment.