Skip to content

Commit

Permalink
feat(grid): update styles to support chiplist in grid grouping
Browse files Browse the repository at this point in the history
  • Loading branch information
@TeyaVes @joneff
TeyaVes authored and joneff committed Dec 9, 2022
1 parent 26a0fcb commit d9e5e9f
Show file tree
Hide file tree
Showing 19 changed files with 40 additions and 209 deletions.
4 changes: 4 additions & 0 deletions packages/bootstrap/scss/chip/_variables.scss
View file
Expand Up @@ -35,6 +35,10 @@ $kendo-chip-line-height-sm: $kendo-chip-line-height !default;
$kendo-chip-line-height-md: $kendo-chip-line-height !default;
$kendo-chip-line-height-lg: $kendo-chip-line-height !default;

/// Calculated height of the chip.
/// @group chip
$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;

/// Sizes map for the chip.
/// @group chip
$kendo-chip-sizes: (
Expand Down
1 change: 1 addition & 0 deletions packages/bootstrap/scss/grid/_index.scss
View file
Expand Up @@ -20,6 +20,7 @@
@import "../menu/_index.scss";
@import "../dialog/_index.scss";
@import "../pager/_index.scss";
@import "../chip/_index.scss";
@import "../skeleton/_index.scss";
@import "../utils/_float.scss";
@import "../utils/_spacer.scss";
Expand Down
8 changes: 0 additions & 8 deletions packages/bootstrap/scss/grid/_layout.scss
View file
@@ -1,9 +1 @@
@import "~@progress/kendo-theme-default/scss/grid/_layout.scss";

@include exports( "grid/layout/bootstrap" ) {

// Grouping header
.k-grouping-header .k-group-indicator {
@include border-radius( $kendo-border-radius-md );
}
}
9 changes: 0 additions & 9 deletions packages/bootstrap/scss/grid/_theme.scss
View file
Expand Up @@ -114,15 +114,6 @@
.k-grouping-header {
@include fill( $grid-header-text, $grid-header-bg, $grid-header-border );
}
.k-grouping-header .k-group-indicator {
@include fill(
$kendo-button-text,
$kendo-button-bg,
$kendo-button-border,
$kendo-button-gradient
);
}


// Header
.k-grid-header {
Expand Down
4 changes: 4 additions & 0 deletions packages/classic/scss/chip/_variables.scss
View file
Expand Up @@ -35,6 +35,10 @@ $kendo-chip-line-height-sm: $kendo-chip-line-height !default;
$kendo-chip-line-height-md: $kendo-chip-line-height !default;
$kendo-chip-line-height-lg: $kendo-chip-line-height !default;

/// Calculated height of the chip.
/// @group chip
$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;

/// Sizes map for the chip.
/// @group chip
$kendo-chip-sizes: (
Expand Down
1 change: 1 addition & 0 deletions packages/classic/scss/grid/_index.scss
View file
Expand Up @@ -20,6 +20,7 @@
@import "../menu/_index.scss";
@import "../dialog/_index.scss";
@import "../pager/_index.scss";
@import "../chip/_index.scss";
@import "../skeleton/_index.scss";
@import "../utils/_float.scss";
@import "../utils/_spacer.scss";
Expand Down
4 changes: 4 additions & 0 deletions packages/default/scss/chip/_variables.scss
View file
Expand Up @@ -35,6 +35,10 @@ $kendo-chip-line-height-sm: $kendo-chip-line-height !default;
$kendo-chip-line-height-md: $kendo-chip-line-height !default;
$kendo-chip-line-height-lg: $kendo-chip-line-height !default;

/// Calculated height of the chip.
/// @group chip
$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;

/// Sizes map for the chip.
/// @group chip
$kendo-chip-sizes: (
Expand Down
1 change: 1 addition & 0 deletions packages/default/scss/grid/_index.scss
View file
Expand Up @@ -20,6 +20,7 @@
@import "../menu/_index.scss";
@import "../dialog/_index.scss";
@import "../pager/_index.scss";
@import "../chip/_index.scss";
@import "../skeleton/_index.scss";
@import "../utils/_float.scss";
@import "../utils/_spacer.scss";
Expand Down
100 changes: 5 additions & 95 deletions packages/default/scss/grid/_layout.scss
View file
Expand Up @@ -6,7 +6,7 @@

$grid-group-dropclue-size: 6px;
$grid-group-dropclue-line-size: $grid-group-dropclue-size / 3;
$grid-group-dropclue-height: $kendo-button-calc-size !default;
$grid-group-dropclue-height: calc( #{$kendo-chip-calc-size} + #{$grid-group-dropclue-size}) !default;
$grid-group-dropclue-top: 3px !default;

$grid-row-inner-height: calc( #{$line-height-em} + #{$table-cell-padding-y * 2} );
Expand Down Expand Up @@ -217,26 +217,6 @@
border-width: 0 0 0 $grid-cell-vertical-border-width;
}

.k-group-indicator {
.k-button-flat {
margin-left: -( $icon-spacing / 2 );
margin-right: ( 2 * $icon-spacing );
}

.k-link .k-icon {
margin-left: $icon-spacing;
margin-right: -( $icon-spacing / 2);
}
}
.k-group-indicator {
margin-right: 0;
margin-left: ( $grid-group-indicator-gap / 2 );
}

.k-group-indicator + .k-group-indicator {
margin-right: ( $grid-group-indicator-gap / 2 );
}

.k-grid-content-locked,
.k-grid-footer-locked,
.k-grid-header-locked {
Expand Down Expand Up @@ -423,90 +403,20 @@
border-style: solid;
border-color: inherit;
white-space: normal;
flex-shrink: 0;
display: block;
display: flex;
align-items: center;
gap: $grid-grouping-header-padding-y;
position: relative;

&::before {
content: "";
height: $kendo-button-calc-size;
height: $kendo-chip-calc-size;
display: inline-block;
vertical-align: middle;
}
}

.k-grouping-header-flex {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: $grid-grouping-header-padding-y;

&::before {
margin-left: -$grid-grouping-header-padding-y;
}

.k-group-indicator {
margin: 0;
}
}

// override for angular
.k-grid .k-indicator-container {
margin: -$grid-grouping-header-padding-y 0;
padding: $grid-grouping-header-padding-y 0;
}
.k-grid .k-indicator-container:last-child {
flex-grow: 1;
}

.k-group-indicator {
@include border-radius( $grid-group-indicator-border-radius );
margin: 0;
padding: $kendo-button-padding-y $kendo-button-padding-x;
border-width: 1px;
border-style: solid;
display: inline-flex;
flex-direction: row;
align-items: center;
align-content: center;
vertical-align: top;
box-sizing: border-box;

.k-link,
.k-button-flat {
padding: 0;
border-width: 0;
display: inline-flex;
align-items: center;
}

.k-link .k-icon {
margin-left: -( $icon-spacing / 2);
margin-right: $icon-spacing;
}

.k-button-flat {
margin-left: ( 2 * $icon-spacing );
margin-right: -( $icon-spacing / 2 );
padding: 0;
width: auto;
height: auto;
opacity: $grid-group-indicator-button-opacity;

&::before,
&::after {
display: none;
}

&:hover {
opacity: $grid-group-indicator-button-hover-opacity;
}
}
}

.k-group-indicator + .k-group-indicator {
margin-left: ( $grid-group-indicator-gap / 2 );
}

.k-grouping-dropclue {
width: ($grid-group-dropclue-size * 2);
Expand Down
1 change: 0 additions & 1 deletion packages/default/scss/grid/_theme.scss
View file
Expand Up @@ -8,7 +8,6 @@
th.k-header,
.k-grid-header-wrap,
.k-grouping-header,
.k-grouping-header .k-group-indicator,
.k-grid td,
.k-grid-footer,
.k-grid-footer-wrap,
Expand Down
4 changes: 4 additions & 0 deletions packages/fluent/scss/chip/_variables.scss
View file
Expand Up @@ -75,6 +75,10 @@ $kendo-chip-line-height-sm: var( --kendo-line-height, normal ) !default;
$kendo-chip-line-height-md: var( --kendo-line-height, normal ) !default;
$kendo-chip-line-height-lg: var( --kendo-line-height, normal ) !default;

/// Calculated height of the chip.
/// @group chip
$kendo-chip-calc-size: calc( #{$kendo-chip-line-height-md} * 1em + #{$kendo-chip-padding-y-md} * 2 + #{$kendo-chip-border-width} * 2 ) !default;

/// Sizes map for the chip.
/// @group chip
$kendo-chip-sizes: (
Expand Down
64 changes: 6 additions & 58 deletions packages/fluent/scss/grid/_layout.scss
View file
@@ -1,5 +1,6 @@
@use "../core/_variables.scss" as *;
@use "../button/_variables.scss" as *;
@use "../chip/_variables.scss" as *;
@use "../forms/_variables.scss" as *;
@use "../table/_variables.scss" as *;
@use "_variables.scss" as *;
Expand Down Expand Up @@ -245,15 +246,17 @@
border-style: solid;
border-color: inherit;
white-space: normal;
flex-shrink: 0;
display: block;
display: flex;
align-items: center;
gap: var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} );
position: relative;

&::before {
content: "";
height: $kendo-button-calc-size;
height: $kendo-chip-calc-size;
display: inline-block;
vertical-align: middle;
margin-left: calc( var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} ) * -1 );
}
}

Expand All @@ -266,61 +269,6 @@
&::before {
margin-left: calc( var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} ) * -1 );
}

.k-group-indicator {
margin: 0;
}
}

// override for angular
.k-grid .k-indicator-container {
margin-block: calc( var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} ) * -1 );
margin-inline: 0;
padding-block: var( --kendo-grid-grouping-header-padding-y, #{$kendo-grid-grouping-header-padding-y} );
padding-inline: 0;
}
.k-grid .k-indicator-container:last-child {
flex-grow: 1;
}

.k-group-indicator {
margin: 0;
padding-inline: var( --kendo-grid-group-indicator-padding-x, #{$kendo-grid-group-indicator-padding-x} );
padding-block: var( --kendo-grid-group-indicator-padding-y, #{$kendo-grid-group-indicator-padding-y} );
border-width: var( --kendo-grid-group-indicator-border-width, #{$kendo-grid-group-indicator-border-width} );
border-style: solid;
border-radius: var( --kendo-grid-group-indicator-border-radius, #{$kendo-grid-group-indicator-border-radius} );
display: inline-flex;
flex-direction: row;
align-items: center;
align-content: center;
vertical-align: top;
box-sizing: border-box;

.k-link,
.k-button-flat {
padding: 0;
border-width: 0;
display: inline-flex;
align-items: center;
}

.k-link .k-icon {
margin-inline-start: calc( ( var( --kendo-icon-spacing, .5rem ) / 2 ) * -1 );
margin-inline-end: var( --kendo-icon-spacing, .5rem );
}

.k-button-flat {
margin-inline-start: var( --kendo-icon-spacing, .5rem );
margin-inline-end: calc( var( --kendo-icon-spacing, .5rem ) * -1 );
padding: 0;
width: auto;
height: auto;
}
}

.k-group-indicator + .k-group-indicator {
margin-inline-start: calc( var( --kendo-grid-group-indicator-gap, #{$kendo-grid-group-indicator-gap} ) / 2 );
}

.k-grouping-dropclue {
Expand Down
15 changes: 0 additions & 15 deletions packages/fluent/scss/grid/_theme.scss
View file
Expand Up @@ -46,21 +46,6 @@
@include fill( $bg: var( --kendo-grid-bg, #{$kendo-grid-bg} ) );
}

.k-grouping-header .k-group-indicator {
@include fill(
var( --kendo-grid-group-indicator-text, #{$kendo-grid-group-indicator-text} ),
var( --kendo-grid-group-indicator-bg, #{$kendo-grid-group-indicator-bg} ),
var( --kendo-grid-group-indicator-border, #{$kendo-grid-group-indicator-border} )
);

.k-icon {
@include fill(
$color: var( --kendo-grid-group-indicator-icon-text, #{$kendo-grid-group-indicator-icon-text} )
);
}

}

.k-group-footer td,
.k-grouping-row td,
tbody .k-group-cell {
Expand Down
3 changes: 2 additions & 1 deletion packages/fluent/scss/grid/_variables.scss
View file
@@ -1,6 +1,7 @@
@use "../core/color-system" as *;
@use "../core/_variables.scss" as *;
@use "../button/_variables.scss" as *;
@use "../chip/_variables.scss" as *;
@use "../table/_variables.scss" as *;
@use "../toolbar/_variables.scss" as *;
@use "../list/_variables.scss" as *;
Expand Down Expand Up @@ -283,7 +284,7 @@ $kendo-grid-group-dropclue-line-size: 1px !default;
$kendo-grid-group-dropclue-dot-size: $kendo-grid-group-dropclue-size !default;
/// Height of the grid group drop clue.
/// @group grid
$kendo-grid-group-dropclue-height: calc( #{$kendo-button-calc-size} + #{$kendo-grid-group-dropclue-size} ) !default;
$kendo-grid-group-dropclue-height: calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-dropclue-size} ) !default;
/// Top offset of the grid group drop clue.
/// @group grid
$kendo-grid-group-dropclue-top: 2px !default;
Expand Down
1 change: 1 addition & 0 deletions packages/fluent/scss/grid/index.scss
View file
Expand Up @@ -21,6 +21,7 @@ $_kendo-module-meta: (
"menu",
"dialog",
"pager",
"chip",
"skeleton",
"draggable"
)
Expand Down
4 changes: 4 additions & 0 deletions packages/material/scss/chip/_variables.scss
View file
Expand Up @@ -35,6 +35,10 @@ $kendo-chip-line-height-sm: $kendo-chip-line-height !default;
$kendo-chip-line-height-md: $kendo-chip-line-height !default;
$kendo-chip-line-height-lg: $kendo-chip-line-height !default;

/// Calculated height of the chip.
/// @group chip
$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;

/// Sizes map for the chip.
/// @group chip
$kendo-chip-sizes: (
Expand Down
1 change: 1 addition & 0 deletions packages/material/scss/grid/_index.scss
View file
Expand Up @@ -20,6 +20,7 @@
@import "../menu/_index.scss";
@import "../dialog/_index.scss";
@import "../pager/_index.scss";
@import "../chip/_index.scss";
@import "../skeleton/_index.scss";
@import "../utils/_float.scss";
@import "../utils/_spacer.scss";
Expand Down

0 comments on commit d9e5e9f

Please sign in to comment.