Skip to content

Commit

Permalink
fix(grid): missing sticky rows styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoomFX
JoomFX committed Aug 5, 2024
1 parent 5fa7732 commit c1bf80e
Show file tree
Hide file tree
Showing 6 changed files with 31 additions and 362 deletions.
124 changes: 9 additions & 115 deletions packages/bootstrap/scss/grid/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,21 +187,23 @@
border-top-color: $kendo-grid-border;
}

.k-grid-row-sticky {
&.k-grid-row-sticky > .k-table-td {
border-top-color: $kendo-grid-sticky-border;
border-bottom-color: $kendo-grid-sticky-border;
background-color: $kendo-grid-sticky-bg;
}

&.k-table-alt-row {
.k-grid-content-sticky,
&.k-grid-row-sticky > .k-table-td,
.k-grid-row-sticky {
@include fill( $bg: $kendo-grid-sticky-alt-bg );
}
}

// Selected state
&.k-table-row.k-selected td.k-grid-content-sticky,
&.k-table-row.k-selected.k-grid-row-sticky > .k-table-td,
&.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
&.k-table-row td.k-grid-content-sticky.k-selected,
&.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
Expand All @@ -217,6 +219,7 @@
}

&.k-selected.k-table-alt-row td.k-grid-content-sticky,
&.k-selected.k-table-alt-row.k-grid-row-sticky > .k-table-td,
&.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
&.k-table-alt-row td.k-grid-content-sticky.k-selected,
&.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
Expand All @@ -236,7 +239,9 @@
&:hover .k-grid-content-sticky,
&.k-hover .k-grid-content-sticky,
&:hover .k-grid-row-sticky,
&.k-hover .k-grid-row-sticky {
&.k-hover .k-grid-row-sticky,
&:hover.k-grid-row-sticky > .k-table-td,
&.k-hover.k-grid-row-sticky > .k-table-td {
background-color: $kendo-grid-sticky-hover-bg;
}

Expand All @@ -246,6 +251,8 @@
&.k-selected.k-hover .k-table-td.k-grid-content-sticky,
&.k-selected:hover td.k-grid-row-sticky,
&.k-selected.k-hover .k-table-td.k-grid-row-sticky,
&.k-selected:hover.k-grid-row-sticky > .k-table-td,
&.k-selected.k-hover.k-grid-row-sticky > .k-table-td,
&:hover td.k-grid-content-sticky.k-selected,
&.k-hover td.k-grid-content-sticky.k-selected,
&:hover .k-table-td.k-grid-content-sticky.k-selected,
Expand All @@ -262,119 +269,6 @@
}
}

kendo-grid.k-grid {
.k-grid-content-sticky {
border-top-color: $kendo-grid-border;
border-left-color: $kendo-grid-sticky-border;
border-right-color: $kendo-grid-sticky-border;
background-color: $kendo-grid-sticky-bg;

&:hover,
&.k-hover {
background-color: $kendo-grid-sticky-hover-bg;
}
}

.k-grid-row-sticky td,
.k-grid-row-sticky .k-table-td {
border-top-color: $kendo-grid-sticky-border;
border-bottom-color: $kendo-grid-sticky-border;
background-color: $kendo-grid-sticky-bg;

&:hover td,
&.k-hover td,
&:hover .k-table-td,
&.k-hover .k-table-td {
background-color: $kendo-grid-sticky-hover-bg;
}
}

.k-table-alt-row .k-grid-content-sticky,
.k-grid-row-sticky.k-table-alt-row td,
.k-grid-row-sticky.k-table-alt-row .k-table-td {
@include fill( $bg: $kendo-grid-sticky-alt-bg );
}

// Selected state
.k-table-row.k-selected .k-grid-content-sticky,
.k-selected.k-grid-row-sticky td,
.k-grid-row-sticky td.k-selected,
.k-selected.k-grid-row-sticky .k-table-td,
.k-grid-row-sticky .k-table-td.k-selected,
.k-selected.k-grid-content-sticky {
@if($kendo-enable-color-system) {
@include fill( $bg: $kendo-grid-sticky-bg );

&::before {
@include fill( $bg: $kendo-grid-sticky-selected-bg );
}
} @else {
@include fill( $bg: $kendo-grid-sticky-selected-bg );
}
}

.k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
.k-selected.k-table-alt-row.k-grid-row-sticky td,
.k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
.k-table-alt-row .k-selected.k-grid-content-sticky {
@if($kendo-enable-color-system) {
@include fill( $bg: $kendo-grid-sticky-alt-bg );

&::before {
@include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
}
} @else {
@include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
}
}

// Hover state
.k-table-row:hover .k-grid-content-sticky,
.k-table-row.k-hover .k-grid-content-sticky,
.k-grid-row-sticky:hover td,
.k-grid-row-sticky.k-hover td,
.k-grid-row-sticky.k-table-alt-row:hover td,
.k-grid-row-sticky.k-table-alt-row.k-hover td,
.k-grid-row-sticky:hover .k-table-td,
.k-grid-row-sticky.k-hover .k-table-td,
.k-grid-row-sticky.k-table-alt-row:hover .k-table-td,
.k-grid-row-sticky.k-table-alt-row.k-hover .k-table-td,
.k-table-alt-row:hover .k-grid-content-sticky,
.k-table-alt-row.k-hover .k-grid-content-sticky {
background-color: $kendo-grid-sticky-hover-bg;
}

// Selected + Hover
.k-table-row.k-selected:hover .k-grid-content-sticky,
.k-table-row.k-selected.k-hover .k-grid-content-sticky,
.k-selected.k-grid-row-sticky:hover td,
.k-selected.k-grid-row-sticky.k-hover td,
.k-selected.k-table-alt-row.k-grid-row-sticky:hover td,
.k-selected.k-table-alt-row.k-grid-row-sticky.k-hover td,
.k-selected.k-grid-row-sticky:hover .k-table-td,
.k-selected.k-grid-row-sticky.k-hover .k-table-td,
.k-selected.k-table-alt-row.k-grid-row-sticky:hover .k-table-td,
.k-selected.k-table-alt-row.k-grid-row-sticky.k-hover .k-table-td,
.k-table-row.k-selected.k-table-alt-row:hover .k-grid-content-sticky,
.k-table-row.k-selected.k-table-alt-row.k-hover .k-grid-content-sticky,
.k-grid-row-sticky:hover td.k-selected,
.k-grid-row-sticky.k-hover td.k-selected,
.k-grid-row-sticky:hover .k-table-td.k-selected,
.k-grid-row-sticky.k-hover .k-table-td.k-selected,
.k-table-row:hover .k-grid-content-sticky.k-selected,
.k-table-row.k-hover .k-grid-content-sticky.k-selected {
@if($kendo-enable-color-system) {
background-color: $kendo-grid-sticky-hover-bg;

&::before {
background-color: $kendo-grid-sticky-selected-hover-bg;
}
} @else {
background-color: $kendo-grid-sticky-selected-hover-bg;
}
}
}

.k-grouping-row {
.k-grid-content-sticky {
@include fill( $bg: $kendo-grid-sticky-header-bg );
Expand Down
3 changes: 2 additions & 1 deletion packages/default/scss/grid/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -778,7 +778,8 @@
}
}

.k-master-row .k-grid-content-sticky::before {
.k-master-row .k-grid-content-sticky::before,
.k-master-row.k-grid-row-sticky .k-table-td::before {
content: "";
width: 100%;
height: 100%;
Expand Down
126 changes: 9 additions & 117 deletions packages/default/scss/grid/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,21 +252,23 @@
background-color: $kendo-grid-sticky-bg;
}

.k-grid-row-sticky {
&.k-grid-row-sticky > .k-table-td {
border-top-color: $kendo-grid-sticky-border;
border-bottom-color: $kendo-grid-sticky-border;
background-color: $kendo-grid-sticky-bg;
}

&.k-table-alt-row {
.k-grid-content-sticky,
&.k-grid-row-sticky > .k-table-td,
.k-grid-row-sticky {
@include fill( $bg: $kendo-grid-sticky-alt-bg );
}
}

// Selected state
&.k-table-row.k-selected td.k-grid-content-sticky,
&.k-table-row.k-selected.k-grid-row-sticky > .k-table-td,
&.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
&.k-table-row td.k-grid-content-sticky.k-selected,
&.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
Expand All @@ -282,6 +284,7 @@
}

&.k-selected.k-table-alt-row td.k-grid-content-sticky,
&.k-selected.k-table-alt-row.k-grid-row-sticky > .k-table-td,
&.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
&.k-table-alt-row td.k-grid-content-sticky.k-selected,
&.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
Expand All @@ -300,17 +303,21 @@
// Hovered state
&:hover .k-grid-content-sticky,
&:hover .k-grid-row-sticky,
&:hover.k-grid-row-sticky > .k-table-td,
&.k-hover .k-grid-content-sticky,
&.k-hover .k-grid-row-sticky {
&.k-hover .k-grid-row-sticky,
&.k-hover.k-grid-row-sticky > .k-table-td {
background-color: $kendo-grid-sticky-hover-bg;
}


// Selected hover
&.k-selected:hover td.k-grid-content-sticky,
&.k-selected:hover .k-table-td.k-grid-row-sticky,
&.k-selected:hover.k-grid-row-sticky > .k-table-td,
&.k-selected.k-hover td.k-grid-content-sticky,
&.k-selected.k-hover .k-table-td.k-grid-row-sticky,
&.k-selected.k-hover.k-grid-row-sticky > .k-table-td,
&:hover td.k-grid-content-sticky.k-selected,
&.k-hover td.k-grid-content-sticky.k-selected,
&:hover .k-table-td.k-grid-content-sticky.k-selected,
Expand All @@ -327,121 +334,6 @@
}
}

kendo-grid.k-grid {
.k-grid-content-sticky {
border-top-color: $kendo-grid-header-border;
border-left-color: $kendo-grid-sticky-border;
border-right-color: $kendo-grid-sticky-border;
background-color: $kendo-grid-sticky-bg;

&:hover,
&.k-hover {
background-color: $kendo-grid-sticky-hover-bg;
}
}

.k-grid-row-sticky {
td,
.k-table-td {
border-top-color: $kendo-grid-sticky-border;
border-bottom-color: $kendo-grid-sticky-border;
background-color: $kendo-grid-sticky-bg;
}

&:hover td,
&.k-hover td,
&:hover .k-table-td,
&.k-hover .k-table-td {
background-color: $kendo-grid-sticky-hover-bg;
}
}

.k-table-alt-row .k-grid-content-sticky,
.k-grid-row-sticky.k-table-alt-row td,
.k-grid-row-sticky.k-table-alt-row .k-table-td {
@include fill( $bg: $kendo-grid-sticky-alt-bg );
}

// Selected state
.k-table-row.k-selected .k-grid-content-sticky,
.k-selected.k-grid-row-sticky td,
.k-grid-row-sticky td.k-selected,
.k-selected.k-grid-row-sticky .k-table-td,
.k-grid-row-sticky .k-table-td.k-selected,
.k-selected.k-grid-content-sticky {
@if($kendo-enable-color-system) {
@include fill( $bg: $kendo-grid-sticky-bg );

&::before {
@include fill( $bg: $kendo-grid-sticky-selected-bg );
}
} @else {
@include fill( $bg: $kendo-grid-sticky-selected-bg );
}
}

.k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
.k-selected.k-table-alt-row.k-grid-row-sticky td,
.k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
.k-table-alt-row .k-selected.k-grid-content-sticky {
@if($kendo-enable-color-system) {
@include fill( $bg: $kendo-grid-sticky-alt-bg );

&::before {
@include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
}
} @else {
@include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
}
}

// Hover state
.k-table-row:hover .k-grid-content-sticky,
.k-table-row.k-hover .k-grid-content-sticky,
.k-grid-row-sticky:hover td,
.k-grid-row-sticky.k-hover td,
.k-grid-row-sticky.k-table-alt-row:hover td,
.k-grid-row-sticky.k-table-alt-row.k-hover td,
.k-grid-row-sticky:hover .k-table-td,
.k-grid-row-sticky.k-hover .k-table-td,
.k-grid-row-sticky.k-table-alt-row:hover .k-table-td,
.k-grid-row-sticky.k-table-alt-row.k-hover .k-table-td,
.k-table-alt-row:hover .k-grid-content-sticky,
.k-table-alt-row.k-hover .k-grid-content-sticky {
background-color: $kendo-grid-sticky-hover-bg;
}

// Selected + Hover
.k-table-row.k-selected:hover .k-grid-content-sticky,
.k-table-row.k-selected.k-hover .k-grid-content-sticky,
.k-selected.k-grid-row-sticky:hover td,
.k-selected.k-grid-row-sticky.k-hover td,
.k-selected.k-table-alt-row.k-grid-row-sticky:hover td,
.k-selected.k-table-alt-row.k-grid-row-sticky.k-hover td,
.k-selected.k-grid-row-sticky:hover .k-table-td,
.k-selected.k-grid-row-sticky.k-hover .k-table-td,
.k-selected.k-table-alt-row.k-grid-row-sticky:hover .k-table-td,
.k-selected.k-table-alt-row.k-grid-row-sticky.k-hover .k-table-td,
.k-table-row.k-selected.k-table-alt-row:hover .k-grid-content-sticky,
.k-table-row.k-selected.k-table-alt-row.k-hover .k-grid-content-sticky,
.k-grid-row-sticky:hover td.k-selected,
.k-grid-row-sticky.k-hover td.k-selected,
.k-grid-row-sticky:hover .k-table-td.k-selected,
.k-grid-row-sticky.k-hover .k-table-td.k-selected,
.k-table-row:hover .k-grid-content-sticky.k-selected,
.k-table-row.k-hover .k-grid-content-sticky.k-selected {
@if($kendo-enable-color-system) {
background-color: $kendo-grid-sticky-hover-bg;

&::before {
background-color: $kendo-grid-sticky-selected-hover-bg;
}
} @else {
background-color: $kendo-grid-sticky-selected-hover-bg;
}
}
}

.k-grouping-row {
.k-grid-content-sticky {
@include fill( $bg: $kendo-grid-sticky-header-bg );
Expand Down
3 changes: 2 additions & 1 deletion packages/fluent/scss/grid/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -812,7 +812,8 @@
}
}

.k-master-row .k-grid-content-sticky::before {
.k-master-row .k-grid-content-sticky::before,
.k-master-row.k-grid-row-sticky .k-table-td::before {
content: "";
width: 100%;
height: 100%;
Expand Down
Loading

0 comments on commit c1bf80e

Please sign in to comment.